[09-第九章.pptVIP

网站建设与网页设计 第九章 CSS样式 说明：本章节中的具体操作步骤参见书籍的对应章节。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 第九章 CSS样式 9.1 CSS样式基础 9.2 使用CSS样式 9.3 管理CSS样式 9.4 CSS布局基础 9.5 预设的CSS布局 9.7 Div标签布局 9.6 AP Div元素布局 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 9.1 CSS样式基础 精美的网页离不开CSS技术，使用CSS技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现更精准的控制。CSS技术是HTML的扩展，是网页设计中不可或缺的核心技术。CSS技术最大的优势就是实现了结构与形式的分离，从而更加有利于网站的开发和维护。同时，CSS布局是很有效的网页布局方式。 CSS样式是Cascading Style Sheets（层叠样式单）的简称，也可以称作“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 9.1 CSS样式基础 CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而避免了重复操作。 实际上，CSS样式的使用就像很多软件的“更换皮肤”功能。例如，左下角为一个没有应用CSS样式的网页，而右下角为应用了CSS文件后的网页。 9.1.1 CSS样式简介 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 9.1 CSS样式基础 在Web页面中，CSS规则有下面3中方式： 外部CSS样式：存储在一个单独的外部CSS (.css)文件（而非HTML文件）中的若干组CSS规则。使用link标签链接到外部样式表文件（.css文件）。如果修改外部样式表文件，那么所有链接到该样式表文件的文件都将随之变化。 内部（或嵌入式）CSS样式：若干组包括在?HTML?文档头部分的?style?标签中的CSS规则。使用style标签为当前网页设置样式信息。内部样式的内容包含在文档代码head部分的style标签中，并在【CSS样式】面板中的【所有规则】窗格内列出，此样式只对当前文档有效。 内联样式：通过HTML标签的style属性为单个网页元素嵌套样式信息。 其中，内联样式不符合“结构与形式分离”的网页基本设计原则，不建议使用。 9.1.2 CSS规则的应用范围 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 9.1 CSS样式基础 从前面的举例中可以看出，CSS样式规则是由两部分组成：选择器和样式定义（也称声明）。选择器是标识已设置格式元素的术语，例如p，h1、类名称等，而样式定义则用于定义样式的属性，大多数情况下为包含多个样式定义的代码块，包括样式属性和相应的属性数值。 h1{font-size:12 pixels;font-family:宋体} 在上面的CSS规则中，h1是选择器，大括号（{}）之间的所有内容都是样式定义。 在Dreamweaver中常见的CSS样式选择器有3种，分别是HTML标签选择器、类选择器和伪类(也称虚类)选择器。除此之外，还有两种选择器：ID选择器和具有上下文关系的选择器。 9.1.3 CSS样式定义规则 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 9.1 CSS样