第十一章 网页样式表CSSppt课件.ppt

《第十一章 网页样式表CSSppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第11章网页样式表CSS在前面的章节中学习了基本的网页元素，及其对应的HTML标签的语法。但对于网页设计者来说，仅学会这些是不够的。在Web2.0标准中，HTML语言只用于定义网页的结构。要制作出漂亮且符合规范的网页，还需要使用CSS样式表来表现网页的外观。本章将介绍CSS的基本概念，以及通过CSS控制网页元素，如文字外观、背景设置和元素定位等。11.1CSS基础11.1.1CSS基本概念11.1.2CSS功能介绍11.1.1CSS基本概念CSS是CascadingStyleSheets的缩写，中文译为层叠样式表，用于控制或增强网页外

2、观样式，并且可以与网页的内容相分离。CSS1.0是W3C工业合作组织首次发布于1997年，用于对HTML语言功能的补充。1998年又推出了CSS2，进一步增强了HTML的语言功能。但由于浏览器之间的差异，对CSS的支持并不完全兼容。本书讲解的CSS主要针对IE用户。11.1.2CSS功能介绍在Web早期，网页一般用于技术交流，HTML只用于描述结构和内容。但随着Web的流行与发展，漂亮的外观变得格外重要。随着网页越来越复杂，HTML代码变得越来越繁杂，大量的标签堆积起来变得难以阅读和理解。此时CSS的出现为这种状况提供了解决之道。CS

3、S还原了HTML语言原本的描述结构功能，不仅实现了美化页面，还使页面结构变得简洁合理且清晰可读。简单了解CSS用于表现网页，控制或增强网页的外观。11.1.2CSS功能介绍Adobe网站首页效果11.2引用CSS既然CSS有如此强大的功能，那么在网页中如何进行引用？一般有下列4种方法：将外部样式表链接到HTML文件上。将外部样式表导入到HTML文件中。将样式表内嵌HTML文件中。将样式表内联到HTML文件行中。11.2.1外联样式表外联样式表就是把外部的样式表文件链接到网页上，从而在网页中使用样式表。此方法通过标签实现，关

4、于标签在前面的章节中有详细的介绍。将标签加入到标签之间，具体格式如下：…11.2.2内嵌样式表内嵌样式表是把CSS样式定义直接放在标签之间，然后插入到网页的头部。具体使用格式如下：11.2.3导入样式表导入样式表与导入外联样式表的方式相似，也是将外部定义好的CSS文件引入到网页中，从而在网页中进行应用。但是导入的CSS使用@import在内嵌

5、样式表中导入，导入方式可以与其他方式进行结合。导入样式表预览效果11.2.4内联样式表前面介绍了样式表的使用是与表现的内容标签相分离的。内联样式表是把样式直接定义在内容标签内部，不需要把代码放在外部文件或网页头部。内联样式表通过style属性把CSS样式表应用在内容上。其使用格式如下：…

6、绍。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继承性继承性也称层叠性。样式表的继承规则是，外部的元素样式会保留下来

7、继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值。有时，把很多层嵌套的样式叠加在一起。11.3.4特殊选择符——伪类伪类可看做是一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符。其最大的用处是，可以对链接在不同状态下的内容定义不同的样式效果。1．语法2．锚的伪类——动态连接3．锚的伪类——类选择符动态链接11.3.5其他伪类CSS2定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。下面的实例中在段落标记里定义文本首字

8、尺寸为默认大小的3倍，源码如下所示：p:first-letter{font-size:300%}11.4使用Dreamweaver编辑CSS前面的内容介绍了CS