尽管大多数情况下网页作者的样式就足够了，但 Opera 浏览器长期以来都为用户提供了修改页面外观的功能，并且所有最新的 Opera 版本（包括 12.17）都允许使用用户样式表 。此版本之后的版本，例如 15.xx 版本，不再允许此类功能。对于那些喜欢旧样式的用户来说，12.17 版本可能比 12.16 版本更受欢迎，因为它是为了修复 Heartbleed 漏洞而创建的。
继续，本地用户 可以提供多个 样式表，一个用于影响所有 页面的通用 使用，其他样式表则在打开特定 页面时使用。浏览器还内置了许多样式表 ，以改善视力障碍用户的浏览体验并用于测试。
更改样式或许最适合让页面更易于阅读，但 CSS 级联本身的研究需要具备样式调整的能力。另一个更明显的用途是网页设计，其中无休止的测试是规则而不是例外。
与普遍看法相反，那些有兴趣学习 CSS 样式的人不需要购买昂贵的程序包。虽然此类程序对于寻求快速结果的用户来说具有优势，但网络本身是最好的示例来源，并且可以随时学习。随着浏览器中网页开发软件的引入，所有必要的特性都已经可用。
此页面说明了如何配置 Opera 12.16 浏览器的样式设置，以满足其主要使用领域，并提供了一些示例文本文件和教程来帮助学习。
样式选项 设置选择参与浏览器 CSS 级联的样式来源 。呈现模式 或简称模式 的两个完整选择集中进行切换。
有两种主要工作模式 ，分别命名为作者模式 和用户模式 ，并且可以在浏览器的主菜单中选择它们。这些模式名称对于识别它们是必要的，但实际上选择不佳，这将在稍后解释。具体来说，模式是在浏览器的查看/样式 菜单中切换 的。但是，默认 模式选择（每次启动或重新启动后应用的选择）是在浏览器的首选项 中通过查看/样式/管理模式…/呈现模式/默认模式 进行的。通过查看/样式 菜单进行切换不需要重新启动，而任何对默认选择的更改都需要重新启动。
每种模式在浏览器首选项中都有自己的一列详细选择 ，位于查看/样式/管理模式…/呈现模式 下。如果在这两列中进行相同 的选择，那么这两种模式都将包含级联的相同功能；也就是说，它们都可以做同样的事情 。为了进一步说明这一点，所谓的作者模式 可以很容易地设置为仅包含用户 功能，反之亦然。
但是，或许最好遵循这些模式的固定名称 ，直到 Opera 允许用户选择它们为止。通过在这些列中进行不同的 选择，可以存在两种完全不同的配置，并且可以通过简单地切换模式来应用它们。例如，可以将默认设置为作者模式 ，并将其关联的列设置为仅选择页面样式表 （Opera 代码表示所有作者样式 ）。另一列，即用户模式 ，可能有两个选择，页面样式表 和我的样式表 （Opera 代码表示整个用户样式表集 ）。这样，模式就可以很容易地在正常浏览 和正常浏览加上用户样式 之间切换。
用户等级由三个独立的来源构成 。这些是 Opera 的内置 样式表、用户 样式表user.css 以及一组可选使用的特定站点 样式表。根据这些样式表中哪个已安装或在任何特定时间被选中，其中任何一个或所有这些 都可能在用户级别的浏览器样式级联中合并。
该主题中使用的普遍接受的术语无疑在使用过程中有所发展，但很大程度上是由万维网联盟 (W3C) 提供的。这里之所以关注它，仅仅是因为需要将其含义与 Opera 浏览器设置中使用的一些术语区分开来。
以下是一些普遍接受的含义
样式表 ：包含网页样式的文本文件。它通过其.css 后缀与其他文本文件区分开来。样式来源 ：样式的位置，例如作者样式 、用户样式 和浏览器自己的客户端样式 。它也用于描述这三者的任何子集，例如头部样式 、内联样式 等。用户代理 (UA) 样式表 ：浏览器自身样式表或其等效项中的样式。用户样式 ：写入用户计算机上保存的本地样式表中的样式。作者样式 ：来自作者链接的样式表、文档头部样式以及任何内联样式。继承 ：当子元素没有自己的样式时，从父元素向其传播样式。初始值 ：当所有其他样式获取都失败时用作默认值的 CSS 属性值。考虑到级联的复杂性，下面的含义远非直观，因此理解它们非常重要。在呈现模式 对话框中，这些术语的含义如下
'页面样式表' 作者样式 。即来自以下来源 的样式作者链接的样式表 ，以及文档头部样式 ，以及文档内联样式。
'我的样式表' 来源 （用户样式表集），包括
本地用户样式表user.css ，以及特定网站的本地样式表 ，以及Opera内置的样式表
“作者模式 作者样式 相关。
“用户模式 用户样式 相关。 浏览器的呈现模式可以设置为允许完整的级联或某些过滤版本，其中一些重要性等级被排除在外，下面的部分（模式选项详解
样式声明可以有一个特殊的标记，以赋予它们比普通 声明更高的优先级，它们使用!Important 关键字来识别它们。它们被称为重要 声明。在排序列表时，浏览器会将重要 声明与任何普通 声明分离。然后，浏览器识别表1中的五个重要性等级 或重要性层 ，其中等级1 的重要性最低，等级5 的重要性最高。
表1：CSS 2级级联重要性等级
等级1 浏览器默认样式
等级2 用户普通样式声明 用户 样式表中没有 特定网站 和内置 样式表的普通声明也会合并到这里。
等级3 作者普通样式声明 作者 设置中没有
等级4 作者!Important样式声明 作者 设置中有
等级5 用户!Important样式声明 用户 样式表中有 特定网站 和内置 样式表的!Important声明也会合并到这里。
浏览器逐个标签地解析页面的样式。在确定要为HTML标签选择哪个竞争属性值时，浏览器首先按其属性名称对所有相关样式进行排序。然后，在任何相似的属性内，根据其重要性等级 进行排序。如果问题仍然没有解决，则会进一步根据其特殊性 进行排序。如果经过所有这些操作后，它们的优先级仍然匹配，则根据其源顺序 进行选择；也就是说，浏览器最后遇到的一个会被选中。有关更多详细信息和过程的详细示例，请参阅CSS级联
尽管Opera的呈现模式可能需要在许多可能的场景中进行设置，但它们可以分为四大类
浏览器的默认行为 ：所有作者和用户CSS样式都从级联中排除。在此设置中，浏览器默认样式表适用，其他很少。它主要对那些需要确认默认样式表内容或首选项设置优先级的人感兴趣。仅作者样式配置 。所有用户样式都从 级联中排除。这是Opera的主要浏览设置，包括作者的所有链接、头部和内联样式。仅用户样式配置 。所有作者样式都从 级联中排除。在此模式下，只有用户 样式表集可以应用。此模式允许与所有作者样式良好分离，并用于测试和用户样式表设计。组合作者-用户配置 。所有样式源都级联 。这是研究CSS级联中样式完全交互的模式。特别是，需要确认特定网站样式表的正确切换以及user.css 样式表的重要等级效果。设置很容易进行，但对于不熟悉它们的人，在详细样式模式设置 安装用户样式表
要快速设置呈现模式 和样式，建议执行以下操作
默认样式模式设置 ：选择作者模式 。浏览器将始终在此模式下启动以进行正常的网页浏览。作者模式列 ：仅选择页面样式表 ，这是正常网页浏览的最佳模式。用户模式列 ：仅选择页面样式表 和我的样式表 ，这是进行完整级联工作的最佳组合。您需要安装合适的user.css 样式表才能充分利用此设置，尽管它可以作为空样式表安装并在以后添加。使用这些推荐的设置，普通用户可以使用查看/样式 菜单选项轻松地在它们之间切换。对于那些需要更多保证的人，下面的部分详细列出了每个选择的包含和排除项。
可以通过工具/首选项/高级/内容/样式选项/呈现模式 或通过查看/样式/管理模式…/呈现模式 菜单选项访问呈现模式 对话框。
Opera自己的帮助页面中使用了大量模糊或完全误导性的术语，并且浏览器本身宣传的一些功能似乎无法使用。尽管可以公平地说其所有主要 功能都运行良好，但这些说明可能会有所帮助
“我的样式表 内置 样式表。原因是所有这些在逻辑上都合并到级联中的一个用户样式表 中。
“仅一个user.css user.css 文件，即使在不同的文件夹中，在某些阶段也会导致样式混乱。使用特定网站 样式表而不是多个user.css 文件。本文作者确信，关于这一点还有更多内容需要理解，但此处描述的限制将控制此事。欢迎有知识的人员相应地修改此理解。
“@Import规则 用户 集中的任何表单中使用，当然，它可以构成任何作者表单的标题。
“页面样式表
“用户模式 作者模式 作者模式 ，但在用户模式 中进行相同的选择将执行完全相同的事情。这些选择的重复乍一看似乎是相当冗余的，但它允许在任何两个模式构造之间快速切换。
快速呈现模式切换 作者 和用户 模式中拥有不同的选择集，以及在两者之间快速更改。更改这些模式的最佳方法是使用Opera的查看/样式 菜单，因为它不需要清除浏览器缓存或重新启动。呈现模式 对话框中的模式选择也可以使用，但它是一个默认设置，需要重新启动。但是，对于长时间的会话并避免混淆，最好将默认设置更改为最感兴趣的那个。冗余模式？ 页面字体和颜色 和我的字体和颜色 都无法理解。在获得更多信息之前，最好不要选中这些模式。我的链接样式 旨在将链接颜色更改为工具/首选项…/网页 中的设置，但在最近的测试中发现它无法使用。“特定网站的样式表 user.css 样式表的替代品，并且每当访问特殊网站时，都会自动在两者之间进行选择。它们仅在选中我的样式表 的模式下工作。
特定网站样式表的安装使用 右键点击方法 编辑网站偏好设置... 。这会添加当前网站并将其选中以进行编辑。选择显示 ，然后添加特定网站的css文件的路径。按确定 ，如有必要，重新加载网站以查看效果。无法关闭 特定网站样式表的通用使用，尽管在偏好设置 / 内容 / 高级 / 管理网站偏好设置... 中可以找到已安装的这些网站的列表。使用此列表而不是右键点击方法来添加 样式表已被证明很麻烦。Opera的“内置样式表” 用户样式表 的呈现模式，即任何我的样式表 复选框被勾选的模式。在这种情况下，它们会在用户样式表级别合并，通常带有!important标记。
详细样式模式设置 - Opera 12.16
本节将简要说明如何为四个主要使用领域设置浏览器的呈现模式。这些是
浏览器的默认行为 ：所有作者和用户的CSS样式都从级联中排除。仅作者样式配置 。所有用户样式都从级联中排除。仅用户样式配置 。所有作者样式都从级联中排除。作者-用户组合配置 。所有五个重要性等级都包含在级联中。可以通过工具/首选项/高级/内容/样式选项/呈现模式 或通过查看/样式/管理模式…/呈现模式 菜单选项访问呈现模式 对话框。
Opera浏览器的默认行为
要研究默认行为，必须排除所有应用的用户和作者样式。图1显示了此配置的设置。
已排除
在此配置中，应用的样式很少；具体排除 的是
所有用户样式表的集合，即
用户样式表user.css
特定网站样式表
Opera内置的样式表 作者下载的样式表 作者的文档头部样式 作者的内联CSS样式 已包含
这些是包含 的
此外，在任何时候以及任何配置中
Opera浏览器会从偏好设置/高级/字体 对话框中应用有限的字体设置 ，就像它们已与浏览器默认样式表的相应选择器合并一样。例如，会应用详细的字体系列和字体大小，正确大小的主体字体、标题、pre标签等，但每个字体的属性似乎仅限于
font-family font-size/line-height 偏好设置/网页 中显示的字体项目只是此集合的摘录，因此可以说它也适用。用户的链接颜色选择不会应用，但此功能可以独立选择。请注意，除了各种文本框外，默认浏览器样式表不包含文档主体上的字体声明，这些由偏好设置提供。
仅作者样式配置
页面样式表 似乎暗示了对文档头部内部样式表的引用，但如下所示，它适用于所有 作者的样式。
已排除
以下已排除
所有用户样式表的集合，即
用户样式表user.css
特定网站样式表
Opera内置的样式表 已包含
这些是包含 的
作者的内联HTML属性 作者的内联CSS样式 作者下载的样式表 作者的文档头部样式 浏览器的默认样式表
仅用户样式配置
此配置对于测试PC用户创建的用户样式表以及研究或修改Opera内置样式表集生成的格式很有用。它通常不是正常浏览的选择，因为它可能会生成过于复杂的格式。
此配置排除所有作者样式，并且仅应用用户样式表。此处，术语用户样式表 包括任何已安装的用户样式表，以及浏览器菜单查看/样式 上的列表中任何内置样式表的选择。用户样式表不会发生物理更改，而是这两个样式表的逻辑合并，在级联中表现得好像内置样式表集中的选择已添加到末尾 用户样式表中。假设，但目前尚不清楚这些内置样式表的顺序是否在其列表中得到维护。
图3显示了此配置的设置。
已排除
这些是排除 的
作者的内联CSS样式 作者下载的样式表 作者的文档头部样式 已包含
这些是包含的
所有用户样式表的集合，即
用户样式表user.css
特定网站样式表
Opera内置的样式表 作者的内联HTML属性 浏览器的默认样式表
作者-用户组合配置
此配置提供了研究完整级联行为的最佳机会。这两个设置的组合允许包含所有五个重要性等级，以及引入浏览器的内置样式。
图4显示了此配置的设置。
已排除
只要存在，就不会排除任何样式源。
已包含
这些是包含 的
作者的内联HTML属性 作者的内联CSS样式 作者下载的样式表 作者的文档头部样式 浏览器的默认样式表 所有用户样式表的集合，即
用户样式表user.css
特定网站样式表
Opera内置的样式表
特定网站样式表模式
没有针对特定网站样式表使用的单独模式，因为它只是用户集的一部分。当选择我的样式表 时，以下三个样式表都处于活动状态，前提是它们已安装，并且对于内置样式表，前提是它们已选中。用户样式表集由以下组成
用户样式表user.css
特定网站样式表
Opera内置的样式表 特定网站 样式表最好理解为用户样式表 的自动应用替代。当打开之前已识别给浏览器的网站时，现有的user.css 样式表将被特定样式表替换。当网站更改为没有特定样式表的网站时，将再次使用user.css样式表。
确实，已安装的特定网站 样式表永远不会与标准用户样式表 级联，因为这两个是彼此的替代方案，但内置样式表集中的选择可能会与这两个中的任何一个级联。而分离内置样式表集只需要取消选择，而无需重新安装即可分离其他两个样式表则变得很麻烦。解决方案可能是将两者都保留在原位，并注释掉样式而不是删除样式表本身。
特定网站样式表将在任何用户 样式表可以工作的模式下自动工作，即无论是在作者设置还是用户设置中，只要选择了我的样式表 呈现模式设置。
其他呈现模式
一些剩余模式的功能一直难以捉摸。我的字体和颜色 和页面字体和颜色 模式似乎根本不起作用。事实上，它们类似于默认行为，因此它们很可能是多余的功能。我的链接样式 模式允许用户为所有网页上的超链接选择颜色，因此在构建样式表时可能会造成混淆。在这些说明中，它已被取消选择。
安装用户样式表 - Opera 12.16
一般背景要点
这些介绍性要点解释并区分用户集中三种用户样式表类型
有两种 用户样式表 可以应用；第一种是普遍应用于所有网站的样式表，称为user.css ，并且只有一个；第二种是一组特定网站样式表，每个样式表都应用于特定网站。特定网站样式表可以具有任何合理的名称，并以css为后缀，除了user.css 。在呈现模式 中选择了我的样式表 的任何情况下，特定网站样式表都会自动应用而不是user.css 。下面提供了部分内容来解释这两种样式表的安装，但读者应参考主页面其他地方的详细信息，以了解各种呈现模式的使用。
Opera浏览器中还有一组内置样式表。这些样式表通过查看/样式 菜单列出，并且所选的样式表会与用户样式表合并。这可能发生在用户样式表可以发挥作用的任何模式中。
以下各节将解释三种用户样式表类型的安装。
创建空白user.css 样式表
打开记事本，Windows附件。
打开另存为对话框。
确保保存目录是您的文档文件夹。
将保存类型： 选择器更改为所有文件（*.*）。
输入文件名user.css ，确保删除任何txt 后缀。
按保存。 user.css 文件在安装之前不必包含任何样式。以后可以随时在记事本中编辑文件以添加样式。
安装用户样式表user.css
Opera浏览器可以设置为根据CSS级联的全面使用合并作者和用户样式，也可以设置为仅作者样式、仅用户样式或根本没有样式。这些设置在浏览器的呈现模式 部分进行，并且主页面上附带了一个下拉框教程来详细解释每个选项的作用。
为了使用和研究完整的五级级联，需要向浏览器添加用户样式表。本节说明如何安装用户样式表，并同时设置所有五个样式源可能合并的模式。此配置不区分本地网页和外部网页，因此此设置非常适合本地学习和修改其他人创建的页面的样式。
安装特定网站样式表
站点特定的样式表最好理解为用户 样式表user.css 的自动应用替代。当之前浏览器识别过的站点打开时，现有的user.css 样式表会被特定的样式表替换。当站点切换到没有 特定样式表的站点时，user.css 样式表会被再次使用。
这并不是说特定的样式表会独自接管所有 格式，而是它以通常的方式进行级联 。可以肯定地说，安装的站点特定的样式表 可以在用户样式表 可以工作的任何模式下工作，即无论是在作者 还是用户 设置中，只要选择了我的样式表 演示模式设置。
在Opera中尝试安装站点特定的样式表时会遇到一些问题，但有一种方法是可行的。已经发现唯一可行的方法是在屏幕上已显示目标站点时使用右键单击 菜单。操作步骤如下：
确保已安装 user.css样式表 通用 情况。如果没有这样的样式表，请根据主页其他地方的说明安装一个，并确保正在使用的演示模式已选择我的样式表 。为您的特定站点创建另一个样式表（使用不同的名称）。此 样式表可以使用任何合理的名称，并以css为后缀。显示打算用于站点特定样式的页面 右键单击选定的页面 编辑站点首选项... 然后显示 。这将显示我的样式表 地址框。此时，该对话框仅适用于显示的站点。输入该站点的目标样式表的路径 按 确定退出对话框 重新加载站点以查看效果 只要存在允许user.css 样式表参与级联的设置，站点特定的样式表就会生效，切换过程将是自动的。可以为任意数量的不同站点创建任意数量的不同站点特定样式表。为了避免混淆，务必记住用户样式表集可能非常大。
用户样式表集由以下部分组成：
用户样式表user.css 。只有一个，可能应用于每个站点。站点特定的样式表 。可能有多个，但仅应用于特定站点。Opera的内置样式表 。大约有16个可供选择，它们应用于每个站点。通常，样式表可以在没有任何样式的情况下安装，因此当站点特定测试正在进行时，user.css 样式表很可能为空。样式表中的注释标记对于临时删除导致混淆的样式很有用。
要删除站点特定的样式表 :
在页面打开时右键单击它，然后选择编辑站点首选项... 。
选择显示 并删除我的样式表 文本框中的任何文件路径。
按确定删除站点特定的样式表。 如果删除样式表后问题仍然没有解决，用户应该记住可能存在user.css 样式表和内置 样式表（位于用户 类别下）。此外，如果存在多个user.css 样式表，可能会导致进一步的混淆。
安装内置样式表
这组样式表可能是安装和删除最简单的。当在Opera的查看/样式 菜单中选择内置样式表时，它们将被添加到用户集中，并且可以通过取消选择它们来单独或集体地删除它们。为了使这些样式表和用户集中的任何成员应用，必须在正在使用的任何模式下选中我的样式表 框。
由于在任何一个演示模式 列中进行的设置都会产生相同的结果，因此可以设置一列用于正常工作，另一列包含用户集。但是，由于选择用户模式 也会包含任何User.css 和站点特定的样式表 ，因此需要谨慎操作，以确保它们的包含是预期的。
请注意，当通过主浏览器菜单选择用户模式时，演示模式 的用户模式 列中的所有选择都将被应用。实际上，通过菜单进行模式选择允许在两种模式之间切换，而无需重新启动浏览器，而演示模式 中的类似模式切换是默认设置，并且将在每次重新启动时重新建立其选择。
删除各种用户样式表
要临时或永久删除用户样式表，请取消选中演示模式 的作者列中的我的样式表 框，然后在每个对话框中选择确定 ，直到退出浏览器首选项。请注意，当对除了 用户样式表之外的首选项进行更改时，需要关闭浏览器并重新加载页面才能看到更改。
实际上，由于取消选择我的样式表 演示模式也会阻止使用内置样式表和站点特定的样式表，因此最好考虑在用户样式表中使用注释标记来临时“删除”样式。这样，就可以删除一个样式而不会影响另一个样式。内置样式表更容易在查看/样式 菜单设置中取消选择。
本节提供了一个示例网页文档 及其链接的作者样式表 ，用于测试表格样式。至少给出了每个文档的文本，用户需要将其内容复制到自己的文件中。描述的文本可以在下面的下拉框中找到，分别标识为tables.css 和table styles.htm ，使用这些文件可以节省那些对主题只有兴趣的人的时间。
tables.css
/*说明*/
/*Copy the full contents of this text into Notepad*/
/* and call the file ''tables.css''.*/
/*Place ''tables.css'' and ''table styles.htm'' */
/*in the same folder, for example, your documents folder.*/
/* STYLE-SHEET FOR TABLES: tables.css */
body {
font-family : "Bookman Old Style" , serif ;
font-size : 1 em ;
line-height : 1.6 em ;
color : maroon ;
}
div {
background : linen ;
border : 1 px solid lightgrey ;
padding : 15 px ;
color : rgb ( 22 , 22 , 22 );
}
# century {
font-family : century ;
}
# divtop {
background : beige ;
}
table {
background : white ;
color : #000 ;
border-top : 1 px solid #D3D3D3 ;
border-right : 1 px solid #D3D3D3 ;
border-left : 1 px solid #D3D3D3 ;
border-bottom : 2 px solid grey ;
border-collapse : collapse ;
font-size : .9 em ;
margin : 1 em 1 em 2 em ;
}
td , th {
border-top : 1 px solid #D3D3D3 ;
border-right : none ;
border-left : none ;
border-bottom : none ;
text-align : left ;
vertical-align : middle ;
padding : 10 px ;
}
th {
background : maroon ;
color : #FFF ;
font-weight : 700 ;
}
table . withtext {
max-width : 50 % ;
}
table . withtext td {
vertical-align : top ;
}
table . withtext td : first-of-type {
font-weight : 700 ;
width : 20 % ;
}
table . withtext th {
vertical-align : middle ;
font-weight : 700 ;
background : maroon ;
}
table . colors {
background : peachpuff ;
color : black ;
}
table . rowstripes tr : nth-child ( 2n + 1 ) {
background : papayawhip ;
}
table . rowstripes tr : nth-child ( 2n ) {
background : inherit ;
}
table . withtotals tr : last-of-type {
border-top : 2 px solid black ;
background : salmon !important ;
color : white ;
font-weight : 700 ;
}
# ptop {
padding : 0 15 px 0 15 px ;
font-weight : bold ;
}
p . dropcap :: first-letter { /* selects the first letter of */
float : left ; /* paras with class ''dropcap'' */
font-size : 4 em ;
line-height : 0.8 em ;
padding-top : 4 px ;
padding-right : 4 px ;
padding-left : 3 px ;
font-family : Georgia ;}
. centertext {
text-align : center ;
}
. lefttext {
text-align : left ;
}
. righttext {
text-align : right ;
}
. boxcenter {
margin : 1 em auto 2 em ;
}
. boxleft {
float : left ;
margin : 1 em 1 em 2 em ;
}
. boxright {
float : right ;
margin : 1 em 1 em 2 em ;
}
h1 , h2 , h3 , h4 , h5 , h6 {
color : #000 ;
background : none ;
font-weight : 400 ;
padding-top : .5 em ;
padding-bottom : .18 em ;
border-bottom : 1 px solid #aaa ;
margin : 0 ;
}
h1 {
font-size : 188 % ;
}
h2 {
font-size : 150 % ;
}
h3 , h4 , h5 , h6 {
border-bottom : none ;
font-weight : 700 ;
}
h3 {
font-size : 132 % ;
}
h4 {
font-size : 116 % ;
}
h5 {
font-size : 100 % ;
}
h6 {
font-size : 80 % ;
}
ol {
font-style : italic ;
}
ol . lr {
list-style-type : lower-alpha ;
}
table caption , table . withrowheads td : first-of-type {
font-weight : 700 ;
}
table styles.htm
<!--Copy the full contents of this text into Notepad -->
<!-- and call the file ''table styles.htm''.-->
<!--Place table styles.htm and tables.css in the same folder, -->
<!-- for example, your documents folder.-->
<!DOCTYPE html>
< html >
< head >
< title >
Table Styles
</ title >
< link rel = "stylesheet" href = "Tables.css" type = "text/css"
media = "screen" >
</ head >
< body >
< h2 >
Main h2 heading
</ h2 >
< p id = "ptop" class = "dropcap" >
This paragraph is nested only between the < em > body</ em >
tags, unlike others within < em > div</ em > tags.< br >
Most of its styles are inherited from its parent.
</ p >
< div id = "divtop" >
< p >
This paragraph is nested between < em > div</ em > tags, and
uses inherited and declared properties.< br >
The text is styled for font-family, font-size, color,
padding, and line-height.
</ p >
< table title = "table 1" class =
"colors rowstripes withrowheads withtotals" >
< caption >
This table is styled with CSS, and with classes
declared in the table line...
</ caption >
< tr >
< th >
Units...
</ th >
< th >
Heading A
</ th >
< th >
Heading B
</ th >
< th >
Heading C
</ th >
< th >
Heading D
</ th >
< th >
Heading E
</ th >
< th >
Heading F
</ th >
</ tr >
< tr >
< td >
First Row
</ td >
< td >
1
</ td >
< td >
2
</ td >
< td >
3
</ td >
< td >
4
</ td >
< td >
5
</ td >
< td >
6
</ td >
</ tr >
< tr >
< td >
Second Row
</ td >
< td >
7
</ td >
< td >
8
</ td >
< td >
9
</ td >
< td >
10
</ td >
< td >
11
</ td >
< td >
12
</ td >
</ tr >
< tr >
< td >
First Row
</ td >
< td >
12
</ td >
< td >
13
</ td >
< td >
14
</ td >
< td >
15
</ td >
< td >
16
</ td >
< td >
17
</ td >
</ tr >
< tr >
< td >
Second Row
</ td >
< td >
18
</ td >
< td >
19
</ td >
< td >
20
</ td >
< td >
21
</ td >
< td >
22
</ td >
< td >
23
</ td >
</ tr >
< tr >
< td >
Third Row
</ td >
< td >
24
</ td >
< td >
25
</ td >
< td >
26
</ td >
< td >
27
</ td >
< td >
28
</ td >
< td >
29
</ td >
</ tr >
< tr >
< td >
Totals Row
</ td >
< td >
62
</ td >
< td >
67
</ td >
< td >
72
</ td >
< td >
77
</ td >
< td >
82
</ td >
< td >
87
</ td >
</ tr >
</ table >
</ div >
< div >
< h3 >
Sub h3 heading
</ h3 >
< p >
This paragraph is nested between < em > div</ em > tags
also.< br >
It inherits some styles from < em > div</ em > , and
< em > div</ em > inherits some styles from < em > body</ em > .
</ p >
< p >
This is an ordered list with some styles for font and
label type:
</ p >
< ol class = "lr" >
< li > Pellentesque habitant morbi tristique...
</ li >
< li > Aenean ultricies mi vitae est.
</ li >
< li > Donec non enim in turpis pulvinar facilisis.
</ li >
< li > Donec eu libero sit amet quam egestas semper.
</ li >
< li > Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante.
</ li >
</ ol >
</ div >
</ body >
</ html >
创建、打开和编辑示例文件
创建用于测试的文件
创建table styles.htm 文件
打开记事本，Windows附件。
将table syles 下拉框中的所有文本复制到剪贴板。
将内容粘贴到记事本中。
打开另存为对话框。
确保保存目录是您的文档文件夹。
将保存类型： 选择器更改为所有文件（*.*）。
输入文件名table styles.htm ，确保删除了txt 后缀。
按保存。 htm 文件已创建。
创建tables.css 文件
使用与上述相同的方法，但有以下例外：
将tables.css 下拉框的内容复制到一个新的记事本文件中。
将文件保存为tables.css ，与table styles.htm 位于同一文件夹中。 现在可以使用这两个文件来研究样式表对网页文档的影响。请注意，可以在网页文档的头部部分引用任意数量的此类样式表，每个样式表都有一个单独的link-tag 条目。
创建user.css 文件
此外，可以像tables.css 示例一样创建用户样式表 。如果这样做，则必须将其命名为user.css 。它最初不必包含任何样式，并且可以根据标记为安装用户样式表-Opera 12.16 的下拉框中的说明进行安装。以后可以在记事本中向其中添加用户样式。
打开和编辑文件
首先，应注意以下几点：
保存和缓存
通常，必须先保存 编辑后的样式表，然后才能将其应用于页面。
通常，必须先保存并重新加载 编辑后的网页文档，然后才能查看其更改。要重新加载按下Opera工具栏上的重新加载 按钮。如果未显示，可以通过查看/工具栏/自定义... 配置工具栏。
或者，在源 窗口中按下应用更改 按钮。
在浏览器中重新打开网页。
开发人员工具（如Opera的源 编辑器和Opera Dragonfly）还允许查看文档中的临时 更改，无需 保存。
有时需要清除 浏览器缓存才能看到更改。选择以下任何一种访问方法工具/删除隐私数据... 。清除所有项目，除了删除整个缓存 ，然后按确定 。工具/首选项/高级/历史记录 。按下立即清空 ，然后按确定 。工具/首选项/高级/历史记录 。设置退出时清空 复选框，然后重新启动浏览器。
更改Opera的首选项 时，通常需要重新启动浏览器。 现在，要显示脱机网页，只需在Opera中打开htm 文件即可。由于作者样式表tables.css 在文档的头部部分被引用，因此它将用于格式化页面。
打开网页
可以按如下方式操作
在相关的文档文件夹中，右键单击 htm 文件，然后选择打开方式... / Opera Internet Browser 。
或者，将Opera设置为此文件类型的默认程序。为此，请右键单击页面，然后打开方式.../选择默认程序... 。
网页也可以设置为通过书签或快速拨号 面板打开。 编辑网页文档
由于htm 文件只是一个文本文件，因此可以直接在记事本中进行编辑。为此，请在文档文件夹中右键单击该文件，然后打开方式... / 记事本 。如果以这种方式进行操作，则需要在浏览器中再次打开或重新加载文件之前保存该文件。但是，在Opera中打开文件时进行编辑有一些优势。一方面，可以立即看到更改的效果，并且除非效果正确，否则不必保存文件。要在Opera中编辑网页文档，请按如下操作
打开网页，然后右键单击 页面。选择源 。
对打开的编辑窗口中的文本进行任何修改。
进行更改后，按下源 窗口的工具栏按钮应用更改 。
选择主页面选项卡以查看更改的效果。
要永久保存更改，请在源 选项卡中按保存 。 编辑样式表
与htm 文件类似，css 文件只是一个文本文件，可以在记事本中直接编辑。可以按如下方式操作
在相关的文档文件夹中，右键单击 css 文件，然后选择打开方式... / 记事本 。
如果尚未设置，请考虑将记事本设置为css 文件的默认程序。
进行更改后，保存文件，为了方便起见，将其最小化到任务栏。
重新加载网页以查看结果。可以使用以下任何方法执行此操作按下Opera工具栏上的重新加载 按钮。如果未显示，则可以自定义地址工具栏以将其包含在内。
或者，在源代码 窗口中，按下应用更改 按钮，然后选择主页面选项卡。
在浏览器中重新打开网页。
图1：Opera Dragonfly显示的主要部分，其中标记了这些注释中提到的按钮。 Opera Dragonfly 实用程序是Opera浏览器的一部分。它允许用户研究用于任何网页的样式，并可以对本地副本进行交互式样式更改。它与正在研究的网页一起占据屏幕的一部分。
此处无法提供该实用程序的完整描述，但对于那些寻求更多信息的用户，请参阅Opera页面Opera Dragonfly文档
有两种方法可以打开程序
从Opera下拉菜单中 ；转到工具/高级/Opera Dragonfly 。通过右键单击任何网页的一部分 ；然后从右键单击菜单中选择检查元素 ，将打开Dragonfly，并在文档代码中突出显示该元素，并在单独的面板中显示其所有相关样式。请注意，当网页更改时，必须重新启动Dragonfly以清除先前站点的數據。
Dragonfly的使用常规 设置可从右侧按钮菜单 访问。但是，正在使用的功能 是使用窗口左侧 的按钮选择的。以下模式设置建议用于样式研究，并且假定适用于以下大多数要点：在Dragonfly打开的情况下
在主按钮菜单中选择文档 。
从文档 子菜单中选择选择页面上的元素以检查它 。
从文档 子菜单中选择突出显示选定元素 。
从文档 子菜单中选择展开DOM树 。
在右侧面板中选择样式 选项卡。 查看HTML网页文档及其相关样式表 .
查看网页的HTML代码： 如果尚未选择，请从Dragonfly的主按钮菜单中选择文档 。文档的代码显示在左侧面板中，可以选择由选定按钮确定的布局。然后，单击 文档的某个元素将选择它。完成此操作后，将突出显示该元素的网页，并且相关的选择器将移至样式显示的顶部。查看正在使用的样式表和脚本： 当样式显示在右侧面板中时，将显示每个样式块的源，并提供指向样式表本身的链接。只需点击该链接即可打开样式表。或者，使用主按钮菜单上的资源 按钮访问所有此类功能。修改网页文档： 在左侧面板中打开文档后，双击 某个元素将打开它以进行编辑。可以通过这种方式更改文本和结构，并在更改期间立即更新网页。Opera还允许使用浏览器的右键单击菜单项源代码 查看和保存网页文档
研究用于网页元素的样式： 对于此处讨论的所有功能，首先请确保在文档 子菜单中选择了选择页面上的元素以检查它 和突出显示选定元素 按钮。这两个按钮允许程序的各个面板与网页本身之间进行图形交互。例如，当使用鼠标单击屏幕或文档面板的某些部分时，则可以预期以下情况网页的被单击元素将被突出显示 .选定元素的标签序列将显示在 Dragonfly的页脚上。元素的位置在左侧面板的文档代码中突出显示 。级联样式将显示在该元素的 右侧面板中，其内容包括或访问以下功能样式来源、继承和计算值。
应用于该元素的完整属性集。
浏览器初始值 的添加。
元素的盒子模型布局。
文档文本和选择器交互的搜索功能。
更改活动页面样式的功能。 当Dragonfly尚未打开 时，右键单击页面元素，然后选择检查元素 将启动类似的操作。
修改活动页面使用的样式： 如样式研究 部分所示选择按钮。这些更改将立即在网页上实施，当然只会影响本地显示编辑级联CSS样式 ：典型操作的选择包括从级联中删除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">一些段落文本</p>
当以下两个类一起在同一元素中声明时，这两个单独定义的类的样式将被合并 <div class="firstpara headings">文本</div>
如果选择器 按如下所示编写，则样式将仅应用于声明了这两个类的元素 .firstpara.secondpara{}
ID 选择器
这些应该在一个页面中只使用一次，并且在一个元素中只能声明一个。它们具有最大的特异性，仅次于内联样式。一个典型的 id 定义可以在样式表中编写如下 #Tailpiece {color:gray;}
并且我们声明 ID 以在文档中使用，例如； <div id="Tailpiece" >这是文本</div>
上下文选择器
这些描述了当标签嵌套在彼此内部时要应用的样式。在此示例中，选择器将仅应用于嵌套在 div 标签内的段落标签。为此，我们编写 div p {padding: 1em;}
当文档中的标签看起来像这样时，它将被应用 <div><p>这是文本</p></div>
结合上述的一些想法，以下是相同嵌套段落的样式，但现在一个声明了一个类，另一个声明了一个 ID
div p.firstpara {background:green}
属性选择器
这些是选择器，它们在方括号中具有一个属性，以条件方式修改其操作。要为标题为“CSS 工作”的所有项目着色，我们可以在样式表中编写 [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 代码用于演示。其中包含许多嵌套的标签集（表示元素）。例如，表格完全嵌套在一对 div 标签内，所有这些都完全嵌套在一对 body 标签之间。
嵌套的概念不限于相邻 的标签对。也就是说，在上面的示例中，表格也被认为嵌套在 body 标签内，尽管 div 标签位于它们之间。在确定哪些选择器可能应用于文档中的特定标签时，浏览器会考虑标签所在的嵌套位置。在下面的示例中，假设浏览器正在尝试为第一个标题标签 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 的摘录。请注意，在存在声明的地方，有两个可能的指定选择器的路径，一个用于带有 声明的标签，一个没有 声明的标签。
<html> 的选择器。任何起作用的选择器都可以通过连接以目标标签结尾的选择器轨迹来创建。生成的集合应该是空格分隔的，但不必包含获取所需特异性所需的任何更多内容，并且序列中的任何标签都可以省略。以下示例显示了可能 为图 1 的第一个标题标签编写的简单选择器1. 琐碎的情况... 样式表选择器h2 将以 1 的特异性定位第一个标题。这样的选择器也将影响所有其他 h2 标题 .2. 嵌套在 div 标签内... 样式表选择器div h2 也将定位第一个标题，这次的特异性为 2。此选择器只能影响第一个标题，因为第二个标题未嵌套在任何 div 标签内 . 3. 嵌套在 body 和 div 标签内... 样式表选择器body div h2 将定位第一个标题，特异性为 3。因为第二个标题未嵌套在 div 内，所以此选择器只能影响第一个标题。 4. 嵌套在 body 标签内... 样式表选择器body h2 将以 2 的特异性定位第一个标题。因为这两个标题都嵌套在 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 显示了一个相当常见的标签排列，其中一个段落嵌套在一个分区标签集中，并且所有这些都被假定在网页文档的 body 标签内。此外，请注意段落标签中存在声明 ；一个id 、两个类 和一个内联样式 。分区标签在其内部声明了一个id 。添加这些声明允许第二个段落使用大量不同的选择器，尽管从理论上的 64 种变化中，只有大约 20 种会真正使用。这两个 段落，而其他样式只会影响其中一个。参考图 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
如何计算特异性
样式声明特异性
特异性是指声明缺乏普遍性的程度；它们应用于页面上的标签的程度，而不是它们应用于一般标签的程度。决定此类问题的方法已经发展到相当大的程度。
使用的方法计算一个表示特异性的加权和。计算特异性的方法如下
对于任何给定的样式表条目，检查其选择器，例如“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 。 假定使用 HTML5 标准的<!DOCTYPE html>。 这些说明将适用于其顶行条目与此处匹配的网页文档。对于某些其他doctype ，属性值的继承可能完全失败。下面的示例有助于解释基本要点。
继承作为默认 操作的一部分进行，在 层叠值 已解决之后 进行。这个假设使得编写示例变得困难。因此，读者应该假设以下示例中显示的样式已通过层叠 被确定为对这些元素有效。
简单继承
<!-- Figure 1 -->
< html >
< body style = "font-size:16px; line-height:1.5em;" >
< div >
< p > This is the test paragraph</ p >
</ div >
</ body >
</ html >
段落 的字体大小和行高将与body 标签相同。在这种情况下，div 标签继承 自body 标签，因为 div 没有指定此类属性。段落 由于同样的原因继承 自div 。
当在给定级别指定时，相对的line-height 始终计算为同一元素计算出的font-size的倍数，但在line-height继承的情况下，则使用其父元素的计算出的line-height值。下面的示例说明了这一点。相对的font-size 始终计算为父元素计算出的font-size的倍数。
行高将应用为尽可能接近其计算出的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 >
段落的line-height从div元素继承，因为它本身没有这样的样式，但继承的不是1.6em，而是div元素现有的计算出的line-height值。
然后段落的font-size为30px，line-height变为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字体显示，font-size为36px。div级别尝试继承font-size的特定值失败，因为div 或body 标签都没有包含font-size测量值。但是，浏览器默认选项设置的初始值 为16px，body标签采用此值使其计算出的值为24px。依次，div标签继承24px，然后将其自身计算为36px。段落从div标签继承Garamond值和36px。
继承值的系统推导
图5：确定继承值的方法。 对于网页用户来说，估计继承值很复杂，但在样式完全指定的情况下很少需要。对于浏览器，这个问题需要一个更有条理的过程。
参考图5了解此过程的策略图表。在级联运行完成之后，继承运行从文档树的最外层标签开始，向内朝向目标标签进行。可能包含样式的最外层标签是html 标签，下一个是body标签，依此类推，并且可能需要这些标签中的任何一个通过继承来贡献样式。
回想一下，只有当子元素本身没有该属性的级联样式时，继承 才能从父元素 传播到子元素 。当没有这样的样式但仍然无法继承时，则改为采用该属性的初始值 。例如，这可能发生在HTML元素中，该元素在样式表或页面中都没有声明font-size。将使用font-size的初始值，甚至可能被嵌套元素继承。所有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路径
当在网页文档的head部分引用样式表时，可以做出某些假设
如果没有给出除文件名之外的其他路径，浏览器可以假设样式表位于与网页文档相同的文件夹中。
如果给出了完整路径，在Opera的情况下，文件夹名称中允许使用空格。如果浏览器对空格有异议，则用%20 替换空格即可解决。
可以为本地计算机上的样式表提供本地路径。
关于@import
可以通过为页面head部分中的每个样式表创建单独的链接引用，将任意数量的样式表添加到网页中。使用@import指令，可以将其他样式表添加到链接的样式表本身。
也就是说，文档head部分列出的任何样式表本身都可以导入更多 样式表。在实践中，这意味着在链接 样式表的顶部为每个其他样式表放置一个单独的@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 : 1 em ;
}
/* etc... */
注意以下几点
导入指令上方不能有任何键入内容，但允许空行。
Opera中括号是可选的，但某些浏览器（如Internet Explorer）可能需要它们。
每个导入指令后面的分号是必不可少的。
样式表将在列出它们的样式表“之后”按顺序运行。
没有路径的条目将被假定位于与网页文档相同的文件夹中。
可以选择使用url 格式导入已知的样式表。请参阅上面的第三个示例，并注意它使用的是单 引号。
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 值应用于同一元素上的相同样式时，它会覆盖简单的 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 版本之间有所不同。
