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>
扫一扫
660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
