dw 不使用css 使用html文件,Dreamweaver使用CSS样式表设置网页文本格式

Dreamweaver使用CSS样式表设置网页文本格式

互联网   发布时间：2008-10-17 19:35:50   作者：佚名   我要评论

本文章介绍如何在 Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式。您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本，从而能更加灵活自如地控制页面的外观。

了解 CSS

层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web

创建新的样式表

首先，您将创建包含 CSS 规则(定义段落文本样式)的外部样式表。在外部样式表中创建样式时，可以在一个中央位置同时控制多个 Web 页面的外观，而不需要为每个 Web 页面分别设置样式。

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

外部 CSS 样式表是存储在一个单独的外部 .css 文件(并非 HTML 文件)中的一系列 CSS 规则。利用文档 head 部分中的链接，该 .css 文件被链接到 Web 站点中的一个或多个页面。

内部(或嵌入式)CSS 样式表是包含在 HTML 文档 head 部分的 style 标签内的一系列 CSS 规则。例如，下面的示例为已设置段落标签的文档中的所有文本定义字体大小:

p{

font-size:80px

}

内联样式是在 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 键 (Windows) 或 Return 键 (Macintosh)。

不要忘记在每行结尾处的属性值后面加上一个分号。

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

若要显示该指南，请选择"帮助">"参考"，然后从"参考"面板的弹出式菜单中选择"O'Reilly CSS 参考"。保存样式表。

相关文章

Dreamweaver怎么做一个hello world网页？对于初学者使用Dreamweaver制作一个网页是很值得高兴的一件事，该怎么使用dw制作一个最简单的hello world页面呢？下面我们的就来看2020-09-03

Dreamweaver代码怎么自动排？Dreamweaver中的代码看上去很乱，不好找，想要将代码格式化了，看上去更有条理性，该怎么操作呢？下面我们就来看看dw代码格式化的技巧，需要的2020-07-22

Dreamweaver文字或图片怎么添加空连接？Dreamweaver制作网页的时候，需要给网页中的图片或者文字添加空连接，该怎么实现呢？下面我们就来看看详细的教程，需要的朋友可以参2019-10-09

Dreamweaver媒体查询命令怎么使用？Dreamweaver制作页面会用到很多命令，我们今天就来介绍关于媒体查询命令的使用方法，需要的朋友可以参考下2019-09-03

Dreamweaver怎么修改文档说明类型？Dreamweaver中想要更改文档说明，该怎么更改呢？下面我们就来看看详细的教程，需要的朋友可以参考下2019-09-03

Dreamweaver怎么插入水平线并设置颜色？Dreamweaver制作网页的时候，想要插入一个水平线，该怎么插入水平线并设置红色呢？下面我们就来看看详细的教程，需要的朋友可以参考2019-05-06

dreamweaver怎么使用正则表达式？dreamweaver页面中有需要替换的内容，该怎么替换呢？我们可以使用正则表达式来替换，下面我们就来看看详细的教程，需要的朋友可以参考下2019-04-30

Dreamweaver网页怎么插入单选按钮？Dreamweaver设计网页的时候，需要使用单选按钮，该怎么插入单选按钮呢？下面我们就来看看详细的教程，需要的朋友可以参考下2019-04-26

Dreamweaver CC2019怎么制作关注按钮？dw2019中想要制作一个按钮并给按钮添加链接，实现关注的效果，该怎么操作嗯？下面我们就来看看详细的教程，需要的朋友可以参考下2019-04-25

Dreamweaver CS3复选框怎么用？Dreamweaver CS3制作网页的时候，经常使用复选框，复选框的各种属性有什么作用？下面我们就来看看dw复选框属性介绍，需要的朋友可以参考下2019-04-24

最新评论