CSS 简明教程 - 应用 CSS - 简单教程，简单编程

浏览器会根据加载的样式表来格式化 HTML 文档，浏览器解析样式表的速度是非常快的

如何在 HTML 文档中插入样式表

在 HTML 文档中插入样式表的方法有三种

不管出于何种目的，使用 <link> 元素引用外部样式表都是最佳选择，无论是出于方便更新还是样式需要应用于许多页面时

使用外部样式表的情况下，我们就可以通过更改一个文件来更改整个站点的外观

引入外部样式表需要使用 <link> 元素，<link> 元素可以放在文档中的任何位置，但一般情况下都是放在 <head> 元素中，作为子元素而存在

例如

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

浏览器从 style.css 文件加载样式规则，并根据它格式化 HTML 文档

可以在任何编辑器中编辑外部样式表，外部样式表的扩展名为 .css，且该文件不能包含任何 html 元素

下面的代码是一个外部样式表的示例

hr {
    color:sienna;
}

p {
    margin-left:20px;
}

body {
    background-image:url("/images/back40.gif");
}

如果需要为单个 HTML 文档定义特殊样式，则应使用内部样式表

内部样式由 HTML 的 <style> 元素定义，可以放在文档中的任何位置，但建议放在 <head> 元素中，就像下面的代码一样

<head>
<style>
hr {
    color:sienna;
}
p {
    margin-left:20px;
}
body {
    background-image:url("images/back40.gif");
}
</style>
</head>

如果要针对某个特定的 HTML 元素应用样式，可以使用内联样式，就是在元素的 style 属性中包含样式

例如

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

这种方式我们一般不推荐使用，因为将样式和 HTML 文档混合在一起不仅会大大降低代码的可读性，还会丢失样式表的一些高级功能

如果在不同样式表中对同一选择器中定义了某些样式属性，则会从最后读取的样式表中获取属性值

也就是说，对同一元素设置的同一样式，后面读取的样式表会覆盖之前读取的

例如，style.css 文件中对 h3 选择器定义了红色字体

h3 {
    color: red;
}

同时，我们又在 HTML 文档的内部样式中为 h3 选择器定义蓝色字体

h3 {
    color: blue;
}

如果在外部样式表之后定义内部样式表，则 <h3>元素的最终颜色将为蓝色

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h3 {
    color: blue;
}
</style>
</head>

如果在内部样式表之后定义外部样式表，则 <h3> 元素的最终颜色将为红色

<head>
<style>
h3 {
    color: blue;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

内联样式表具有最高的优先级，任何外部样式表或者内部样式表都不能覆盖它