通过DreamweaverCS3学习HTMLDIVCSS第11章网页样式表CSS.pptVIP

第11章 网页样式表CSS 在前面的章节中学习了基本的网页元素，及其对应的HTML标签的语法。但对于网页设计者来说，仅学会这些是不够的。在Web 2.0标准中，HTML语言只用于定义网页的结构。要制作出漂亮且符合规范的网页，还需要使用CSS样式表来表现网页的外观。本章将介绍CSS的基本概念，以及通过CSS控制网页元素，如文字外观、背景设置和元素定位等。 11.1 CSS基础 11.1.1 CSS基本概念 11.1.2 CSS功能介绍 11.1.1 CSS基本概念 CSS是Cascading Style Sheets的缩写，中文译为层叠样式表，用于控制或增强网页外观样式，并且可以与网页的内容相分离。CSS 1.0是W3C工业合作组织首次发布于1997年，用于对HTML语言功能的补充。1998年又推出了CSS 2，进一步增强了HTML的语言功能。但由于浏览器之间的差异，对CSS的支持并不完全兼容。本书讲解的CSS主要针对IE用户。 11.1.2 CSS功能介绍 在Web早期，网页一般用于技术交流，HTML只用于描述结构和内容。但随着Web的流行与发展，漂亮的外观变得格外重要。随着网页越来越复杂，HTML代码变得越来越繁杂，大量的标签堆积起来变得难以阅读和理解。 此时CSS的出现为这种状况提供了解决之道。CSS还原了HTML语言原本的描述结构功能，不仅实现了美化页面，还使页面结构变得简洁合理且清晰可读。简单了解CSS用于表现网页，控制或增强网页的外观。 11.1.2 CSS功能介绍 Adobe网站首页效果 11.2 引用CSS 既然CSS有如此强大的功能，那么在网页中如何进行引用？一般有下列4种方法： 将外部样式表链接到HTML文件上。 将外部样式表导入到HTML文件中。 将样式表内嵌HTML文件中。 将样式表内联到HTML文件行中。 11.2.1 外联样式表 外联样式表就是把外部的样式表文件链接到网页上，从而在网页中使用样式表。此方法通过link标签实现，关于link标签在前面的章节中有详细的介绍。将link标签加入到head标签之间，具体格式如下： head link rel=stylesheet href=“style.css” type=”text/css” … /head 11.2.2 内嵌样式表 内嵌样式表是把CSS样式定义直接放在style…/style标签之间，然后插入到网页的头部。具体使用格式如下： 11.2.3 导入样式表 导入样式表与导入外联样式表的方式相似，也是将外部定义好的CSS文件引入到网页中，从而在网页中进行应用。但是导入的CSS使用@import在内嵌样式表中导入，导入方式可以与其他方式进行结合。 11.2.4 内联样式表 前面介绍了样式表的使用是与表现的内容标签相分离的。内联样式表是把样式直接定义在内容标签内部，不需要把代码放在外部文件或网页头部。内联样式表通过style属性把CSS样式表应用在内容上。其使用格式如下： p style=color:FF0000;font-size:16…/p 11.3 CSS基本语法 前面介绍了CSS如何在网页中引用，那么CSS到底是如何来定义网页的外观的？其定义的网页外观由一系列规则组成，包括构成、选择符和继承。接下来将分别进行介绍。 11.3.1 构成 CSS的定义由三部分构成：选择符（selector）、属性（properties）和属性的取值（value）。基本格式如下： selector {property: value} （选择符 {属性：值}） 11.3.2 选择符 CSS的选择符可以分为4种基本类型：标签选择符、ID选择符、类选择符和特殊选择符。除了基本类型外，还可以把基本类型的选择符组合使用。这些类型选择符的使用规则如下。 1．标签选择符 2．ID选择符 3．类选择符 4．选择符组 5．包含选择符 11.3.3 继承性 继承性也称层叠性。样式表的继承规则是，外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值。有时，把很多层嵌套的样式叠加在一起。 11.3.4 特殊选择符 —— 伪类 伪类可看做是一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符。其最大的用处是，可以对链接在不同状态下的内容定义不同的样式效果。 1．语法 2．锚的伪类——动态连接 3．锚的伪类——类选择符动态链接 11.3.5 其他伪类 CSS 2定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。下面的实例中在段落标记里定义文本首字尺寸为默认大小的3倍，源码如下所示： s