日期：2009-10-30 22:42:00 来源：本站整理

Dreamweaver利用CSS款式表设置网页[DW设计]

赞助商链接

分享到： QQ空间新浪微博腾讯微博人人网

本文“Dreamweaver利用CSS款式表设置网页[DW设计]”是由七道奇为您精心收集，来源于网络转载，文章版权归文章作者所有，本站不对其观点以及内容做任何评价，请读者自行判断，以下是其具体内容：

本文章介绍如安在中利用层叠款式表 (CSS) 设置页面中的文本格局.您可以利用 CSS 以 HTML 无法供应的方法来设置文本格局和定位文本,从而能越发机动自如地掌握页面的外观.

　　理解 CSS

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

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

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

　　以下为引用的内容:

　　H1 {

　　font-size:16 pixels;

　　font-family:Helvetica;

　　font-weight:bold;

　　}
　　

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

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

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

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

　　自定义 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 法则.比方,下面的示例为已设置段落标签的文档中的全部文本定义大小:

:<head>
<style>
p{
font-size:80px
}
</style>
</head>:

　　内联款式是在 HTML 文档中的特定标签实例中定义的.比方,

《p style="font-size: 9px"》

仅对用含有内联款式的标签设置了格局的段落定义大小.

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

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

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

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

　　将该页保存("文件">"保存")为 cafe_townsend.css.

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

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

　　p{
　　font-family: Verdana, sans-serif;
　　font-size: 11px;
　　color: #000000;
　　line-height: 18px;
　　padding: 3px;
　　}

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

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

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

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

　　附加款式表

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

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

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