第6章节用CCS美化网页.ppt

第6章 用CCS美化网页 层叠样式表，简称为CSS，是英语Cascading Style Sheets的缩写。它是W3C定义和维护的标准，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。 样式表可以使网页制作者的工作更加轻松和灵活，现在越来越多的网站采用了CSS技术。 本章介绍CSS在网页设计中的应用技术，主要内容有： CSS基础 创建CSS CSS基本应用 链接外部CSS样式文件 在“代码”视图编辑CSS样式 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 6.1 CSS基础 CSS的基本概念在于可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。这样，当要改变网页外观时，只需更改样式设定的部分，HTML文件本身并不需要更改。 Dreamweaver是最早支持CSS开发网页的软件之一。通过直观的界面，设计者可以定义各种各样的CSS规则，这些规则可以影响到网页中的任何元素。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 6.1.1 认识“CSS样式”面板 在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。 在没有定义CSS前，“CSS样式”面板是空白显示。如果在Dreamweaver中定义了CSS，那么“CSS样式”面板中会显示所定义好的CSS规则，如图6-1所示。 样式表文件名 CSS规则列表 属性和属性值列表 工具按钮栏 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 6.1.2 新建CSS规则 新建一个HTML网页文档，打开“CSS样式”面板，单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框，如图所示。 设置选择器类型 设置CSS规则定义在文档内还是定义在外部CSS文件中 设置CSS规则名称 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 6.1.3 在网页中应用CSS样式 定义好CSS样式后，就可以在网页文档中套用这些样式了。套用样式表的方法主要有3种，下面分别进行介绍。 1．在“属性”面板选择应用特定的样式 2．利用【标签选择器】选择样式 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 3．使用右键快捷菜单 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 4．清除样式 如果想清除网页中应用的某个样式，可以先选中对象，然后从右键快捷菜单中选择“CSS样式”|“无”命令，即可清除原有的样式。 5．查看正在应用的样式属性列表 如果想查看网页中正在应用的CSS样式的属性情况，可以先将鼠标光标定位在某个应用CSS样式的位置，或者选中应用CSS样式的对象，然后在“CSS样式”面板中单击“现在”选项卡，即可显示出正在应用的CSS样式的属性列表情况，如图所示。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 6.2 创建CSS 创建CSS样式时，在“新建CSS规则”对话框中，设置不同的“选择器类型”可以创建不同类型的CSS样式。一般情况下，经常创