第05章使用CSS样式

1、HTML与CSS前台页面设计第五章HTML与CSS前台页面设计使用CSS样式HTML与CSS前台页面设计第五章 使用CSS样式HTML与CSS前台页面设计本章要点 对HTML文档应用样式的方法 CSS样式代码编写规则 CSS样式选择器 的种类及使用http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http

2、:/ http:/ http:/ http:/ http:/ / http:/ http:/ http:/ http:/ http:/ http:/ http:/www.gz- http:/www.gz- http:/ http:/ http:/ http:/ 使用CSS样式HTML与CSS前台页面设计目录：5.1对HTML文档应用样式 5.2CSS样式代码编写规则 5.3CSS样式选择器 5.4综合实例 HTML与CSS前台页面设计5.1 对HTML文档应用样式1.应用样式的方法 当设计好样式之后，需要将样式应用到HTML文档中，可以用下 面的三种方式，

3、将CSS应用于HTML页面上。 （1）内联样式 内联样式是将样式写在标记里面的， 它只对己所在的标记起作 用。内联样式表 用到标记。HTML与CSS前台页面设计5.1 对HTML文档应用样式（2）内部样式表 内部样式表是写在里面的，它只针对所在的 HTML页 面有效。内部样式表也用到标记，写法为： /*样式规则样式规则*/ （3）外部样式表 CSS允许将所有样式放在一个或多个以.css为结尾的外部样式表文件 中。通过将外部样式表附加到HTML文档上的方法可以灵活的应用样 式。附件外部样式表上有两种方法。可以链接它们，也可以导入它 们。HTML与CSS前台页面设计5.1 对HTML文档应用样式2

4、 .应用样式的优先级所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，如果遇到不同的样式表的规则有冲突的地方，将按优先级来确定应用哪一个规则,内联样式拥有最高的优先权。（1）浏览器缺省设置 （2）外部样式表 （3）内部样式表（4）内联样式HTML与CSS前台页面设计5.2 CSS样式代码编写规则1.样式代码编写规则CSS规则由一个选择符（selector）和一个声明（declaration）构成。声明由属性（properties）和属性的取值（value）组成，声明用来设置指定选择符的样式。selector property : value -如果需要对一个选择符指定多个属性时，使用分号将

5、所有的属性和值分开。-为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号（，）隔开。HTML与CSS前台页面设计5.2 CSS样式代码编写规则2.规则的注释在样式表中的规则的比较多时，可以通过注释来管理样式表。所有的注释都以斜杠和星号（/*）开始，以星号加斜杠结束（*/）。可以在复杂和重要的样式中使用，这样当以后再看以前设计的样式表时，就知道各个规则是的作用了。HTML与CSS前台页面设计5.2 CSS样式代码编写规则3.规则的标志注释对于阅读整个样式表很重要，但通过引入了标志的概念可以追踪单个规则，这对复杂的样式表非常有用。标志使用样式表中不常用的字

6、符作为注释的起始，有助于结合文本编辑器的查找工具来检索规则。HTML与CSS前台页面设计5.2 CSS样式代码编写规则4.规则的排版缩进主要是为了保证代码的清晰可读。在实际的使用中，可以单击一次Tab键来缩进选择器，而单击两次Tab键来缩进声明和结束大括号。这样的排版规则可以使查询规则非常容易。 这样做可以使得即使在样式表不断增大的情况下，仍然可以避免混乱。HTML与CSS前台页面设计5.2 CSS样式代码编写规则5.样式命名的通用规则（1）命名所选用的单词应选择不过于具体表示某一状态（如颜色、字号大小等）的单词，以避免当状态改变时名称失去意义。（2）样式CLASS名由以字母开头的小写字母（a

7、-z）、数字（0-9）、下划线（_）、减号（-）组成。（3）样式ID名称由不以数字开头的小写字母（a-z）、数字（0-9）、下划线（_）组成。（4）模块、类型、状态、位置等的所使用的单词或其缩写，保持上面的顺序，尽量保持用两到三个单词说清用途。HTML与CSS前台页面设计5.3 CSS样式选择器1. HTML标记选择器 一个HTML页面由很多不同的标记组成，CSS中的HTML标记选择器用来声明哪些标记采用哪种CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。 HTML与CSS前台页面设计5.3 CSS样式选择器2. CLASS选择器 CLASS（class）选择器是一

8、类最常用的选择器，它用来定义HTML页面中需要特殊表现的样式。class选择器的名称可以由用户自定义，属性和值跟HTML标记选择器一样，也必须符合CSS规范，class选择器的名称前有一个圆点（. .）做为前缀。如果要使用指定的class选择器，需要在相应的HTML标记中，通过class=“class选择器名字”的形式进行声明。http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www

9、.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ / http:/ http:/ http:/ http:/ http:/ http:/ http:/www.gz- http:/www.gz- http:/ http:/ http:/ http:/ CSS样式选择器3. ID选择器 ID（id）选择器只能在HTML页面中使用一次，针对性更强。在HTML的标记中只需要用id属性，就可以调用CSS中的id选择器。id选择器的名称由用户自定义，属性和值的写法和其他标记选

10、择器一样，但在CSS中，id选择器的名称前有一个“#”符号做为前缀。 HTML与CSS前台页面设计5.3 CSS样式选择器4.高级选择器（1）伪class选择器和伪元素选择器 伪class选择器和伪元素选择器，可以为文档中非具体存在的结构指定样式，或者为某些元素（包括文档本身）的状态指定样式，它会根据某种条件而非文档结构应用样式。表 常用的伪类HTML与CSS前台页面设计5.3 CSS样式选择器（2）交集选择器交集选择器由两个选择器组成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是class选择器或者id选择器。两个选择器之间不能有空格，必须连续书写。 p.cl

11、assname color:#339; font-size:16px; HTML与CSS前台页面设计5.3 CSS样式选择器（3）后代选择器 后代选择器可用来寻找特定元素或元素组的后代。后代选择器是用一个用空格符隔开的两个或更多的单一选择器组成的字符串。后代选择器是根据文档中的上下文来选取元素的。两个选择器之间用有空格隔开。div pcolor:red;HTML与CSS前台页面设计5.3 CSS样式选择器（4）子选择器 这个选择器与后代选择器的区别：子选择器（child selector）仅是指它的直接后代，或者可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器

12、通过空格来进行选择，而子选择器是通过“”进行选择。divpcolor:red;HTML与CSS前台页面设计5.3 CSS样式选择器（5）属性选择器属性选择器可以根据某个属性是否存在或属性的值来寻找元素，因此能够实现某些非常有意思的效果。可以认为class和id选择器其实就是属性选择器，只不过是选择了class或者id的值而已。低版本的浏览器不支持属性选择器，但当前主流的标准浏览器都很好的支持属性选择器。属性选择器的格式是元素后跟中括号，中括号内带属性，或者属性表达式。有简易属性选择器和精确属性值选择器。HTML与CSS前台页面设计5.3 样式的优先级层叠的重要度次序：（1）标有!important的用户样式。（2）标有!important的作者样式。（3）作者样式。（4）用户样式。（5）浏览器/用户代理应用的样式。HTML与CSS前台页面设计http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/