层叠样式表

关于层叠样式表

层叠样式表 (CSS)  是一组格式设置规则，用于控制 Web  页内容的外观。通过使用 CSS  样式设置页面的格式，可将页面的内容与表示形式分离开。页面内容 （即 HTML  代码）存放在 HTML  文件中，而用于定义代码表示形式的 CSS  规则存放在另一个文件 （外部样式表）或 HTML  文档的另一部分 （通常为文件头部分）中。将内容与表示形式分离可使得从一个位置集中维护

站点的外观变得更加容易，因为进行更改时无需对每个页面上的每个属性都进行更新。将内容与表示形式分离还会可以得到更加简练的 HTML  代码，这样将缩短浏览器加载时间，并为存在访问障碍的人员 （例如，使用屏幕阅读器的人员）简化导航过程。

使用 CSS  可以非常灵活并更好地控制页面的确切外观。使用 CSS  可以控制许多文本属性，包括特定字体和字大小；粗体、斜体、下划线和文本阴影；文本颜色和背景颜色；链接颜色和链接下划线等。通过使用 CSS  控制字体，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。

除设置文本格式外，还可以使用 CSS  控制 Web  页面中块级别元素的格式和定位。块级元素是一段独立的内容，在 HTML  中通常由一个新行分隔，并在视觉上设置为块的格式。例如， h1 标签、 p 标签和 div 标签都在 Web  页面上产生块级元素。可以对块级元素执行以下操作：为它们设置边距和边框、将它们放置在特定位置、向它们添加背景颜色、在它们周围设置浮动文本等。对块级元素进行操作的方法实际上就是使用 CSS  进行页面布局设置的方法。

 CSS  规则

CSS  格式设置规则由两部分组成：选择器和声明 （大多数情况下为包含多个声明的代码块）。选择器是标识已设置格式元素的术语（如 p 、 h1 、类名称或 ID ），而声明块则用于定义样式属性。在下面的示例中， h1 是选择器，介于大括号 ( {} )  之间的所有

内容都是声明块：

h1 {

font-size: 16 pixels;

font-family: Helvetica;

font-weight:bold;

}

各个声明由两部分组成：属性 （如 font-family ）和值 （如 Helvetica ）。在前面的 CSS  规则中，已经为 h1 标签创建了特定样式：所有链接到此样式的 h1 标签的文本将为 16  像素大小的 Helvetica  粗体。

样式 （由一个规则或一组规则决定）存放在与要设置格式的实际文本分离的位置 （通常在外部样式表或 HTML  文档的文件头部分中）。因此，可以将 h1 标签的某个规则一次应用于许多标签 （如果在外部样式表中，则可以将此规则一次应用于多个不同页面上的许多标签）。通过这种方式， CSS  可提供非常便利的更新功能。若在一个位置更新 CSS  规则，使用已定义样式的所有元素的格式设置将自动更新为新样式。

在 Dreamweaver  中可以定义以下样式类型：

• 类样式 可让您将样式属性应用于页面上的任何元素。

• HTML  标签样式 重新定义特定标签（如 h1 ）的格式。创建或更改 h1 标签的 CSS  样式时，所有用 h1 标签设置了格式的文本都会立即更新。

• 高级样式 重新定义特定元素组合的格式，或其它 CSS  允许的选择器表单的格式 （例如，每当 h2 标题出现在表格单元格内时，就会应用选择器 td h2 ）。高级样式还可以重定义包含特定 id 属性的标签的格式（例如，由 #myStyle 定义的样式可以应用于所有包含属性 / 值对 id="myStyle" 的标签）。

CSS  规则可以位于以下位置：

外部 CSS  样式表 存储在一个单独的外部 CSS (.css)  文件 （而非 HTML  文件）中的若干组 CSS  规则。此文件利用文档头部分的链接或 @import  规则链接到网站中的一个或多个页面。

内部 （或嵌入式） CSS  样式表 若干组包括在 HTML  文档头部分的 style 标签中的 CSS  规则。

内联样式 在整个 HTML  文档中的特定标签实例内定义。（不建议使用内联样式。）

Dreamweaver  可识别现有文档中定义的样式（只要这些样式符合 CSS  样式准则）。 Dreamweaver  还会在 “ 设计 ” 视图中直接呈现大多数已应用的样式。（不过，在浏览器窗口中预览文档将使您能够获得最准确的页面 “ 动态 ” 呈现。） 有些 CSS  样式在 Microsoft Internet Explorer 、 Netscape 、 Opera 、 Apple Safari  或其它浏览器中呈现的外观不相同，而有些 CSS  样式目前不受任何浏览器支持。

层叠样式

术语层叠 是指浏览器最终为网页上的特定元素显示样式的方式。三种不同的源决定了网页上显示的样式：由页面的作者创建的样式表、用户的自定义样式选择 （如果有）和浏览器本身的默认样式。以上主题说明作为网页及附加到该页的样式表的作者来创建网页的样式。但是，浏览器也具有它们自己的默认样式表来指定网页的呈现方式，除此之外，用户还可以通过选择来调整

网页的显示对浏览器进行自定义。网页的最终外观是由所有这三种源的规则共同作用 （或者 “ 层叠 ” ）的结果，最后以最佳方式呈现网页。

一个常见标签（段落标签，即 <p> 标签）可说明此概念。默认情况下，浏览器自带有为段落文本（即位于 HTML  代码中 <p>

标签之间的文本）定义字体和字体大小的样式表。例如在 Internet Explorer  中，包括段落文本在内的所有正文文本都默认显示为 Times New Roman  中等字体。

但是作为网页的作者，您可以为段落字体和字体大小创建能覆盖浏览器默认样式的样式表。例如，您可以在样式表中创建以下

规则：

p {

font-family: Arial;

font-size: small;

}

当用户加载页面时，您作为作者创建的段落字体和字体大小设置将覆盖浏览器的默认段落文本设置。

用户可以选择以最佳方式自定义浏览器显示，以方便他们自己使用。例如在 Internet Explorer  中，如果用户认为页面字体太小，则他们可以选择 “ 查看 ”>“ 文字大小 ”>“ 最大 ” 将页面字体扩展到更易辨认的大小。最终 （至少在这种情况下），用户的

选择将覆盖段落字体大小的浏览器默认样式和网页作者创建的段落样式。

继承性是层叠的另一个重要部分。网页上大多数元素的属性都是继承而来。例如，段落标签从 body  标签中继承某些属性，项目列表标签从段落标签中继承某些属性等等。因此，如果在样式表中创建以下规则：

body {

font-family: Arial;

font-style: italic;

}

网页上的所有段落文本 （以及从段落标签继承属性的文本）都会是 Arial  斜体，因为段落标签从 body  标签中继承了这些属性。但是，您可以使您的规则更具体，并创建一些能覆盖标准继承公式的样式。例如，如果在样式表中创建以下规则：

body {

font-family: Arial;

font-style: italic;

}

p {

font-family: Courier;

font-style: normal;

}

所有正文文本将是 Arial  斜体，但段落 （及其继承的）文本除外，它们将显示为 Courier  常规 （非斜体）。从技术上来说，段落标签首先继承为 body  标签设置的属性，但是随后将忽略这些属性，因为它具有本身已定义的属性。换句话说，虽然页面元素通常从上级继承属性，但是直接将属性应用于标签时始终会导致覆盖标准继承公式。

下面显示的 h1 规则使用了普通的 CSS  语法。请注意，已经为 font-variant 、 font-stretch 、 font-size-adjust 和 font-style 属性分配了默认值。

h1 {

font-weight: bold;

font-size: 16pt;

line-height: 18pt;

font-family: Arial;

font-variant: normal;

font-style: normal;

font-stretch: normal;

font-size-adjust: none

}

下面用一个速记属性重写这一规则，可能的形式为：

h1 { font: bold 16pt/18pt Arial }

使用速记符号编写时，会自动将省略的值指定为它们的默认值。因此，上述速记示例省略了 font-variant 、 font-style 、 font-stretch 和 font-size-adjust 标签。

如果您使用 CSS  语法的速记形式和普通形式在多个位置定义了样式 （如在 HTML  页面中嵌入样式并从外部样式表中导入样式），则一定要注意，速记规则中省略的属性可能会覆盖 （或层叠）其它规则中明确设置的属性。

因此， Dreamweaver  默认情况下使用 CSS  符号的普通形式。这样可以防止能够覆盖普通规则的速记规则所引起的潜在问题。

在 Dreamweaver  中打开使用速记 CSS  符号编写代码的网页时，请注意 Dreamweaver  将会使用普通形式创建任何新的 CSS规则。通过更改 “ 首选参数 ” 对话框 （在 Windows  中选择 “ 编辑 ”>“ 首选参数 ” ；在 Macintosh  中选择“Dreamweaver”>“ 首选参数 ” ）中 “CSS  样式 ” 类别中的 CSS  编辑首选参数，您可以指定 Dreamweaver  创建和编辑 CSS  规则的方式。

当前模式下的 CSS  样式面板

在 “ 正在 ” 模式下， “CSS  样式 ” 面板将显示三个面板： “ 所选内容的摘要 ” 窗格，其中显示文档中当前所选内容的 CSS  属性； “ 规则 ” 窗格，其中显示所选属性的位置 （或所选标签的一组层叠的规则，具体取决于您的选择）；以及 “ 属性 ” 窗格，它

允许您编辑应用于所选内容的规则的 CSS  属性。

可以通过拖动窗格之间的边框调整任意窗格的大小，通过拖动分隔线调整列的大小。

“ 所选内容的摘要 ” 窗格显示活动文档中当前所选项目的 CSS  属性的摘要以及它们的值。该摘要显示直接应用于所选内容的所有规则的属性。仅显示已设置的属性。

例如，下列规则创建一个类样式和一个标签 （在此例中为段落）样式：

.foo{

color: green;

font-family: 'Arial';

}

p{

font-family: 'serif';

font-size: 12px;

}

当您在 “ 文档 ” 窗口中选择带有类样式 .foo 的段落文本时， “ 所选内容的摘要 ” 窗格将同时显示两个规则的相关属性，因为两个规则都应用于所选内容。在这种情况下， “ 所选内容的摘要 ” 窗格将列出以下属性

font-size: 12px

font-family: 'Arial'

color: green

“ 所选内容的摘要 ” 窗格按逐级细化的顺序排列属性。在上面的示例中，标签样式定义字体大小，类样式定义字体 (font-family)  和颜色。（类样式定义的字体 (font-family)  属性覆盖标签样式定义的字体 (font-family)  属性，因为类选择器比标签

选择器更为具体。有关 CSS  具体说明的更多信息，请访问 www.w3.org/TR/CSS2/cascade.html 。）

“ 规则 ” 窗格根据您的选择显示两个不同视图： “ 关于 ” 视图或 “ 规则 ” 视图。在 “ 关于 ” 视图 （默认视图）中，此窗格显示定义所选 CSS  属性的规则的名称，以及包含该规则的文件的名称。在 “ 规则 ” 视图中，此窗格显示直接或间接应用于当前所选

内容的所有规则的层叠 （或层次结构）。（直接应用规则的标签显示在右列。） 您可以通过单击 “ 规则 ” 窗格右上角的 “ 显示信息 ” 和 “ 显示层叠 ” 按钮在两种视图之间切换。

所有模式下的 CSS  样式面板

在 “ 全部 ” 模式下， “CSS  样式 ” 面板显示两个窗格： “ 所有规则 ” 窗格 （顶部）和 “ 属性 ” 窗格 （底部）。 “ 所有规则 ” 窗格显示当前文档中定义的规则以及附加到当前文档样式表中定义的所有规则的列表。使用 “ 属性 ” 窗格可以编辑 “ 所有规则 ”窗格中任何所选规则的 CSS  属性。

创建新的 CSS  规则

您可以创建一个 CSS  规则来自动完成 HTML  标签的格式设置或者 class 或 ID 属性所标识的文本范围的格式设置。

1 将插入点放在文档中，然后执行以下操作之一打开 “ 新建 CSS  规则 ” 对话框：

• 选择 “ 格式 ”>“CSS  样式 ”>“ 新建 ” 。

• 在 “CSS  样式 ” 面板 （ “ 窗口 ”>“CSS  样式 ” ）中，单击面板右下侧的 “ 新建 CSS  规则 ”(+)  按钮。

• 在 “ 文档 ” 窗口中选择文本，从 CSS  属性检查器（ “ 窗口 ”>“ 属性 ” ）的 “ 目标规则 ” 弹出菜单中选择 “ 新建 CSS  规则 ” ，然后单击 “ 编辑规则 ” 按钮，或者从属性检查器中选择一个选项 （例如单击 “ 粗体 ” 按钮）以启动一个新规则。

2 在 “ 新建 CSS  规则 ” 对话框中，指定要创建的 CSS  规则的选择器类型：

• 若要创建一个可作为 class 属性应用于任何 HTML  元素的自定义样式，请从 “ 选择器类型 ” 弹出菜单中选择 “ 类 ” 选项，然后在 “ 选择器名称 ” 文本框中输入样式的名称。

注： 类名称必须以句点开头，并且可以包含任何字母和数字组合 （例如， .myhead1 ）。如果您没有输入开头的句点，

Dreamweaver  将自动输入它。

• 若要定义包含特定 ID 属性的标签的格式，请从 “ 选择器类型 ” 弹出菜单中选择 “ID” 选项，然后在 “ 选择器名称 ” 文本框中输入唯一 ID （例如 containerDIV ）。

注： ID  必须以井号 (#)  开头，并且可以包含任何字母和数字组合 （例如， #myID1 ）。如果您没有输入开头的井号，Dreamweaver  将自动输入它。

• 若要重新定义特定 HTML  标签的默认格式，请从 “ 选择器类型 ” 弹出菜单中选择 “ 标签 ” 选项，然后在 “ 选择器名称 ” 文本框中输入 HTML  标签或从弹出菜单中选择一个标签。

• 若要定义同时影响两个或多个标签、类或 ID  的复合规则，请选择 “ 复合内容 ” 选项并输入用于复合规则的选择器。例如，如果您输入 div p ，则 div  标签内的所有 p  元素都将受此规则影响。说明文本区域准确说明您添加或删除选择器时该规则将影响哪些元素。

3 选择要定义规则的位置，然后单击 “ 确定 ” ：

• 若要将规则放置到已附加到文档的样式表中，请选择相应的样式表。

• 若要创建外部样式表，请选择 “ 新建样式表文件 ” 。

• 若要在当前文档中嵌入样式，请选择 “ 仅对该文档 ” 。

4 在 “CSS  规则定义 ” 对话框中，选择要为新的 CSS  规则设置的样式选项。有关详细信息，请参阅下一节。

5 完成对样式属性的设置后，单击 “ 确定 ” 。

注： 在没有设置样式选项的情况下单击 “ 确定 ” 将产生一个新的空白规则。

定义 CSS  类型属性

使用 “CSS  规则定义 ” 对话框中的 “ 类型 ” 类别可以定义 CSS  样式的基本字体和类型设置。

1 如果尚未打开 “CSS  样式 ” 面板，请打开该面板 (Shift+F11) 。

2 双击 “CSS  样式 ” 面板顶部窗格中的现有规则或属性。

3 在 “CSS  规则定义 ” 对话框中，选择 “ 类型 ” ，然后设置样式属性。

下列任何属性若对于样式并不重要，可将其保留为空：

Font-family  为样式设置字体系列 （或多组字体系列）。浏览器使用用户系统上安装的字体系列中的第一种字体显示文本。为了与 Internet Explorer 3.0  兼容，首先列出 Windows  字体。两种浏览器都支持字体属性。

Font-size  定义文本大小。可以通过选择数字和度量单位选择特定的大小，也可以选择相对大小。使用像素作为单位可以有效地防止浏览器扭曲文本。两种浏览器都支持大小属性。

Font-style  指定 “ 正常 ” 、 “ 斜体 ” 或 “ 偏斜体 ” 作为字体样式。默认设置是 “ 正常 ” 。两种浏览器都支持样式属性。

Line-height  设置文本所在行的高度。习惯上将该设置称为行高。选择 “ 正常 ” 自动计算字体大小的行高，或输入一个确切的值并选择一种度量单位。两种浏览器都支持行高属性。

Text-decoration  向文本中添加下划线、上划线或删除线，或使文本闪烁。常规文本的默认设置是 “ 无 ” 。链接的默认设置是“ 下划线 ” 。将链接设置设为无时，可以通过定义一个特殊的类去除链接中的下划线。两种浏览器都支持修饰属性。

Font-weight  对字体应用特定或相对的粗体量。 “ 正常 ” 等于 400 ； “ 粗体 ” 等于 700 。两种浏览器都支持粗细属性。

Font-variant  设置文本的小型大写字母变体。 Dreamweaver  不在 “ 文档 ” 窗口中显示此属性。 Internet Explorer  支持变体属性，但 Navigator  不支持。

Text-transform  将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。两种浏览器都支持大小写属性。

颜色 设置文本颜色。两种浏览器都支持颜色属性。

4 设置完这些选项后，在面板左侧选择另一个 CSS  类别以设置其它的样式属性，或单击 “ 确定 ” 

定义 CSS  样式区块属性

使用 “CSS  规则定义 ” 对话框的 “ 区块 ” 类别可以定义标签和属性的间距和对齐设置。

1 如果尚未打开 “CSS  样式 ” 面板，请打开该面板 (Shift+F11) 。

2 双击 “CSS  样式 ” 面板顶部窗格中的现有规则或属性。

3 在 “CSS  规则定义 ” 对话框中，选择 “ 区块 ” ，然后设置以下任意样式属性。（如果某个属性对于样式并不重要，可将其保留为空。）

单词间距 设置字词的间距。若要设置特定的值，请在弹出菜单中选择 “ 值 ” ，然后输入一个数值。在第二个弹出菜单中，选择

度量单位 （例如像素、点）。

注： 可以指定负值，但显示方式取决于浏览器。 Dreamweaver  不在 “ 文档 ” 窗口中显示此属性。

字母间距 增加或减小字母或字符的间距。若要减小字符间距，请指定一个负值 （例如 -4 ）。字母间距设置覆盖对齐的文本设置。 Internet Explorr 4  和更高版本以及 Netscape Navigator 6  支持 “ 字母间距 ” 属性。

垂直对齐 指定应用此属性的元素的垂直对齐方式。 Dreamweaver  仅在将该属性应用于 <img> 标签时，才在 “ 文档 ” 窗口中显示它。

文本对齐 设置文本在元素内的对齐方式。两种浏览器都支持 “ 文本对齐 ” 属性。

文字缩进 指定第一行文本缩进的程度。可以使用负值创建凸出，但显示方式取决于浏览器。仅当相应的标签应用于块级元素时， Dreamweaver  才会在 “ 文档 ” 窗口中显示此属性。两种浏览器都支持 “ 文字缩进 ” 属性。

空格 确定如何处理元素中的空格。从三个选项中进行选择： “ 正常 ” ，收缩空白； “ 保留 ” ，其处理方式与文本被括在 pre 标签中一样 （即保留所有空白，包括空格、制表符和回车）； “ 不换行 ” ，指定仅当遇到 br 标签时文本才换行。 Dreamweaver  不在 “ 文档 ” 窗口中显示此属性

CSS  布局的基本构造块是 div  标签，它是一个 HTML  标签，在大多数情况下用作文本、图像或其它页面元素的容器。下例显示了一个 HTML  页面，其中包含三个单独的 div  标签：一个大的 “ 容器 ” 标签和该容器标签内的另外两个标签 （侧栏标签和主内容标签）。

A.  容器 div B.  侧栏 div C.  主要内容 div

下面是 HTML  中全部三个 div  标签的代码：

<!--container div tag-->

<div id="container">

<!--sidebar div tag-->

<div id="sidebar">

<h3>Sidebar Content</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<!--mainContent div tag-->

<div id="mainContent">

<h1> Main Content </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus

rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus

venenatis, tristique in, vulputate at, odio.</p>

<h2>H2 level heading </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus

rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

</div>

在上例中，任何 div  标签都没有附加 “ 式样 ” 。如果未定义 CSS  规则，每个 div  标签及其内容将位于页面上的默认位置。不过，如果每个 div  标签都有唯一的 ID （如上例所示），那么您就可以使用这些 ID  来创建在应用时更改 div  标签的样式和位置的 CSS  规则。

主要内容 div,  左边距 250  像素

A.  20  像素左侧填充 B.  20  像素右侧填充 C.  20  像素下方填充

完整代码如下所示：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

</style>

</head>

<body>

<!--container div tag-->

<div id="container">

<!--sidebar div tag-->

<div id="sidebar">

<h3>Sidebar Content</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<!--mainContent div tag-->

<div id="mainContent">

<h1> Main Content </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus

rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus

venenatis, tristique in, vulputate at, odio.</p>

<h2>H2 level heading </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus

rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

</div>

</body>