《DreamWeaver课件3.ppt

在Web早期，网页一般用于技术交流，HTML只用于描述结构和内容。但随着Web的流行与发展，漂亮的外观变得格外重要。随着网页越来越复杂，HTML代码变得越来越繁杂，大量的标签堆积起来变得难以阅读和理解。 此时CSS的出现为这种状况提供了解决之道。CSS还原了HTML语言原本的描述结构功能，不仅实现了美化页面，还使页面结构变得简洁合理且清晰可读。简单了解CSS用于表现网页，控制或增强网页的外观。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 引用CSS 既然CSS有如此强大的功能，那么在网页中如何进行引用？一般有下列3种方法： 将外部样式表链接到HTML文件上。 将样式表内嵌HTML头文件中。 将样式表内嵌到HTML文件行中。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 外联样式表 外联样式表就是把外部的样式表文件链接到网页上，从而在网页中使用样式表。此方法通过link标签实现，关于link标签在前面有介绍。将link标签加入到head标签之间，具体格式如下： head link rel=stylesheet href=“style.css” type=”text/css” /head Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 内嵌样式表 内嵌样式表是把CSS样式定义直接放在style…/style标签之间，然后插入到网页的头部。具体使用格式如下： Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 内联样式表 前面介绍了样式表的使用是与表现的内容标签相分离的。内联样式表是把样式直接定义在内容标签内部，不需要把代码放在外部文件或网页头部。内联样式表通过style属性把CSS样式表应用在内容上。其使用格式如下： p style=color:FF0000;font-size:16…/p Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 样式表优先级 三种用法可以混用，且不会造成混乱。 浏览器先检查有没有行内插入式CSS，有就执行了，针对本句的其它CSS就不去管它了；其次检查头部方式的CSS，有就执行 了；在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出，三种CSS的执行优先级是：行内插入式、头部方 式、外连文件方式。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. CSS基本语法 前面介绍了CSS如何在网页中引用，那么CSS到底是如何来定义网页的外观的？其定义的网页外观由一系列规则组成，包括构成、选择符和继承。接下来将分别进行介绍。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 构成 CSS的定义由三部分构成：选择符（selector）、属性（properties）和属性的取值（value）。基本格式如下： selector {property: value} （选择符 {属性：值}） Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 选择符 CSS的选择符可以分为4种基本类型：标签选择符、ID选择符、类选择符和特殊选择符。除了基本类型外，还可以把基本类型的选择符组合使用。这些类型选择符的使用规则如下。 1．标签选择符 2．ID选择符 3．类选择