第6章用CCS美化网页共28页

6.3 CSS基本应用
前面学习了创建CSS样式的基本方法以及CSS样式的类型，本节将分 门别类地对CSS样式提供的各类属性进行讨论，并通过一些实例讲解 CSS在网页制作中的基本应用。
6.3.1 课堂实例――用CSS格式化文本
1．创建内部CSS规则 2．应用CSS规则
6.3.2 课堂实例――用CSS控制表格
定义好CSS样式后，就可以在网页文档中套用这些样式了。套用样式 表的方法主要有3种，下面分别进行介绍。
1．在“属性”面板选择应用特定的样式 2．利用【标签选择器】选择样式
3．使用右键快捷菜单
4．清除样式
如果想清除网页中应用的某个样式，可以先选中对象，然后从右键 快捷菜单中选择“CSS样式”|“无”命令，即可清除原有的样式。
下面以p标签为例讨论用CSS重新定义HTML标签 的外观的方法。
1．修改HTML标签<p></p> 2．设置p标签的属性
6.2.4 超级链接的CSS样式
网页中的文本上建立超级链接后，文字就会变成蓝色，同时还出现 下划线，这是HTML默认的超级链接外观。如果想改变超级链接的默认 外观，可以利用CSS样式进行处理。
Байду номын сангаас
6.2.1 类选择符
CSS选择符有类选择符和标识选择符两种。类选择符以英文句点（.）开 头，而标识选择符以英文井号（#）开头。类选择符和标识选择符的不
同之处在于，类选择符用在不止一个的元素上，而标识选择符则用在唯
一的元素上。
1．建立类选择符CSS样式
4．理解类标识符的CSS代码
2．CSS样式应用于文本 3．CSS样式应用于图片
2．左上角的单元格边框
3．右下角的单元格边框
6.3.3 课堂实例――用CSS控制列表
前面已经学习过，在Dreamweaver 的【属性】面板有【项目列表】和【 编号列表】的图标按钮，能够产生自 动列表功能。在默认状态下，它有两 种形式，即圆点和阿拉伯数字。
利用点或者数字制作一般的列表项 目的时候，只要在【属性】面板中直 接选择相应的设置按钮即可。但是， 如果想利用镂空的圆形或者方形、漂 亮图标来编排列表项目，就要利用 CSS样式表来定义。
1．创建超级链接
2．用CSS样式重新定义超级链接的外观
专家点拨：在如图6-32所示的【新建CSS规则】对话框中，“选择器” 列表框中共有4个选项。
a:link 超级链接的正常状态，没有任何动作的时候。 a:visited 访问过的超级链接状态。 a:hover 光标指向超级链接的状态。 a:active 选中超级链接状态。
ID属性是HTML标签的一个重要属性，一个网页中的标签的ID 属性值不能重复，因此在利用ID属性应用标识选择符CSS样式 时，只能应用于一个标签。如果应用于多个标签，就会造成 标签的ID属性冲突。
6.2.3 用CSS重新定义HTML标签
创建CSS样式时，在“新建CSS规则”对话框中， 将“选择器类型”设置为“标签（重新定义特定标签 的外观）”，可以实现用CSS重新定义HTML标签的外 观的功能。
6.1 CSS基础
CSS的基本概念在于可将网页要展示的内容与样 式设定分开，也就是将网页的外观设定信息从网页内 容独立出来，并集中管理。这样，当要改变网页外观 时，只需更改样式设定的部分，HTML文件本身并不 需要更改。
Dreamweaver是最早支持CSS开发网页的软件之 一。通过直观的界面，设计者可以定义各种各样的 CSS规则，这些规则可以影响到网页中的任何元素。
样式表文件名 CSS规则列表
属性和属性值列表 工具按钮栏
6.1.2 新建CSS规则
新建一个HTML网页文档，打开“CSS样式”面板，单击“新 建CSS规则”按钮，弹出“新建CSS规则”对话框，如图所示。
设置选择器类型
设置CSS规则名称
设置CSS规则定义在文档内还是定 义在外部CSS文件中
6.1.3 在网页中应用CSS样式
5．查看正在应用的样式属性列表
如果想查看网页中正在应用的CSS样式 的属性情况，可以先将鼠标光标定位在某 个应用CSS样式的位置，或者选中应用 CSS样式的对象，然后在“CSS样式”面 板中单击“现在”选项卡，即可显示出正 在应用的CSS样式的属性列表情况，如图 所示。
6.2 创建CSS
创建CSS样式时，在“新建CSS规则”对话框中，设置不同的 “选择器类型”可以创建不同类型的CSS样式。一般情况下，经 常创建的CSS样式类型包括类选择符、标识选择符、重定义 HTML标签、超级链接的CSS样式等。
在head标签中定义了一个名 字为.myCSS_Class的样式，在 body标签中应用了两次这个样式。 一次应用是在第一个P标签中， 另一次应用是在img标签中，应 用类标识符样式时，都是通过 class属性的设置实现的：
class="myCSS_Class" 专家点拨：在“代码视图”下，
通过手动添加代码，编辑某个 HTML标签的class属性，就可以 让这个HTML标签控制范围内的 元素应用类选择符样式。
前面学习过在代码视图中设置表格以及单元格的各种属性，从代 码提示工具弹出的那个冗长列表中就能知道，、这是一件相当繁琐复 杂的事情，如果要为多个表格设置属性，就更加不胜其烦了。现在通 过CSS可以非常方便地设置表格样式。下面将通过CSS制作边框为黑色 细实线，表格内部边框为灰色虚线的表格。
1．控制表格边框
6.1.1 认识“CSS样式”面板
在Dreamweaver中，“CSS样式” 面板是新建、编辑、管理CCS的主要 工具。选择“窗口”|“CSS样式”命 令可以打开或者关闭“CSS样式”面 板。
在没有定义CSS前，“CSS样式” 面板是空白显示。如果在 Dreamweaver中定义了CSS，那么 “CSS样式”面板中会显示所定义好 的CSS规则，如图6-1所示。
6.2.2 标识选择符
标识选择符又可以称为ID选择符，它的名字以英文井号（#）开头， 这种选择符样式只能用在一个元素上。
1．建立标识选择符样式 2．在单元格中应用样式 3．理解标识选择符的CSS代码
在head标签中定义了一个名字为#myCSS_ID的样式，在td标签 中应用了这个样式。应用类标识符样式时，都是通过HTML标签 的id属性的设置实现的： id="myCSS_ID"