21世纪高等院校规划教材：《网页设计与制作实用技术》课程配套电子教案（PPT教学课件）第十一章 在网页中使用CSS样式

第11章在网页中使用cSs样式 通过本章学习,应该掌握以下内容 1.什么是CSS 2.CSS样式和常用的 selector 3.在网页中使用CSS的方法 4.CSS的各种属性

通过本章学习，应该掌握以下内容： 1. 什么是CSS 2. CSS样式和常用的selector 3. 在网页中使用CSS的方法 4. CSS的各种属性 第11章 在网页中使用CSS样式

111CSs简介 CSS( Cascading Style Sheet,层叠样式表) 技术是一种格式化网页的标准方式,它通过设置CSS 属性使网页元素获得各种不同效果。CSS不是一种程 序设计语言,而只是一种用于网页排版的标识性语言 是对现有HTM语言功能的补充和扩展 CSS的主要功能是通过对HTM选择器进行设定, 来实现对网页中的字体、字号、颜色、背景、图像记 其他元素的控制,使网页能够完全按照设计者的要求 来显示

11.1 CSS简介 CSS（Cascading Style Sheet，层叠样式表） 技术是一种格式化网页的标准方式，它通过设置CSS 属性使网页元素获得各种不同效果。CSS不是一种程 序设计语言，而只是一种用于网页排版的标识性语言， 是对现有HTML语言功能的补充和扩展。 CSS的主要功能是通过对HTML选择器进行设定， 来实现对网页中的字体、字号、颜色、背景、图像记 其他元素的控制，使网页能够完全按照设计者的要求 来显示

12CSS样式 1121cSs样式表组成 CSS的定义由三部分构成:选择符 selector、属 性 property和属性值 value。其基本格式如下: selector property 1: value 1 property 2 value 2: 其中 selector(选择符)表示需要应用样式的内容, property表示由CSS标准定义的样式属性, value表示 样式属性的值

CSS的定义由三部分构成：选择符selector、属 性property和属性值value。其基本格式如下： selector{property l ： value l ； property 2 ： value 2；……} 其中selector（选择符）表示需要应用样式的内容， property表示由CSS标准定义的样式属性，value表示 样式属性的值。 11.2 CSS样式 11.2.1 CSS样式表组成

1122几种常用的 selector 1.ITML标记符 selector HTML标记符是最典型的 selector类型,网页设 计者可以为某个或某些具体的HM元素应用样式定 义。如: BODY color: black) 如果属性的值是多个单词组成的,必须在值前 加上双引号。如果需要对一个 selector指定多个属 性时,应使用分号将所有的属性和值分开

11.2.2 几种常用的selector HTML标记符是最典型的selector类型，网页设 计者可以为某个或某些具体的HTML元素应用样式定 义。如： BODY{color：black} 如果属性的值是多个单词组成的，必须在值前 加上双引号。如果需要对一个selector指定多个属 性时，应使用分号将所有的属性和值分开。 1．HTML标记符selector

2.具有上下文关系的HTML标记符 selector 如果需要为位于某个标记符内的标记符设置特定 的样式规则,则应将 selector指定为具有上下文关 系的HM标记符。例如,如果只想使位于H1标记符 内的A标记符具有特定的属性,则应使用以下格式: H1 Bicolor: blue] 注意H1和A之间以空格分隔

如果需要为位于某个标记符内的标记符设置特定 的样式规则，则应将selector指定为具有上下文关 系的HTML标记符。例如，如果只想使位于H1标记符 内的A标记符具有特定的属性，则应使用以下格式： H1 A{color：blue} 注意H1和A之间以空格分隔。 2．具有上下文关系的HTML标记符selector

3.用户定义的类 selector 可以使用类( class)来为单一HTML标记符创建 多个样式。要想将一个类包括到样式定义中,可将 个句点和一个类名称添加到 selector后,如下所示: selector classname property: value 可以使用任何名称命名类,但通常使用具体含义 的名称

可以使用类（class）来为单一HTML标记符创建 多个样式。要想将一个类包括到样式定义中，可将 一个句点和一个类名称添加到selector后，如下所示： selector.classname {property：value；……} 可以使用任何名称命名类，但通常使用具体含义 的名称。 3．用户定义的类selector

4.用户定义的 ID selector 当网页设计者想在整个网页或几个页面上多处以相 同样式显示标记符时,除了使用类定义一个通用类样 式以外,还可以使用ID定义样式。ID选择符的应用和 类选择符类似,只要把 CLASS换成ID即可 要将一个ID样式包括在样式定义中,应用一个#号 作为ID名称的前缀,如下所示: # IDname property value......j 定义了ID样式后,需要在引用该样式的标记符内 使用id属性

4．用户定义的ID selector 当网页设计者想在整个网页或几个页面上多处以相 同样式显示标记符时，除了使用类定义一个通用类样 式以外，还可以使用ID定义样式。ID选择符的应用和 类选择符类似，只要把CLASS换成ID即可。 要将一个ID样式包括在样式定义中，应用一个#号 作为ID名称的前缀，如下所示： #IDname{property：value……} 定义了ID样式后，需要在引用该样式的标记符内 使用id属性

5.包含 selector 可以单独对某种元素包含关系定义的样式表,元素 1里包含元素2,这种方式只对在元素1里的元素2定义 对单独的元素或元素2无定义,例如 TABLE Afont-size: 10px) 使用上规则后,在表格内的链接改变了样式,文 字大小为10像素,而表格外的链接的文字仍为默认大

可以单独对某种元素包含关系定义的样式表，元素 1里包含元素2，这种方式只对在元素1里的元素2定义， 对单独的元素1或元素2无定义，例如： TABLE A{font-size：10px} 使用上规则后，在表格内的链接改变了样式，文 字大小为10像素，而表格外的链接的文字仍为默认大 小。 5．包含selector

6样式表的层叠性 selector 层叠性,即继承性,样式表的继承规则是外部的 元素样式会保留下来继承给这个元素所包含的其他元 素 不同的选择符定义相同的元素时,要考虑到不同 的选择符之间的优先级。ID选择符,类选择符和 HTML标记选择符,因为ID选择符是最后加在元素上 的,所以优先级最高,其次是类选择符。如果想超越 这三者之间的关系,可以在定义样式时加 上! important,来提升样式表的优先权

层叠性，即继承性，样式表的继承规则是外部的 元素样式会保留下来继承给这个元素所包含的其他元 素。 不同的选择符定义相同的元素时，要考虑到不同 的选择符之间的优先级。ID选择符，类选择符和 HTML标记选择符，因为ID选择符是最后加在元素上 的，所以优先级最高，其次是类选择符。如果想超越 这 三 者 之 间 的 关 系 ， 可 以 在 定 义 样 式 时 加 上!important，来提升样式表的优先权。 6．样式表的层叠性selector

7.虚类 selector 虚类可以看作是一种特殊的类选择符,是能被支持 CSS的浏览器自动识别的特殊选择符。它最大的用处 就是可以在不同状态下定义不同的样式超链接效果。 将虚类和类组合起来用,就可以在同一个页面中 做几组不同类型的链接效果了。所谓不同类型超链接 是指访问过的(A: visited)、未访问过的 (A:1ink)、激活的(A: active)以及鼠标指针悬停 于其上(A: hover)的这4种状态的超链接

7．虚类selector 虚类可以看作是一种特殊的类选择符，是能被支持 CSS的浏览器自动识别的特殊选择符。它最大的用处 就是可以在不同状态下定义不同的样式超链接效果。 将虚类和类组合起来用，就可以在同一个页面中 做几组不同类型的链接效果了。所谓不同类型超链接， 是指访问过的 （ A:visited ） 、 未 访 问 过 的 （A:link）、激活的（A:active）以及鼠标指针悬停 于其上（A:hover）的这4种状态的超链接