跳转到内容

Internet Explorer/添加用户样式

来自维基教科书,开放世界中的开放书籍

页面正在建设中 - 2010年12月30日

[编辑 | 编辑源代码]
S

tyles 可以使用所谓的 *用户样式表* 添加到一些浏览器,微软 Internet Explorer 已经允许添加它们多年。尽管有很长的时间,但是关于这方面的帮助文件却很少添加。虽然笔记展示了如何 *添加* 用户样式表,但没有 *提供* 供用户使用的样式表。到现在,应该有一个非常庞大的用户可用的辅助功能和其他用户样式表列表。可惜,事实并非如此。考虑到这一点,这些笔记解释了涉及的内容,并列出了一个用于自定义用户视图的初始样式表。

CSS 样式级联


网页由文本组成,但也包含称为 *元素标签* 或 *标签* 的标记,以告知浏览器网页的每个部分如何进行样式设置。浏览器遍历所有这些标签并使用它们查找可能适用于它们的样式。典型的标签包括例如每个段落的段落标签 <p>,用于创建框形状的 div 标签 <div>,甚至用于表格的标签 <tables>。每个网页上有数百个标签,作者可以使用数十种不同的类型。

用于格式化页面元素的样式可以从几个地方找到。它们包括 HTML 文档本身内的样式以及各种样式表中的样式;浏览器的默认样式和其他选项设置也可能适用。有时,这些来源似乎存在于一个简单的层次结构中,但是,很快就会发现,一个更复杂的安排适用。请参见旁边的图形,它描绘了级联在实际情况中的应用方式。级联的作用是解决各种冲突的样式声明,直到可以为特定标签确定格式。当用户打算从其 *自己的* 样式表应用样式时,有时会发现已应用了不同的样式。在这种情况下,他将需要比平时多了解一些知识才能解决问题。

图 1. CSS 样式级联。请注意,用户样式声明具有最高优先级,前提是它们带有 !Important 标记。

决策过程将样式来源分组为三个主要类别或 *来源*;作者样式声明、用户声明和默认样式声明。作者声明反过来由内联样式、文档头部样式和链接样式表组成。自从 CSS2 以来,用户一直能够为其自己的样式表声明获得最高优先级,方法是使用 **!Important** 关键字,并且此标记的引入伴随着其优先级的重新排列。目前的主要分组只是

  1. **用户的 !Important 样式声明**。这些样式表达式包含所有带有 !Important 关键字的用户样式表条目。
  2. **作者的 !Important 样式声明**。作者可归因的三个样式来源最初被视为一个单独的组。它们是:内联样式、文档头部样式和链接样式表。同样,此集合仅包含添加了 !Important 关键字的那些声明。
  3. **作者的普通样式声明**。作者集合中没有 !Important 标记的那些声明。
  4. **用户的普通样式声明**。用户样式表中没有 !Important 标记的那些声明。
  5. **浏览器默认样式**。<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 选项* 对话框。
  • 在 *常规* 选项卡上,选择 *辅助功能*。
  • 在 *格式* 部分,选择或取消选择必要的复选框。
  • 决定是要使用用户样式表还是浏览器的默认样式来替换被覆盖的样式,并相应地选择或取消选择标记为 *使用我的样式表格式化文档* 的框。如果未选择用户样式表,则默认颜色、字体和大小将替换它们,否则将考虑用户样式表。

Internet Explorer 的用户样式表

[编辑 | 编辑源代码]

样式表本质上是一个文本文件。它与众不同的地方在于它的文件后缀不同。它不是以 *。txt* 结尾,而是以 *。css* 结尾,缩写为 *层叠样式表*。与其他文本文件一样,它是在文本编辑器中创建的,例如 *记事本*、 *写字板* 或任何其他纯文本编辑器。互联网上提供了一些免费的文本编辑器,它们也可以帮助您编写 css 代码,这些编辑器很有用,但是,此说明假设最简单的情况。

创建空白 CSS 文件

[编辑 | 编辑源代码]

假设在最简单的情况下,记事本用于手动编写样式表。打开 *记事本*,然后执行以下操作

  • 选择记事本 *文件* 菜单的 *另存为* 条目。*另存为* 对话框将打开。
  • 如有必要,将目录更改为您的 *文档* 文件夹。
  • 在 *另存为* 对话框中,将 *保存类型:* 选择器更改为 *所有文件 (*.*)*。
  • 在 *文件名* 文本框中,键入您的文件名,并在末尾加上 .css。例如,Mystyles.css。
  • 按 *保存*。

样式表目前还没有任何条目,但可以随时通过在记事本中打开文件对其进行编辑。

打开 CSS 文件

[编辑 | 编辑源代码]
  • 打开 Windows 资源管理器
  • 找到 CSS 文件
  • 右键单击文件。
  • 选择使用...打开,然后选择记事本。(如有必要,请浏览查找。)
  • 文件将打开以供使用。

安装样式表

[编辑 | 编辑源代码]

为样式表命名后,可以将其添加到样式级联中。样式表需要通过复选框启用才能生效,因此可以安装并保留样式表,但不要选中复选框。请按以下步骤操作。

  • 打开 *工具 > Internet 选项* 对话框。
  • 在 *常规* 选项卡上,选择 *辅助功能*。
  • 用户样式表部分,选中标记为使用我的样式表格式化文档的复选框。
  • 浏览,然后找到您的样式表。
  • 左键单击您的文件,然后按打开以安装它。
  • 如果您现在不打算使用样式表,请取消选中标记为使用我的样式表格式化文档的复选框。

如果取消选中,样式表地址将保留在原位,以便在需要时使用。

  • 在查看新安装的样式表或对现有样式表的更改的效果之前,必须重新启动浏览器。

编写样式

[编辑 | 编辑源代码]

样式声明是属性及其值的集合。例如,以下段落的样式规则包含几个单独的部分,共同描述了它的格式。

p { font-family: Arial; font-size: 2em; line-height: 1.5em; padding: 0.5em;}

它包含四个样式规则。分别是字体的样式、字体大小、行间距和段落的四周填充,按照此顺序排列。需要注意一些基本要点。

  • 样式以要设置样式的标签的文本(不包括其括号)开头。此文本称为选择器,因为浏览器使用此条目从样式表中选择正确的样式。查看网页的源代码将显示它包含的许多标签和选择器。(选择查看 > 源代码,然后根据需要最小化窗口,以找到此后面的源代码屏幕。)
  • 以上代码可用于格式化网页正文内容中的段落。但是,如果段落标签在网页上的其他标签(例如在<div>内)中嵌套,则此声明将被忽略。样式将需要添加一个术语以允许嵌套。
  • 请注意,在示例中,每个规则都包含一个 CSS 属性及其值,并用冒号分隔。规则之间用分号分隔,如果需要,可以在末尾添加一个额外的分号。整个表达式用花括号括起来。通常允许使用空格,但在冒号或分号之前不允许使用空格。
  • 如果将以上文本(不含!Important修饰符)键入用户的 CSS 文件,然后保存,它将作为一个基本的样式表发挥作用,并且在浏览器重新启动后,可能会生成大约 32 像素高的文本。但是,如果比用户指定的优先级更高的来源也指定了段落,那么用户的项目将被覆盖,并且不会生效。类似的思路适用于整个样式声明主题。
  • 请参阅下一部分中的实际样式表,以了解!修改规则的示例,以及下面的下拉框,以了解样式表术语和特异性估计的介绍。

下面介绍了样式表术语;这里关注的是样式表中找到的选择器类型。其他资料包括一个关于特异性估计的面板,以及一个示例,展示了级联在解析样式方面的交互作用。

样式表术语介绍
常见的样式表术语
标签选择器
通常,选择器是样式表达式的最左侧部分,一直到但不包括第一个花括号。它有时只是要定义样式的 HTML 标签的文本部分。它也可以与其他术语组合使用,这里给出了一些最常见的标签选择器的示例。使用段落标签选择器的简单样式如下所示:
p {font-size: 10pt;}


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


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


我们也可以有条件地为段落设置样式。假设样式仅在段落标签嵌套在 div 标签内时才应用,我们可以编写:
div p {line-height:1.8em;}


类选择器
类选择器是一种与类相关的选择器。也就是说,类名必须在文档中的关联标签中声明,样式才能应用。它比简单选择器更具特异性,但比 ID 选择器特异性低。类可以在整个页面中使用任意多次。在样式表中,我们编写:
p.firstpara {font-family: Arial;}


要将这些样式应用于文档中的标签,我们必须在 HTML 文本中编写:
<p class="firstpara"> 这里是一些段落文本 </p>


ID 选择器
这些选择器在一个页面中只能使用一次。它们具有最高的特异性,仅次于内联样式。我们可以在样式表中编写:
#Tailpiece {color:gray;}


我们在 HTML 页面中通过键入以下内容来调用 ID 样式:
<div id="Tailpiece" >这是文本 </div>


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


我们在页面上使用它,方法是:
<div><p>这是文本</p></div>


或者组合这些思路,以下是嵌套在 div 中的段落的类和 ID 的样式:

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


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


伪类
这些是条件化行为的类,例如选择页面上的链接。我们可以编写:
a:active {color:purple}


伪元素
这些是诸如“first-line”和“last-line”之类的元素,它们允许对页面进行额外的控制。要使所有段落的第一个字母加粗,我们可以编写:
p:first-letter {font-weight:bold}



  


特异性估计


样式声明特异性

特异性指的是声明缺乏普遍性的程度;指的是声明应用于页面上的标签的程度,而不是应用于一般标签的程度。决定此类事项的方法已得到相当大的发展。

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

对于任何给定的样式表条目,检查其选择器。选择器有时很简单,只有一个部分,或者很复杂,包含多个部分。通过以下方式将值添加到总计中来构建特异性的值:

  • 对于通用选择器 (*) 或继承的值,将 0 添加到特异性总计中。
  • 对于内联样式,将 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),加上一个属性 (1)。


实际样式解析示例
解析样式级联

此下拉框提供了一个样式解析的演练示例,从检查 HTML 条目开始,并通过特异性估计到显示的样式选择。

一个测试网页

假设浏览器正在尝试解析下面列表中段落标签的样式。


<!-- 这是测试网页 - 用于解析 <p> 样式 -->
<html>
 <head>
 <title>Test_the_Precedence</title>
    <style type="text/css">
       p {font-size:2em;font-family:courier;}
    </style>
<link rel="stylesheet" href="Ext_Author.css" type="text/css" media="screen">
    
 </head>
 <body>
   <div>
    <p id="bigpara" class="TahomaClass" style="font-size:20px;">Text</p>
   </div>
 </body>
</html>


检查上面的段落标签,可以发现它可能受到为标签定义的任何或所有样式、类“TahomaClass”、ID“bigpara”或任何与段落标签本身嵌套相关的样式的影响。

要考虑的样式来源

可能的样式来源或来源有五种,与该段落标签相关的样式可能在任何一种中找到。事实上,在整个过程中可能存在冲突的样式。样式的来源按优先级降序排列如下:

  1. **用户的 !Important 样式声明**。这些样式表达式包含所有带有 !Important 关键字的用户样式表条目。
  2. **作者的 !Important 样式声明**。作者可归因的三个样式来源最初被视为一个单独的组。它们是:内联样式、文档头部样式和链接样式表。同样,此集合仅包含添加了 !Important 关键字的那些声明。
  3. **作者的普通样式声明**。作者集合中没有 !Important 标记的那些声明。
  4. **用户的普通样式声明**。用户样式表中没有 !Important 标记的那些声明。
  5. 浏览器默认样式。在 用户代理 (UA) 样式表 [3] 和浏览器可选的默认设置中。

在上述每个类别(来源)中,都找到了与段落相关的样式,但这些样式不允许重叠或跨类别边界。然后,在它们自己的类别中,这些样式会被过滤,以找到一组具有最高特异性的样式。(请参阅主页上关于特异性的下拉框。)例如,在每个级别可能有多个针对标签的颜色声明,但每个类别只能返回一个颜色值。通过这种方式,每个类别都在其自身级别上执行选择,然后在级联中进一步解析这些结果。

当然,并非每个类别都会找到颜色样式,因为它可能没有被指定。有些类别会找到特异性相同的冲突值和重复条目。

现在假设所有相关的样式都已找到,然后将它们分离到各自的优先级类别(来源)中。这些相关的样式声明列在下面。请注意,条目是用颜色带区分的,以区分各个类别,并且已经标记了最具特异性的条目。从每个类别中选出的样式显示在列表后面的图表中。

要过滤的相关样式
/*    From the browser UA style-sheet  */

p 
{
margin: 1em 0;         (max margin specificity= 1) 
}     
/*    From the normal user declarations  */

div p
{
font-family: Arial;
font-style: italic;    (max font-style specificity= 2)
font-weight: normal    (max font-weight specificity= 2)
}
div
{
color: blue;           (max color specificity= 1) 
font-family: garamond;
}
div p.times
{
font-family: Times;    (max font-family specificity= 12)
}
/*    From the normal author declarations  */

p                          (1 of 2 duplicates)
{
font-size: 2em;
font-family:courier;
}   

p                          (2 of 2 duplicates)   
{
font-family: Garamond; (max font-family specificity= 1)    
font-weight: normal;
{

div p
{
font-weight: bold;      (max font-weight specificity= 2)   
}

div p.bigpara
{
font-size: 10px;                 
}

div p#bigpara
{
font-size: 16px;       
}

<p style="font:size:20px;"> (max font-size specificity= 1000) 
/*    From the !Important author declarations  */

p
{
font-family: Calibri !important; (max font-family specificity= 1)
font-style: normal !important; (highest font-style specificity= 1)
color:blue !important;
}

div p
{
color:black !important; (max color specificity= 2)
}
/*    From the !Important user declarations   */

p
{
font-size: 30px !important; (max font-size specificity= 1)
}

p.TahomaClass
{
font-family: Tahoma !important; (max font-family specificity= 11)
font-size: 20px !important;
}


选择总结

现在每个类别中列出的样式将根据级联的优先级进行处理,以决定应该使用哪种样式来显示段落的文本。当返回相关样式的特异性选择时,它们会以图表中所示的方式与它们的类别相关联。

这些类别的条目来自上面面板中的样式。

从图表中可以看出,在上面面板中找到的特异性最大的样式是每个级别显示的样式。它们还受类别本身赋予的优先级(或 precedence)的影响。在图表中,很明显,如果优先级高于它的来源没有提出值,那么来源就只能影响结果。选择使用此算法,直到找到用于显示的样式集。此过程将针对网页中每个标签的属性重复进行。

此示例的最终格式,将简化为一个与以下段落集等效的段落集:

p
{
font-family: Tahoma;
color: black;
font-style: normal;
margin: 1em 0;
font-size: 30px;
font-weight: bold;
}


冲突和重复

浏览器处理样式表和网页的方式会产生一些后果。毫不奇怪,浏览器从上到下处理两者,当在一个级别内存在特异性相同的冲突样式(或重复)时,最后被浏览器遇到的样式将优先。这适用于页面处理或样式表本身。

这进一步意味着,这些特异性相同的声明将具有可变的结果,具体取决于文档的头部样式是在链接之前还是之后编写的。这也意味着,当文档的头部中列出了多个链接的外部样式表时,它们的顺序将是重要的。

由于内联样式具有如此高的特异性,因此它们始终会覆盖其他作者样式,但仍然无法覆盖用!important关键字标记的用户样式。

在真正实用的情况下,图形中需要考虑的属性太多了,但原理是合理的,可以应用于一般情况。

  


典型的样式块的 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]
  1. 浏览器用户代理样式表列表
  2. W3:级联
  3. 浏览器用户代理样式表列表

另请参阅

[edit | edit source]
华夏公益教科书