第6章用CCS美化网页.ppt

第6章 用CCS美化网页,层叠样式表，简称为CSS，是英语Cascading Style Sheets的缩写。它是W3C定义和维护的标准，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。样式表可以使网页制作者的工作更加轻松和灵活，现在越来越多的网站采用了CSS技术。本章介绍CSS在网页设计中的应用技术，主要内容有：CSS基础创建CSSCSS基本应用链接外部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所示。,6.1.2 新建CSS规则,新建一个HTML网页文档，打开“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样式,2CSS样式应用于文本,3CSS样式应用于图片,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规则”对话框中，将“选择器类型”设置为“标签（重新定义特定标签的外观）”，可以实现用CSS重新定义HTML标签的外观的功能。下面以p标签为例讨论用CSS重新定义HTML标签的外观的方法。1修改HTML标签2设置p标签的属性,6.2.4 超级链接的CSS样式,网页中的文本上建立超级链接后，文字就会变成蓝色，同时还出现下划线，这是HTML默认的超级链接外观。如果想改变超级链接的默认外观，可以利用CSS样式进行处理。1创建超级链接,2用CSS样式重新定义超级链接的外观,专家点拨：在如图6-32所示的【新建CSS规则】对话框中，“选择器”列表框中共有4个选项。a:link 超级链接的正常状态，没有任何动作的时候。a:visited 访问过的超级链接状态。a:hover 光标指向超级链接的状态。a:active 选中超级链接状态。,6.3 CSS基本应用,前面学习了创建CSS样式的基本方法以及CSS样式的类型，本节将分门别类地对CSS样式提供的各类属性进行讨论，并通过一些实例讲解CSS在网页制作中的基本应用。,6.3.1 课堂实例用CSS格式化文本,1创建内部CSS规则2应用CSS规则,6.3.2 课堂实例用CSS控制表格,前面学习过在代码视图中设置表格以及单元格的各种属性，从代码提示工具弹出的那个冗长列表中就能知道，、这是一件相当繁琐复杂的事情，如果要为多个表格设置属性，就更加不胜其烦了。现在通过CSS可以非常方便地设置表格样式。下面将通过CSS制作边框为黑色细实线，表格内部边框为灰色虚线的表格。,1控制表格边框2左上角的单元格边框3右下角的单元格边框,6.3.3 课堂实例用CSS控制列表,前面已经学习过，在Dreamweaver的【属性】面板有【项目列表】和【编号列表】的图标按钮，能够产生自动列表功能。在默认状态下，它有两种形式，即圆点和阿拉伯数字。利用点或者数字制作一般的列表项目的时候，只要在【属性】面板中直接选择相应的设置按钮即可。但是，如果想利用镂空的圆形或者方形、漂亮图标来编排列表项目，就要利用CSS样式表来定义。1建立段落列表2用CSS自定义段落列表,6.3.4 课堂实例用CSS控制背景,背景可以用于很多页面元素，比如表格、表格的单元格、页面、层等，都可以有自己的背景图片，一般在【属性】检查器中也能进行背景的设置，但是如果使用CSS进行背景图片的设置，选项可以更加丰富，而且能够反复使用。1建立标识选择符2设置背景图片3使用标识选择符,6.3.5 课堂实例用CSS控制区块,CSS“区块”规则的设置内容包括段落内文字的对齐方式、首行缩进、字符间距等，运用于图片的“区块”规则还可以控制图片和文本的对齐方式。1创建CSS规则2应用CSS规则到文本3应用CSS规则到图片,6.3.6 课堂实例CSS样式滤镜的应用,Alpha：设置透明度。Blur：建立模糊效果。Chroma：把指定的颜色设置为透明。DropShadow：建立一种偏移的影像轮廓，即投射阴影。FlipH：水平反转。FlipV：垂直反转。Glow：为对象的外边界增加光效。Grayscale：降低图片的彩色度。Invert：将色彩、饱和度及亮度值完全反转建立底片效果。Light：在一个对象上进行灯投影。Mask：为一个对象建立透明膜。Shadow：建立一个对象的固体轮廓，即阴影效果。Wave：在X轴和Y轴方向用正弦波纹打乱图片。Xray：只显示对象的轮廓。,模糊滤镜效果,CSS提供了滤镜功能，在制作网页的时候，即使不用图片，通过CSS滤镜，只需简单的操作，也同样可以使网页中的文字、图片或者按钮鲜艳无比，充满生气，从而增强了自己网页的视觉效果。,6.4 链接外部CSS样式文件,前面在创建CSS样式时，都是直接将CSS样式嵌入到网页文档中，这属于网页文档的内部CSS样式应用。CSS样式不但可以直接嵌入在页面中，而且可以保存为独立的样式文件（扩展名为.css），需要引用样式文件中的CSS样式时，可以将其链接到网页文档中。多个网页文件可以共享一个.css样式文件，对.css样式文件的修改将会影响所有以链接方式调用这个.css样式文件的网页文件。,6.4.1 制作CSS样式文件,1从CSS模板新建CSS文件2修改CSS样式,6.4.2 通过链接使用外部样式表,1链接外部CSS文件2在网页中应用CSS样式,专家点拨：网页文档链接了外部CSS样式文件后，在代码视图中，可以观察到head标签中增加了一行代码：这就是链接外部CSS样式文件的代码。,本章习题上机练习,练习1 用CSS控制网页文字和段落,创建一个包含若干文字段落的网页文档，在这个网页文档中定义一个类选择符CSS样式，利用这个CSS样式控制网页中的文字和段落格式。,练习2 用CSS控制表格的背景、边框、尺寸,新建一个网页文档，在其中插入一个3行1列的表格。在这个网页文档中定义3个标识选择符CSS样式，分别用来控制3个单元格的背景、边框、尺寸等属性。,练习3 用外部CSS文件控制网页整体效果,首先创建一个CSS文件，定义若干CSS规则，接着创建一个网页效果，尽量让网页包括常用的一些元素（文字、图像、表格、导航条等），最后将外部CSS文件链接到这个网页上，并应用相应的CSS样式。,