Dreamweaver 入门:使用CSS设置页面格式(2)_Dreamweaver教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

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

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

  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 键 (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 规则来设置格式。

/所属分类:Dreamweaver教程/更新时间:2006-08-13
相关Dreamweaver教程