《用CCS美化网页》PPT课件

《《用CCS美化网页》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章用CCS美化网页层叠样式表，简称为CSS，是英语CascadingStyleSheets的缩写。它是W3C定义和维护的标准，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。样式表可以使网页制作者的工作更加轻松和灵活，现在越来越多的网站采用了CSS技术。本章介绍CSS在网页设计中的应用技术，主要内容有：CSS基础创建CSSCSS基本应用链接外部CSS样式文件在“代码”视图编辑CSS样式6.1CSS基础CSS的基本概念在于可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。这

2、样，当要改变网页外观时，只需更改样式设定的部分，HTML文件本身并不需要更改。Dreamweaver是最早支持CSS开发网页的软件之一。通过直观的界面，设计者可以定义各种各样的CSS规则，这些规则可以影响到网页中的任何元素。6.1.1认识“CSS样式”面板在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”

3、“CSS样式”命令可以打开或者关闭“CSS样式”面板。在没有定义CSS前，“CSS样式”面板是空白显示。如果在Dreamweaver中定义了CSS，那么“CSS样式”面板中会显示所定义好的CSS规则，如图6-1所示。样式

4、表文件名CSS规则列表属性和属性值列表工具按钮栏6.1.2新建CSS规则新建一个HTML网页文档，打开“CSS样式”面板，单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框，如图所示。设置选择器类型设置CSS规则定义在文档内还是定义在外部CSS文件中设置CSS规则名称6.1.3在网页中应用CSS样式定义好CSS样式后，就可以在网页文档中套用这些样式了。套用样式表的方法主要有3种，下面分别进行介绍。1．在“属性”面板选择应用特定的样式2．利用【标签选择器】选择样式3．使用右键快捷菜单4．清除样式如果想清除网页中应用的某个样式，可以先选中对象，然后从右键快捷菜单中

5、选择“CSS样式”

6、“无”命令，即可清除原有的样式。5．查看正在应用的样式属性列表如果想查看网页中正在应用的CSS样式的属性情况，可以先将鼠标光标定位在某个应用CSS样式的位置，或者选中应用CSS样式的对象，然后在“CSS样式”面板中单击“现在”选项卡，即可显示出正在应用的CSS样式的属性列表情况，如图所示。6.2创建CSS创建CSS样式时，在“新建CSS规则”对话框中，设置不同的“选择器类型”可以创建不同类型的CSS样式。一般情况下，经常创建的CSS样式类型包括类选择符、标识选择符、重定义HTML标签、超级链接的CSS样式等。6.2.1类选择符CSS选择符有类选择

7、符和标识选择符两种。类选择符以英文句点（.）开头，而标识选择符以英文井号（#）开头。类选择符和标识选择符的不同之处在于，类选择符用在不止一个的元素上，而标识选择符则用在唯一的元素上。1．建立类选择符CSS样式2．CSS样式应用于文本3．CSS样式应用于图片4．理解类标识符的CSS代码在head标签中定义了一个名字为.myCSS_Class的样式，在body标签中应用了两次这个样式。一次应用是在第一个P标签中，另一次应用是在img标签中，应用类标识符样式时，都是通过class属性的设置实现的：class="myCSS_Class"专家点拨：在“代码视图”下，通过手动添

8、加代码，编辑某个HTML标签的class属性，就可以让这个HTML标签控制范围内的元素应用类选择符样式。6.2.2标识选择符标识选择符又可以称为ID选择符，它的名字以英文井号（#）开头，这种选择符样式只能用在一个元素上。1．建立标识选择符样式2．在单元格中应用样式3．理解标识选择符的CSS代码在head标签中定义了一个名字为#myCSS_ID的样式，在td标签中应用了这个样式。应用类标识符样式时，都是通过HTML标签的id属性的设置实现的：id="myCSS_ID"ID属性是HTML标签的一个重要属性，一个网页中的标签的ID属性值不能重复，因此在利用ID属性应用标识

9、选择符CSS样式时，只能应用于一个标签。如果应用于多个标签，就会造成标签的ID属性冲突。6.2.3用CSS重新定义HTML标签创建CSS样式时，在“新建CSS规则”对话框中，将“选择器类型”设置为“标签（重新定义特定标签的外观）”，可以实现用CSS重新定义HTML标签的外观的功能。下面以p标签为例讨论用CSS重新定义HTML标签的外观的方法。1．修改HTML标签