49

在CSS中，默认、用户和作者样式表有什么区别？

4

3 回答 3

40

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

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

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

于 2013-08-15T12:12:12.343 回答
34

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

  1. 默认（又名用户代理/浏览器）样式表：首先，默认样式表也称为浏览器样式表或用户代理样式表。这是浏览器默认为其呈现的每个网页应用的样式表。因此，如果作为网页的作者，您不应用任何样式，即使那样它也不是没有样式的。它仍然应用浏览器中安装的默认样式表中的样式细节。我们可以假设它必须包含所有标准 HTML 标签的一些样式，例如<span>，<p>等<h1>。这篇SO 帖子提供了有关各种浏览器的默认样式表的详细信息。

查看以下 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>

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

在此处输入图像描述

  1. 用户样式表：现在第二级是用户样式表。浏览器为您提供扩展浏览器默认样式表的选项。例如，在 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 浏览器几年前就停止支持用户样式表。更多细节可以在这里找到。

  1. 作者样式表：然后是作者样式表，这是您在网站中定义为网站的创建者/作者的内容。这有三种口味：
    • 内联：在标签本身内部定义，例如<div style="width:20px;height:20px;background-color:#ffcc00;"></div>
    • Internal/Embedded ：在html 页面的<style>标签内标签中定义的 CSS 样式。<head>
    • 外部：在单独的物理文件（例如 abc.css）中定义的 CSS 样式，这些样式使用标签内的链接标签应用于 html 网页<head>：<link rel="stylesheet" type="text/css" href="abc.css">

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

默认/浏览器样式表说：

td
{
    color: black;
}

用户样式表说：

td
{
    color: green;
}

作者样式表说

td
{
    color: blue;
}

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

  1. 作者样式表
  2. 用户样式表
  3. 用户代理（浏览器）样式表

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

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

  1. 用户代理（浏览器）样式表
  2. 用户样式表
  3. 作者样式表

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

默认/浏览器样式表说：

td
{
    color: black !important;
}

用户样式表说：

td
{
    color: green !important;
}

作者样式表说

td
{
    color: blue !important;
}

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

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

推论2：

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

  1. 内联：看看下面的元素：

<td style="color:orange"></td>

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

  1. Internal : stylehead 标签中的标签表示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>

  1. 外部：它是一个单独的物理 CSS 文件，具有扩展名.css。它存在于您的网站源代码中，并由网站的任何 HTML 页面使用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 元素（文本顺序）的接近程度在决定优先级/优先级时很重要，如下所示：

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

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

于 2017-05-25T09:55:12.760 回答
23

2.1 Spec对每个都有很好的解释：

  1. 作者：作者根据文档语言的约定为源文档指定样式表。例如，在 HTML 中，样式表可能包含在文档中或外部链接。
  2. 用户：用户可能能够指定特定文档的样式信息。例如，用户可以指定一个包含样式表的文件，或者用户代理可以提供一个接口来生成用户样式表（或表现得好像它确实如此）。
  3. 用户代理：符合标准的用户代理必须应用默认样式表（或表现得像他们那样）。用户代理的默认样式表应该以满足文档语言的一般呈现期望的方式呈现文档语言的元素（例如，对于可视浏览器，HTML 中的 EM 元素使用斜体字体呈现）。有关 HTML 文档的推荐默认样式表，请参阅 HTML 示例样式表。
于 2013-08-15T12:13:41.370 回答