偶看新闻全直销牌照查询官网:Dreamweaver 入门：使用CSS设置页面格式-Dreamweaver教程 -华夏名网资讯中心 虚拟主机,域名注册,双线虚拟主机,服务器租赁,为7万用户提供服务
来源：百度文库 编辑：偶看新闻 时间：2024/06/03 07:40:03
了解 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 规则进行更新，则使用该定义样式的所有文件的格式都会自动更新为新样式。
在 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 文件中的特定标签实例中定义的。例如， 仅对用含有内联样式的标签设置了格式的段落定义字体大小。
Dreamweaver 会呈现你所应用的大多数样式属性并在"文件"窗口中显示他们。你也能在浏览器窗口中预览文件以查看样式的应用情况。有些 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;
}
当你键入代码时，Dreamweaver 将使用代码提示为你建议一些选项，以帮你完成输入。当看到希望 Dreamweaver 为你完成键入的代码时，请按 Enter 键 (视窗系统) 或 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 规则，不管这些规则是在外部样式表中，还是在自身文件中。你应在"所有规则"窗格中看到两个主要类别:一个