<b>Dreamweaver利用CSS款式表设置网页文本格局</b>[DW设计]

　　理解 CSS

　　层叠款式表 (CSS) 是一系列格局设置法则,它们掌握 Web 页面内容的外观.利用 CSS 设置页面格局时,内容与表现情势是彼此脱离的.页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现情势的 CSS 法则位于另一个文件(外部款式表)或 HTML 文档的另一部份(普通为 部份)中.利用 CSS 可以非常机动并更好地掌握页面的外观,从切确的计规定位到特定的字体和款式等.

　　CSS 使您可以掌握很多仅利用 HTML 无法掌握的属性.比方,您可认为所选文本指定差别的字体大小和单位(像素、磅值等).通过利用 CSS 从而以像素为单位设置字体大小,还可以确保在多个浏览器中以更一致的方法处理页面筹划和外观.

　　CSS 格局设置法则由两部份构成:挑选器和声明.挑选器是标识已设置格局元素(如 P、H1、类名称或 ID)的术语,而声明则用于定义款式元素.在下面的示例中,H1 是挑选器,介于大括号 ({}) 之间的全部内容都是声明:

　　声明由两部份构成:属性(如 font-family)和值(如 Helvetica).上述示例为 H1 标签成立了款式:链接到此款式的全部 H1 标签的文本都将是 16 像素大小并利用 Helvetica 字体和粗体.

　　术语"层叠"是指对同一个元素或 Web 页面利用多个款式的本领.比方,可以成立一个 CSS 法则来利用颜色,成立另一个法则来利用边距,然后将二者利用于一个页面中的同一文本.所定义的款式"层叠"到您的 Web 页面上的元素,并终究成立您想要的计划.

　　CSS 的主要长处是简单更新;只要对一处 CSS 法则举行更新,则利用该定义款式的全部文档的格局城市自动更新为新款式.

　　在 Dreamweaver 中可以定义以下法则范例:

　　自定义 CSS 法则(也称为"类款式")使您可以将款式属性利用到任何文本范围或文本块.全部类款式均以句点 (.) 开首.比方,您可以成立称为 .red 的类款式,设置法则的 color 属性为红色,然后将该款式利用到一部份已定义款式的段落文本中.

　　HTML 标签法则重定义特定标签(如 p 或 h1)的格局.成立或更改 h1 标签的 CSS 法则时,全部用 h1 标签设置了格局的文本城市当即更新.

　　CSS 挑选器法则(高级款式)重定义特定元素组合的格局,或别的 CSS 答应的挑选器情势的格局(比方,每当 h2 标题呈目前表格单元格内时,就利用挑选器 td h2).高级款式还可以重定义包含特定 id 属性的标签的格局(比方,由 #myStyle 定义的款式可以利用到全部包含属性/值对 id="myStyle" 的标签).

　　成立新的款式表

　　首先,您将成立包含 CSS 法则(定义段落文本款式)的外部款式表.在外部款式表中成立款式时,可以在一此中央位置同时掌握多个 Web 页面的外观,而不需求为每个 Web 页面辨别设置款式.

　　CSS 法则可以位于以下位置:

　　外部 CSS 款式表是存储在一个单独的外部 .css 文件(并非 HTML 文件)中的一系列 CSS 法则.操纵文档 head 部份中的链接,该 .css 文件被链接到 Web 站点中的一个或多个页面.

　　内部(或嵌入式)CSS 款式表是包含在 HTML 文档 head 部份的 style 标签内的一系列 CSS 法则.比方,下面的示例为已设置段落标签的文档中的全部文本定义字体大小:

　　内联款式是在 HTML 文档中的特定标签实例中定义的.比方,<p style="font-size: 9px"> 仅对用含有内联款式的标签设置了格局的段落定义字体大小.

　　Dreamweaver 会显现您所利用的大大都款式属性并在"文档"窗口中显示它们.您也可以在浏览器窗口中预览文档以查看款式的利用情形.有些 CSS 款式属性在 Microsoft Internet Explorer、Netscape Navigator、Opera 和 Apple Safari 中显现的外观不相同.

　　挑选"文件">"新建".

　　在"新建文档"对话框中的"类别"列中挑选"基本页",在"基本页"列中挑选"CSS",然后单击"成立".

　　空白款式表将呈目前"文档"窗口中."计划"视图和"代码"视图按钮已被禁用.CSS 款式表是纯文本文件,其内容将不会用于在浏览器中查看.

　将该页保存("文件">"保存")为 cafe_townsend.css.在下一节中,您将利用"CSS 款式"面板成立新法则.利用"CSS 款式"面板成立新法则比手动键入法则简单得多,后者好像最始成立外部款式表时的操作一样.

　　成立新的 CSS 法则

　　在本节中,您将利用"CSS 款式"面板成立自定义的 CSS 法则或类款式.类款式使您可以设置任何范围或文本块的款式属性,并可以利用到任何 HTML 标签.有关差别范例的 CSS 法则的更多信息,请拜见理解 CSS.

　　在"CSS 款式"面板中,单击面板右下角的"新建 CSS 法则".

　　在"新建 CSS 法则"对话框中,从"挑选器范例"选项中挑选"类".该选项应当是默许选中的.

　　在"名称"文本框中输入 .bold.

　　确保在单词"bold"前键入句点 (.).全部类款式必须以句点开首

　　在"定义在"弹出式菜单中,挑选 cafe_townsend.css.该文件应当是默许选中的.

　　单击"肯定".

　　呈现"CSS 法则定义"对话框,表示您正在 cafe_townsend.css 文件中成立一个称为 .bold 的类款式.

　　在"CSS 法则定义"对话框中,履行下面的操作:

　　在"字体"文本框中,输入 Verdana, sans-serif.

　　在"大小"文本框中,输入 11,并在紧靠其右的弹出式菜单中挑选像素.

　　在"行高"文本框中,输入 18,并在紧靠其右的弹出式菜单中挑选像素.

　　从"粗细"弹出式菜单中挑选"粗体".

　　在"颜色"文本框中,输入 #990000.

　　提醒有关 CSS 属性的更多信息,请拜见 Dreamweaver 中包含的 O'Reilly 参考指南.若要显示该指南,请挑选"帮忙">"参考",然后从"参考"面板的弹出式菜单中挑选"O'Reilly CSS 参考".

　　单击"肯定".

　　单击"CSS 款式"面板顶部的"全部"按钮.

　　若未展开 cafe_townsend.css 类别,则单击该类别旁边的加号 ( ) 按钮.

　　您可以看到,Dreamweaver 已将 .bold 类款式增添到在外部款式表中定义的法则列表中.假如您在"全部法则"窗格中单击 .bold 法则,则该法则的属性将呈目前"属性"窗格中.新法则还呈目前"属性"查抄器的"款式"弹出式菜单中.

　　将类款式利用到文本

　　目前,您已经成立了一个类法则,并将该法则利用到某些段落文本.

　　在"文档"窗口中,挑选第一段中文本的前四个单词:Cafe Townsend's visionary chef.

　　在"属性"查抄器("窗口">"属性")中,从"款式"弹出式菜单中挑选"bold".

　　"粗体"类款式将利用到您的文本.

　　反复第 2 步,将"粗体"类款式利用到第二段的前四个单词.

　　保存页面.

　　设置导航条文本的格局

　　接下来,您将利用 CSS 将款式利用到导航条的链接文本.很多 Web 页面利用内含文本的彩色矩形图象来成立导航条.但是,假如利用 CSS,您所需求设置的只是链接文本和一些格局.通过利用 display: block 属性并设置块的宽度,您可以有效地成立矩形,而不需求别的利用图象.

　　为导航成立新法则

　　若未翻开 cafe_townsend.css 文件,则翻开该文件,或单击其选项卡来显示该文件.

　　定义一个新法则,办法是在该文件的 .bold 类款式背面键入以下代码:

　　.navigation {

　　}

　　这是一个空法则.

　　文件中的代码应近似于下面的示例:

　　保存 cafe_townsend.css 文件.

　　接下来,您将利用"CSS 款式"面板向法则增添属性.

　　若未翻开 index.html 文件,则翻开该文件.

　　在"CSS 款式"面板中,确保选中了"全部"情势,挑选新的 .navigation 法则,然后单击面板右下角的"编辑款式".

　　在"CSS 法则定义"对话框中,履行下面的操作:

　　在"字体"文本框中,输入 Verdana, sans-serif.

　　保存款式表时,请确保将其保存到 cafe_townsend folder 文件夹(您的 Web 站点的根文件夹)中.

从"大小"弹出式菜单中挑选 16,然后从紧靠其右的弹出式菜单中挑选像素.

　　从"款式"弹出式菜单中挑选"正常".

　　从"修饰"列表中挑选"无".

　　从"粗细"弹出式菜单中挑选"粗体".

　　在"颜色"文本框中,输入 #FFFFFF.

　　若要显示该指南,请挑选"帮忙">"参考",然后从"参考"面板的弹出式菜单中挑选"O'Reilly CSS 参考".

　　单击"肯定".

　　目前,您将利用"CSS 款式"面板向 .navigation 法则增添更多属性.

　　在"CSS 款式"面板中,确保选中了 .navigation 法则,然后单击"显示列表视图".

　　列表视图可以使"属性"窗格按字母次序显示全部可用属性(与"设置属性"视图差别,"设置属性"视图只显示已设置的属性).

　　单击 background-color 属性右边的列.

　　若要查看属性的完好内容,请将鼠标指针逗留在该属性上.

　　输入十六进制值 #993300,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh).

　　提醒若要查看您的工作对外部款式表的影响,请在您工作时保持 cafe_townsend.css 文件在"文档"窗口中处于翻开状况.当您在"CSS 款式"面板中做出挑选时,同时将看到 Dreamweaver 在款式表中写入 CSS 代码.

　　找到 display 属性(大概需求向下转动),在右边的列中单击一次,然后从弹出式菜单中挑选 block.

　　找到 padding 属性,在右边的列中单击一次,输入值 8px,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh).

　　找到 width 属性,在右边的列中单击一次,在第一个文本框中输入 140,从弹出式菜单中挑选像素,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh).

　　单击"显示设置属性",以便在"属性"窗格中仅显示您设置的属性.

　　单击 cafe_townsend.css 文件以显示该文件.您将看到,Dreamweaver 已经将您指定的全部属性增添到该文件中.

　　保存并关闭 cafe_townsend.css 文件.

　　目前,您已经成立了一个设置导航条文本格局的法则.接下来,您要将该法则利用到所选链接.

　　利用法则

　　在"文档"窗口中翻开 index.html 页,单击单词 Cuisine 将插入点置于该单词中的某个位置.

　　在标签挑选器中,单击最右边的 标签.

　　此操作将为指定的 标签或链接挑选全部文本.

　　在"属性"查抄器("窗口">"属性")中,从"款式"弹出式菜单中挑选"navigation".

　　在"文档"窗口中,Cuisine 文本的外观完好发生了改变.按照您在上一节中为 .navigation 法则所定义的属性,该文本的格局目前已被设置为导航条按钮.

　　关于导航条中的每个链接,反复第 1 步到第 3 步.

　　您必须为每个 标签或链接分配一个导航类款式,因此,利用标签挑选器辨别挑选每个链接,然后一一为每一个链接分配类款式是很重要的.

　　在设置链接文本的格局时假若有艰难,请确保每个(或每组)链接的单词之间有空格(不是回车).还要确保两个链接之间的空格本身未被链接.假如空格已链接,请当心挑选链接的空格,在"属性"查抄器中排除"链接"文本框,并按 Enter 键 (Windows) 或 Return 键 (Macintosh).

　　完成对导航条的全部单词的格局设置后,保存该页面,然后在浏览器中预览您的工作("文件">"在浏览器中预览").

　　您可以单击链接以确保其有效.

　　增添鼠标经过效果

　　目前,您将增添一个鼠标经过效果,使导航条块的后台色在每次鼠标指针经过某个链接时改变颜色.若要增添鼠标经过效果,请增添包含 :hover 伪类的新法则.

　　在款式表中键入以下代码:

关于…关于 :hover 伪类 伪类是一种影响 HTML 文档中的某些元素的方法,它不是基于文档本身的 HTML 代码,而是基于 Web 浏览器利用的别的外部条件.伪类可以是动态的,这表明当用户与文档交互时,页面上的元素大概会获得或丧失伪类.

　　当用户把鼠标指针逗留在已设置格局的页面元素上时,:hover 伪类会影响该元素的改变.比方,将 :hover 伪类增添到 .navigation 类款式 (.navigation:hover) 以成立新法则时,按照 .navigation:hover 法则的属性,全部用 .navigation 法则设置格局的文本元素城市发生改变.

　　翻开 cafe_townsend.css 文件.

　　挑选整个 .navigation 法则.

　　复制文本("编辑">"复制").

　　在该法则的末尾单击一下,然后多按几次 Enter 键 (Windows) 或 Return 键 (Macintosh) 以成立一些空格.

　　将已复制的文本粘贴("编辑">"粘贴")到刚成立的空格中.

　　将 :hover 伪类增添到已粘贴的 .navigation 挑选器中,以下所示:

　　在新的 .navigation:hover 法则中,将当前的后台色 (#993300) 替换为 #D03D03.

　　保存并关闭该文件.

　　在"文档"窗口中翻开 index.html 文件,然后在浏览器中预览该页面("文件">"在浏览器中预览").

　　当您将鼠标指针逗留在任何一个链接上时,可以看到新的鼠标经过效果.

　　当您键入代码时,Dreamweaver 将利用代码提醒为您倡议一些选项,以帮您完成输入.当看到但愿 Dreamweaver 为您完成键入的代码时,请按 Enter 键 (Windows) 或 Return 键 (Macintosh).

　　不要忘掉在每行末尾处的属性值背面加上一个分号.

　　完成后的代码近似于下面的示例:

　　若要显示该指南,请挑选"帮忙">"参考",然后从"参考"面板的弹出式菜单中挑选"O'Reilly CSS 参考".保存款式表.

　　附加款式表

　　当您将款式表附加到 Web 页面中时,在款式表中定义的法则将利用到页面上的呼应元素.比方,当您将 cafe_townsend.css 款式表附加到 index.html 页时,将按照您定义的 CSS 法则设置全部段落文本(用 HTML 代码中的标签设置格局的文本)的格局.

　　在"文档"窗口中,翻开 Cafe Townsend 的 index.html 文件.(假如该文件已翻开,则请单击它的选项卡.)

　　挑选在教程:向页面增添内容中粘贴到页面中的第一段文本.

　　在"属性"查抄器中查看,并确保利用段落标签设置了该段落的格局.

　　假如"属性"查抄器中的"格局"弹出式菜单显示"段落",则已利用段落标签设置了段落的格局.假如"属性"查抄器中的"格局"弹出式菜单显示"无"或别的内容,则挑选"段落"来设置段落的格局.

　　对第二段反复第 3 步.

　　在"CSS 款式"面板("窗口">"CSS 款式")中,单击位于面板右下角的"附加款式表"按钮.

　　在"附加外部款式表"对话框中,单击"浏览"并浏览到上一节成立的 cafe_townsend.css 文件.

　　单击"肯定".

　　"文档"窗口中的文本将按照外部款式表中的 CSS 法则来设置格局.

　　研究"CSS 款式"面板

　　"CSS 款式"面板可以让您跟踪影响当前所选页面元素的 CSS 法则和属性,或影响整个文档的法则和属性,还可以在不翻开外部款式表的情形下改正 CSS 属性.

　　请确保 index.html 页在"文档"窗口中翻开.

　　在"CSS 款式"面板("窗口">"CSS 款式")中,单击面板顶部的"全部",然后查抄您的 CSS 法则.

　　在"全部"情势下,CSS 面板向您显示利用到当前文档的全部 CSS 法则,不管这些法则是在外部款式表中,还是在自身文档中.您应在"全部法则"窗格中看到两个主要类别:一个<STYLE> 标签类别和一个 cafe_townsend.css 类别.

　　若未展开<STYLE> 标签类别,则请单击加号 ( ) 展开该类别.

　　单击正文法则.

　　值为 #000000 的 background-color 属性呈目前下面的"属性"窗格中.

　　注意您大概需求折叠别的面板,如"文件"面板,以便看到完好的"CSS 款式"面板,还可以通过拖动窗格之间的边界来更改"CSS 款式"面板的长度.

　　您在教程:成立基于表格的页面筹划中通过利用"改正页面属性"对话框设置了页面的后台色.以此方法设置页面属性时,Dreamweaver 会编写一个内置于文档的 CSS 款式.

　　单击加号 ( ) 展开 cafe_townsend.css 类别.

　　单击 p 法则.

　　在外部款式表中为 p 法则定义的全部属性和值将显示在下面的"属性"窗格中.

　　在"文档"窗口中,在刚设置格局的两个段落中的任何位置单击一次.

　　在"CSS 款式"面板中,单击面板顶部的"当前",然后查抄您的 CSS 款式.在"当前"情势中,CSS 面板向您显示当前所选内容的属性的择要.显示的属性与外部款式表中 p 法则的属性相对应.