《使用CSS样式表美化网页》由会员分享，可在线阅读，更多相关《使用CSS样式表美化网页（27页珍藏版）》请在金锄头文库上搜索。
1、使用CSS样式表美化网页Chapter 5认识CSS本章导读在网页设计中为了简化操作，常用CSS样式表来控制文本、边框、背景、列表、表格、Div等的样式，创建的CSS样式表可以反复调用，关于这一点在前面的网页对象和网页布局中已经接触到了。应用的CSS样式可以嵌入在当前文档的头部标签中，也可导出为外部样式表文件以应用到其他文档中。本章就将详细介绍与CSS样式相关的知识，包括设置CSS样式表属性、应用CSS样式表和管理CSS样式表等内容。第5章 使用CSS样式表美化网页创建样式表CSS样式表属性应用CSS样式表管理CSS样式表编辑样式表5.1 认识CSS在设计网页时，经常要对网页中文本的字体、颜色
2、、大小、间距、风格以及布局进行设置。对一个网站来讲，这些文本的格式基本都是相同的，此时便可通过CSS样式表来实现风格的统一。5.1.1 CSS简介CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。5.1.2 CSS语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，
3、如图5-1所示。选择器通常是需要改变样式的 HTML 元素，也成为派生选择器，它根据文档的上下文关系来确定某个标签的样式。通过合理地使用选择器，可以使 HTML 代码变得更加整洁。每条声明由一个属性和一个值组成。属性是设置的样式属性，每个属性有一个值，属性和值被冒号分开。图例中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。声明选择器声明值值属性属性图5-1 CSS语法结构示意图5.1.3 认识CSS样式表CSS使用“”来包围声明，属性使用“;”结束。在Dreamweaver CS6中CSS样式表主要包括类CSS样式、ID CSS样式、标签CSS样式及
4、复合内容CSS样式4种方式，它们的特点分别如下：l 类CSS样式：可以对任何标签进行样式定义，是较常用的定义方式。其显著特征是名称前有“.”，且需要手动对对象应用样式，类CSS样式可以同时应用于多个对象。如图5-2所示为定义的名为“top”的类CSS样式。l ID CSS样式：网页中大部分对象都具有ID属性，在同一个网页中，原则上ID名称不能相同。ID CSS样式是针对某个具有特定ID名称的对象进行样式定义，即ID CSS样式不能应用于多个对象，而是自动应用到具有该ID名称的对象上。如图5-3所示为定义的ID名称为“top”的ID CSS样式。ID名称类CSS名称 图5-2 类CCS样式 图5
5、-3 ID CSS样式l 标签CSS样式：可对特定标签进行样式定义，其显著特征是该类样式会自动被该标签的所有对象应用样式。如对“”标签进行标签CSS样式定义，则所有在“”与“”标签间的文本会自动应用该样式的效果，如图5-4所示。l 复合内容CSS样式：该样式对超级链接各状态的显示效果进行样式定义。其显著特征是该类样式将自动被所有创建了超级链接的对象应用，如图5-5所示。 图5-4 标签CSS样式 图5-5 复合内容CSS样式5.1.4 创建CSS样式表在Dreamweaver CS6中“ID CSS”及“复合内容CSS”样式统一称为“高级”CSS样式。在Dreamweaver CS6中可以创建
6、一个 CSS 规则来自动完成 HTML 标签的格式设置或者 class 或 ID 属性所标识的文本范围的格式设置。创建CSS样式表的途径很多，其中最常用的是通过“CSS样式”面板完成，下面介绍“CSS样式”面板的相关知识以及通过“CSS样式”面板创建CSS样式表的方法。1 认识“CSS样式”面板按“Shift+F11”键或选择【窗口】/【CSS样式】命令，可以打开“CSS样式”面板，如图5-6所示。CSS样式属性定义的CSS样式名称图5-6 “CSS样式”面板2 CSS样式表的保存位置CSS样式表可以放置在网页内部，也可以作为单独的文件保存在网页外部。若单个页面需要这个样式，则保存到网页内部；
7、若多个页面需要相同的样式，则保存到网页外部。（1）保存到网页内部保存在网页内部的CSS样式表代码会放置在网页头部，即“”标签中，或是放置在某个具体对象的内容中，如图5-7所示的“style=background:#CCC”CSS样式代码即放置在ID值为“content”的“Div”标签之中。（2）保存到网页外部外部CSS样式表的扩展名为.css。若要使用扩展名为.css的CSS样式表时，需要先将该文件链接到网页中，如图5-8所示。链接CSS样式表CSS样式 图5-7 保存到网页内部 图5-8 保存到网页外部3 创建CSS样式表在“文档”窗口中选择文本，在“CSS 属性”面板的“目标规则”下拉列
8、表中选择“新建 CSS 规则”选项，然后单击按钮，或者选择一个选项（例如单击“粗体”按钮）也可以创建一个新规则。在Dreamweaver CS6中创建CSS样式表的方法基本相同，只需注意选择正确的CSS样式类型以及CSS样式表的保存位置。实例5-1 用CSS美化文字下面将使用CSS美化文字为例进行讲解CSS样式表的创建方法，其操作步骤如下：光盘效果第5章css.html1新建一个空白HTML文档，在“CSS样式”面板的中单击“新建CCS规则”按钮，打开“新建CSS规则”对话框，在“选择器类型”下拉列表框中选择“ID”选项，然后在“选择器名称”文本框中输入名称“container”，如图5-9所
9、示。在图5-9的“新建CSS规则”对话框中的“规则定义”下拉列表框中选择为“新建样式表文件”选项，则会将CSS规则以.css文件的方式保存。之后在任何网页文档中都可以链接折个外部CSS文件。2单击按钮关闭对话框，在打开的对话框中定义属性，如图5-10所示。设置选择044单击03输入02选择01 图5-9 创建ID CSS样式 图5-10 定义CSS样式属性3单击按钮关闭对话框，在“CSS样式”面板中出现定义的CSS样式，如图5-11所示，在“代码”视图的标签中可以查看定义的代码，如图5-12所示。 图5-11 “CSS样式”面板 图5-12 定义的CSS代码4在“插入”面板中单击“插入Div标
10、签”按钮，在打开的“插入Div标签”对话框中的“ID”下列表框中选择“container”选项，如图5-13所示，在Div标签中输入文本，效果如图5-14所示。 图5-13 选择ID名称 图5-14 添加文本5.2 CSS样式表属性在CSS样式定义对话框中，可以对“类型”、“背景”、“区块”、“方框”、“边框”、“列表”、“定位”、“扩展”和“过渡”等9种类型的属性进行设置，下面介绍各属性具体的设置方法。5.2.1 设置类型属性图5-15 设置“类型”在“CSS规则定义”对话框的“分类”列表框中选择“类型”选项，在窗口右侧可以对文本的样式进行设置，如图5-15所示。l Font-family：
11、为样式设置字体系列（或多组字体系列）。l Font-size：定义文本大小，常选择数字和度量单位选择特定的大小。l Font-style：指定“正常”、“斜体”或“偏斜体”作为字体样式。l Line-height：设置文本所在行的高度。选择“正常”自动计算字体大小的行高，或输入一个确切的值并选择一种度量单位。 l Text-decoration：向文本中添加下划线、上划线或删除线，或使文本闪烁。l Font-weight：对字体应用特定或相对的粗体量。“400”为正常、“700”为粗体。l Font-variant：设置文本的小型大写字母变体。l Text-transform：将所选内容中的每个单词的首字母或全部设置为大写或小写。l Color：设置文本颜色。5.2.2 设置背景属性图5-16 设置“背景”在“CSS规则定义”对话框的“分类”列表框中选择“背景”选项，在窗口右侧可以对背景样式进行设置，如图5-16所示。l Background-color：设置元素的背景颜色。l Background-image：设置元素的背景图像。l Background repeat：确定是否以及如何重复背景图像。l Background attachment：确定背景图像是固定在其原始位置还是随内容一起滚
