css

您所在的位置：网站首页 › css等级 › css

css

2024-07-01 17:26| 来源: 网络整理| 查看: 265

以下是我们用于样式化 HTML 网页的各种类型的样式表的详细说明：

默认（又名用户代理/浏览器）样式表：首先，默认样式表也称为浏览器样式表或用户代理样式表。这是浏览器默认为其呈现的每个网页应用的样式表。因此，如果作为网页的作者，您不应用任何样式，即使那样它也不是没有样式的。它仍然应用浏览器中安装的默认样式表中的样式细节。我们可以假设它必须包含所有标准 HTML 标签的一些样式，例如，

等。这篇SO 帖子提供了有关各种浏览器的默认样式表的详细信息。

查看以下 HTML 页面。我创建了一个非常基本的 HTML 表格，完全没有样式：

Firstname Lastname Age Jill Smith 50 Eve Jackson 94

但是您仍然可以看到表格的标题以粗体显示。这来自浏览器的默认样式表。

在此处输入图像描述

用户样式表：现在第二级是用户样式表。浏览器为您提供扩展浏览器默认样式表的选项。例如，在 Internet Explorer 中，您可以转到Tool> Internet Options> General Tab> Accessibility button> Accessibility Window> User style sheet section>“使用我的样式表格式化文档”复选框。

在此处输入图像描述

因此，对于相同的 html 标记，如果我在自己的样式表中提供不同的样式（在本例中为“D:\myuserstylesheet.css”），那么它将开始覆盖它。

myuserstylesheet.css看起来像这样：

`td { color: green; }`

现在，如果我在 Internet Explorer 浏览器设置中进行这些更改后加载包含简单表格的相同网页，则用户样式表中存在的样式开始覆盖浏览器样式表，如下所示：

在此处输入图像描述

谷歌 Chrome 浏览器几年前就停止支持用户样式表。更多细节可以在这里找到。

作者样式表：然后是作者样式表，这是您在网站中定义为网站的创建者/作者的内容。这有三种口味：内联：在标签本身内部定义，例如 Internal/Embedded ：在html 页面的标签内标签中定义的 CSS 样式。外部：在单独的物理文件（例如 abc.css）中定义的 CSS 样式，这些样式使用标签内的链接标签应用于 html 网页：

推论 1：可以使用上述任何类型的样式表来设置 HTML 元素样式（例如字体、颜色）的值。让我们考虑td这个讨论的标签。它的样式有一个名为的属性color。所以这样的事情是可能的：

默认/浏览器样式表说：

td { color: black; }

用户样式表说：

td { color: green; }

作者样式表说

td { color: blue; }

这会导致冲突或碰撞。浏览器会混淆是否以td 黑色、绿色或蓝色显示元素。为了解决这个冲突，所有浏览器都遵循预定义的优先级/优先级顺序（从高到低），如下所示：

作者样式表用户样式表用户代理（浏览器）样式表

因此，由于作者样式表具有最高优先级，td将显示为蓝色。

对此有一个警告。对于!important样式，此优先级顺序正好相反，即

用户代理（浏览器）样式表用户样式表作者样式表

现在让我们用同样的例子来理解它：

默认/浏览器样式表说：

td { color: black !important; }

用户样式表说：

td { color: green !important; }

作者样式表说

td { color: blue !important; }

在这种情况下，由于优先级顺序正好相反，因此td标签将显示为黑色。

注意：!important规则样式总是比普通样式具有更高的优先级。

推论2：

关于作者样式表还有另一件事需要了解。作者样式表根据它们在网站源代码中的位置分为三种类型：

内联：看看下面的元素：

这表示这个特定的td标签应该是橙色的。

Internal : stylehead 标签中的标签表示td此网页上的每个标签都应显示为红色

td { color: red; } Firstname Lastname Age Jill Smith 50 Eve Jackson 94

外部：它是一个单独的物理 CSS 文件，具有扩展名.css。它存在于您的网站源代码中，并由网站的任何 HTML 页面使用link标签引用，如下所示：

//mystyle.css td { color: yellow; } Firstname Lastname Age Jill Smith 50 Eve Jackson 94

所以这里外部样式表mystyle.css已经在网页中使用link标签被引用。样式表说td网页上的每个标签都应该以黄色显示。

这也会导致冲突或碰撞。浏览器会混淆是否以td 橙色、红色或黄色显示元素。

为了解决这个冲突，所有浏览器都遵循基于冲突解决规则的预定义优先级/优先级顺序（从最高到最低）。每当不同类型的作者样式表之间存在相同特异性的冲突时，它们与 HTML 元素（文本顺序）的接近程度在决定优先级/优先级时很重要，如下所示：

内联（最接近 HTML 标记。实际上它在 HTML 标记本身内）内部/嵌入式（距离 HTML 标签相对较远）外部（离 HTML 标记最远，因为它物理上位于您的 HTML 网页之外。）

注意：您可以在此处阅读有关 CSS 中的特异性计算的更多信息。

【本文地址】

css

css

今日新闻

推荐新闻