1. 样式表分类
- 内部样式表
- 外部样式表
- 行间样式表
2. 内部样式表
当单个文档需要特殊的样式时,使用内部样式表。使用 <style> 标签在文档头部定义内部样式表,语法格式如下:
<style></style>
<head> <style type="text/css"> .p{ color:black; } </style> </head>
3. 外部样式表
当样式需要应用于多个页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变多个网页的外观。语法格式如下:
<link href="index.css" rel="stylesheet" type="text/css" >
每个页面使用 <link> 标签链接到样式表。 <link> 标签在文档的头部:
<head>
<link href="index.css" rel="stylesheet" type="text/css" >
</head>
<link href="index.css" rel="stylesheet" type="text/css" >
</head>
下面是一个样式表文件的例子:
hr {color:red;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
【注】:
- 不要在属性值与单位之间留有空格。如:"margin-left: 20 px" ,正确的写法是 "margin-left: 20px" 。
- 每一条声明以";"结束,声明组用{ }括起来,声明组与声明组之间回车换行就行,不需要其他符号分隔。
4. 行间样式表
使用行间样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。语法格式如下:
<p style=""></p>
【例】改变段落的颜色和左外边距。
<p style="color:red;margin-left:20px">This is a paragraph.</p>
5. 多重样式
当同一个 HTML 元素被不止一个样式定义时,层叠次序为(从低到高):
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 行间样式表(在 HTML 元素内部)