”、“”和“

”等。property属性则是选择符指定的标记所包含的属性。value指定了属性的值。如果定义选择符的多个属性，则属性和属性值为一组，组与组之间用分号（;）隔开。

下面就定义了一条样式规则，该样式规则是为块标记

提供样式，color为指定文字颜色的属性，red为属性值，表示标记

中的文字使用红色。

div {color:red}

技巧

为了便于阅读和维护，建议读者在编写样式

时使用分行的格式。

2．类选择符定义样式

除了可以为多个标记指定相同样式外，还可以使用类选择符来定义一个样式，这种方法同样可以使用到不同的标记上。定义类选择符的方法是在自定义样式的名称前面加一个句点（.）。例如，如下代码使用类选择符定义了一个名为“.Title”的 样式。

.Title {

font-family: "宋体";

font-size: 16px;

color: #00509F;

font-weight: bold;

}

样式定义了使用的字体、大小、颜色以及加粗。要使用类选择符定义的样式，只需将标记的class属性指定为样式名称。例如，要在

、和

标记里使用前面的.Title样式可以使用如下代码：

天门中断楚江开，碧水

东流至此回

天门中断楚江开，

碧水东流至此回

天门中断楚江开，碧

水东流至此回

提示

使用类选择符可以很方便地在任意元素上

套用预先定义好的类样式，从而实现相同的

样式外观。

3．ID选择符定义样式

在页面中，元素的ID属性指定了某个唯一元素的标识，同样ID选择符可以用来对某个特定元素定义独特的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。例如，在段落

中通过使用ID属性来引用样式“Title”：

天门中断楚江开，碧水东流

至此回

与类选择符不同，使用ID选择符定义样式时，须在ID名称前加上一个“#”号。例如，对于上述语句，使用ID选择符定义样式代码如下所示：

#Title {

font-family: "宋体";

font-size: 12px;

font-weight: bold;

color: #FFFFFF;

background-color:#00509F;

}

4．伪类选择符

伪类选择符可以看作为一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符。伪类选择符定义的样式最常应用在定位链 接标记（）上，即链接的伪类选择符。代码如下所示：

a:link{color:#FF0000; text-

decoration:none}

a:visited{color:#00FF00; text-

decoration:none}

a:hover{color:#0000FF; text-

decoration:underline}

a:active{color:#FF00FF; text-

decoration:underline}

上面的样式表示该链接未访问时颜色为红色且无下划线，访问后是绿色且无下划线，激活链接时为蓝色且有下划线，鼠标放在链接上时为紫色且有下划线。

5．混合方式

严格地讲，这不算是样式定义的新方式。在CSS中任意一种定义方式都可以进行组合。类选择符可以和ID选择符组合使用，伪类选择符也可以和类选择符组合使用，在同一页面中完成几组不同的链接效果。例如，如下代码的一条样式定义了4个名称：

.Title ,div#t,h1,#HyClass span{

font-family: "宋体";

font-size: 16px;

color: #00509F;

font-weight: bold;

}

要引用这条样式有多种方法，可以使用类选择符引用.Title，标准选择符引用h1，ID选择符引用“div#t”或者“HyClass span”等。如下所示的这几种应用方法，由于定义的属性相同，因此运行结果也相同。代码如下所示：

两岸青山相对出，孤帆

一片日边来

两岸青山相对出，孤帆一片日

边来

两岸青山相对出，孤帆一片日边来

两岸青山相对出，孤帆一片日边来

6．样式表注释

可以在CSS中插入注释来说明代码的意思，注释可以提高代码的可读性。在浏览器中注释不显示。CSS注释以"/*" 开头，以"*/" 结尾，代码如下所示：

txt{

text-align: center; /* 文本居中排列 */

color: red; /* 文字为红色 */

font-family:"华文行楷" /* 字体为华文行

楷*/

}

1.2.3 CSS与HTML结合

在CSS中可以使用4种不同的方法，将CSS规则应用到网页中。方法包括：直接定义元素的style属性、定义内部样式表、嵌入外部样式表和链接外部样式表。上述4种方法将样式表分为内部样式表和外部样式表。

1．链入外部样式表

链入外部样式表是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过链接标记链接到页面中，而且该链接语句必须放在页面的

标记区，代码如下所示：

标记的属性rel指定链接到样式表，type表示样式表类型为CSS样式表，href指定了CSS样式表所在位置，这里使用的是相对路径。如果HTML文档与CSS样式表没有在同一路径下，则需要指定样式表的绝对路径或者引用位置。

2．内部样式表

内部样式表是指将CSS样式表直接在HTML页面代码的

标记区定义，样式表由“”结束。代码如下所示：

body{background:#FFF;text-align:

center;}

div,ul,li,dl,dt,dd,table,td,input

{font:12px/20px "宋体";color:#333;}

3．导入外部样式表

导入外部样式表是指在内部样式表的

@import "skin.css"

示例中，使用@import导入了样式表skin.css。需要注意的是，使用时导入外部样式表的路径。导入方法与链入外部样式表的方法一样。导入外部样式表相当于将样式表导入到内部样式表中，其输入方式更有优势。

注意

导入外部样式表必须在样式表的开始部分，

其他内部样式表之上。

4．内嵌样式表

内嵌样式表是混合在XHTML标记里使用。通过这种方法，可以很简单地对某个元素单独定义样式。使用内嵌样式表的方法是直接在XHTML标记中使用style属性，该属性的内容就是CSS的属性和值，代码如下所示：

使用CSS内

嵌样式

提示

内嵌样式表只能对

HTML

±ê¼Ç¶¨ÒåÑùʽ£¬¶ø

²»ÄÜʹÓÃÀàÑ¡Ôñ·û»òÕß

ID

Ñ¡Ôñ·û¶¨ÒåÑùʽ¡£

上述介绍的4种引用CSS样式表的方法可以混合使用，但根据优先权原则，方法中引入的样式表的样式应用也不同。其中，内嵌样式表的优先权最高，接着是链入外部样式表、内部样式表和导入外部样式表。

注意

Dreamweaver

可识别现有文档中定义的样式

（只要这些样式符合

CSS

样式准则）。

Dreamweaver

还会在“设计”视图中直接呈

现大多数已应用的样式。（不过，在浏览器

窗口中预览文档将使用户能够获得最准确

的页面“动态”呈现。）有些

CSS

样式在

Microsoft Internet Explorer

、

Netscape

、

Opera

、

Apple Safari

或其他浏览器中呈现的外观不

相同，而有些

CSS

样式目前不受任何浏览器

支持。

1.2.4 创建CSS文件

在Dreamweaver CS4中，可以通过CSS样式面板学习、了解和使用以可视化方式应用于页面的CSS样式，还可以更加轻松、更有效率地使用CSS样式。在【CSS样式】面板中可以更方便地看到应用于具体元素的样式层叠，从而能够轻松地确定在何处定义了属性。

1．CSS样式面板

在Dreamweaver CS4中，可以在【属性】面板中单击【CSS面板】按钮，或者从折叠面板组中单击【CSS样式】按钮，打开【CSS样式】面板，如图1-17所示。

图1-17 【CSS样式】面板

技巧

还可以执行【窗口】｜【

CSS

Ñùʽ¡¿ÃüÁî

»òÕß°´

Shift+F11

×éºÏ¼ü´ò¿ª¡¾

CSS

Ñùʽ

¡¿

Ãæ°å¡£

使用【CSS样式】面板可以跟踪影响当前所选页面元素的CSS规则和属性（【正在】模式），也可以跟踪文档可用的所有规则和属性（【全部】模式）。使用面板顶部的切换按钮可以在两种模式之间切换。使用【CSS样式】面板还可以在【全部】和【正在】模式下修改CSS属性。

· 【正在】模式

在这种模式下，【CSS样式】面板将显示3个窗格：【所选内容的摘要】窗格、【规则】窗格和【属性】窗格。

· 【全部】模式

在这种模式下，【CSS样式】面板显示两个窗格：【所有规则】窗格（顶部）和【属性】窗格 （底部）。

提示

【所选内容的摘要】窗格显示文档中当前所

选内容的

CSS

ÊôÐÔ£»¡¾¹æÔò¡¿´°¸ñÏÔʾËùÑ¡

ÊôÐÔµÄλÖã»ÔÚ¡¾ÊôÐÔ¡¿´°¸ñÖÐÔÊÐíÓû§±à

¼Ó¦ÓÃÓÚËùÑ¡ÄÚÈݵĹæÔòµÄ

CSS

ÊôÐÔ¡£¡¾Ëù

ÓйæÔò¡¿´°¸ñÏÔʾµ±Ç°ÎĵµÖж¨ÒåµÄ¹æÔòÒÔ

¼°¸½¼Óµ½µ±Ç°ÎĵµµÄÑùʽ±íÖж¨ÒåµÄËùÓÐ

¹æÔòµÄÁÐ±í¡£Ê¹Óá¾ÊôÐÔ¡¿´°¸ñ¿ÉÒԱ༡¾Ëù

ÓйæÔò¡¿´°¸ñÖÐÈκÎËùÑ¡¹æÔòµÄ

CSS

ÊôÐÔ¡£

无论在哪种模式下编辑CSS样式，在【CSS样式】面板的底部总是会显示7个常用操作按钮，它们的作用如表1-1所示。

提示

删除

CSS

¹æÔò²»»áɾ³ýÓɸÃÑùʽÒýÓõÄÀà

»ò

ID

ÊôÐÔ£¬¸Ã°´Å¥»¹¿ÉÒÔ·ÖÀ루»ò¡°È¡Ïû

Á´½Ó¡±£©¸½¼ÓµÄ

CSS

Ñùʽ±í¡£

2．新建CSS规则

在网页中新建CSS规则的方法很多，而且非常简单。其中最常用的是，用户在网页中对文本进行简单的属性设置时，Dreamweaver CS4会自动弹出【新建CSS规则】对话框，在这里定义一个CSS规则，再设置CSS样式，如图1-18所示。

表1-1 【CSS样式】面板常用操作按钮

按 钮

说 明

类别视图，将支持的CSS属性分为8个类别：字体、背景、区块、边框、方框、列表、定位和扩展名。每个类别的属性都包含在一个列表中，可以单击类别名称旁边的加号(+)按钮展开或折叠它

列表视图，会按字母顺序显示支持的所有CSS属性

设置属性视图，仅显示那些已进行设置的属性。“设置属性”视图为默认视图

附加样式表，打开“链接外部样式表”对话框，选择要链接到或导入到当前文档中的外部样式表

新建CSS规则，打开一个对话框，可在其中选择要创建的样式类型（例如，创建类样式、重新定义HTML标签或定义CSS选择器）

编辑样式，打开一个对话框，可在其中编辑当前文档或外部样式表中的样式

删除CSS规则，删除【CSS样式】面板中的选定规则或属性，并从它所应用于的所有元素中删除格式设置

图1-18 【新建CSS规则】对话框

在【选择器类型】下拉列表框中提供了4种类型。如果要创建一个可作为class属性应用于任何HTML元素的自定义样式，可以选择“类”选项，然后在【选择器名称】文本框中输入样式的 名称。

注意

类名称必须以句点开头，并且可以包含任何

字母和数字组合（例如，

.myhead1

£©¡£Èç¹û

ûÓÐÊäÈ뿪ͷµÄ¾äµã£¬

Dreamweaver

½«×Ô¶¯

Ϊ¹æÔòÊäÈë¡£

如果要定义包含特定ID属性的标签格式，则可以选择ID选项，然后在【选择器名称】文本框中输入唯一ID（例如NewsTitleDIV）。该ID必须以"#"特殊符号开头，并且可以包含任何字母和数字组合（例如，#myID1）。如果没有输入特殊符号，Dreamweaver将自动为输入补充。

如果要重新定义特定HTML标签的默认格式，可选择【标签】选项，然后在【选择器名称】文本框中输入HTML标签或从弹出菜单中选择一个标签。

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

从【规则定义】下拉列表中选择要定义规则的位置，共包括如下几项。

将规则放置到已附加到文档的样式表中，选择相应的样式表名称。

创建外部样式表，选择“新建样式表文件”选项。

在当前文档中嵌入样式，选择“仅限该文档”选项。

最后，在【CSS规则定义】对话框中选择要为新的CSS规则设置的样式选项，完成后单击【确定】按钮。也可以不设置任何样式直接单击【确定】按钮新建一个空白规则。

3．直接创建具有CSS规则的网页

在Dreamweaver CS4中，除了可以在空白网页中创建CSS规则外，还可以直接创建具有CSS样式的网页。执行【文件】|【新建】命令，可以创建一个已包含CSS布局的页面。Dreamweaver附带了30多个可供选择的不同CSS布局，其中各种类型选项及相关说明如表1-2所示。

表1-2 CSS布局中的各种类型选项及相关说明

类 型 选 项

说 明

固定

列宽是以像素指定的。列的大小不会根据浏览器的大小或站点访问者的文本设置来调整

弹性

列宽是以相对于文本大小的度量单位（全方）指定的。如果站点访问者更改了文本设置，该设计将会进行调整，但不会基于浏览器窗口的大小来更改列宽度

液态

列宽是以站点访问者的浏览器宽度的百分比形式指定的。如果站点访问者将浏览器变宽或变窄，该设计将会进行调整，但不会基于站点访问者的文本设置来更改列宽度

混合

用上述3个选项的任意组合来指定列类型。例如，可能存在两列混合的形式：左侧栏布局有一个根据浏览器大小缩放的主列，右侧有一个根据站点访问者的文本设置大小缩放的弹性列

当打开【新建文档】对话框后，选择【空白页】选项，即可在【布局】列表中选择不同的CSS布局，以及创建布局CSS的位置等，如图1-19所示。

警告

必须为布局选择

HTML

Ò³ÃæÀàÐÍ¡£Àý

È磬¿ÉÒÔÑ¡Ôñ

HTML

¡¢

JSP

µÈ¡£²»ÄÜʹ

ÓÃ

CSS

²¼¾Ö´´½¨

ActionScript

¡¢¿âÏîÄ¿¡¢

JavaScript

¡¢

XML

¡¢

XSLT

»ò

ColdFusion

×é¼þÒ³Ãæ¡£¡¾Ð½¨Îĵµ¡¿¶Ô»°¿òÖеÄ

¡¾ÆäËû¡¿Àà±ðµÄÒ³ÃæÀàÐÍÒ²²»°üÀ¨

CSS

Ò³Ãæ²¼¾Ö¡£

选择页面使用布局之后，还需要指定CSS规则的存储位置，有如下几项可以选择。

· 添加到文档头

选择一个CSS布局后，默认选择该选项，能够将布局的CSS添加到要创建的页面中，这时创建的CSS代码显示在当前网页中。

· 新建文件

选择该选项后，会打开【将样式表文件另存为】对话框，将CSS布局保存为CSS格式文件。然后，才会创建具有CSS布局的网页，这样创建的CSS样式为独立文件，但是会将该文件链接到新建网页中，如图1-20所示。

· 链接到现有文件

当选择该选项后，需要将外部文件添加到【附加CSS文件】文本框中，然后单击【创建】按钮，将创建的CSS样式保存在现有的CSS文件中，并且显示在新建网页中。

1.3

设计新闻查看页面

在使用CSS样式为网页布局时，经常将网页中同类的网页元素（例如同栏目的文本）设置为一种样式。这就需要定义一种CSS选择符，然后在该选择符内定义网页相同元素的样式。CSS选择符也是一条CSS规则，主要使用方式有：标签选择符、类选择符、ID选择符和伪类选择符。本节将学习使用Dreamweaver CS4创建各种类型选择符的CSS样式，并制作新闻查看页面。

1.3.1 新建CSS规则

默认情况下，Dreamweaver CS4使用CSS设置文本格式。用户可使用“属性”检查器或菜单命令应用于文本的样式来创建CSS规则，这些规则嵌入在当前文档的头部。还可以使用【CSS样式】面板创建和编辑CSS规则和属性。【CSS样式】面板是一个比“属性”检查器强大得多的编辑器，它显示为当前文档定义的所有CSS规则，而不管这些规则是嵌入在文档的头部还是在外部样式表中。

提示

推荐使用【

CSS

Ñùʽ¡¿Ãæ°å£¨¶ø²»ÊÇÊôÐÔ¼ì

²éÆ÷£©×÷Ϊ´´½¨ºÍ±à¼

CSS

µÄÖ÷Òª¹¤¾ßÕâÑù

Éú³ÉµÄ

CSS

´úÂ뽫¸üÇåÎú£¬¸üÒ×ÓÚά»¤¡£

1．标签选择符

使用标签样式可以重定义页面文件中XHTML标记的默认格式设置。用标签定义的CSS样式设置完成后，该CSS样式马上生效。例如，对页面内

标签定义规则，方法是：首先将光标在标签内单击，然后在【CSS样式】面板中单击【新建】按钮，打开【新建CSS规则】对话框，在【选择器类型】下拉列表框中选择【标签】选项。

此时【选择器名称】文本框会自动变为“h1”，表示为h1标签定义样式，而且在下方还显示了规则的应用范围。保留【规则定义】下拉列表框的值，将样式保存到当前文档，即仅针对一个文档有效，如图1-21所示。

图1-21 新建h1标签样式

最后，单击【确定】按钮会弹出【h1的规则定义】对话框，在这里可以设置CSS对背景、区块或者列表等方面的设置，具体设置会在后面介绍，这里直接单击【确定】按钮返回。

2．类选择符

为了对网页格式的样式定义更为精确，需要让相同的选择符（一般情况下为页面标记）也能分类，并按照不同的类别进行不同的样式设计。类选择符就是这些样式的表示方式，它以句点（.）开头，并可以任意命名，如.title，.fontstyle等。

提示

类

选择符

使得

CSS

ÑùʽӦÓÃÓÚÑ¡¶¨µÄÇøÓò£¬

Èç¹ûÒªÔÚÕû¸öÒ³ÃæÖеÄÏà¹ØÇøÓòÓ¦ÓÃ

C

SS

Ñùʽ£¬ÔòÐèҪѡÔñ±êÇ©ºÍ¸ß¼¶·½Ê½¡£

例如，在一个页面包括了如下代码，这样其实已经使用了类样式，只是还未对类样式添加CSS样式。

内容省略

语句使用class属性对div标记应用了一个content类样式。此例中，content样式表示这是一个信息显示区域。在上述代码内单击，再使用【新建CSS规则】对话框，从【选择器类型】下拉列表中选择【类（可应用于任何HTML元素）】选项，【选择器名称】文本框中会出现图1-22所示内容，还显示了该类样式可影响所有HTML元素。

图1-22 新建content类样式

3．ID选择符

ID选择符是用于标识页面上的唯一标记，具有特定性，不可以重复使用和定义。如果需要将CSS样式应用于ID名，则可以使用ID选择符。例如可使用#sHeader，则这个CSS样式将应用于网页上带有ID="sHeader"的XHTML标记。该样式将不可以再被其他标记使用，创建时的对话框如图1-23所示。

图1-23 新建#sHeader样式

注意

与类样式不同，使用

ID

ÀàÐ͵ÄÑùʽÃû³Æ±Ø

ÐëÒÔ

"#"

Ϊǰ׺¡£Èç¹ûÔÚ¡¾Ñ¡ÔñÆ÷Ãû³Æ¡¿Îı¾

¿òÖÐδÊäÈë¸Ã·ûºÅ£¬

Dreamweaver CS4

»á×Ô

¶¯ÎªÓû§Ìí¼Ó¡£

4．伪类选择符

伪类选择符的最大作用就是可以对链接的不同状态定义不同的样式效果。它表示动态链接4种不同的状态：未访问的链接（link）、已访问的链接（visited）、鼠标停留在链接上（hover）和激活链接（active）。对应有4种伪类选择符：a:link、a:active、a:hover和a:visited。图1-24所示为使用伪类选择符时的创建对话框，需要在【选择器类型】下拉列表中选择【复合内容】选项。

图1-24 新建伪类样式

1.3.2 设置CSS样式

无论是在【新建CSS规则】对话框中选择了哪种类型的选择器，都只是仅仅创建了一个CSS规则，并没有具体内容。要想设置更详细的样式属性，需要在创建样式后的【CSS规则定义】对话框中设置。这些设置主要包括8个选项，每个选项又包含很多可以设置样式的属性值。

1．文本样式

字体属性是CSS中使用频率最高，也是最简单的样式属性。在传统的XHTML中仅提供了对字体颜色、大小和类型的3种设置，而在CSS中可以对字体有更详细的设置，从而实现更加丰富的字体 效果。

在表1-3中列出了CSS中用于控制字体的常用属性。

表1-3 常用字体属性

属 性

说 明

font-family

指定使用的字体类型，可为此属性赋多值，系统将自动选择支持的字体显示

font-style

指定字体显示的样式，取值为normal、italic或者oblique

font-variant

指定字体是否变形，取值为normal或者small-caps

font-weight

指定字体的加粗属性

font-size

设置字体的大小，取值可以为绝对大小、相对大小、长度或者百分比

font

指定字体的复合属性

letter-spacing

指定字体之间的间隔大小

word-spacing

指定单词之间的空白大小

line-height

指定字体的行高，即字体最底端与字体内部顶端之间的距离

2．背景样式

使用【CSS规则定义】对话框的【背景】选项可以定义CSS样式的背景设置。可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，如在文本、表格、页面等的后面，还可以设置背景图像的位置。在表1-4中列出了设置【背景】选项时与其相关的CSS属性及说明。

表1-4 常用背景属性及说明

属 性

说 明

Background-color

设置元素的背景颜色

Background-image

设置元素的背景图像

确定是否重复以及如何重复背景图像。可选项有：no-repeat、repeat、repeat-x和repeat-y

Background-attachment

确定背景图像是固定在其原始位置还是随内容一起滚动

Background-position(X)

指定背景图像相对于元素的初始水平位置

Background-position(Y)

指定背景图像相对于元素的初始垂直位置

图1-25演示了Background-repeat属性的4个值在运行时的效果。

3．区块样式

在进行页面设计时，要保证页面元素出现在适当的位置，常常需要使用表格来完成。这是因为表格包含的边框能够为整个页面建立复杂的结构，而且还能使页面看起来更加的美观、整洁。CSS中的区块属性就提供了这样一种功能，能够为页面元素定义边框，并修饰内部间距，从而优化文本内容的显示效果。在表1-5中列出了这些属性的说明。

表1-5 常用区块属性及说明

属 性

说 明

Word-spacing

（单词间距）

用于在文字之间添加空格。此选项可能会受到页边距调整的影响，可以指定负值，但是其显示取决于浏览器

Letter-spacing

（字母间距）

用于在文字之间添加空格。可以指定负值，但是其显示取决于浏览器。和单词间距不同的是，字母间距可以覆盖有页边距调整产生的字母之间的多余空格

Vertical-align

（垂直对齐）

用于指定元素的纵向对齐方式，通常是相对于其上一级而言的

Text-align

（文本对齐）

决定文本如何在元素内对齐

Text-indent

（文字缩进）

用于指定首行缩进的距离。指定为负值时相对于创建了文本突出，但是其显示取决于浏览器

续表

属 性

说 明

White-space

（空格）

用于决定元素中的白色间隔如何处理，有3种选择：normal（正常）不使用白色间隔，pre（保留）将文本用pre标记括起来，nowrap（不换行）指定只有遇到br标签时文本才可以换行

Display（显示）

选择一些可显示的对象。如果将none指定到元素时，它将不会被显示

4．方框样式

使用【方框】选项的设置，可以控制元素在页面上的放置方式以及属性定义。可以在应用填充和边界时，将设置应用于元素的各个边，通常用于在页面上对区块进行布局。也可以选中【全部相同】复选框，将相同的设置应用于元素的所有边，如图1-26所示。在表1-6中列出了这些属性的说明。

表1-6 常用方框属性及说明

属 性

说 明

Width和Height

设置元素的宽度和高度

Float（浮动）

设置其他元素（如文本、AP Div、表格等）在围绕元素的哪个方向浮动。其他元素按通常的方式环绕在浮动元素的周围

Clear（清除）

定义不允许AP元素的边。如果清除边上出现AP元素，则带清除设置的元素将移到该元素的下方

Padding（填充）

指定元素内容与元素边框之间的间距（如果没有边框，则为边距）。取消选中【全部相同】选项可设置元素各个边的填充

Margin（边距）

指定一个元素的边框与另一个元素之间的间距（如果没有边框，则为填充）

图1-26中，Padding选项区中的【全部相同】复选框的作用是为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的填充属性；而在Margin选项区中的【全部相同】复选框的作用是为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边距属性。

5．边框样式

页面元素的边框就是将元素内容及间隙包含在其中的边线，类似于表格的外边线。每一个页面元素的边框可以从3个方面来描述：颜色、样式和宽度，这3个方面决定了边框所显示出来的外观。CSS中定义这3方面的属性如表1-7所示。

style属性可用的样式有：dotted（点划线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽状）、ridge（脊状）、inset（凹陷）和outset（凸出）。

表1-7 边框属性

属 性

说 明

border

设置边框样式的复合属性

color

用于设置边框对应位置的颜色，可以单独设置每条边框的颜色，但是否显示则取决于浏览器

style

选择边框要使用的样式，选择none项则取消边框样式

width

设置元素边框的粗细。可选项有：thin（细边框）、medium（中等边框）或者thick（粗边框），还可以设置具体的边框粗细值

6．列表样式

列表是页面中显示信息的一种常见显示方式。它可以把相关的具有并列关系的内容整齐地垂直排列，不仅很好地归纳了内容，而且使页面也显得整洁，增强页面的条理性。CSS为控制列表提供了符号列表、图像列表和位置列表3种样式。在表1-8列出了与列表相关的属性。

表1-8 列表属性

属 性

兼 容 性

说 明

list-style

IE4+ , NS4+

设置列表的复合属性

list-style-image

IE4+ , NS6+

指定一个图像作为项目符号，例如：p{list-style-image:url(top.jpg)}

list-style-position

IE4+ , NS6+

指定项目符号与列表项的位置，取值为outside或者inside

list-style-type

IE4+ , NS4+

设置列表中列表项使用的项目符号，默认为disc表示实心圆

7．定位样式

定位（Positioning）的原理其实很简单，就是使用有效、简单的方法精确地将元素定义到页面的特定位置中。这个位置可以处于页面的绝对位置，也可以处于其上级元素的位置，还可以是另一个元素或浏览器窗口的相对位置。

在CSS中实现页面定位，也就是定义页面中区块的位置。在表1-9中列出了CSS中全部的定位 属性。

表1-9 定位属性

属 性

兼 容 性

说 明

position

IE4+ , NS4+

定义元素在页面中的定位方式

left

IE4+ , NS4+

指定元素与最近一个具有定位设置的父对象左边的距离

right

IE5+

指定元素与最近一个具有定位设置的父对象右边的距离

top

IE4+ , NS4+

指定元素与最近一个具有定位设置的父对象上边的距离

bottom

IE5+

指定元素与最近一个具有定位设置的父对象下边的距离

z-index

IE4+ , NS6+

设置元素的层叠顺序，仅在position属性为relative或者absolute时有效

width

IE4+ , NS6+

设置元素框宽度

height

IE4+ , NS6+

设置元素框高度

overflow

IE4+ , NS6+

内容溢出控制

clip

IE4+ , NS6+

剪切

8．扩展样式

【扩展】样式属性包括过滤器、分页和光标选项。其中，分页选项用于设置显示页面时强制分页的位置，包括：Page-break-before和Page-break-after两个。Cursor选项用于设置鼠标经过应用了该样式的对象时，鼠标指针的外观是否改变。Filter选项可以为被样式控制的对象指定滤镜效果。

1.3.3 实现新闻查看页面

通过使用选择符来新建CSS规则，然后将这些规则应用到页面中实现新闻查看页面。从而使页面的内容与结构相分离，减少维护的成本。

STEP|01 打开创建好的网页，在页面中包含了新闻网站的通用头部导航和脚部的版权说明，如图1-27所示。

图1-27 页面原始效果

STEP|02 在页面的头部和脚部之间添加显示新闻内容的布局代码，如图1-28所示。

图1-28 新闻内容布局代码

STEP|03 将光标在

标签内单击，然后使用上节介绍的方法打开【新建CSS规则】对话框，在【选择器类型】下拉列表框中选择“标签”选项，单击【确定】按钮，打开【h1的规则定义】对 话框。

STEP|04 直接单击【确定】按钮返回，再切换到文档的【代码】视图中，使用如下的代码进行替换Dreamweaver CS4在

标签内生成的标签样式。完成使用标签选择符对h1的CSS规则设置。

h1 {

color:#006;

font-size:24px;

font-weight:bold;

text-align:center;

margin-bottom:0px;

}

STEP|05 重复STEP|03和STEP|04，为

和

创建标签样式，如下为最终创建后的代码：

h2 {

font-size:12px;

text-align:center;

font-weight:normal;

border-top:#ccc 1px dashed;

color:#666;

height:24px;

margin:3px 5px 8px 0;

background:#f5f5f5

}

p{

text-indent: 20px;

}

上面的

标签在页面中定义了新闻的标题；标签定义了新闻的附加属性，像来源、浏览次数和发布时间；

标签中定义则是具体的新闻内容。

STEP|06 在布局新闻内容时，定义一个class为content的div标签，该标签用来作为新闻的父容器。使用新建标签选择符样式的方法，在【新建CSS规则】对话框中定义名称为“.content”的规则，该规则的最终CSS样式如下：

.content {

margin-left:10px;

line-height:24px;

text-align: left;

}

上述样式的作用是设置左边距、行高和文本对齐方式。带类样式的CSS规则名称必须以"."开始，这样该样式同样可适用于其他HTML元素。例如，要对p和span应用这个样式则可以使用如下代码：

STEP|07 接下来，对页面中使用ID属性定义的div标签使用ID选择符新建CSS规则。其中#sHeader定义的是页面中消息的标题，#wrap则定义了整个页面的全局设置，所需的CSS代码如下所示：

#sHeader {

height:52px;

background:url(images/titbg2.

gif) no-repeat;

color:#333;

padding-left:110px;

padding-top:10px;

margin-left: 10px;

}

#wrap {

margin: 20px auto 10px auto;

width: 800px;

background: #fff;

padding: 10px;

border: 5px solid #000;

}

STEP|08 最后是对页面中的链接设置CSS规则，即使用伪类选择符。这包括两步，首先是链接的样式a，另一个是鼠标激活时的样式a:hover，代码如下所示：

a {

text-decoration:none;

color:#666

}

a:hover {

text-decoration: underline;

color:#000000;

}

a:hover样式通常需要定义一种突出显示字体，以便在用户鼠标移到超链接上时显示。这里设置为黑色并带有下划线。

STEP|09 保存对页面所做的修改，在【实时视图】模式中进行预览查看最终应用CSS样式之后的效果，如图1-29所示。

图1-29 查看新闻页面效果

Dreamweaver CS4中新增了【实时视图】模式，在该模式下会显示不可编辑的、交互式的、基于浏览器的文档视图。

1.4

设计博客网站首页

随着网络的不断普及，越来越多的网民开始将自己的想法、感受、心情等以文字、图片或多媒体的形式发布到网络中，以便于与朋友或其他浏览者分享，而博客正是承载这些内容的平台。

博客以网络作为载体，简易、迅速、便捷地发布自己的心得，及时、有效、轻松地与他人进行交流，是集丰富多彩的个性化展示于一体的综合性平台。

1.4.1 设计居中布局

网页布局是网页设计中最重要的一步，它决定了网页最后呈现的外观。在网页布局中需要注意网页中各部分内容是如何定位的，以及浮动的使用。居中的布局设计目前在网页布局中的应用非常广泛。所以，如何在CSS中设计居中的页面布局也是大多数开发人员首先要学的技能之一。

要使用CSS实现让页面居中主要有两种基本方法：一种方法是使用自动空白边；另一种方法是使用定位和负值的空白边。

1．使用自动空白边设计居中

这种方法适用于，让页面上的DIV容器在屏幕上水平居中。例如，在一个典型的布局中可能有如下的代码：