网页制作与JSP技术 第2版 教学课件 作者 汪赵强主编 项目3　使用CSS(层叠样式表).ppt

《网页制作与JSP技术 第2版 教学课件 作者 汪赵强主编 项目3　使用CSS(层叠样式表).ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页制作与JSP技术第2版主编项目3　使用CSS(层叠样式表)3.1　CSS介绍3.2　CSS的使用方法和基本写法3.3　CSS的属性和值3.1　CSS介绍3.1.1　CSS的基本概念CSS全称为CascadingStyleSheets，中文翻译为“层叠样式表”，简称“样式表”。3.1.2　CSS的特点CSS可以用于同时控制很多文档，并包括文档中的所有样式。3.2　CSS的使用方法和基本写法3.2.1　CSS的使用方法将CSS加入到HTML中有很多的方法，每种方法都有其优点与缺点。1.连接到外部样式表例3-1　连接外部样式表。图　3-13.2　CSS的使用方法和基本写法2.嵌入样式表例

2、3-2　嵌入样式表。图　3-23.2　CSS的使用方法和基本写法3.内联样式表例3-3　内联样式表。图　3-33.2　CSS的使用方法和基本写法4.导入外部样式表例3-4　导入外部样式表。图　3-43.2　CSS的使用方法和基本写法5.class属性例3-5　class属性的应用。图　3-53.2　CSS的使用方法和基本写法6.id属性例3-6　id属性的应用。7.span元素图　3-63.2　CSS的使用方法和基本写法例3-7　span元素的应用。图　3-73.2　CSS的使用方法和基本写法3.2.2　CSS的基本写法1.基本语法1)选择符可以有多种形式，一般是要定义样式的HTML标

3、记，如body、p、table、…可以通过此方法定义它的属性和值，属性和值要用冒号隔开。例3-8　CSS基本语法应用1。图　3-83.2　CSS的使用方法和基本写法2)如果属性的值是多个单词组成，必须在值上加引号，如字体的名称经常是几个单词的组合，即:例3-9　CSS基本语法应用2。图　3-93.2　CSS的使用方法和基本写法3)如果需要对一个选择符指定多个属性时，需要使用分号将所有的属性和值分开，例如：例3-10　CSS基本语法应用3。图　3-103.2　CSS的使用方法和基本写法4)为了使定义的样式表便于阅读，可以采用分行的书写格式，例如：例3-11　CSS基本语法应用4。图　3-

4、113.2　CSS的使用方法和基本写法2.选择符组例3-12　选择符组的应用。图　3-123.2　CSS的使用方法和基本写法3.类选择符例3-13　类选择符的应用1。图　3-133.2　CSS的使用方法和基本写法例3-14　类选择符的应用2。图　3-143.2　CSS的使用方法和基本写法4.id选择符例3-15　id选择符的应用1。图　3-153.2　CSS的使用方法和基本写法例3-16　id选择符的应用2。图　3-163.2　CSS的使用方法和基本写法5.包含选择符例3-17　包含选择符的应用。图　3-173.2　CSS的使用方法和基本写法6.样式表的继承性例3-18　继承性的应用。

5、图　3-183.2　CSS的使用方法和基本写法7.注释3.2.3　CSS的冲突在同一个选择符上使用几个不同的样式表时，这个属性值将会叠加几个样式表定义，遇到冲突的地方会以最后定义的为准。例3-19　CSS的冲突演示。图　3-193.2　CSS的使用方法和基本写法例3-20　继承性的优先级演示。图　3-203.3　CSS的属性和值3.3.1　字体和文本属性1.字体属性表3-1　字体属性例3-21　设置不同的字体属性。3.3　CSS的属性和值图　3-212.文本属性3.3　CSS的属性和值(1)定义间距　前面讲解了如何用CSS定义字体和颜色属性，下面将介绍CSS的文本属性，见表3-2。表3

6、-2　文本属性例3-22　设置文本属性。3.3　CSS的属性和值图　3-22例3-23　使用默认的字间距。3.3　CSS的属性和值图　3-23(2)装饰超链接　网页默认的链接方式是：未访问过的链接是蓝色3.3　CSS的属性和值文字并带蓝色的下划线，访问过的超级链接是深紫色的文字并带深紫色的下划线。例3-24　装饰超链接。图　3-243.3　CSS的属性和值3.3.2　颜色和背景属性如果想使页面色彩和背景都很漂亮，可以使用CSS的颜色和背景属性，见表3⁃3。表3-3　颜色和背景属性1)#RRGGBB格式，是由红、绿、蓝三种颜色的值组合，每种颜色的值为00~FF的两位十六进制正整数。2)r

7、gb(R，G，B)格式，其中R、G、B为三色的值，取0~255，例如：rgb(255，0，0)表示红色，rgb(255，255，0)表示黄色。3.3　CSS的属性和值3)用颜色名称，CSS可以使用已经定义好的颜色名称。例3-25　颜色的设置。图　3-253.3　CSS的属性和值3.3.3　列表属性在CSS中，提供了进行列表的专用分级属性，见表3⁃4。表3-4　列表属性例3-26　列表属性设置。3.3　CSS的属性和值图　3-261)p{disp