跳转到内容

层叠样式表/继承规则

Edit links
来自维基教科书，开放书籍，开放世界
< 层叠样式表
(重定向自 CSS 层叠)

概述

术语CSS 层叠指的是决策过程，即 Web 浏览器中用于确定将哪些层叠样式表 (CSS) 样式应用于网页每个部分的软件。它很复杂，因为样式是在很多地方编写的。存在错误、冲突和重复，更不用说始终存在的浏览器、用户和作者权限的层次结构。尽管如此，浏览器的软件必须决定对页面上的每个格式使用哪个样式，并且即使没有提供任何有用的样式，也必须构建一个合理的页面。

本页提供层叠的基本过程的概述和详细示例，虽然它能够在过程中传达详细的知识，但并非专门用于教授网页或其样式表的制作。

网页文件基础

[编辑 | 编辑源代码]

在描述层叠的工作原理之前，它本质上只是浏览器功能的一部分，最好回顾一下浏览器周围环境的基本特征。

  • 网页是使用.htm后缀打开特定文本文件的结果。该文件可以使用简单的文本编辑器编写。它位于作为服务器工作的远程计算机上，但也可以位于个人计算机 (PC) 的某个文件夹中。当它的地址提供给浏览器时，该文件将被下载到浏览器缓存，这是 PC 上的一个临时存储位置。.htm 文件有时被称为网页文档。
  • 网页文档中包含一些标记，以帮助格式化，Web 浏览器的作用就是应用样式。网页文档包含一对称为标记的标记，它们围绕着要格式化的文本。这些标记通过说明它是哪种页面结构来间接标识格式；例如，列表(<li></li>)、主标题(<h2></h2>)、副标题(<h3></h3>)、普通段落(<p></p>)，或者可能是表格单元格(<td></td>)。页面中的所有这些不同的元素都可以有不同的格式。
  • 这些标记是HTML（超文本标记语言）语言的一部分，尽管也可以使用其他语言。网页中的标记名称，例如<p>中的p，在样式表中列出，单独或与其他术语一起列出，正是这些样式表选择器列出了预期格式的描述。也就是说，浏览器可以找到用于格式化元素的正确样式表选择器，因为它们的名称是可预测的相似。文档元素被称为该选择器样式的预期目标。列出这些格式的文件类型称为层叠样式表 (CSS)。
  • 样式表只是一个带有.css后缀的文本文件，可以使用简单的文本编辑器编写。作者样式表通常位于与网页文档相同的文件夹中，无论它在哪里。无论如何，样式表的名称和地址由网页文档中的一个条目提供，因此它会在文档本身下载到浏览器缓存后不久就下载。事实上，那里可能列出了几个样式表，并且每个样式表都会在处理其样式之前导入和处理，依此类推。
  • PC 用户也可以更改样式。但他用户样式表位于本地计算机上。浏览器将此表与所有其他样式合并，因此两组样式可能都会影响页面的某些部分。当然，用户样式仅影响本地显示，其他人看不到。
  • 还有其他地方可以找到样式。它们有时被写入网页文档的标题部分，以及页面上标记内的内联样式。浏览器也有自己的样式表，即用户客户端表，在其他样式表丢失时提供基本布局。有时浏览器的默认设置和内置样式表也会影响结果。浏览器会合并所有这些来源的样式。
  • 作者样式由三个来源组成。它们是：直接写入网页文档标题部分的样式，标题部分中引用的链接样式表，以及页面主要内容中的内联样式。有时，这些链接样式表中的列表本身会导入更多样式表。
  • 某些样式可能比其他样式具有更高的重要性。在任何样式位置（包括文档本身）编写的样式都可以具有特殊的!important标记，以将它们与普通样式区分开来。这些标记允许作者或用户覆盖普通样式。此功能在测试中特别有用，或者用于断言内置浏览器样式优先于其他样式。在!important和普通样式中，还有不同的等级，由它们被发现的位置决定，即它们的来源（稍后详细说明）。
  • 某些样式比其他样式具有更高的特异性。样式表选择器缺乏通用性或具有狭窄定义的程度被称为特异性。例如，文档中的一些段落可能只是文档主体的一部分，并且其段落样式适用于一般情况。其他一些段落可能需要特殊格式，因为它们位于例如表格单元格中。浏览器可以检测到这种更具体的标记布局，并优先考虑最匹配它的选择器。特异性在层叠的决策过程中很重要，并且它的规则已经发展到了相当大的程度（稍后详细说明）。
  • 样式表格式具有一些共同特征。图 1 显示了样式表中可能存在的典型样式块布局。其中，选择器是样式声明集的主要标签，每个声明都包含一个属性和一个值。在示例中，样式表的选择器称为div ul，它有两个样式声明；一个用于line-height的属性具有1.8em的值；另一个用于background的属性具有darkgreen的值。可能的选择器数量不限于单个标记名称，因为正如示例所示，这些选择器可以被复合以表示一组标记在另一组标记内的嵌套。在示例中，此选择器将其样式应用于嵌套在 division (div) 标记对内的每个无序列表，但不应用于它找到的其他无序列表示例。引入类和id可以为选择器使用添加更大的特异性。
  • Web 标准和规范由万维网联盟 (W3C) 和其他人管理。对于 CSS 样式，新的标准会定期作为建议发布。这些标准在浏览器的测试版中进行测试，并收集发现的差异和不足之处。最终发布新的建议。可以在下面的另请参阅链接中找到各种 W3C 教程和规范。

层叠概述

[编辑 | 编辑源代码]
图 1：CSS 术语，用于典型的样式表条目，即样式规则。它描述了格式
用于一对 division (div) 块元素标记中嵌套的任何无序列表。
花括号之间声明的组合称为声明块。

本节提供的是对级联过程的直观描述，而不是详细描述。对于已经理解这些内容的人来说，最好直接跳到详细级联示例部分，那里的内容可能更符合他们的口味。无论如何，对于需要学习或提醒自己选择器和特异性的人来说，本节CSS 教程提供了教程。对于想要深入了解 HTML 的人来说，可以参考W3Schools HTML，这是一个广泛的外部参考；对于 CSS，可以参考W3Schools CSS。

继续，浏览器会逐个标签遍历网页，以确定它们的样式。为此，它首先会识别嵌套，即标签所在的文档树的一部分。这有助于浏览器检查它找到的选择器的有效性。然后，它会搜索所有样式来源，包括样式表和文档本身，寻找可能影响目标标签的选择器，同样，还要考虑到标签布局。如果选择器适用，其样式属性将按发现顺序列出，最终将生成一个适用于该特定标签的长属性列表。列表中可能包含许多已声明的样式，也可能一个都没有，具体取决于不同作者的工作情况，很明显，大多数可能为该标签声明的属性仍然不存在。

样式声明可以添加特殊标记，使其优先于普通声明，它们使用!Important关键字来标识。它们被称为重要声明。在排序其列表时，浏览器会将 !important 声明与任何普通声明分开。然后，浏览器会识别图 2 中的五个重要性等级或重要性层级，其中等级 1的优先级最低，等级 5的优先级最高。

图 2：CSS 2 级联重要性等级
等级 1 浏览器默认样式
列在用户代理 (UA) 样式表或等效实现中的样式。
等级 2 用户普通样式声明
用户样式表中没有 !Important 标记的样式。来自特定网站和内置样式表的普通声明也可以合并到这里。
等级 3 作者普通样式声明
作者集没有 !Important 标记的样式。
它们包括来自文档头部、链接样式表和内联样式的样式。
等级 4 作者 !Important 样式声明
作者集有 !Important 标记的样式。
它们包括来自文档头部、链接样式表和内联样式的样式。
等级 5 用户 !Important 样式声明
用户样式表中有 !Important 标记的样式。
来自特定网站和内置样式表的 !Important 声明也可以合并到这里。

列表中的每个属性条目都标有一个重要性等级，具体取决于选择器的来源以及它是否是普通声明还是重要声明。这些条目还标有它们的特异性，即反映其应用范围窄度的加权值。会记录每个来源位置，这是一个标记，用于标识其发现位置及其在样式表中的位置。

然后对数据集进行排序，将所有相似的属性分组，然后在找到的任何相似集合中（例如，十个不同的字体大小建议），进一步对其进行排序，以确定最高重要性。在进行这些排序后，对于任何竞争激烈的集合，再次按最高特异性进行排序，以最终隔离列表中每个不同属性的值。如果两个声明仍然匹配，最后决定的排序依据是它们在来源位置中发现的顺序；也就是说，最后考虑用于列表的那个声明将胜出。图 3 的图形描述了级联样式在解析单个段落标签格式时的参与，其细节与后面部分中的详细示例相同。

在确定哪些格式适用于特定标签后，浏览器会对页面上的每个标签重复此过程，然后使用其渲染引擎应用所有格式。

需要强调的重要一点是，在创建其属性列表时，浏览器始终按其从网页顶部到底部、从每个样式表顶部到底部的遍历过程中遇到的确切顺序创建列表。它还会在添加列表项时遵守在网页标题中找到的样式顺序。此方法对浏览器解决来源顺序作为决定因素的冲突具有影响。请再次记住，所有这些列表活动都是针对页面上的每个标签对进行的。


级联后

[edit | edit source]

级联完成后，原始已声明样式集将缩减为级联样式集，但许多属性在第一步中根本没有声明。为了使浏览器正常工作，必须为每个被视为必不可少的元素格式属性提供一个值。浏览器通过默认操作来填补这些巨大的空缺。对于每个缺失的必要属性，它首先尝试从父元素（即围绕它的标签）继承一个合适的值；如果由于某种原因无法实现，浏览器会分配一个初始值。属性初始值在设计时预设在属性定义列表中。应用这些默认值的结果是为每个正在考虑的标签生成一组完整的指定值，其中包含每个所需的属性。

下一阶段是通过考虑例如任何相对大小来从指定值生成计算值。例如，1em 的字体大小需要通过将其与某个参考点关联来转换为像素值。对集合进行一些进一步调整后，将生成使用值，然后在页面渲染中进行尝试。这些值可能会进一步调整以适应布局约束或对字体大小进行舍入，此时它们被称为实际值。

级联详情

[edit | edit source]
图 3. CSS 样式级联。请注意，只要用户样式声明带有 !Important 标记，它们就具有最高优先级。还要注意，优先级较低的来源
可以影响结果，但前提是优先级较高的来源没有为该属性指定值。

为了更详细地理解级联过程，下面准备了一个示例部分。其中，可以研究来源样式表本身以及用于示例的文档。假定浏览器正在尝试解析文档第一个段落标签的样式。适用于该标签的样式表声明已用绿色突出显示，以帮助读者理解该过程。

该嵌套的所有选定属性，包括它们的优先级、特异性和在来源中的位置，都已输入到此页面上的可排序表格中。读者只需关注各种列表，并使用表格上的按钮对其进行排序，即可看到解决这些选择的过程。


示例的样式来源

[edit | edit source]
用于测试的本地网页
<!-- This is the web-page, the document htm file used for local testing, and the declarations that are associated with the first document paragraph are marked in green. -->

<!DOCTYPE html>
<html>
<head>

<title>My HTML Test Document</title>
  
<style type="text/css">
p {
<span style="background:palegreen;">font-size:2em;
font-family:courier;</span>
}
.toppara{<span style="background:palegreen;">
background:green;
border:1px solid lightgrey;</span>
}
</style>
<link rel="stylesheet" href="Main.css" type="text/css" media="screen">
</head>
<body>
    <div>
       <p <span style="background:palegreen;">id="para1" class="Tahoma mostparas toppara" </span> style="<span style="background:palegreen;">font-family:arial;padding:1.5em;</span>">
This is the top (first) paragraph and is styled as 30px Black Bold Normal Text in Tahoma with the browser's 1em 0 margins.   There is a beige background, a styled border, and 1.5em of text padding.</p>
    </div>
       <p id="para2" style="color:red;">This is the second paragraph and is styled as 30px Red Bold Italic Text in Garamond with the default browser 1em 0 margins. There is a white background and 10px of padding.</p>

</body>
</html>



用于测试的用户样式表
/* This is User.css, and the declarations that are associated with the first document paragraph are marked in #ffffcc.*/


p{
font-size: 30px !important;
}

.Tahoma{
font-family: Tahoma !important;
}


#para1{
font-family: Times;
color: blue; 
font-style: italic;
font-weight: normal;
}


#para2{
font-size:10pt;
color:white;
font-style:italic;
}

div{}



用于测试的作者样式表
/* This is Main.css, and the declarations that are associated with the first document paragraph are marked in #ffffcc.*/


#para1.Tahoma{
font-family:Calibri !important;
color:black !important;
font-style:normal !important;
}

p{
font-family:Garamond;  
font-size:20px;
font-weight:bold;
background:white;
padding:10px;
}

.mostparas{
background:beige;
}



Opera 10 浏览器样式表
/* This is the Opera browser's Client Style-sheet.   It is used when styles are not otherwise specified, and so has the lowest importance. The declarations that are associated with the first document paragraph, (just the ''p'' in this case), are marked in #ffffcc.*/

/*   Note that this CSS style-sheet is correct for Opera 10, and although the intention is unlikely to have much changed for later Opera versions, no data has been found for these; not CSS sheets or listings that describe their equivalent behavior.*/


/* Copyright 2010 Opera Software */

a {
	color: #00C;
	text-decoration: underline;
}

a:visited {
	color: #800080;
}

abbr {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
}

address {
	display: block;
	font-style: italic;
	padding-left: 2px;
	padding-right: 2px;
}

area {
	display: none;
}

audio {
	display: none;
}

audio[controls] {
	display: inline;
}

b {
	font-weight: bold;
}

base {
	display: none;
}

bdo {
	direction: rtl;
	unicode-bidi: bidi-override;
}

blockquote {
	display: block;
	margin: 1em 10px 1em 40px;
}

[dir=rtl] blockquote {
	margin: 1em 10px 1em 40px;
}

body {
	display: block;
	margin: 8px;
}

button {
	border-width: 2px;
	color: #000;
	display: inline-block;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px 8px;
	text-align: center;
	text-indent: 0;
	white-space: nowrap;
}

caption {
	display: table-caption;
	text-align: center;
}

cite {
	font-style: italic;
}

code {
	font-family: use-lang-def;
	font-size: 0.81em;
}

col {
	display: table-column;
}

colgroup {
	display: table-column-group;
}

datalist {
	display: none;
}

dd {
	margin: 0 0 0 40px;
}

[dir=rtl] dd {
	margin: 0 40px 0 0;
}

del {
	text-decoration: line-through;
}

dfn {
	font-style: italic;
}

div {
	display: block;
}

dl {
	display: block;
	margin: 1em 0;
}

dt {
	display: block;
}

em {
	font-style: italic;
}

fieldset {
	border-style: groove;
	border-width: 2px;
	display: block;
	margin-left: 2px;
	margin-right: 2px;
	padding: 0.33em 0.67em 0.75em;
}

form {
	display: block;
}

h1 {
	display: block;
	font-size: 2em;
	font-weight: bold;
	margin: 0.67em 0;
}

h2 {
	display: block;
	font-size: 1.5em;
	font-weight: bold;
	margin: 0.83em 0;
}

h3 {
	display: block;
	font-size: 1.17em;
	font-weight: bold;
	margin: 1em 0;
}

h4 {
	display: block;
	font-weight: bold;
	margin: 1em 0;
}

h5 {
	display: block;
	font-size: 0.83em;
	font-weight: bold;
	margin: 1.67em 0;
}

h6 {
	display: block;
	font-size: 0.67em;
	font-weight: bold;
	margin: 2.33em 0;
}

head {
	display: none;
}

hr {
	border-style: inset;
	border-width: 1px;
	box-sizing: content-box;
	display: block;
	height: 0;
	margin: 10px 0;
	text-align: center;
}

html {
	display: block;
}

i {
	font-style: italic;
}

iframe {
	border-style: inset;
	border-width: 2px;
}

input {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px;
	text-align: default;
	text-indent: 0;
	text-transform: none;
}

ins {
	text-decoration: underline;
}

kbd {
	font-family: use-lang-def;
	font-size: 0.81em;
}

keygen {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px;
	text-align: default;
	text-indent: 0;
}

legend {
	display: block;
	padding-left: 2px;
	padding-right: 2px;
}

li {
	display: list-item;
}

link {
	display: none;
}

menu {
	display: block;
	margin: 1em 0 1em 40px;
	padding-left: 2px;
	padding-right: 2px;
}

[dir=rtl] menu {
	margin: 1em 40px 1em 0;
}

meta {
	display: none;
}

noscript {
	display: none;
}

ol {
	padding: 0 40px 0 0;
}

optgroup {
	text-indent: 0;
}

option {
	text-indent: 0;
}

p {
	display: block;
	margin: 1em 0;
}

pre {
	display: block;
	font-family: use-lang-def;
	font-size: 0.81em;
	margin: 1em 0;
	white-space: pre;
}

q {
	quotes: "\"" "\"" "'" "'";
}

samp {
	font-family: use-lang-def;
	font-size: 0.81em;
}

script {
	display: none;
}

select {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px;
	text-align: default;
	text-indent: 0;
}

strong {
	font-weight: bold;
}

style {
	display: none;
}

sub {
	vertical-align: sub;
}

sup {
	vertical-align: super;
}

table {
	border-spacing: 2px;
	display: table;
	text-indent: 0;
}

tbody {
	display: table-row-group;
	vertical-align: middle;
}

td {
	display: table-cell;
	padding: 1px;
	vertical-align: inherit;
}

textarea {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	line-height: normal;
	padding: 1px;
	text-align: default;
	text-indent: 0;
	text-transform: none;
}

tfoot {
	display: table-footer-group;
	vertical-align: middle;
}

th {
	display: table-cell;
	font-weight: bold;
	padding: 1px;
	vertical-align: inherit;
}

thead {
	display: table-header-group;
	vertical-align: middle;
}

title {
	display: none;
}

tr {
	display: table-row;
	vertical-align: inherit;
}

ul {
	display: block;
	list-style-position: outside;
	list-style-type: disc;
	margin: 1em 0;
	padding: 0 0 0 40px;
}

[dir=rtl] ul {
	padding: 0 40px 0 0;
}

var {
	font-style: italic;
}

video {
	display: inline;
}


级联排序表格

[edit | edit source]

下表 1 列出了示例文档中第一个段落标签的所有属性，它们按发现的从上到下顺序排列。

  • 首先，用户样式表user.css按从上到下顺序排列。（1:1 到 1:6；六个属性作为第一个要考虑的来源）。
  • 然后是头部样式，因为它们位于文档上方样式表链接。（2:1 到 2:4）
  • 接下来是作者样式表main.css；（这些标记为 2:5 到 2:13）。
  • 然后添加了两个内联样式作为项目（2:14 到 2:15）。
  • 浏览器的客户端样式表也参与其中，因此它们最后添加。（3:1 和 3:2）。

这 23 个项目可以在表 1 中看到。

要确定这许多竞争样式中的哪些将最终用于第一个段落，可以使用模拟级联行为的排序模型。其作用是对项目进行排序

  • 首先按属性名称排序
  • 然后按重要性排序
  • 然后按特异性排序，分为四个步骤
  • 然后，无须排序来源顺序

表 1 以页面自然来源顺序打开，读者可以对它进行排序，以查看每个步骤如何影响级联。

排序完成后，将选择这些项目，就像它们构成集合一样

p{
 background:beige;
 border:1px solid lightgrey;
 color: black;
 display: block;
 font-family: Tahoma;
 font-size: 30px;
 font-style: normal;
 font-weight: bold;
 margin: 1em 0;
 padding:1.5em; 
}

要将列出的样式集排序为合格的少数样式，首先不使用shift键对属性列进行排序，方法是按下其列标题中的箭头；然后，按照相同的方式对其余可排序列从左到右进行排序，但要按下shift键。这会将选择项带到其不同属性集的底部或顶部，具体取决于用户是升序排序还是降序排序。为了帮助初次使用，将选择项用蓝色标记.

表 1：用于解析示例段落标签 CSS 级联的可排序表格
声明   权重
特异性
属性 值 选择器 重要性 样式
属性		 ID
选择器		 类
选择器		 元素
选择器		 来源
顺序
字体大小 30px p (排名 5) 用户重要 0 0 0 1 1:1
字体系列 Tahoma .Tahoma (排名 5) 用户重要 0 0 1 0 1:2
字体系列 Times #para1 (排名 2) 用户普通 0 1 0 0 1:3
颜色 蓝色 #para1 (排名 2) 用户普通 0 1 0 0 1:4
字体样式 斜体 #para1 (排名 2) 用户普通 0 1 0 0 1:5
字体粗细 普通 #para1 (排名 2) 用户普通 0 1 0 0 1:6
字体大小 2em p (排名 3) 作者普通 0 0 0 1 2:1
字体系列 Courier p (排名 3) 作者普通 0 0 0 1 2:2
背景 绿色 .toppara (排名 3) 作者普通 0 0 1 0 2:3
边框 1px 实线 淡灰色 .toppara (排名 3) 作者普通 0 0 1 0 2:4
字体系列 Calibri #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:5
颜色 黑色 #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:6
字体样式 普通 #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:7
字体系列 Garamond p (排名 3) 作者普通 0 0 0 1 2:8
字体大小 20px p (排名 3) 作者普通 0 0 0 1 2:9
字体粗细 粗体 p (排名 3) 作者普通 0 0 0 1 2:10
背景 白色 p (排名 3) 作者普通 0 0 0 1 2:11
填充 10px p (排名 3) 作者普通 0 0 0 1 2:12
背景 米色 .mostparas (排名 3) 作者普通 0 0 1 0 2:13
字体系列 arial p 内联 (排名 3) 作者普通 1 0 0 0 2:14
填充 1.5em p 内联 (排名 3) 作者普通 1 0 0 0 2:15
显示 块级 p (排名 1) 浏览器客户端 0 0 0 1 3:1
边距 1em 0 p (排名 1) 浏览器客户端 0 0 0 1 3:2


一些结论

[编辑 | 编辑源代码]
  • 请注意，在正确排序的表格中，大多数示例都是根据其排名顺序选择的，或者换句话说，是根据其重要性选择的。
  • 然而，背景属性并非通过重要性或特指性来解析，因为这些属性对于该集合中的每个背景属性都是相同的。它们仅通过源顺序来选择，也就是说，它们被列出的顺序。
  • 另一方面，填充属性的两个列表具有相同的重要性，但在特指性方面有所不同。来自内联样式的那个是根据这个基础选择的。
  • 请注意，在上述层次结构中，带有 !Important 关键字标记的用户样式具有最高的优先级，并且它们只能通过省略来失败。也就是说，可以使用其他样式，但仅当那里没有指定格式时才可以使用。一般来说，选择来代表级联中的源级别的样式，只有在比它更重要的源没有设置自己的值时，才能对最终结果产生影响。图 3 的图形以比排序表更直观的方式显示了这一点，但它显示了相同的示例。
  • 关于此选择过程，一个不太明显的点可能是，带有!important 标记的声明不需要高特指性来胜出。也就是说，虽然!important 声明在其自身源排名中按特指性排序，但完全有可能一个低特指性的声明会被选择来代表其排名。然后，由于排名源的优先级，低特指性项可以胜过一个特指性更高但优先级更低的项。这为!important 声明提供了非常广泛的范围，而且由于它们确实如此，在使用中尽量缩小它们的特定性至关重要。例如，作者样式表中高特指性的普通声明
     div table tr td p {color:red}   /* for a paragraph in a cell of a row of a table in a division block */
    仍然可以被低特指性声明覆盖
    p{color:green !important}       /* for a paragraph wheresoever found on the page */
    除了影响特定示例外，此后一个声明还会对所有具有正常优先级的段落声明产生影响。
  • 从可能过少的數據中概括而言，可以說，声明的排名位置赋予其越重要的权重，如果它们不想在范围上变得过于霸道，就需要越注意缩小它们的特定性。

CSS 教程

[编辑 | 编辑源代码]

下面提供了一些简短的教程。目的是提供一些简短的片段来指导主题基础知识，而不是进行冗长的讨论。有一个关于样式表选择器使用的列表，以及对特指性和其他一些内容的解释。

对于那些打算通过更改样式表和网页内容来学习 CSS 的人来说，最好提醒一下关于文件缓存的标准内容。

  • 当浏览器首选项（选项）更改时，通常需要重新启动浏览器才能使其生效。
  • 当网页或样式表更改时，除非先清除浏览器缓存并重新加载页面，否则不太可能看到预期的更改。如果忽略这一点，可能会造成很大的混乱。每个浏览器的缓存清除方法都不同，但通常在浏览器的首选项（选项）中有一个功能。有时，下拉菜单项可以提供更快的缓存清除，但在其他情况下，可能需要将选项设置为在关闭时清除缓存，然后重新启动浏览器以显示更改。对于 Opera 浏览器，清空浏览器缓存的最便捷方法是使用下拉菜单项工具/删除私人数据...


样式表的选择器

[编辑 | 编辑源代码]
样式表的选择器
基本的样式表选择器使用

 

标签选择器
标签选择器是最简单的选择器。它们只是正在定义其样式的 HTML 标签的文本部分。但是，通常情况下，选择器之所以被称为选择器，是因为它用于选择或定位网页的一部分及其样式。它也可以与其他术语组合使用，以提供更具选择性的定位。

它是样式表达式中最左边的部分，直到但不包括第一个花括号。

一个带有段落标签选择器的简单样式如下所示

p {font-size: 10pt;}


上面的样式可以自动应用于网页上的所有简单段落。有时，选择器被组合起来以节省打字；然后，可以使相同的样式应用于整个逗号分隔的组，如下所示
p, div, table, ul {padding: 1em}


当我们打算为页面上的所有标签编写声明时，我们可以使用通用选择器，即星号，如下所示
* {font-family; Arial, Sans-serif}


我们还可以有条件地设置段落的样式。如果样式仅在段落标签嵌套在 div 标签内时应用，我们可以将其选择器写为
div p {line-height:1.8em;}


类选择器
类选择器是与类相关联的选择器；也就是说，是一组完整的样式。要使用它，类名必须在关联的标签内声明。它比简单的标签选择器具有更高的特指性，但比 ID 选择器低。类可以在整个页面中使用任意多次，并且可以在一个元素中声明多个类。在样式表中，我们可以使用 say 定义类；
.thetop {font-family: Arial;}


要将这些样式应用于文档中的段落标签，例如，我们可以在文档中编写以下声明
<p class="thetop"> Some paragraph text </p>


当以下两个类在同一个元素中一起声明时，两个单独定义的类的样式将被合并
<div class="firstpara headings">The text</div>


如果选择器按如下所示编写，则样式将仅应用于声明了这两个类的元素
.firstpara.secondpara{}


ID 选择器
这些应该只在页面中使用一次，并且在一个元素中只能声明一个。它们具有最大的特指性，仅次于内联样式。典型的 id 定义可以在样式表中编写为
#Tailpiece {color:gray;}


我们在文档中声明 ID 以用于 say；
<div id="Tailpiece" >This is the text </div>


上下文选择器
这些描述了当标签相互嵌套时要应用的样式。在此示例中，选择器将仅应用于嵌套在分隔标签内的段落标签。为此，我们编写
div p {padding: 1em;}


它将在文档中的标签如下所示时应用
<div><p>The is the text</p></div>


组合上面的一些想法，以下是相同嵌套段落的样式，但现在一个声明了一个类，另一个声明了一个 ID

div p.firstpara {background:green}
div p#tailpiece {font-size:30pt}


属性选择器
这些是带有方括号中属性的选取器，它们以条件的方式修改其操作。 要给所有标题为“CSS Work”的项目着色，我们可以在样式表中编写
[title="CSS Work"] {color: blue}


要选择任何标题属性值中包含子字符串able的元素，我们编写

[title*="able"] {color: red}


其他属性可能包括alt、class、id、lang、style、title，以及 HTML 属性，例如align、cellspacing等。


伪类
这些是调节行为的类，例如选择页面上的链接。 我们可以写
a:active {color:purple}


伪元素
这些是能够访问诸如段落的“第一行”和“最后一行”等功能的元素，并且允许对页面进行额外的控制。 例如，它们还允许定位行中的第一个单元格，或每行偶数或奇数。

要使所有段落首字母加粗，我们可以写

p:first-letter {font-weight:bold}


first-of-type伪元素选择其父元素中与构造匹配的第一个子元素。 例如，要使所有表格的整个第一列加粗，我们可以将选择器写为

table td:first-of-type{font-weight:bold;}


last-of-type伪元素选择其父元素中与构造匹配的最后一个子元素。 此选择器在声明totals类的表格的最后一行上方绘制总计线

table.totals tr:last-of-type{border-top:2px solid darkgrey;}


nth-child和nth-of-type伪元素可用于按模式选择性地定位元素。 下面的第一个示例将所有表格的每行奇数着色

table tr:nth-child(odd) {background: #FFF;}


下一个示例将所有表格的偶数行着色。

table tr:nth-child(even){background:linen;}


第三个示例显示了表格行着色的一般形式；这种情况将从第二行开始的每第三行着色

table tr:nth-child(3n+2){background: grey;}


要对偶数列着色，可以将两个伪元素复合起来，如下所示。 此示例将所有表格的每一行中的所有偶数单元格着色。 这两个部分都可以采用更复杂的参数。

table tr:nth-of-type(n) td:nth-of-type(even) {background:lightpink;}


重要样式
这些是在用户、作者或任何其他具有高优先级的样式源中的声明。 有关详细信息，请参见页面：例如
p{font-weight:bold !important;}



  

选择器和标签嵌套

嵌套元素是其开始和结束标签本身被一组完整的其他标签包围的元素。 下面的示例将使问题更清楚。 下面的 HTML 代码用于演示。 其中包含许多嵌套的标签集（代表元素）。 例如，表格完全嵌套在一对除法标签内，所有这些完全嵌套在一对主体标签之间。

嵌套的概念不仅限于相邻的标签对。 也就是说，在上面的示例中，表格也被认为嵌套在主体标签内，尽管除法标签位于它们之间。 在确定哪些选择器可能适用于文档中的特定标签时，浏览器会考虑标签所在的嵌套。 在下面的示例中，假定浏览器正在尝试为第一个标题标签 h2 查找相关的嵌套标签。

图 1：显示嵌套标签对的 HTML 片段。 

<!--  Sample html code for the nesting example 
Go to the examples below for an explanation -->
  <body>
    <div>
        <h2>First Heading</h2>
        <p>First paragraph</p>
        <table>
          <th>Column 1 Heading</th><th>Column 2 Heading</th>
          <tr>
          <td>Cell 1 text</td><td>Cell 2 text</td>
         </tr>
        </table>
    </div>
    <h2>Second Heading</h2>
    <p class="class1">Second paragraph</p>
    <ol>
      <li id="id1">First list item text
      <li>Second list item text
    </ol>
  </body>


图 2：此图显示了可能的选取器作为节点。 它遵循图 1 的摘录。 注意，在存在声明的地方，有两种可能的指定选择器的方法，一种是包含声明的标签，另一种是不包含声明的标签。

通常，通过实践，网页构建者可以通过简单检查来查看标签集内的关系，但这里将列出并解释嵌套的标签对。 在上面的摘录中，嵌套在除法中的 h2 标签有四种可能的嵌套，这意味着有四种可能的编写包含该标签的选择器的方法。 也就是说，仅凭它本身，或者设置至少在某个地方位于完整的标签对之间。

在图 2 中可以看到所有可能适用于图 1 摘录的选择器，除了那些包含通用选择器和省略的根元素<html>的选择器。 任何起作用的选择器都可以通过连接以目标标签结束的选择器路径来创建。 生成的集合应该是用空格分隔的，但不需要包含比获得所需特异性所需的更多内容，并且序列中的任何标签都可以省略。 下面的示例显示了可能为图 1 的第一个标题标签编写的简单选择器

四种情况是

1. 琐碎的情况... 标签本身...选择器h2本身将包含相关的样式列表，并且此通用选择器也影响第二个标题。

<h2>First Heading</h2>

2. 嵌套在 div 标签内...选择器div h2将包含相关的样式列表，并且由于第二个标题未嵌套在 div 内，因此此选择器仅影响第一个标题。

<div>
        <h2>First Heading</h2>
</div>

3. 嵌套在 body 和 div 标签内...选择器body div h2将包含相关的样式列表，并且同样，由于第二个标题未嵌套在 div 内，因此此选择器仅影响第一个标题。 <body> <div> <h2>First Heading</h2> </div> </body>

4. 嵌套在 body 标签内... 注意，即使忽略了中间标签，这也被认为是嵌套。选择器body h2也将包含相关的样式列表，并且由于两个标题都嵌套在 body 中，因此它会影响它们两者。 <body> <h2>First Heading</h2> </body>

添加类和id声明到目标标签将允许更具体地定位样式，可能避免其他情况下可能出现的任何混淆。 这样做也会大大增加指定选择器的方法数量。 下面的部分提供了一个包含此类声明的示例。 出于学习目的，它列出了可能遇到的一些用于典型段落标签的选择器格式，尽管并非所有这些都是最佳选择。


带有类和 ID 的选择器

图 3：包含声明的 HTML 片段。 

<body id="topid">
<p>textA</p> 
<div>
  <p id="someid" class="class1 class2" style="color:blue;">textB</p>
</div>
</body>

图 4：此图显示了可能的选取器作为节点。 它遵循图 3 的摘录。 注意，在存在多个声明的地方，可以将它们组合起来生成更复杂的选择器。 这些选择器中的大多数在实践中永远不会使用。

图 3 显示了一个相当常见的标签排列，其中一个段落嵌套在一个除法标签集中，所有这些都假定位于网页文档的主体标签内。 此外，请注意，段落标签内有声明；一个id，两个类和一个内联样式。 除法标签在其中声明了一个id。 添加这些声明允许对第二个段落的可用选择器进行大量变体，尽管从理论上的 64 种变体来看，只有大约 20 种会经常使用。

还请注意，还有另一个段落标签，但它属于不同的嵌套。 它只是嵌套在主体标签内，与除法标签对没有任何联系。 当为段落编写样式时，某些样式会影响这两个段落，而另一些样式只会影响其中一个。

请参阅图 3。 以下任何或所有选择器都可以用来列出两个段落中的第二个段落的样式，即包含所有声明的那个。 对于第一个段落标签也会受到影响的情况，提供了说明。

p
一个通用的段落选择器。 也影响第一个段落。 特异性 = 1。
div p
用于除法标签内的段落。 特异性 = 2。
body p
用于主体标签内的段落，其中可选地存在一些标签（如果有）。 也影响第一个段落。 特异性 = 至少 2。
body * p
用于主体标签内的段落，其中必然存在一些标签（如果有）。 也影响第一个段落。 特异性 = 2。
body div p
用于除法标签内的段落，以及本身位于主体标签内的除法标签。 特异性 = 3。
.class1
用于包含声明 class= ”class1” 的任何元素。 特异性 = 10
.class2
用于包含声明 class= ”class2” 的任何元素。 特异性 = 10
p.class1
用于包含声明 class= ”class1” 的段落。 特异性 = 11
p.class2
用于包含声明 class= ”class2” 的段落。 特异性 = 11
.class1.class2
用于包含声明 class= “class1 class2” 的任何元素，两者同时存在。 特异性 = 20
p.class1.class2
对于一个包含声明 class= “class1 class2” 的段落，其中两个类同时存在。特异性=21
div p.class1
对于一个包含声明 class="class1" 的段落，该段落嵌套在 division 标签中。特异性=12
div p.class2
对于一个包含声明 class="class2" 的段落，该段落嵌套在 division 标签中。特异性=12
div p.class1.class2
对于一个包含声明 class="class1 class2" 的段落，该段落嵌套在 division 标签中。特异性=22
body div p.class1
对于一个嵌套在 division 标签中的段落，division 标签本身嵌套在 body 标签中，并且段落包含声明 class= “class1”。特异性=13。
body div p.class2
对于一个嵌套在 division 标签中的段落，division 标签本身嵌套在 body 标签中，并且段落包含声明 class= “class2”。特异性=13。
body div p.class1.class2
对于一个嵌套在 division 标签中的段落，division 标签本身嵌套在 body 标签中，并且段落包含声明 class= “class1 class2”。特异性=23。
body p.class1
对于一个嵌套在 body 标签中的段落，无论中间是否有其他标签，并且段落包含声明 class= “class1”。特异性=12。
body p.class2
对于一个嵌套在 body 标签中的段落，无论中间是否有其他标签，并且段落包含声明 class= “class2”。特异性=12。
body p.class1.class2
对于一个嵌套在 body 标签中的段落，无论中间是否有其他标签，并且段落包含声明 class= “class1 class2”。特异性=22。
#someid
对于任何包含声明 id= “someid” 的元素。在一个页面上只能声明一次，并且一个元素只能列出一个 ID。特异性=100
#topid p
对于一个嵌套在任何包含声明 id= “topid” 的元素中的段落。可选地，这两个元素之间可能存在一个标签。（注意，改变最后一个词语可以允许许多选择器和定义）。在本例中影响这两个段落。特异性=至少 101
#topid * p
对于一个嵌套在任何包含声明 id= “topid” 的元素中的段落。必须存在这两个元素之间的标签。（注意，改变最后一个词语可以允许许多选择器和定义）。在本例中只影响第二个段落。特异性=101
*
能够显示添加的样式的每个元素。影响两个段落。特异性 = 0
段落标签中的内联样式
包含样式声明的段落。特异性=1000


计算特异性

[edit | edit source]

样式声明特异性

[edit | edit source]

特异性指的是声明缺乏通用性的程度；它应用于页面上的某个标签的程度，而不是应用于通用标签的程度。确定特异性方法的开发已相当完善。

使用的方法计算一个加权和来表示特异性。计算特异性的方法如下

对于任何给定的样式表条目，检查它的选择器，例如，div.p。选择器有时很简单，只有一个元素，或者像这样，很复杂，有多个元素。通过以下方式为其特异性构建一个值，并将其添加到总计中

  • 对于通用选择器 (*) 或继承的值，将零添加到特异性总计中。
  • 对于内联样式，将 1000 添加到总计中。这些样式只存在于文档中。
  • 对于每个提到的 ID 选择器，将 100 添加到总计中。
  • 对于每个类、伪类或属性，将 10 添加到总计中。.
  • 对于每个简单的标签元素和伪元素，将 1 添加到总计中。

在同一级别内，竞争样式声明中特异性最高的值将代表该级别在整体级联中的地位。（参见主页面中的图形）。

特异性 - 计算示例

[edit | edit source]
p { }
总计=1，因为选择器中只有一个简单的标签元素。
div p { }
总计=2，因为有两个标签元素 (2)。
p.topsection { }
总计=11，因为有一个标签元素 (1)，加上一个类 (10)。
#toppara { }
总计=100，因为有一个 ID 选择器 (100)
div table p#green { }
总计=103，因为有三个标签选择器 (3)，加上一个 ID (100)。
style="float:left;"
总计=1000，因为有一个内联样式 (1000)
a:hover { }
总计=11，因为有一个标签元素 (1)，加上一个伪类 (10)。
p:first-line { }
总计=2，因为有一个标签元素 (1)，加上一个伪元素(1)。
p[title] { }
总计=11，因为有一个标签元素 (1)，加上一个属性(10)。

样式继承

[edit | edit source]
样式继承
样式继承

样式继承是指在没有为子元素指定合适的样式时，使用来自父元素的样式。样式继承发生在级联之后，尽可能地填充缺失的属性值，如果无法做到，则通过应用初始值来实现，即 CSS 属性本身的默认值。请注意以下几点

  • 父元素是指任何其标签完全包含另一组标签的元素，即所谓的子元素的标签。
  • 继承发生在从父元素到子元素，如果有的话，可以传递到嵌套的任何深度，其中一个元素的子元素成为下一个元素的父元素。
  • 先前建立的级联值的计算值会被继承，而不是属性本身。由于级联值不再具有与其相关的任何重要性等级或特异性，因此这些因素对继承也没有任何影响。
  • 如果子元素有为其指定的相关样式，那么父元素不能通过继承将样式传递给它。
  • 即使 HTML 属性也可以阻止继承，如果它作为子元素中的相关样式存在。这是因为属性被赋予等效的 CSS 格式以便在级联中发挥作用。它们在浏览器的样式表中这样做。
  • CSS 属性的初始值不参与级联。在级联之后，如果未指定任何样式，则尝试通过继承来解决问题，如果仍然不可行，则使用CSS 属性定义表中找到的初始值。初始值可能被采用的原因包括
    • 未指定该属性，并且在任何情况下都无法继承。
    • 属性值存在，但其值设置为initial。
  • <!DOCTYPE html> 针对 HTML5 标准，这是默认假设。这些注意事项将适用于其顶行条目与这里一致的网页文档。对于某些其他doctype，属性值的继承可能完全失败。

以下示例有助于解释基本要点。

继承作为默认操作的一部分发生，在级联值被解析之后。这种假设使得编写示例变得困难。因此，读者应该假设以下示例中显示的样式已经通过级联解析为这些元素的有效样式。

简单继承
<!-- Figure 1 -->
<html>
   <body style="font-size:16px; line-height:1.5em;"> 
      <div>   
        <p>This is the test paragraph</p>
      </div>
   </body>
</html>


参见图 1。在上面的情况下，段落的字体大小和行高将与body标签相同。在这种情况下，div标签从body标签继承，因为 div 没有指定这些属性。段落从div继承，原因相同。

在特定级别指定时，相对行高始终计算为同一元素的计算字体大小的倍数，但在继承行高的情况下，使用其父元素的计算行高值。下一个示例说明了这一点。相对字体大小始终计算为父元素的计算字体大小的倍数。

行高将应用为尽可能接近其计算的 24px 的值（16px x 1.5）。

带相对值的继承
<!-- Figure 2 -->
<html>
   <body style="font-size:16px; line-height:1.5em;"> 
      <div style="font-size:1.25em; line-height: 1.6em;">   
        <p style="font-size:1.5em;">  /* inherits calculated line-height value as 32px */               
              This is the test paragraph
        </p>
      </div>
   </body>
</html>


参见图 2。在这个稍微复杂一点的案例中，div 的计算字体大小是 20px，基于此，段落的字体大小计算为 30px（16px x 1.25 X 1.5 = 30px）

段落的行高从 div 元素继承，因为它没有自己的行高样式，但继承的不是 1.6em，而是 div 元素中存在的行高的计算值。

段落的字体大小为 30px，行高变为 32px（16px x 1.25 x 1.6 = 32px）。

初始值的应用
<!-- Figure 4 -->
<!-- Assume that the browser default font-size is 16px  -->
<html>
   <body style="font-size:1.5em;"> 
      <div style="font-family:Garamond; font-size:1.5em;">   
        <p>This is the test paragraph</p>
      </div>
   </body>
</html>


参见图 4。在本例中，段落的文本将以 Garamond 字体样式，字体大小为 36px。div 级别的特定字体大小值的继承尝试失败，因为div或body标签都没有包含字体大小测量值。但是，浏览器默认选项设置的初始值为 16px，body 标签采用该值使其计算值为 24px。反过来，div 标签继承 24px，然后将其计算为 36px。段落从 div 标签继承 Garamond 字体和 36px 字体大小。



继承值的系统推演
图 5：确定继承值的系统方法。

对于网页用户来说，估计继承值很复杂，但如果样式完全指定，则很少需要这样做。对于浏览器，这个问题需要更加系统化地处理。

有关此过程的策略图表，请参阅图 5。级联运行结束后，继承运行将从文档树的最外层标签开始，向内运行到目标标签。可能包含样式的最外层标签是 html 标签，下一个是 body 标签，依此类推，所有这些标签都可能需要通过继承来贡献样式。

回想一下，继承 只能从 父元素 传播到 子元素，前提是子元素本身没有为该属性设置级联样式。当没有这样的样式但仍然无法继承时，将使用该属性的 初始值。例如，这可能发生在 HTML 元素中，该元素没有声明字号，无论是在样式表中还是在页面中。将使用字号的初始值，甚至可能被嵌套元素继承。所有 CSS 属性都有 初始值 作为默认值，这些值在浏览器设计过程中的属性定义表中写入。

使用这种模型，级联、继承 或 初始 值将在循环的任何一次迭代期间被分配。在实际情况下，将不会只有一次运行，而是多次运行，不仅要运行到最深的目标，还要包括所有侧向运行。也不会只有一个 CSS 属性值得关注，而是所有可能应用于该元素的属性。也许最能理解所做工作的范围的场景是，想象一下在每次迭代时同时考虑数十个属性，然后进行多次传递以获得其余属性。


错误和其他内容

[编辑 | 编辑源代码]
错误、注释和空白


 

样式表错误

当样式表发现错误时，它倾向于忽略发现错误的功能。

  • 如果 选择器 非法 : 这可能发生在选择器中的某些字符不被 CSS 标准允许的情况下。如果发生这种情况，则与之关联的声明块中的所有样式都将被忽略。解析继续进行下一个有效的选择器。
  • 如果 声明块 格式错误: 例如，可能缺少开括号。当这种情况发生时，整个声明块将被忽略。解析继续进行下一个有效的选择器。
  • 如果发现非法 属性: 例如，可能存在拼写错误。整个声明将被忽略。解析将继续进行同一声明块中的下一个有效声明，或下一个选择器。
  • 如果存在非法 值 : 与属性情况一样，整个声明将被忽略，解析将继续进行同一声明块中的下一个有效声明，或下一个选择器。
  • 如果声明块中的最后一个声明缺少 分号: 样式不受影响。
  • 如果声明块中的任何其他声明缺少 分号: 缺少分号的样式及其后面的样式将被忽略。解析将继续进行这两个样式之后的下一个有效声明，或下一个选择器。


内联样式错误

内联样式的解析方式与样式表相同，因此两个冲突样式中的第二个将应用。问题主要出现在缺少括号时

  • 从块的末尾删除括号: 这会导致段落完全消失！这可以通过使用主页面示例中第一段的内联样式来演示。
  • 删除前导括号: 这会导致更奇怪的行为 - 两个声明中的第一个被应用，但第二个没有被应用。
  • 如果存在两个内联样式块: 第二个将被忽略。
  • 除了声明块的末尾以外，分号 丢失: 这会导致缺少分号两侧的声明被忽略。
  • 最后一个声明中的分号 丢失: 对样式没有影响。


样式表中的注释

可以按照以下方式将注释添加到样式表中

 /*  This is my style-sheet user.css              
 These are comments and they are ignored by the parser. 
 Notice that the outside bounding characters are forward slashes,
 and that there are asterisks on the inside of each  */

p{
font-size: 30px;   /* this is also a valid comment */
}

/* comment characters can also be used to temporarily disable css styles for testing */


HTML 文档页面中的注释

HTML 的注释与 CSS 样式表的注释不同。使用以下方法将注释添加到 HTML 中

 <!--  This is an HTML comment and it is ignored by the parser. -->
 <!--   Notice the form of the leading and end symbols   -->


CSS 和 HTML 中的空白

样式表中的空白在很大程度上被忽略，因此布局可以进行间距以方便阅读。以下是一些比较明显的内容。

  • 空白可以围绕 属性、值、选择器、声明块和整个样式规则。
  • 属性、值和选择器中的单个单词不应断开 空格或换行符。
  • 单个样式声明中不允许换行符，但完整的声明之间的换行符是预期的。
  • 声明不应断开换行符。在采用整洁布局后，很少需要这样做。


URL 路径

当在 Web 文档的头部部分引用样式表时，可以做出一些假设

  • 如果没有给出除文件名以外的路径，浏览器可以假设样式表位于与 Web 文档相同的文件夹中。
  • 如果给出了完整路径，在 Opera 的情况下，文件夹名称中允许使用空格。如果浏览器对空格有异议，则用 %20 替换空格即可解决。
  • 可以为本地计算机上的样式表提供本地路径。


关于 @import

可以通过为页面头部部分中的每个样式表创建单独的链接引用，将任意数量的样式表添加到网页中。使用 @import 指令，可以将其他样式表添加到链接的样式表本身中。

也就是说，文档头部部分中列出的任何样式表本身都可以导入更多 样式表。在实践中，这意味着在链接 样式表顶部为每个其他样式表放置一个单独的@import 指令。例如：这三个附加表将与提及它们的表合并

@import "first.css";
@import "second.css";
@import url('http://help.opera.com/css/styles.css');

/*   This is main.css, the sheet referenced in the web-page's head section */

body{
font-size:1em;
}

/*    etc...   */

注意以下几点

  • 导入指令上面不能有任何键入内容，但允许使用空行。
  • Opera 的括号是可选的，但某些浏览器（如 Internet Explorer）可能需要它们。
  • 每个导入指令后面的分号是必不可少的。
  • 样式表将按顺序“在”它们所列出的表之后运行。
  • 没有路径的条目将被假设位于与 Web 文档相同的文件夹中。
  • 可以选择使用url 格式来导入已知的样式表。请参阅上面的第三个示例，注意它带有单引号。


HTML 属性

[编辑 | 编辑源代码]
HTML 属性


HTML 属性

 

默认样式

在引入 CSS 样式表之前，网页元素的格式设置是使用所谓的HTML 属性 来执行的。这些是基本样式规则，并且每个 HTML 元素的集合都不同。在没有任何作者和用户 CSS 样式的情况下，网页的格式设置由以下内容组合处理

  • 浏览器的默认 CSS 样式表（或内置样式集）。
  • 可能仍然适用的任何 HTML 属性继承或 CSS 继承。
  • 浏览器首选项（选项）中的设置。
  • HTML 元素的属性默认值。
  • 有意写入 HTML 标签中的 HTML 属性值。

格式STYLE=、ID= 和 CLASS= 本身就是 HTML 属性，允许将 CSS 样式分配给 HTML 标签。也就是说，当我们在 HTML 标签中写入内联样式，或声明 ID 或类时，我们使用 HTML 属性来执行此操作。

虽然上面的列表只提到了一个 CSS 源（浏览器的默认样式表），但将这些项目中的大部分视为构成默认浏览器集是方便的。事实上，某些开发人员工具（如 Opera Dragonfly）将添加的 HTML 属性的等效 CSS 属性列为它们源自浏览器的默认样式表。例如，如果存在属性条目align=center，则意味着它是在默认样式表中作为text-align:center 编写的。此外，相同的工具将浏览器首选项设置中的字体详细信息列为它们也源自浏览器默认样式表中的 CSS 代码。在大多数情况下，这不会对理解造成任何问题，但在遇到混淆时，最好牢记这一点。

属性继承

属性值和 CSS 值都可以通过继承 传播到子级。例如，任何父级级别标签中的align=center 将影响远低于其级别上的段落，假设段落本身没有这样的样式。

属性优先级

由于 HTML 属性和 CSS 样式可能仍然在网页中一起找到，因此最好对它们在使用中的相对优先级进行评论。当 CSS 值应用于同一元素上的相同样式时，CSS 值会取代简单的 HTML 属性值。事实上，只有在没有表达任何 CSS 样式的情况下，HTML 属性才能应用其格式。

由于这些优先级，像 Opera Dragonfly 这样的开发人员工具将属性视为浏览器默认样式表的一部分可能是错误的。显然，即使是默认浏览器的 CSS 样式也应该覆盖属性。在没有访问浏览器默认表的条件下，这些优先级很难测试，但幸运的是，可能出现混淆的情况越来越少。

属性废弃

直到最近，一些 HTML 属性比 CSS 更容易应用，但越来越多的 CSS 样式被引入以填补空白。例如，使用 HTML 属性表达式align=center 将块元素对齐到页面的中心，现在可以使用 CSS 声明margin:auto 来完成，并且最近的 CSS 版本现在允许方便地合并表格单元格。对于那些没有 访问样式表（Wiki 用户）并且需要为表格单元格应用填充的人来说，似乎除了表格级 HTML 属性cellpadding=length 或不断地向每个单元格添加填充之外，别无选择。随着每个新版本的 HTML，各种属性逐渐被废弃，例如，属性align 在 HTML5 中变得不可用。

虽然 CSS 级联只适用于 CSS 样式的解析，但除非还考虑这些额外的默认源，否则用户将无法完全理解。HTML 属性及其元素默认值的列表可以在 HTML 代码本身的文本中找到，并且会发现它们在不同的 HTML 版本之间有所不同。


另请参阅

[编辑 | 编辑源代码]
检索自 "https://wikibooks.cn/w/index.php?title=Cascading_Style_Sheets/Inheritance_Rules&oldid=4413665"
华夏公益教科书