Internet Explorer/新增使用者樣式

頁面正在建設中 - 2010年12月30日

S

tyles 可以使用所謂的 *使用者樣式表* 新增到一些瀏覽器，微軟 Internet Explorer 已經允許新增它們多年。儘管有很長的時間，但是關於這方面的幫助檔案卻很少新增。雖然筆記展示瞭如何 *新增* 使用者樣式表，但沒有 *提供* 供使用者使用的樣式表。到現在，應該有一個非常龐大的使用者可用的輔助功能和其他使用者樣式表列表。可惜，事實並非如此。考慮到這一點，這些筆記解釋了涉及的內容，並列出了一個用於自定義使用者檢視的初始樣式表。

CSS 樣式級聯

網頁由文字組成，但也包含稱為 *元素標籤* 或 *標籤* 的標記，以告知瀏覽器網頁的每個部分如何進行樣式設定。瀏覽器遍歷所有這些標籤並使用它們查詢可能適用於它們的樣式。典型的標籤包括例如每個段落的段落標籤 ，用於建立框形狀的 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) 樣式表 <a href="#cite_note-1">[1]</a> 和瀏覽器的可選預設設定。

在上述層次結構中，帶有 !Important 關鍵字標記的使用者樣式具有最高優先順序，並且只有在使用者樣式表忽略了建立適當的樣式條目或忽略將其標記為 !Important 時，樣式選擇才會恢復到較低級別。類似的推理適用於所有級別，對於每個標籤的樣式。在決定應用哪些樣式時，瀏覽器還會考慮每個宣告的 *特異性*。特異性是指宣告可以被認為直接適用於特定標籤的程度。在每個主要級別內，瀏覽器按特異性對樣式進行排序，為每個樣式分配一個數值以決定哪些樣式具有優先順序。更具體的樣式優先於更通用的樣式。數字越大，特異性及其優先順序就越高。在給定級別內，具有最高特異性的樣式代表它在級聯層次結構中，但是單獨具有更高的特異性並不能允許樣式 *超越* 其級別來強制執行其樣式。

在決定特異性時，瀏覽器會考慮適用於樣式宣告的幾個因素；也就是說，定義樣式的樣式表條目；它計算 id、類、標籤、偽類、屬性和偽元素。另一種看待 !Important 標記的方法是將其視為一個非常高的特異性值，這個值比其他值高出十倍。關於特異性和級聯的詳細描述可以在 <a rel="nofollow" class="external text" href="http://www.w3.org/TR/CSS2/cascade.html">W3: 級聯</a> <a href="#cite_note-2">[2]</a> 中找到，並且在以下部分中還給出了一個簡單的用於估計特異性的方法，以及實際示例。

還有一個需要解釋的要點。使用者為瀏覽器設定選項的方式會修改級聯的工作方式；例如，使用者可以選擇完全忽略某些作者樣式。由於使用者樣式表在級聯中具有較低的優先順序，因此會有很多次使用者樣式無法自行斷言。（參見旁邊的圖形）。為了克服這種情況（對於字型），瀏覽器選項允許使用者人為地覆蓋一些作者的樣式設定。

作者樣式覆蓋

即使不建立使用者樣式表，也有一些作者樣式可以透過瀏覽器選項中的設定進行更改。請注意， *由作者給出的* 樣式是 *內聯* 樣式、 *頭部* 樣式和 *連結的外部樣式表*。並非所有樣式都可以被覆蓋，但一些非常基本的樣式可以被覆蓋。這些是

作者的頁面顏色。選擇此項將刪除所有作者的頁面顏色，*包括* 字型顏色。
作者的字型樣式。選擇此項將刪除所有作者的字體系列選擇。
作者的字型大小。選擇此項將刪除所有作者的字型大小選擇，包括絕對大小和相對大小。

可以根據使用者的意圖選擇或取消選擇上述列表中的每個專案或所有專案，並且也可以與使用者樣式表結合使用。要設定覆蓋功能，請執行以下操作

開啟 *工具 > 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”或任何與段落標籤本身巢狀相關的樣式的影響。

要考慮的樣式來源

可能的樣式來源或來源有五種，與該段落標籤相關的樣式可能在任何一種中找到。事實上，在整個過程中可能存在衝突的樣式。樣式的來源按優先順序降序排列如下:

**使用者的 !Important 樣式宣告**。這些樣式表示式包含所有帶有 !Important 關鍵字的使用者樣式表條目。
**作者的 !Important 樣式宣告**。作者可歸因的三個樣式來源最初被視為一個單獨的組。它們是：內聯樣式、文件頭部樣式和連結樣式表。同樣，此集合僅包含添加了 !Important 關鍵字的那些宣告。
**作者的普通樣式宣告**。作者集合中沒有 !Important 標記的那些宣告。
**使用者的普通樣式宣告**。使用者樣式表中沒有 !Important 標記的那些宣告。
瀏覽器預設樣式。在使用者代理 (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 術語。

基本樣式表

一些 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 來顯示其幫助面板，您可能會發現需要在實驗會話之間刪除使用者樣式表的勾選標記。
技術說明

參考

另請參閱

瀏覽器字型設定 : 關於瀏覽器字型設定的討論。
字型測試器 : 一個免費使用的互動式 CSS 程式碼編寫器和檢視器，主要用於文字。
字型 : 來自維基百科的關於字型的詳細頁面
W3 CSS 參考 : 全球資訊網聯盟的 CSS 參考頁面
Internet Explorer 8 使用者樣式表 : 來自微軟的一篇簡短文章。
使用使用者樣式表自定義 Firefox : Mozilla（Firefox）瀏覽器的使用者 CSS 說明
查詢 Firefox 配置檔案資料夾 : 如何找到 Firefox 配置檔案資料夾 - 手動安裝 css 檔案的位置
Opera - 使用者 CSS : Opera 瀏覽器的使用者 CSS 說明

[1] 瀏覽器使用者代理樣式表列表

[2] W3:級聯

[3] 瀏覽器使用者代理樣式表列表

[3]