文档介绍：第五章样式表
统一网站风格、制作基本特效
1
与网页设计
主要内容
一、样式表(CSS)的基本概念
二、CSS与HTML文档的结合方法
三、CSS属性的理解与应用
四、CSS样式的单位
五、CSS样式在网页中的应用
六、CSS的高级应用
2
与网页设计
一、CSS的基本概念
1、编写CSS样式的方法
使用CSS编辑器
如Dreamweaver、Frontpage等都会自带CSS编辑器。
使用超文本编辑器
如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表;
记事本
3
与网页设计
一、CSS的基本概念
2、基本语法
选择符{属性: 值}
选择符{属性1: 值1; 属性2: 值2 ;……}
单一选择符的复合样式声明应该用“;”隔开,为便于阅读也可以分行写。
几乎所有的HTML标记符形式都可以作为选择符。
<HEAD>
<TITLE>CSS例子</TITLE>
<STYLE TYPE=“text/css”>
H1{ font-size:x-large; color:red}
H2{ font-size:large; color:blue}
</STYLE>
</HEAD>
5-
H1{ font-size:x-large; color:red}
H2{ font-size:large; color:blue}
4
与网页设计
一、CSS的基本概念
3、CSS样式的组合、继承和关联性
样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。
-例如:段落元素p、单元格元素td和类c1可以使用相同样式:
p,td,.c1{font-size:12pt;font-family:黑体;color:red}
5-
5
与网页设计
一、CSS的基本概念
样式的继承:若子元素未定义,则它将继承上级元素的样式的定义。但存在少数属性不能继承,见P119。
<HEAD>
<TITLE>CSS例子</TITLE>
<style>

</style>
</HEAD>
5-
6
与网页设计
一、CSS的基本概念
样式表的关联性:
样式表的关联性指在某些样式定义中,可以定义某样式仅在某个特定元素范围内才有效。。
例如:
p b{font-size:12pt;font-family:黑体;color:red}
b元素仅在p元素作用范围内会套用上述的样式设定。而在其他地方不具有这些属性。
5-
7
与网页设计
一、CSS的基本概念
4、注释
CSS文字的注释形式与C语言类似。
p{font-size:12pt} /*P标签的样式定义*/
8
与网页设计
一、CSS的基本概念
5、选择符
样式表的基本语法形式:
selector{property1:value1; property2:value2;…}
需要应用的样式的内容
样式的属性
样式的属性的值
Select的五种合法的类别:HTML标记符、用户定义的类Class、用户定义的ID、虚类和虚元素 P119
9
与网页设计
选择符的类别
HTML标记符
应用比较多,注意继承性、组合性和关联性(P119)的应用。
用户定义的类选择符
可以使用任何名称命名类。
<body>里所有的元素都可以定义“类”。
语法如下:
{property1:value1; property2:value2;…}
.classname{property1:value1; property2:value2;…}
例5-
1、两种定义形式的区别?
2、在标签中使用类选择符样式的使用方式如何?
10
与网页设计