CSS样式

1　概述

1.1　样式

　　样式是style的中文译义。style还可译成：风格, 时尚, 文体, 风度, 类型, 字体。
　　样式是一组用于编辑的格式命令。应用它可以一次性设定图形、图像、文字等风格（外貌）。既能简化操作步骤，又能统一（网站、Word文档、图形、图像等）整体风格。
　　在Dreamweaver、Word、CorelDRAW、Photoshop等软件中，都有样式。
　　编辑网页时，使用样式一般可以实现下列功能：
　　⑴更加灵活地控制网页中文字的字体、颜色、大小、间距、风格及位置。
　　⑵灵活地设置一个文本块的行高、缩进，并可以为其加入三维效果的边框。
　　⑶可以方便地为网页中任何元素设置不同的背景颜色和背景图片。
　　⑷可以精确地控制网页中各元素的位置。
　　⑸可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。
　　⑹与脚本语言相结合，可以使网页中的元素产生各种动态效果。

1.2　层叠样式表

　　为了统一WWW网上的样式，万维网标准委员会W3C（World Wide Web consortium）制定了层叠样式表（Cascading Style Sheet，简称CSS）的标准。目前，有CSS1.0和CSS2.0两种版本
　　W3C公布的样式表有三种。
　　第一种，外部样式表：以CSS为扩展名的文件（又称为“超文本样式表”文件），它的作用范围可以是多张网页，或整个网站，甚至不同的网站。与网页链接后，才能应用。
　　第二种，嵌入式样式表：包含在网页内部的样式设置，它的作用范围仅限于嵌入的网页。
　　Dreamweaver MX编辑应用该类样式，均利用“CSS样式”面板。
　　提示：CSS面板上，样式名前有符号的是外部样式表（文件）中的类选择器样式；样式名前有符号的是嵌入式样式。
　　注意：外部样式表（文件）中的类选择器样式和嵌入式样式的取名规则均是，样式名之前应有一个圆点（.）.
　　第三种，内联式样式表：在HTML文档中，内联式样式表的格式化信息直接插入所应用的网页元素的HTML标签中，作为其HTML标签的属性参数。严格地说，内联样式表称不上表，仅仅是一条HTML标记。
　　三种样式表中，内联的层次最高，外部的层次最低。
　　提示：编制网页时，用户可以自定义类选择器（Class selector）和ID选择器（ID selector）等两种样式，但在Dreamweaver中，基本只用类选择器一种。

2　CSS样式的编辑方法

　　下面介绍外部样式表和嵌入式样式表的编辑方法。

2.1　“CSS样式”面板

　　“CSS样式”面板有两种视图，即，“应用样式”和“编辑样式”。切换两种视图，利用面板上部两个单选按钮。
　　“应用样式”视图，面板上只显示与当前网页链接的外部样式文件和嵌入样式表中的类选择器（样式）；ID选择器是不显示的。
　　“编辑样式”视图，面板上显示所有的样式（包括类和ID选择器，以及嵌入式样式）。

2.2　新建样式

　　第一步，单击“CSS样式”面板下方的“新建CSS样式”按钮。打开“新建CSS样式”对话框（右图）。
　　“名称”框，（选择）键入样式名。
　　提示：在类型不同时，该框的名字也不同。
　　而在2004版中，均为：“选择器”。
　　“类型”选项区中有三个单选项：
　　提示：在2004版中，名字为“选择器类型”。
　　⑴“创建自定义样式（class）”，创建类选择器。
　　⑵“重定义HTML标签”，修改HTML样式。
　　提示：指CSS标准中的HTML样式。类似Word中，由软件提供样式。
　　⑶“使用CSS选择器”，修改有关超链接的HTML标签。
　　提示：选择器除包含－a:link、a:visited（访问过）、a:hoer（鼠标经过）和a:active外，还可编辑ID选择器。
　　“定义在”单选按钮组，选择上方的按钮，则新建外部样式（文件）表的样式；选择“仅对该文档”，则新建嵌入式样式表。
　　提示：
　　⑴如果，在“定义在”右侧文本框中，选定“（新建样式表文件）”，则单击“确定”后，先新建一个外部样式表文件。
　　⑵如果，在“定义在”右侧文本框中，选定“仅对该文件”，则单击“确定”后，先新建一个嵌入式外部样式（表）。
　　第二步，“在.unnamed2的样式定义在（×××.CSS样式表中）”对话框上，设定该样式的各项属性。
　　提示：如果是嵌入样式表，则对话框的名为“
.unnamed2的CSS样式定义”。