Internet Explorer/添加用户样式
tyles 可以使用所谓的 *用户样式表* 添加到一些浏览器,微软 Internet Explorer 已经允许添加它们多年。尽管有很长的时间,但是关于这方面的帮助文件却很少添加。虽然笔记展示了如何 *添加* 用户样式表,但没有 *提供* 供用户使用的样式表。到现在,应该有一个非常庞大的用户可用的辅助功能和其他用户样式表列表。可惜,事实并非如此。考虑到这一点,这些笔记解释了涉及的内容,并列出了一个用于自定义用户视图的初始样式表。
CSS 样式级联
网页由文本组成,但也包含称为 *元素标签* 或 *标签* 的标记,以告知浏览器网页的每个部分如何进行样式设置。浏览器遍历所有这些标签并使用它们查找可能适用于它们的样式。典型的标签包括例如每个段落的段落标签 <p>,用于创建框形状的 div 标签 <div>,甚至用于表格的标签 <tables>。每个网页上有数百个标签,作者可以使用数十种不同的类型。
用于格式化页面元素的样式可以从几个地方找到。它们包括 HTML 文档本身内的样式以及各种样式表中的样式;浏览器的默认样式和其他选项设置也可能适用。有时,这些来源似乎存在于一个简单的层次结构中,但是,很快就会发现,一个更复杂的安排适用。请参见旁边的图形,它描绘了级联在实际情况中的应用方式。级联的作用是解决各种冲突的样式声明,直到可以为特定标签确定格式。当用户打算从其 *自己的* 样式表应用样式时,有时会发现已应用了不同的样式。在这种情况下,他将需要比平时多了解一些知识才能解决问题。
图 1. CSS 样式级联。请注意,用户样式声明具有最高优先级,前提是它们带有 !Important 标记。 |
决策过程将样式来源分组为三个主要类别或 *来源*;作者样式声明、用户声明和默认样式声明。作者声明反过来由内联样式、文档头部样式和链接样式表组成。自从 CSS2 以来,用户一直能够为其自己的样式表声明获得最高优先级,方法是使用 **!Important** 关键字,并且此标记的引入伴随着其优先级的重新排列。目前的主要分组只是
- **用户的 !Important 样式声明**。这些样式表达式包含所有带有 !Important 关键字的用户样式表条目。
- **作者的 !Important 样式声明**。作者可归因的三个样式来源最初被视为一个单独的组。它们是:内联样式、文档头部样式和链接样式表。同样,此集合仅包含添加了 !Important 关键字的那些声明。
- **作者的普通样式声明**。作者集合中没有 !Important 标记的那些声明。
- **用户的普通样式声明**。用户样式表中没有 !Important 标记的那些声明。
- **浏览器默认样式**。<a rel="nofollow" class="external text" href="http://www.iecss.com/">用户代理 (UA) 样式表 <sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> 和浏览器的可选默认设置。
在上述层次结构中,带有 !Important 关键字标记的用户样式具有最高优先级,并且只有在用户样式表忽略了创建适当的样式条目或忽略将其标记为 !Important 时,样式选择才会恢复到较低级别。类似的推理适用于所有级别,对于每个标签的样式。在决定应用哪些样式时,浏览器还会考虑每个声明的 *特异性*。特异性是指声明可以被认为直接适用于特定标签的程度。在每个主要级别内,浏览器按特异性对样式进行排序,为每个样式分配一个数值以决定哪些样式具有优先级。更具体的样式优先于更通用的样式。数字越大,特异性及其优先级就越高。在给定级别内,具有最高特异性的样式代表它在级联层次结构中,但是单独具有更高的特异性并不能允许样式 *超越* 其级别来强制执行其样式。
在决定特异性时,浏览器会考虑适用于样式声明的几个因素;也就是说,定义样式的样式表条目;它计算 id、类、标签、伪类、属性和伪元素。另一种看待 !Important 标记的方法是将其视为一个非常高的特异性值,这个值比其他值高出十倍。关于特异性和级联的详细描述可以在 <a rel="nofollow" class="external text" href="http://www.w3.org/TR/CSS2/cascade.html">W3: 级联</a> <sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> 中找到,并且在以下部分中还给出了一个简单的用于估计特异性的方法,以及实际示例。
还有一个需要解释的要点。用户为浏览器设置选项的方式会修改级联的工作方式;例如,用户可以选择完全忽略某些作者样式。由于用户样式表在级联中具有较低的优先级,因此会有很多次用户样式无法自行断言。(参见旁边的图形)。为了克服这种情况(对于字体),浏览器选项允许用户人为地覆盖一些作者的样式设置。
即使不创建用户样式表,也有一些作者样式可以通过浏览器选项中的设置进行更改。请注意, *由作者给出的* 样式是 *内联* 样式、 *头部* 样式和 *链接的外部样式表*。并非所有样式都可以被覆盖,但一些非常基本的样式可以被覆盖。这些是
- 作者的页面颜色。选择此项将删除所有作者的页面颜色,*包括* 字体颜色。
- 作者的字体样式。选择此项将删除所有作者的字体系列选择。
- 作者的字体大小。选择此项将删除所有作者的字体大小选择,包括绝对大小和相对大小。
可以根据用户的意图选择或取消选择上述列表中的每个项目或所有项目,并且也可以与用户样式表结合使用。要设置覆盖功能,请执行以下操作
- 打开 *工具 > Internet 选项* 对话框。
- 在 *常规* 选项卡上,选择 *辅助功能*。
- 在 *格式* 部分,选择或取消选择必要的复选框。
- 决定是要使用用户样式表还是浏览器的默认样式来替换被覆盖的样式,并相应地选择或取消选择标记为 *使用我的样式表格式化文档* 的框。如果未选择用户样式表,则默认颜色、字体和大小将替换它们,否则将考虑用户样式表。
样式表本质上是一个文本文件。它与众不同的地方在于它的文件后缀不同。它不是以 *。txt* 结尾,而是以 *。css* 结尾,缩写为 *层叠样式表*。与其他文本文件一样,它是在文本编辑器中创建的,例如 *记事本*、 *写字板* 或任何其他纯文本编辑器。互联网上提供了一些免费的文本编辑器,它们也可以帮助您编写 css 代码,这些编辑器很有用,但是,此说明假设最简单的情况。
假设在最简单的情况下,记事本用于手动编写样式表。打开 *记事本*,然后执行以下操作
- 选择记事本 *文件* 菜单的 *另存为* 条目。*另存为* 对话框将打开。
- 如有必要,将目录更改为您的 *文档* 文件夹。
- 在 *另存为* 对话框中,将 *保存类型:* 选择器更改为 *所有文件 (*.*)*。
- 在 *文件名* 文本框中,键入您的文件名,并在末尾加上 .css。例如,Mystyles.css。
- 按 *保存*。
样式表目前还没有任何条目,但可以随时通过在记事本中打开文件对其进行编辑。
- 打开 Windows 资源管理器
- 找到 CSS 文件
- 右键单击文件。
- 选择使用...打开,然后选择记事本。(如有必要,请浏览查找。)
- 文件将打开以供使用。
为样式表命名后,可以将其添加到样式级联中。样式表需要通过复选框启用才能生效,因此可以安装并保留样式表,但不要选中复选框。请按以下步骤操作。
- 打开 *工具 > Internet 选项* 对话框。
- 在 *常规* 选项卡上,选择 *辅助功能*。
- 在用户样式表部分,选中标记为使用我的样式表格式化文档的复选框。
- 按浏览,然后找到您的样式表。
- 左键单击您的文件,然后按打开以安装它。
- 如果您现在不打算使用样式表,请取消选中标记为使用我的样式表格式化文档的复选框。
如果取消选中,样式表地址将保留在原位,以便在需要时使用。
- 在查看新安装的样式表或对现有样式表的更改的效果之前,必须重新启动浏览器。
样式声明是属性及其值的集合。例如,以下段落的样式规则包含几个单独的部分,共同描述了它的格式。
p { font-family: Arial; font-size: 2em; line-height: 1.5em; padding: 0.5em;}
它包含四个样式规则。分别是字体的样式、字体大小、行间距和段落的四周填充,按照此顺序排列。需要注意一些基本要点。
- 样式以要设置样式的标签的文本(不包括其括号)开头。此文本称为选择器,因为浏览器使用此条目从样式表中选择正确的样式。查看此网页的源代码将显示它包含的许多标签和选择器。(选择查看 > 源代码,然后根据需要最小化窗口,以找到此后面的源代码屏幕。)
- 以上代码可用于格式化网页正文内容中的段落。但是,如果段落标签在网页上的其他标签(例如在<div>内)中嵌套,则此声明将被忽略。样式将需要添加一个术语以允许嵌套。
- 请注意,在示例中,每个规则都包含一个 CSS 属性及其值,并用冒号分隔。规则之间用分号分隔,如果需要,可以在末尾添加一个额外的分号。整个表达式用花括号括起来。通常允许使用空格,但在冒号或分号之前不允许使用空格。
- 如果将以上文本(不含!Important修饰符)键入用户的 CSS 文件,然后保存,它将作为一个基本的样式表发挥作用,并且在浏览器重新启动后,可能会生成大约 32 像素高的文本。但是,如果比用户指定的优先级更高的来源也指定了段落,那么用户的项目将被覆盖,并且不会生效。类似的思路适用于整个样式声明主题。
- 请参阅下一部分中的实际样式表,以了解!修改规则的示例,以及下面的下拉框,以了解样式表术语和特异性估计的介绍。
下面介绍了样式表术语;这里关注的是样式表中找到的选择器类型。其他资料包括一个关于特异性估计的面板,以及一个示例,展示了级联在解析样式方面的交互作用。
|
|
|
典型的样式块的 CSS 术语。 |
基本样式表
[edit | edit source]一些 CSS 新手可能需要更长的时间才能从他们的用户样式表中获得结果,因此下面列出了一个基本样式表,以帮助用户入门。然后,工作就简化为根据需要向现有代码中添加样式。
此样式表除了将页面缩减为纯白色背景上的黑色大文本之外,没有其他作用,尽管文本大小比仅从浏览器的文本大小设置中获得的文本大小更大。(忽略页面缩放)。目前尚不清楚这样的页面是否有观看用途,但该示例确实有助于演示!Important-override 原理的工作原理。将以下代码粘贴到您的用户样式表中:
/* 页面主体的一般样式 */
body {font-size:100% !important;}
/* 每个元素的样式 */
* {
font-color: black !important;
background-color:white !important;
font-size:30px !important;
font-family:Tahoma, Sans-serif !important;
line-height:1.8em !important;
font-weight:normal !important;
font-style:normal !important;
word-spacing:12px !important;
character-spacing:3px !important;
text-decoration:none !important;
text-align:left !important;
}
/* 粗体部分的样式 */
b, strong, em, h1, h2, h3, h4, h5, h6
{
font-weight: bold !important;
}
当文本粘贴到您安装的样式表中时
- 打开 *工具 > Internet 选项* 对话框。
- 在 *常规* 选项卡上,选择 *辅助功能*。
- 在格式部分,清除三个框。
- 在用户样式表部分,选中标记为使用我的样式表格式化文档的框。
- 关闭Internet 选项对话框和浏览器,然后重新打开它。
访问网页(例如,此页面),查看用户样式表的效果。在进行任何比较之前,请确保将浏览器的缩放和文本大小重置为其名义位置。尽管某些样式表的更改无需重新启动浏览器即可看到,但并非所有更改都会在重新启动之前生效。忽略这一点会导致很大的混乱。
样式属性和值很容易更改以获得不同的结果。对于那些不熟悉样式和样式表的人,建议读者充分利用互联网上的教程来学习。作者经常参考的一个详尽的参考资料是 W3 CSS 参考,并且可以在 字体测试器 中找到一个简单、交互式的在线代码测试器。随着时间的推移,更多有用的资源将被添加到此页面的另请参阅部分。
由于 MS Windows 和 MS Office 产品都使用 Internet Explorer 来显示其帮助面板,您可能会发现需要在实验会话之间删除用户样式表的勾选标记。 | |
技术说明 |
参考
[edit | edit source]另请参阅
[edit | edit source]- 浏览器字体设置 : 关于浏览器字体设置的讨论。
- 字体测试器 : 一个免费使用的交互式 CSS 代码编写器和查看器,主要用于文本。
- 字体 : 来自维基百科的关于字体的详细页面
- W3 CSS 参考 : 万维网联盟的 CSS 参考页面
- Internet Explorer 8 用户样式表 : 来自微软的一篇简短文章。
- 使用用户样式表自定义 Firefox : Mozilla(Firefox)浏览器的用户 CSS 说明
- 查找 Firefox 配置文件文件夹 : 如何找到 Firefox 配置文件文件夹 - 手动安装 css 文件的位置
- Opera - 用户 CSS : Opera 浏览器的用户 CSS 说明