默认、用户和作者样式表有啥区别？

Posted 2023-03-06

技术标签:

【中文标题】默认、用户和作者样式表有啥区别？【英文标题】：What is the difference between default, user and author style sheets?默认、用户和作者样式表有什么区别？ 【发布时间】：2013-08-17 14:57:03 【问题描述】：

在CSS中，default、user和author样式表有什么区别？

【问题讨论】：

相关帖子 - What is user agent stylesheet 【参考方案1】：

默认样式表由浏览器供应商提供。

用户样式表由浏览器的用户提供。

作者样式表由网页作者提供。

【讨论】：

感谢您的快速回复。你能举一个用户样式表的例子吗？用户样式表看起来就像任何其他样式表，所以一个示例不会有那么有用。我在我的浏览器中使用了这个用户样式：“on ***.com, a[href*="w3schools.com"] background-color: salmon” 作为用户，我如何提供用户样式表？【参考方案2】：

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

默认（又名用户代理/浏览器）样式表

默认

<span>

<p>

<h1>

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

<html>
  <head>    
  </head>

<body>

 <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

</body>
</html>

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

用户样式表

Tool

Internet Options

General Tab

Accessibility button

Accessibility Window

User style sheet section

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

myuserstylesheet.css 看起来像这样：

`td

    color: green;
`

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

Google Chrome 浏览器几年前就停止支持用户样式表。更多详情请见here。

作者样式表

In-line

<div style="width:20px;height:20px;background-color:#ffcc00;"></div>

Internal/Embedded

<head>

<style>

外部

<head>

<link rel="stylesheet" type="text/css" href="abc.css">

推论 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：

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

内联

&lt;td style="color:orange"&gt;&lt;/td&gt;

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

内部

style

td

<html>
  <head>  
  <style>
td 
  color: red;


</style>
  </head>

<body>

 <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

</body>
</html>

外部

.css

link

//mystyle.css
td 
      color: yellow;

<html>
      <head>  
      <link rel="stylesheet" href="mystyle.css">
      </head>

    <body>

     <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </table>

    </body>
    </html>

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

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

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

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

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

【讨论】：

答案中最好的。非常简洁，唯一没有留下任何问题的。各位，花点时间通读一遍。哇，精彩的解释！非常感谢:) 我能找到的最佳解释。非常感谢！非常全面的解释。非常感谢！【参考方案3】：

2.1 Spec 给出了很好的解释：

作者：

用户：

用户代理：

【讨论】：