1. 样式表的简介：样式表由样式规则组成，这些规则告诉浏览器如何显示文档。
根据样式表所在位置，可分为行内样式、内嵌样式表、外部样式表
Ø 样式表的基本语法
1． 样式规则：h2{color:limegreen;}
其中：h2：选择器 color：属性 limegreen：属性值
2． 样式表，例如：
|
<style>----------------样式标签 H2{color:green;font-family:System;} </style> |
Ø 样式表的常用属性：
|
属性 |
CSS名称 |
说明 |
|
颜色 |
Color |
设置或检索文本的颜色 |
|
背景属性 |
background-color |
设置或检索对象的背景颜色 |
|
background-image |
设置或检索背景图象 |
|
|
字体属性 |
font-family |
设置或检索文本的字体 |
|
font-size |
设置或检索文本字体的大小 |
|
|
font-style |
设置或检索文本的字体样式。如：斜体 |
|
|
文本属性 |
text-align |
设置或检索文本的对齐方式，包括：左对齐等 |
|
text-indent |
设置或检索文本第一行的缩进量 |
|
|
vertical-align |
设置或检索文本的纵向位置 |
|
|
边框属性 |
border-style |
设置或检索边框样式 |
|
border-with |
设置或检索边框的宽度 |
|
|
border-bottom |
设置或检索下边框的属性 |
|
|
border-color |
设置或检索边框颜色 |
|
|
定位属性 |
width |
设置或检索对象的宽度 |
|
height |
设置或检索对象的高度 |
|
|
left |
设置或检索对象的左定位 |
|
|
top |
设置或检索对象的顶部定位 |
|
|
position |
设置或检索对象的定位形式 |
|
|
z-index |
设置或检索对象的堆叠顺序 |
2. 行内样式表：行内样式使用元素标签的SYTLE属性定义。例如：
<p style=”color:red;font-family:Times New Roman;font-weght:bold”>………</p>
3. 内嵌样式表：也称为嵌入样式表，内嵌样式表放置在<head>标签内。使用格式如下：
<head>
<style type=”text/css”>
//样式规则
</style><head>
根据选择器不同，又分为HTML选择器、Class类选择器、ID选择器。
Ø HTML选择器：这种选择器使用HTML标签的名称来标识。如HTML的<p>标签的选择器是P。
例题：设置一个超连接的样式：超链接最初不带下划线，当用户鼠标移动到超链接的上方时，显示红色的下划线，提示用户点击
<style type=”text/css”>
A{//设置超链接不带下划线，text-decoration表示文本修饰
color :blue;
text-decoration:none;
}
A:hover{ //鼠标在超链接上悬停时，带下划线
color:red;
text-decoration:underline;
}
Ø CLASS选择器（类选择器）：允许两个或两个以上不同的标签共享同一样式。
类选择器定义格式：
．类名 //注意类名前面有一个点，类名可以随便命名．
{
．．．．．样式规则；
}
类选择器的调用：
<p class=”类名”>．．．．．</p> <h2 class=”类名”>．．．．．</h2>
Ø ID选择器：ID选择器使用HTML元素的ID属性,其用法与类选择器很类似。
ID选择器定义格式：
#ID名 //注意类名前面有一个#号，ID名可以随便命名，但在整个网页中必
{ //须是唯一的。
．．．．．样式规则；
}
ID选择器的调用：
<p ID=”ID名”>．．．．．</p> <h2 ID=”ID名”>．．．．．</h2>
4. 外部样式表：根据样式文件与网页的关联方式，又分为两种：链接外部样式表和导入样式表。
Ø 链接外部样式表：是指通过HTML的LINK（链接）标签，把样式文件和网页建立关联。其格式如下：
<head>
<link rel=”stylesheet” type=”text/css” href=”样式表文件.css”>
</head>
Ø 导入样式表：在网页中，还可以使用@import方法导入样式表，其格式如下：
<head>
<style type=”text/css”>
@import 样式文件.css;
</style>
</head>