3.1.1 内联样式表
内联样式表又称为行内样式表,通过使用style属性为各种HTML元素标签添加样式,其作用范围只在指定的HTML元素内部。
基本语法格式如下:
<元素名 style="属性名称:属性值">
如果有多个属性需要同时添加,可用分号隔开,显示如下:
<元素名 style="属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N">
例如,为某个标题标签<h1>设置样式:
<h1 style=”color:blue; background-color:yellow”>标题一</h1>
该声明表示设置当前<h1>和</h1>标签之间的文本字体颜色为蓝色,背景色为黄色。
下表列出了部分常用CSS属性和参考值。
3.1.2 内部样式表
内部样式表通常位于<head>和</head>标签内部,通过使用<style>和</style>标签标记各类样式规则,其作用范围为当前整个文档。
语法格式如下:
<style>
选择器{属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N }
</style>
这里的选择器可用于指定样式的元素标签,例如body、p、h1-h6等均可。
例如:
h1{color:red }
该语句可以作用于整个文档,因此文档中所有的h1标题都将变为红色字体。
注:在HTML4.01版本中会看到将<style>首标签写成<style type=”text/css”>的形式,在HTML5中已简化为<style>。
如果属性内容较多,也可以分行写:
<style>
选择器{
属性名称1:属性值1;
属性名称2:属性值2;
...
属性名称N:属性值N
}
</style>
其中最后一个属性值后面是否添加分号为可选内容。一般来说属性之间的分号用于间隔不同的属性声明,因此最后一个属性值无需添加分号。但是为了方便后续添加新的属性,也可以为最后一个属性值添加分号,这种做法不影响CSS样式表的正常使用。
3.1.3 外部样式表
外部样式表为独立的CSS文件,其后缀名为.css或.CSS,在网页文档的首部<head>和</head>标签之间使用<link>标签对其进行引用即可作用于当前整个文档。
在HTML5中,对于独立CSS文件的引用语法格式如下:
<link rel="stylesheet" href="样式文件URL">
例如,引用本地css文件夹中的test.css文件:
<link rel="stylesheet" href="css/test.css">
外部CSS文件中的内容无需使用<style></style>标签进行标记,其格式和内部样式表<style>标签内部的内容格式完全一样。
3.1.4 样式表层叠优先级
内联样式表、内部样式表和外部样式表可以在同一个网页文档中被引用,它们会被层叠在一起形成一个统一的虚拟样式表。如果其中有样式条件冲突,CSS会选择优先级别高的样式条件渲染在网页上。
三种样式表的优先级别排序如表所示。