Que*_*tin 36
默认样式表由浏览器供应商提供.
用户样式表由浏览器的用户提供.
作者样式表由网页作者提供.
- 我在浏览器中使用这个用户风格:"在`stackoverflow.com`上,`a [href*="w3schools.com"] {background-color:salmon}`" (5认同)
- @l19 — 如果搜索引擎找不到您的答案，您应该在 http://superuser.com/ 上提出这个问题（并且您应该在其中指定您使用的浏览器）。 (3认同)
- 用户样式表看起来就像任何其他样式表一样,因此一个示例就不会那么有用了. (2认同)
- 作为用户，我如何提供用户样式表？ (2认同)
RBT*_*RBT 19
好问题!以下是各种样式表的详细说明:
默认(也称为用户代理/浏览器)样式表:首先,默认样式表也称为浏览器样式表或用户代理样式表.这是浏览器默认为其呈现的每个网页应用的样式表.因此,如果作为网页的作者,您不应用任何样式,即使这样也不是没有样式的.它仍然应用浏览器中安装的默认样式表中的样式细节.我们可以假设,它必须包含某些样式为所有标准的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>但是你仍然看到表格的标题以粗体显示.这来自浏览器的默认样式表.
用户样式表:现在第二级是用户样式表.浏览器为您提供了扩展浏览器默认样式表的选项.对于例如在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浏览器设置中进行这些更改后加载包含简单表的同一网页,则用户样式表中的样式将重新开始覆盖浏览器样式表,如下所示:
作者样式表:然后是作者样式表,这是您在网站中定义的网站创建者/作者.这有三种口味:
- 内联:在标签内部定义,例如
<div style="width:20px;height:20px;background-color:#ffcc00;"></div> - 内部/嵌入式:在html页面的
<style>标签内部定义的CSS样式<head>. - 外部:在单独的物理文件(例如abc.css)中定义的CSS样式,它们使用标记内部的链接标记应用于html网页
<head>:<link rel="stylesheet" type="text/css" href="abc.css">
- 内联:在标签内部定义,例如
对于任何HTML元素,样式表的应用优先级有一个根本区别,如下所述:
对于!important元素具有相同特异性碰撞的样式(最高优先级到最低优先级)
- 用户代理(浏览器)样式表
- 用户样式表
- 作者样式表
然后,对于正常样式,当元素具有相同特异性的碰撞时(从最高到最低优先级) - 它恰好相反
- 作者样式表
- 用户样式表
- 用户代理(浏览器)样式表
当不同类型的作者样式表之间存在相同特异性的冲突时,它们与HTML元素(文本顺序)的接近程度在决定优先级/优先级时很重要.它如下(最高到最低优先级):
- 内嵌(最接近HTML标记.实际上它位于HTML标记内部)
- 内部/嵌入式(距HTML标签相对较远)
- 外部(距离HTML标记最远,因为它实际位于HTML网页之外.)
注意:!important与普通样式相比,样式始终具有更高的优先级.您可以阅读CSS更多关于特异性计算这里.