文档介绍：第3章 CSS 样式表
第3章 CSS 样式表
本章主要内容包括:
CSS样式表概述
样式表的基本语法
样式表的使用规则
样式表中的常用属性
布局与定位
CSS样式表概述
CSS是Cascading Style Sheet的缩写,称为“层叠样式表”,简称为“样式表”
层叠是指多个样式可以同时应用于同一个页面或网页中的同一个元素,执行的效果按照“层叠规则”
所谓“层叠规则”即当标记的样式定义发生冲突时,靠近标记的定义将生效
主要用来定义一个HTML或一类HTML标记的显示样式,以便实现对页面样式的独立管理,可以将样式信息与网页内容分离的一种标记性语言。
CSS样式的主要优点是提供便利的更新功能,更新CSS样式时,使用该样式的所有文档都自动更新格式
选择器简介
样式表文件由三部分组成:选择器、属性和属性值。 selector {property : value}
例如:
body
{ margin: 0px;
font-size: 12px;
line-height: 150%;
}
“属性”和“属性值”之间用冒号“:”隔开,多个属性定义之间用分号“;”隔开,所有属性内容都需要用大括号“{ }”括起来
样式表的基本语法
选择器是你希望定义的HTML标记
为了增强可读性,可以分行描述
CSS的选择器类型:

指定的样式可应用在页面里的所有元素。
例如:把页面中所有支持字体属性的样式都设为“宋体”:
* { font-family: "宋体"; }

应用到指定类型的HTML元素中。
例如:对HTML语言中的分段标记P进行字体定义:
p{ font-family: "宋体"; }
说明:
,例如正文标记 body、标题标记h等。
,标签之间用逗
号“,”隔开。例如:把标题标记h2和h4定义了同一个样式
h2,h4 { font-size: 12px; color: Red;}

是一种特殊类型的CSS选择器,可将同一类型的HTML标记定义出不同的样式。为页面中的某个元素指定一个类选择器,类选择器的名字可以用class属性来定义,在类名的前面有一个前缀句点“.”。
例如:在页面中有两种不同样式的段落,一种右对齐,一种左对齐。
{text-align:right }
{text-align:left }
在页面中使用定义的样式:
<p class=“right">学校网站开发</p>
<p class=“left">学校网站开发</p>
注意:
每个HTML标记只能有一个类属性,下例写法不符合规范:
<p class="right" class="left">学校网站开发</p>
Class类选择器可省略HTML标记名称直接去定义,这样可以在所有的HTML标记中使用。
例如:定义了一个类选择器title1,用来定义字体的大小和粗细:
.title1 { font-size:12px; font-weight:bold;}
在页面中使用定义的样式:
<p class="title1">学校网站开发</p>
<h1 class="title1">学校网站开发</h1>
类名不能以数字开头,CSS的类名只能包含字母和数字。
在使用class和id选择器时,应确保它们的大小写是匹配的。

一种特殊的CSS选择器,使用id选择器可以为不同的HTML标记定义相同的样式,它的前缀是“#”。
例如:
p#green {color:green}
这个CSS规则只能用在具有这个id属性的<p>标记上
例如:
<p id=“green">学校网站开发</p>
id选择器也可省略HTML标记名称直接去定义,这样可以在所有的HTML标记中使用。
例如:
#green {color:green}
这个CSS规则可用在具有这个id属性的所有标记上
例如:
<p id=“green">学校网站开发</p>
<h1 id=“green">学校网站开发</h1>
样式表的使用规则
样式表的分类
按加入的方式不同,可以分为:行内样式表、内部样式表和外部样式表。
(内嵌样式表)
在HTML标记中使用style属性,直接写入需要定义的样式。例如:
<p style="color:Blue; font-size:12px" >内嵌样式表<p>
其中各个属性之间用“;”隔开,属性与属性值之间用“:”隔开。