Sheets(层叠样式表)的简称.pptVIP

CSS代码 CSS是Cascading Style Sheets(层叠样式表)的简称。 CSS是由W3C（World Wide Web Consortium）的CSS工作组产生和维护的，第一次提出是在1996。 CSS是一种标记语言，它不需要编译，可以直接由浏览器执行(属于浏览器解释型语言)。 在标准网页设计中CSS负责网页内容(XHTML)的表现。 CSS文件也可以说是一个文本文件，它包含了一些CSS标记，CSS文件必须使用css为文件名后缀。 可以通过简单的更改CSS文件，改变网页的整体表现形式，可以减少设计者的工作量，所以CSS是每一个网页设计人员的必修课。 要求：能借助DW的自动提示功能手写CSS代码。 CSS代码 我们来看三个网页： /zengarden-sample.html / /?cssfile=/208/208.csspage=0 这三个页面的截图分别如下： CSS的优点 使用CSS的好处有很多，主要有以下几点： 表现和内容相分离（网页：结构、表现、行为）； 提高页面浏览速度； 易于维护和改版。 CSS的应用 样式的创建 演示…… 样式的编辑 演示…… CSS的应用 1、内联样式 2、外部链接 3、外部导入 CSS的应用 内联样式 内联样式有两种使用方法： 1、通过style属性来定义样式。如： h1 style=“color:#FFFFFF”文字/h1 2、通过style标签元素定义样式。如： style type=“text/css” h1 {color:#FFFFFF} /style CSS的应用 外部链接 通过link标记链接进一个独立的CSS文件。如： link href=3.css rel=stylesheet type=text/css 注意： 1、link标签必须放在文档的head部分，而不能放在其它任何元素里。 2、样式表文件里必须只有样式规则，没有任何XHTML元素标签。 3、通常给独立的样式表文件的扩展名为.css。 CSS的应用 外部导入 通过@import这个语法来引导浏览器载入一个外部的样式表。如： style type=text/css @import url(4.css); /style 注意： @import必须处于style标签内，并且必须位于style标签内的其他CSS规则之前，否则就不能正常工作。 CSS的应用 思考 在建设网站要使用CSS时，哪种应用方式更好： 在标签的style属性中应用的内联样式方法？ 在文档头部的style标签中应用的内联样式方法？ 外部链接？ 外部导入？ CSS的使用规则 CSS的定义是由三个部分构成: 选择符(selector)，属性(properties)和属性的取值(value)。 语法: selector {property: value;……} 选择符 {属性:属性值;……} CSS的使用规则 标签选择符: 文档中被所有该标签控制的部分都应用该样式。 标签{属性:属性值;……} 类选择符: 文档中应用该类的元素所控制的部分都应用该样式。 .类名称{属性:属性值;……} ID选择符: 文档中ID名为选择符名称的元素所控制的部分才应用该样式。 #ID名称{属性:属性值;……} CSS CSS样式的定义 标记 {属性:属性值; 属性:属性值;...} .类名称 {属性:属性值; 属性:属性值;...} #id名 {属性:属性值; 属性:属性值;...} 说明： □ 标记：同一个XHTML标记的CSS属性完全相同。 □ 类：同一个XHTML标记的CSS属性存在差别，应用同一类的标记样式相同。 □ id：同一个XHTML标记的CSS属性存在差别，样式只对该id号的标记有效。 CSS CSS样式的应用 标记：直接应用 类：HTML标记 class=类名称 ... id： HTML标记 id=“id名 ... 如下表示例： CSS的使用规则 class与id选择符在CSS与HTML中的用法总结 CSS CSS样式的优先级 □ 网页上同一个对象可以由多个样式来修饰。 □ 当多个样式同时修饰一个对象时，若样式不冲突，则采用叠加样式效果。 □ 当多个样式同时修饰一个对象时，若样式有冲突，则采用高优先级样式。样式优先级遵循“就近优先”的原则，即离所修饰对象越近的样式，其优先级越高。 一般来说，直接用style属性定义的样式优先级最高； 对于文档hea