第六章用CCS美化网页.ppt

第6章 用CCS美化网页 层叠样式表，简称为CSS，是英语Cascading Style Sheets的缩写。它是W3C定义和维护的标准，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。 样式表可以使网页制作者的工作更加轻松和灵活，现在越来越多的网站采用了CSS技术。 本章介绍CSS在网页设计中的应用技术，主要内容有： CSS基础 创建CSS CSS基本应用 链接外部CSS样式文件 在“代码”视图编辑CSS样式 6.1 CSS基础 CSS的基本概念在于可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。这样，当要改变网页外观时，只需更改样式设定的部分，HTML文件本身并不需要更改。 Dreamweaver是最早支持CSS开发网页的软件之一。通过直观的界面，设计者可以定义各种各样的CSS规则，这些规则可以影响到网页中的任何元素。 6.1.1 认识“CSS样式”面板 在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。 在没有定义CSS前，“CSS样式”面板是空白显示。如果在Dreamweaver中定义了CSS，那么“CSS样式”面板中会显示所定义好的CSS规则，如图6-1所示。 样式表文件名 CSS规则列表 属性和属性值列表 工具按钮栏 6.1.2 新建CSS规则 新建一个HTML网页文档，打开“CSS样式”面板，单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框，如图所示。 设置选择器类型 设置CSS规则定义在文档内还是定义在外部CSS文件中 设置CSS规则名称 6.1.3 在网页中应用CSS样式 定义好CSS样式后，就可以在网页文档中套用这些样式了。套用样式表的方法主要有3种，下面分别进行介绍。 1．在“属性”面板选择应用特定的样式 2．利用【标签选择器】选择样式 3．使用右键快捷菜单 4．清除样式 如果想清除网页中应用的某个样式，可以先选中对象，然后从右键快捷菜单中选择“CSS样式”|“无”命令，即可清除原有的样式。 5．查看正在应用的样式属性列表 如果想查看网页中正在应用的CSS样式的属性情况，可以先将鼠标光标定位在某个应用CSS样式的位置，或者选中应用CSS样式的对象，然后在“CSS样式”面板中单击“现在”选项卡，即可显示出正在应用的CSS样式的属性列表情况，如图所示。 6.2 创建CSS 创建CSS样式时，在“新建CSS规则”对话框中，设置不同的“选择器类型”可以创建不同类型的CSS样式。一般情况下，经常创建的CSS样式类型包括类选择符、标识选择符、重定义HTML标签、超级链接的CSS样式等。 6.2.1 类选择符 CSS选择符有类选择符和标识选择符两种。类选择符以英文句点（.）开头，而标识选择符以英文井号（#）开头。类选择符和标识选择符的不同之处在于，类选择符用在不止一个的元素上，而标识选择符则用在唯一的元素上。 1．建立类选择符CSS样式 2．CSS样式应用于文本 3．CSS样式应用于图片 4．理解类标识符的CSS代码 在head标签中定义了一个名字为.myCSS_Class的样式，在body标签中应用了两次这个样式。一次应用是在第一个P标签中，另一次应用是在img标签中，应用类标识符样式时，都是通过class属性的设置实现的： class=myCSS_Class 专家点拨：在“代码视图”下，通过手动添加代码，编辑某个HTML标签的class属性，就可以让这个HTML标签控制范围内的元素应用类选择符样式。 6.2.2 标识选择符 标识选择符又可以称为ID选择符，它的名字以英文井号（#）开头，这种选择符样式只能用在一个元素上。 1．建立标识选择符样式 2．在单元格中应用样式 3．理解标识选择符的CSS代码 在head标签中定义了一个名字为#myCSS_ID的样式，在td标签中应用了这个样式。应用类标识符样式时，都是通过HTML标签的id属性的设置实现的： id=myCSS_ID ID属性是HTML标签的一个重要属性，一个网页中的标签的ID属性值不能重复，因此在利用ID属性应用标识选择符CSS样式时，只能应用于一个标签。如果应用于多个标签，就会造成标签的ID属性冲突。 6.2.3 用CSS重新定义HTML标签 创建CSS样式时，在“新建CSS规则”对话框中，将“选择器类型”设置为“标签（重新定义特定标签的外观）”，可以实现用C