[zs0907css层叠样式表.pptVIP

CSS层叠样式表 学习目标： ●　了解什么是CSS ●　掌握样式的定义及使用 ●　掌握Style对象 ●　掌握CSS属性 本章内容 了解 DHTML 样式表 什么是层叠样式表 为什么要使用层叠样式表 层叠样式表的语法规则 创建并使用层叠样式表 DHTML简介 什么是DHTML DHTML是一个用动态内容描述HTML页面的术语，它包括HTML、CSS和JavaScript技术，这三种技术通过文档对象模型（DOM）融合在一起。 使用DHTML技术，在客户端就可以动态地操纵数据或改变页面内容，产生动态效果，还可以达到一定的与用户交互的效果。 层叠样式表简介 什么是层叠样式表 为了将显示描述彻底的独立于文档的结构，制定的样式独立制—CSS。 W3C推荐的样式表标准包括CSS和XSL CSS主要用于HTML XSL主要用于XML CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面 层叠样式表的特点 （1）将显示格式和文档结构分离 HTML语言定义文档的结构和各要素的功能，而层叠样式表将定义格式的部分和定义结构的部分分离，能够对页面的布局进行灵活的控制。 （2）对HTML语言处理样式的最好补充 HTML语言对页面布局上的控制很有限，如精确定位、行间距或者字间距等；CSS样式表可以控制页面中的每一个元素，从而实现精确定位，CSS样式表控制页面布局的能力逐步增强。 （3）体积更小加快网页下载速度 样式表是简单的文本，文本不需要图像，不需要执行程序，不需要插件。这样层叠样式表就可以减少图像用量、减少表格标签及其他加大HTML体积的代码，从而减小文件尺寸加快网页的下载速度。 （4）实现动态更新、减少工作量 定义样式表，可以将站点上的所有网页指向一个独立的CSS样式表文件，只要修改CSS样式表文件的内容，整个站点相关文件的文本就会随之更新，减轻了工作负担。 样式表规则 样式表规则 样式表中的选择器 简单选择器(仅描述元素，而不考虑该元素在文档结构中的位置) HTML选择器--选择器是HTML标记的名称 类选择器—使用HTML元素的CLASS属性 ID选择器—使用HTML元素的ID属性 上下文选择器(引用元素的上下文) HTML选择器示例 HTML选择符就是HTML的标记符，例如P、BODY、A等。如果用CSS定义了他们，那么在整个网页中，该标识的属性都应用定义中的设置。HTML选择符的定义方法如下： tag{property:value} 例如，设置表格的单元格内的文字大小为9pt，颜色为蓝色的CSS代码如下： td{ font-size: 9pt; color: blue;} CSS可以在一条语句中定义多个选择符，例如：将段落文本和单元格内的文字设置为蓝色的CSS代码如下： td,p{color: blue;} HTML选择器示例 HTML HEAD STYLE TYPE=text/css P{font-style:italic; font-weight:bold; color:limegreen} /STYLE /HEAD Body P这些选择器使用HTML元素的名称唯一的区别是删除了尖括号。/P /BODY /HTML 类选择器示例 类选择器示例 ID选择器示例 ID选择器示例 HTML HEAD TITLEID选择器/TITLE STYLE TYPE=text/css #control {color:red} /STYLE /HEAD BODY P id=control这是火焰的颜色/P BR P本段没有应用样式/P /BODY /HTML 上下文选择器示例 HTML HEAD TITLE上下文选择器/TITLE STYLE TYPE=text/css BODY {color:blue;background:lavender;font-family:Arial;} UL {color:red } /STYLE HEAD BODY ULLI香蕉LI西瓜LI火龙果/UL OLLI芒果LI桔子LI苹果/OL /BODY /HTML 在HTML中引用样式表 Style元素 Style属性 Link元素 使用Style元素 STYLE元素应插入文档的HEAD元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响。 使用Style属性－内嵌样式表 style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值