第12章 CSS基础样式-【好程序员成长】HTML5从入门到精通

浏览器前缀 CSS3选择器 CSS3文本属性 CSS3背景属性 CSS3颜色属性 CSS3边框属性 第12章 CSS3基础样式 浏览器前缀 CSS3选择器 CSS3文本属性 CSS3背景属性 CSS3颜色属性 CSS3边框属性 目 录 CATALOUGUE 01 02 04 05 03 06 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 掌握CSS3基础样式 了解CSS3特性 理解CSS3选择器 熟悉浏览器前缀 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 浏览器前缀是针对老式浏览器的一种写法，在CSS3还没有标准化时，这些浏览器已经开始使用。为此，CSS3提供了针对浏览器的前缀，当某些CSS3样式语法变动时，可以使用这些前缀，使浏览器在非标准前提下正常运行。 根据浏览器内核的不同，浏览器前缀的设置也有不同，常见的浏览器前缀如表所示。 12.1 浏览器前缀 内核 前缀 Trident内核：主要代表为IE浏览器 -ms- Gecko内核：主要代表为Firefox浏览器 -moz- Presto内核：主要代表为Opera浏览器 -o- Webkit内核：产要代表为Chrome和Safari浏览器 -webkit- 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 先来通过一个CSS3样式了解如何添加浏览器前缀，border-radius样式可设置圆角边框样式。具体示例如下。 当然在现代浏览器中，一般浏览器前缀都可以被省略掉，直接使用CSS3标准写法即可。具体示例如下。 12.1 浏览器前缀 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 12.2 CSS3选择器 12.2.1 属性选择器 12.2.2 结构伪类选择器 12.2.3 状态伪类选择器 12.2.4 其他选择器 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 属性选择器顾名思义就是通过属性来选择元素的一种方式，如下述代码中type和value都是input元素的属性。 12.2 CSS3选择器 12.2.1 属性选择器 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 属性选择器的写法是通过中括号的方式进行选择的，也可以在中括号中把属性和属性值写完整。 12.2 CSS3选择器 12.2.1 属性选择器 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 除了具体的属性选择器外，CSS3还提供了三种模糊匹配的属性选择器，下面将分别讲解三种模糊匹配的属性选择器。 （1）[attr^=value]匹配的是起始位置包含value值形式的元素。 12.2 CSS3选择器 12.2.1 属性选择器 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn （2）[attr$=value]匹配的是结束位置包含value值形式的元素。下面将例题第7行代码更改如下。 input[value$="HTML"]{ background : red; color : white; } （3）[attr*=value]匹配的是任意位置包含value值形式的元素。下面将例题第7行代码更改如下。 input[value*="HTML"]{ background : red; color : white; } 12.2 CSS3选择器 12.2.1 属性选择器 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 结构伪类选择器是针对HTML层次“结构”的伪类选择器。如想要某一个父元素下面的第n个子元素。 （1） 第一类结构伪类选择器*-child方式。其分类如表所示。 表中，E:nth-child(n)选择器，可以设置一组元素中指定子项的样式，其参数可以为数字行也可以设置为odd奇数行和even偶数行，另外还可以将参数设置为n值（从零累加的值）。注意，E:nth-child(n)选择器的参数从1开始，而不是0。 12.2 CSS3选择器 12.2.2 结构伪类选择器 选择器 含义 E：first-child选择器 选择父元素的第一个子元素 E：last-child选择器 选择父元素的最后一个子元素 E：nth-child(n)选择器 选择父元素下的第n个子元素 E:only-child选择器 选择父元素中唯一的子元素（该父元素只有一个子元素时才可以选择）。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn （2） 第二类结构伪类选择器*-of-type方式。其分类如表所示。 表中E：first-of