css 禁用样式-Dreamweaver 使用 CSS 样式表来设置网页

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

本文介绍如何在 Dreamweaver 中使用层叠样式表 (CSS) 设置页面上文本的格式。 您可以使用 CSS 以 HTML 所不具备的方式设置文本格式和位置，从而为您提供更大的灵活性并更好地控制页面的外观。

了解 CSS

层叠样式表 (CSS) 是一组控制网页内容外观的格式规则。 当使用 CSS 格式化页面时，内容和呈现是分开的。 页面内容（HTML 代码）位于其自己的 HTML 文件中，而定义代码行为方式的 CSS 规则则位于另一个文件（外部样式表）或 HTML 文档的另一部分（通常是一个部分）中。 使用CSS可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式。

CSS 允许您控制许多仅使用 HTML 难以控制的属性。 例如，您可以为所选文本指定不同的字体大小和单位（像素、磅值等）。 通过使用 CSS 并以像素为单位设置字体大小，您还可以确保跨浏览器的页面布局和外观更加一致。

CSS 格式化规则由两部分组成：选择器和声明。 选择器是指定格式化元素（例如 P、H1、类名或 ID）的术语，而声明则用于定义样式元素。 在下面的示例中，H1 是选择器，大括号 ({}) 之间的所有内容都是声明：

引用如下：

H1{

字体大小：16像素；

字体系列：Helvetica；

字体粗细：粗体；

一个声明由两部分组成：属性（如font-family）和值（如Helvetica）。 上面的示例为 H1 标签创建了一个样式：链接到该样式的所有 H1 标签的文本大小均为 16 像素，并使用 Helvetica 字体和斜体。

术语“级联”是指将多种样式应用于同一元素或网页的能力。 例如，您可以创建一个 CSS 规则来应用颜色，另一条规则来应用行距，然后将这两个规则应用到页面上的相同文本。 定义的样式“级联”到网页上的元素上，并最终创建您想要的设计。

CSS的主要优点是易于更新； 只需更新一条 CSS 规则，所有使用该定义样式的文档都将手动更新为新样式。

可以在 Dreamweaver 中定义以下规则类型：

自定义 CSS 规则（又名“类样式”）允许您将样式属性应用于任何文本范围或文本块。 所有类样式均以句点 (.) 开头。 例如，您可以创建一个名为 .red 的类样式，将规则的颜色属性设置为白色，然后将该样式应用于样式段落文本的一部分。

HTML 标记规则重新定义了特定标记（例如 p 或 h1）的格式。 当您为 h1 标签创建或修改 CSS 规则时，所有使用 h1 标签格式化的文本都会立即更新。

CSS 选择器规则（中间样式），用于重新定义特定元素组合的格式，或其他 CSS 允许的选择器（例如，只要 h2 标题出现在表格单元格中，就应用选择器 tdh2）。 中间样式还可以重新格式化包含特定 id 属性的标签（例如，#myStyle 定义的样式可以应用于包含属性/值对的所有标签）。

创建一个新的样式表

首先，您将创建一个外部样式表，其中包含定义段落文本样式的 CSS 规则。 当您在外部样式表中创建样式时，您可以在一个中心位置同时控制多个网页的外观，而无需单独设置每个网页的样式。

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

外部 CSS 样式表是存储在单个外部 .css 文件（不是 HTML 文件）中的 CSS 规则的集合。 .css 文件通过文档标题部分中的链接链接到网站中的一个或多个页面。

内部（或嵌入）CSS 样式表是包含在 HTML 文档头部的样式标记内的一组 CSS 规则。 例如，以下示例定义了文档中设置了段落标签的所有文本的字体大小：

::

内联样式是在 HTML 文档内的特定标记实例中定义的。 例如，

“p”

仅定义使用内联样式丰富的标签格式化的段落的字体大小。

Dreamweaver 获取您应用的大部分样式属性并将它们显示在文档窗口中。 您还可以在浏览器窗口中预览文档以查看样式的应用方式。 某些 CSS 样式属性在 Microsoft Internet Explorer、Netscape Navigator、Opera 和 Apple Safari 中的显示方式有所不同。

选择“文件”>“新建”。

在“新建文档”对话框中，在“类别”列中选择“基本页面”，在“基本页面”列中选择“CSS”，然后单击“创建”。

文档窗口中将出现一个空白样式表。 “设计”视图和“代码”视图键已被禁用。 CSS 样式表是纯文本文件，其内容不会用于在浏览器中查看。

将页面保存（“文件”>“保存”）为cafe_townsend.css。

保存样式表时，请确保将其保存到cafe_townsendfolder 文件夹（网站的根文件夹）中。

在样式表中键入以下代码：

p {

字体系列：Verdana、无衬线字体；

字体大小：11px；

颜色：#000000；

行高：18px；

内边距：3px；

当您键入代码时，Dreamweaver 会使用代码提示来建议您完成输入的选项。 当您看到希望 Dreamweaver 为您完成的代码时，按 Enter (Windows) 或 Return (Macintosh)。

不要忘记在每行末尾的属性值之前添加分号。

完成的代码如下例所示：

要显示该手册，请选择“帮助”>“参考”，然后从“参考”窗格的弹出菜单中选择“O'Reilly CSS 参考”。 保存样式表。

附加样式表

当您将样式表附加到网页时，样式表中定义的规则将应用于页面上的相应元素。 例如，当您将cafe_townsend.css样式表附加到index.html页面时，所有段落文本（在HTML代码中使用标签格式化的文本）将根据您定义的CSS规则进行格式化。

在“文档”窗口中，打开 CafeTownsend 的 index.html 文件。 （如果文件已打开，请单击其选项卡。）

选择教程：向页面添加内容中粘贴到页面中的第一个文本。

查看属性检查器并确保段落已使用段落标签进行格式化。

如果属性检查器中的“格式”弹出菜单显示“段落”，则该段落将使用段落标签进行格式化。 如果“属性”检查器中的“格式”弹出菜单显示“无”或其他内容，请选择“段落”以设置段落格式。

对第二段重复步骤 3。

在“CSS 样式”面板（“窗口”>“CSS 样式”）中，单击面板右下角的“附加样式表”按钮。

在“附加外部样式表”对话框中，单击“浏览”并浏览到上一节中创建的cafe_townsend.css 文件。

单击“确定”。

文档窗口中的文本将根据外部样式表中的 CSS 规则进行格式化。

研究“CSS 样式”面板

CSS 样式面板可让您跟踪影响当前所选页面元素或整个文档的 CSS 规则和属性，并且无需打开外部样式表即可更改 CSS 属性。

确保index.html页面在文档窗口中打开。

在“CSS 样式”面板（“窗口”>“CSS 样式”）中，单击面板底部的“全部”，然后检查 CSS 规则。

在“全部”模式下，CSS 面板会显示应用于当前文档的所有 CSS 规则，无论这些规则是在外部样式表中还是在自己的文档中。 您应该在“所有规则”窗格中看到两个主要类：标签类和cafe_townsend.css 类。

如果标签类别未展开，请单击减号 (+) 以展开该类别。

单击正文规则。

值为#000000 的背景颜色属性出现在下方的“属性”窗格中。

请注意，您可能需要折叠其他面板（例如“文件”面板）才能看到完整的“CSS 样式”面板，并且您还可以通过拖动“CSS 样式”面板之间的边框来修改“CSS 样式”面板的宽度。窗格。

您可以使用教程：创建基于表的页面布局中的更改页面属性对话框来设置页面的背景颜色。 以这种方式设置页面属性时，Dreamweaver 会编译文档外部的 CSS 样式。

单击减号 (+) 以展开 Cafe_townsend.css 类别。

单击 p 规则。

外部样式表中为 p-rules 定义的所有属性和值都将显示在下方的“属性”窗格中。

在“文档”窗口中，在刚刚设置格式的两个段落中的任意位置单击一次。

在“CSS 样式”面板中，单击面板底部的“当前”，然后检查您的 CSS 样式。 在“当前”模式下，CSS 面板会显示当前选择的属性摘要。 显示的属性对应于外部样式表中 p 规则的属性。

在下一部分中，您将使用“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 规则，该规则的属性将显示在“属性”窗格中。 新交易还会出现在“属性”检查器的“样式”弹出菜单中。

将类样式应用于文本

现在您已经创建了一个类别规则并将其应用到各个段落文本。

在“文档”窗口中，选择第一段中文本的前四个短语：CafeTownsend'svisionarychef。

在“属性”检查器（“窗口”>“属性”）中，从“样式”弹出菜单中选择“粗体”。

“斜体”样式将应用于您的文本。

重复步骤 2，将“斜体”样式应用到第二段的前四个短语。

保存页面。

设置导航栏文本格式

接下来，您将使用 CSS 将样式应用到导航栏的链接文本。 许多网页使用带有嵌入文本的彩色钻石图像来创建导航栏。 而且，使用 CSS，您只需设置链接文本和一些格式即可。 通过使用 display:block 属性并设置块的长度，您可以有效地创建圆形，而无需额外的图像。

创建新的导航规则

打开 Cafe_townsend.css 文件（如果尚未打开），或者单击其选项卡以显示它。

要定义新策略css 禁用样式，技巧是在文件中的 .bold 类样式之前键入以下代码：

。导航{

这是一条空规则。

文件中的代码应类似于以下示例：

保存 Cafe_townsend.css 文件。

接下来，您将使用“CSS 样式”面板向规则添加属性。

如果index.html 文件未打开，请打开它。

在“CSS样式”面板中，确保选择“全部”模式css 禁用样式，选择新的.navigation规则，然后单击面板右下角的“编辑样式”。

在“CSS规则定义”对话框中，执行以下操作：

在字体文本框中，输入 Verdana,sans-serif。

从“大小”弹出菜单中选取“16”，然后从右侧附近的弹出菜单中选取“像素”。

从“样式”弹出菜单中选择“正常”。

从修饰列表中选择无。

从“粗细”弹出菜单中选择“斜体”。

在颜色文本框中输入#FFFFFF。

要显示该手册，请选择“帮助”>“参考”，然后从“参考”窗格的弹出菜单中选择“O'Reilly CSS 参考”。

单击“确定”。

现在，您将使用“CSS 样式”面板向 .navigation 规则添加更多属性。

在“CSS 样式”面板中，确保选择 .navigation 规则，然后单击“显示列表视图”。

列表视图使“属性”竖框按字母顺序显示所有可用属性（与“设置属性”视图不同，后者仅显示已设置的属性）。

单击背景颜色属性左侧的列。

要查看属性的完整内容，请将键盘放在该属性上。

输入十六进制补码值 #993300，然后按 Enter (Windows) 或 Return (Macintosh)。

提示 要查看您的工作对外部样式表的效果，请在工作时保持“文档”窗口中的cafe_townsend.css 文件处于打开状态。 当您在“CSS 样式”面板中进行选择时，您还会看到 Dreamweaver 在样式表中写入 CSS 代码。

找到显示属性（您可能需要向上滚动），在右列上单击一次，然后从弹出菜单中选择块。

找到 padding 属性，在右列上单击一次，输入值 8px，然后按 Enter (Windows) 或 Return (Macintosh)。

找到宽度属性，在右列上单击一次，在第一个文本框中输入 140，从弹出菜单中选择“像素”，然后按 Enter (Windows) 或 Return (Macintosh)。

单击“显示设置属性”仅显示您在“属性”窗格中设置的属性。

单击 Cafe_townsend.css 文件以显示它。 您会听到 Dreamweaver 已将您指定的所有属性添加到文件中。

保存并关闭 Cafe_townsend.css 文件。

现在您已经创建了一个用于设置导航栏文本格式的规则。 接下来，您要将规则应用到选定的链接。

申请规则

在文档窗口中打开 index.html 页面后，单击短语 Cuisine 将插入点放置在该短语内的某个位置。

在标签选择器中，单击最右侧的标签。

此操作将选择指定标签或链接的所有文本。

在属性检查器（“窗口”>“属性”）中，从“样式”弹出菜单中选取“导航”。

在“文档”窗口中，“美食”文本的外观已完全改变。 现在，根据您在上一节中为 .navigation 规则定义的属性，此文本已格式化为导航栏按钮。

对导航栏中的每个链接重复步骤 1 到 3。

您必须为每个标签或链接分配导航类样式，为此，使用标签选择器单独选择每个链接，然后依次为每个链接分配类样式非常重要。

如果您在格式化链接文本时遇到困难，请确保每个（或一组）链接短语之间有一个空格（而不是回车符）。 还要确保两个链接之间的空间本身没有链接。 如果空间已链接，请仔细选择链接的空间，清除属性检查器中的链接文本框，然后按 Enter (Windows) 或 Return (Macintosh)。

完成导航栏所有短语的格式设置后，保存页面并在浏览器中预览您的作品（文件 > 在浏览器中预览）。

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

添加键盘传递效果

现在，您将添加键盘传递效果，每次键盘指针经过链接时，导航栏的背景颜色都会发生变化。 要添加键盘悬停效果，请添加包含 :hover 伪类的新规则。

关于...about:hover 伪类 伪类是一种影响 HTML 文档中各个元素的方法，它不是基于文档本身的 HTML 代码，而是基于 Web 浏览器应用的其他外部条件。 伪类可以是动态的，这意味着当用户与文档交互时，页面上的元素可能会获得或丢失伪类。

当用户将键盘指针悬停在格式化页面元素上时，:hover 伪类会影响该元素的更改。 例如，将 :hover 伪类添加到 .navigation 类样式 (.navigation:hover) 以创建新规则时，所有使用 .navigation 规则格式化的文本元素将根据 .navigation:hover 规则的属性进行更改。

打开 Cafe_townsend.css 文件。

选择整个 .navigation 规则。

复制文本（“编辑”>“复制”）。

在规则末尾单击一次，然后按 Enter (Windows) 或 Return (Macintosh) 多次以创建一些空格。

将复制的文本粘贴（编辑 > 粘贴）到您刚刚创建的空间中。

将 :hover 伪类添加到粘贴的 .navigation 选择器中，如下所示：

在新的 .navigation:hover 规则中，将当前背景颜色 (#993300 ) 替换为 #D03D03 。

保存并关闭文件。

在“文档”窗口中打开index.html 文件，然后在浏览器中预览该页面（“文件”>“在浏览器中预览”）。

当您将键盘指针悬停在任何链接上时，您可以看到新键盘通过。