第13章 CSS3的选择器(HTML5与CSS3 Web前端开发技术).ppt

HTML5+CSS3 Web前端开发技术第13章 CSS3的选择器CSS3概述1CSS的基本选择器2在HTML中使用CSS的方法3CSS复合选择器4CSS3新增的选择器5使用CSS设计网站页面6HTML5+CSS3 ,但不同浏览器对CSS3很多细节的处理存在差异。 Dreamweaver CS5、WebStorm、IntelliJ IDEAHTML5+CSS3 CSS的一个示例示例13-1就是使用传统的HTML设计页面。HTML5+CSS3 CSS的一个示例使用CSS改进HTML设计页面。使用CSS有以下几个主要优点。(1)结构和风格分离(2)扩充HTML标记(3)提高网站维护效率(4)可以实现精美的页面布局HTML5+CSS3 CSS的基本选择器 CSS可以认为是多个选择器组成的集合,每个选择器由3个基本部分组成——“选择器名称”、“属性”和“值”,格式定义描述如下。selector { property:value; }HTML5+CSS3 标记选择器一个HTML页面由很多不同的标记组成,例如<p>、<h1>、<div>等。CSS标记选择器就用于声明这些标记的CSS样式。tagName { property:value;} 类选择器类选择器用来为一系列标记定义相同的呈现方式。.className { property:value; }HTML5+CSS3 类选择器示例13-3所示为标记选择器和类选择器的综合应用HTML5+CSS3 ID选择器 ID选择器和类选择器在设置格式的功能上类似,都是对特定属性的属性值进行设置。但ID选择器的一个重要功能是用做网页元素的唯一标识,所以,一个HTML文件中一个元素的ID属性值中惟一的。定义ID选择器的语法格式如下。#idName{ property:value ;}HTML5+CSS3 ID选择器在定义ID选择器时,需要在idName前面加一个“#”符号,如下面的示例所示。#font1{ font-family:"幼圆"; color:#00F;}类选择器与ID选择器主要区别如下。(1)类选择器可以给任意数量的标记定义样式,但ID选择器在页面的标记中只能使用一次。(2)ID选择器比类选择器具有更高的优先级,即当ID选择器与类选择器在样式定义上发生冲突时,优先使用ID选择器定义的样式。HTML5+CSS3 CSS的基本选择器示例13-4是ID选择器的应用