Web前端开发课件 项目六 CSS 3的选择器.pptxVIP

CSS3的选择器项目六授课教师：姓名WEB前端开发

Contents

一项目描述本项目学习要点CSS的常用选择器；CSS3新增选择器；伪类选择器。CSS的引用方法；

二知识准备CSS3基本语法；CSS3引用方法；CSS3新增选择器。CSS3常用选择器；

二知识准备CSS（CascadingStyleSheet）称为层叠样式表，也称为CSS样式表（或样式表），文件扩展名为.css。CSS发展到今天的最新版本是CSS3.0，CSS3具有强大的功能。CSS3是对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精确控制的一种技术。以前需要使用图片或者JavaScript来实现的效果，现在只需要几句CSS代码就能完成。

CSS3基本语法CSS3样式表是由若干条规则组成的，这些规则可以应用到的元素或文档，来定义它们显示的外观。每一条样式规则由三部分组成：选择器（selector）、属性（properties）和属性值（value），格式如下：选择器{样式属性:属性值;}选择器，可以采用多种形式，可以为文档中的HTML标签，如body、p等，也可以是class、id标签。样式属性，是选择器指定的标签所包含的属性。属性值，如果定义选择器的多个属性，则属性和属性值为一组，组与组之间用分号（;）隔开。格式如下：

CSS3基本语法选择器{样式属性1:取值1;样式属性2:取值2;……}例如下面的一条样式规则：p{font-size:12px;color:red;}该样式规则表示：选择器是p，即为段落标签p提供样式，font-size为文本设置字体大小，12px为属性值；color为文字设置颜色，red为属性值。

CSS3引用方法1.行内样式使用行内样式的具体方法是直接在HTML5标签中使用style属性，该属性的内容是CSS的属性和值。尽管行内样式简单，但是不常使用，因为这样添加无法完全发挥样式文件的“内容结构与样式控制代码”分离的优势，而且这种方式也不利于样式的重用，后期维护成本高，故不推荐使用。格式如下：pstyle=color:red;段落文字/p

CSS3引用方法2.内嵌样式内嵌样式是将CSS样式代码添加到head与/head之间，并且用style和/style标签进行声明。这种写法虽然没有完全实现页面内容和样式控制代码完全分离，但可以设置一些比较简单的样式，并统一页面样式。格式如下：head styletype=text/css p{ color:red; font-size:12px; } /style/head

CSS3引用方法3.链接样式链接样式是CSS中使用频率最高，也是最实用的方法，它能很好地将“页面内容”和“样式风格代码”分离成两个文件或多个文件，实现了页面框架HTML5代码和CSS3代码的完全分离，使前期制作和后期维护都非常方便。linkrel=stylesheettype=text/csshref=style.css链接样式是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过link链接标签链接到页面中，而且该链接语句必须放在页面的head标签中，格式如下：其中rel指链接到样式表，其值为stylesheet；type表示样式类型为CSS样式表；href指定CSS样式表所在的位置。

CSS3引用方法3.链接样式【例6-1】CSS引用方法实例，代码如下所示（示例文件6-1.html）。!DOCTYPEhtmlhtmllang=enhead metacharset=UTF-8 title在HTML5中使用CSS的方法/title linkrel=stylesheettype=text/csshref=css/style.css styletype=text/css p{ color:red; font-size:14px; } /style/headbody divstyle=width:240px;font-size:18px;background:red; 这是使用行内样式的文字样式 /div p这是使用内嵌样式的段落文字样式/p span这是使用链接样式的文字样式/span/body/html在chrome浏览器中预览

CSS3引用方法4.优先级问题【例6-2】CSS3优先级实例，代码如下所示（示例文件6-2.html）。!DOCTYPEhtmlhtmllang=enhead metacharset=UTF-8 titleCSS3优先级实例/title linkrel=stylesheettype=text/csshref=css/