跳转到内容

层叠样式表/继承规则

Edit links
来自维基教科书，开放世界中的开放书籍

摘要

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

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

Web 文件基础

[编辑 | 编辑源代码]

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

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

层叠概述

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

本节提供了层叠过程的直观描述，而不是详细描述。对于那些已经了解这些内容的人来说，最好直接跳到部分详细的层叠示例，在那里他们可能会更喜欢这项工作。无论如何，对于那些需要学习或提醒自己有关选择器和特异性的人来说，教程已在部分CSS 教程中提供。对于那些希望了解有关 HTML 更多内容的人来说，有一个广泛的外部参考可在W3 Schools HTML中找到，而对于 CSS，则可在W3 Schools CSS中找到。

为了继续，浏览器会逐个标签地遍历网页，以确定它们的样式。为此，它首先要识别标签所在的嵌套或文档树的一部分。这有助于浏览器检查它找到的选择器的有效性。然后，它会搜索所有样式来源，包括样式表和文档本身，以查找可能影响所讨论标签的选择器，同样，要记住标签布局。如果选择器适用，则会按发现顺序列出其样式属性，结果是适用于该特定标签的属性长列表。该列表中可能包含许多这样的声明样式，也可能没有，具体取决于各种编写者的工作，很明显，大多数可能已为该标签声明的属性仍然缺失。

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

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

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

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

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

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


级联之后

[编辑 | 编辑源代码]

级联运行完毕后，最初的声明样式集将被缩减为一个级联样式集，但许多属性最初并未声明。为了使浏览器正常运行，必须为每个被认为对该元素格式化必不可少的属性提供单个值。浏览器会使用其默认操作填补这些大的空缺。对于每个缺少的必不可少属性，它首先尝试从父元素（即，从围绕它的标签）继承合适的值；如果由于某种原因无法这样做，则浏览器会分配一个初始值。属性初始值是在设计时在属性定义列表中预设的。应用这些默认值的结果是创建了一个全面的指定值集，其中包括每个标签需要考虑的每个属性。

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

级联的详细信息

[编辑 | 编辑源代码]
图 3. CSS 样式级联。请注意，用户样式声明具有最高优先级，前提是它们带有 !important 标记。另请注意，优先级较低的来源
可以对结果产生影响，但前提是优先级较高的来源尚未为该属性指定。

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

所有为此嵌套选择的选择属性、它们的重要性等级、特异性和在来源中的位置都已输入到此页面的一个可排序表格中。读者只需跟踪各种列表并使用表格上的按钮对其进行排序，即可了解解析这些选择的过程。


示例的样式来源

[编辑 | 编辑源代码]
用于测试的本地网页
<!-- 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;
}


级联排序表

[编辑 | 编辑源代码]

下面的表 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）。

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

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

  • 首先按属性名称
  • 然后按重要性
  • 然后按特异性，分四个步骤
  • 然后，不必要地，按来源顺序

表 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
选择器		 类
选择器		 元素
选择器		 来源
顺序
font-size 30px p (排名 5) 用户重要 0 0 0 1 1:1
font-family Tahoma .Tahoma (排名 5) 用户重要 0 0 1 0 1:2
font-family Times #para1 (排名 2) 用户普通 0 1 0 0 1:3
color blue #para1 (排名 2) 用户普通 0 1 0 0 1:4
font-style italic #para1 (排名 2) 用户普通 0 1 0 0 1:5
font-weight normal #para1 (排名 2) 用户普通 0 1 0 0 1:6
font-size 2em p (排名 3) 作者普通 0 0 0 1 2:1
font-family Courier p (排名 3) 作者普通 0 0 0 1 2:2
background green .toppara (排名 3) 作者普通 0 0 1 0 2:3
border 1px solid lightgrey .toppara (排名 3) 作者普通 0 0 1 0 2:4
font-family Calibri #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:5
color black #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:6
font-style normal #para1.Tahoma (排名 4) 作者重要 0 1 1 0 2:7
font-family Garamond p (排名 3) 作者普通 0 0 0 1 2:8
font-size 20px p (排名 3) 作者普通 0 0 0 1 2:9
font-weight bold p (排名 3) 作者普通 0 0 0 1 2:10
background white p (排名 3) 作者普通 0 0 0 1 2:11
padding 10px p (排名 3) 作者普通 0 0 0 1 2:12
background beige .mostparas (排名 3) 作者普通 0 0 1 0 2:13
font-family arial p inline (排名 3) 作者普通 1 0 0 0 2:14
padding 1.5em p inline (排名 3) 作者普通 1 0 0 0 2:15
Display Block p (排名 1) 浏览器客户端 0 0 0 1 3:1
Margin 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 选择器更不具特异性。该类可以在整个页面中根据需要使用多次，并且可以在一个元素中声明多个类。在样式表中，我们可以这样定义该类；
.thetop {font-family: Arial;}


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


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


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


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


在文档中使用 ID 进行声明，例如：
<div id="Tailpiece" >This is the text </div>


上下文选择器
它们描述了当标签相互嵌套时要应用的样式。在此示例中，选择器将仅应用于嵌套在 division 标签内的段落标签。为此，我们编写
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}


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

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


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


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


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

要使所有段落的第一个字母变为粗体，我们可以编写

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 代码用于演示。其中包含许多嵌套的标签集（代表元素）。例如，表格完全嵌套在一对 division 标签内，所有这些都完全嵌套在一对 body 标签之间。

嵌套的概念不仅限于相邻的标签对。也就是说，在上面的示例中，表格也被认为嵌套在 body 标签内，尽管 division 标签位于它们之间。在确定哪些选择器可能适用于文档中的特定标签时，浏览器会考虑标签所在的嵌套位置。在下面的示例中，假设浏览器正在尝试为第一个标题标签 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 的片段。注意，在存在声明的地方，有两种可能的路线可以指定选择器，一种是用于带声明的标签，另一种是用于不带声明的标签。

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

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

这四种情况是

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

<h2>First Heading</h2>

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

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

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

4. 嵌套在 body 标签内... 注意，即使忽略了中间标签，这也算作嵌套。选择器 body h2 也将包含相关样式列表，因为这两个标题都嵌套在 body 中，所以它会影响它们两个。 <body> <h2>第一个标题</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 显示了一个相当常见的标签排列，其中一个段落嵌套在分隔标签集中，并且所有这些都被假定为在 Web 文档的 body 标签内。此外，请注意段落标签中有声明；一个id、两个类和一个内联样式。分隔标签已在其内声明了一个id。添加这些声明允许在第二个段落可用选择器中产生大量变体，尽管从理论上的 64 种变体中，只有大约 20 种会真正被使用。

还要注意，还有另一个段落标签，但它属于不同的嵌套结构。它只是嵌套在 body 标签内，并且与分隔标签对没有关联。当为段落编写样式时，某些样式会影响这两个段落，而另一些样式只会影响其中一个。

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

p
一个通用的段落选择器。也影响第一个段落。特指性 = 1。
div p
用于分隔标签内的段落。特指性 = 2。
body p
用于 body 标签内的段落，其中可选地包含一些标签。也影响第一个段落。特指性 = 至少 2。
body * p
用于 body 标签内的段落，其中必要地包含一些标签。也影响第一个段落。特指性 = 2。
body div p
用于分隔标签内的段落，并且分隔标签本身在 body 标签内。特指性 = 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" 的段落，嵌套在分隔标签内。特指性 = 12
div p.class2
用于声明 class="class2" 的段落，嵌套在分隔标签内。特指性 = 12
div p.class1.class2
用于声明 class="class1 class2" 的段落，嵌套在分隔标签内。特指性 = 22
body div p.class1
用于嵌套在分隔标签内，并且分隔标签本身嵌套在 body 标签内的段落，并且段落包含声明 class= “class1”。特指性 = 13。
body div p.class2
用于嵌套在分隔标签内，并且分隔标签本身嵌套在 body 标签内的段落，并且段落包含声明 class= “class2”。特指性 = 13。
body div p.class1.class2
用于嵌套在分隔标签内，并且分隔标签本身嵌套在 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” 的任何元素。只能在页面上声明一次，并且一个元素只能列出其中一个。特指性 = 100
#topid p
用于嵌套在包含声明 id= “topid” 的任何元素内的段落。可选地，这两个之间可能有一个标签。（注意，更改最后一个术语允许许多选择器和定义）。在这种情况下，会影响两个段落。特指性 = 至少 101
#topid * p
用于嵌套在包含声明 id= “topid” 的任何元素内的段落。这两个之间必须有一个标签。（注意，更改最后一个术语允许许多选择器和定义）。这里只影响第二个段落。特指性 = 101
*
能够显示添加的样式的每个元素。影响两个段落。特指性 = 0
段落标签内的内联样式
段落包含样式声明的位置。特指性 = 1000


计算特指性

[编辑 | 编辑源代码]

样式声明特指性

[编辑 | 编辑源代码]

特指性是指声明缺乏普遍性的程度；它们适用于页面上的标签而不是适用于一般标签的程度。决定此类问题的 method 已得到相当大的发展。

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

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

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

在任何一个级别内，竞争样式声明中特指性的最高值会导致它代表该级别在总体级联中。（请参见主页面内的图形）。

特指性 - 计算示例

[编辑 | 编辑源代码]
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)。

样式继承

[编辑 | 编辑源代码]
样式继承
样式继承

样式继承是指在子元素未指定适当样式时使用父元素的样式。继承样式发生在级联之后，在可能的情况下填充缺失的属性值，当无法做到这一点时，则通过应用初始值（CSS 属性本身的默认值）来完成。注意以下几点

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

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

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

简单继承
<!-- 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 路径

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

  • 如果没有给出除文件名以外的路径，浏览器可以假设样式表将位于与网页文档本身相同的文件夹中。
  • 如果给出了完整路径，在 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）可能需要它们。
  • 每个导入指令后的分号是必不可少的。
  • 样式表将在它们所列出的表“之后”按顺序运行。
  • 没有路径的条目将被假定位于与网页文档本身相同的文件夹中。
  • 可以选择使用url格式导入已知的样式表。请参阅上面的第三个示例，并注意它使用的是单引号。


HTML 属性

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


HTML 属性

 

默认样式

在引入 CSS 样式表之前，网页元素的格式化是通过所谓的HTML 属性来实现的。这些是基本的样式规则，并且每个 HTML 元素的集合都不同。在没有作者和用户 CSS 样式的情况下，网页的格式化由以下因素共同决定：

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

格式STYLE=、ID=和CLASS=本身是 HTML 属性，允许将 CSS 样式分配给 HTML 标签。也就是说，当我们在 HTML 标签中写入内联样式，或声明 id 或 class 时，我们使用 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 现在允许方便地合并表格单元格。对于那些没有访问样式表（维基用户）并且需要为表格单元格应用填充的人来说，似乎没有替代表格级 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"
华夏公益教科书