家看到網(wǎng)站的內(nèi)容都變成了灰色，包括按鈕、圖片等等。這時(shí)候我們可能會(huì)好奇這是怎么做到的呢？

有人會(huì)以為所有的內(nèi)容都統(tǒng)一換了一個(gè) CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統(tǒng)一換成了灰色樣式。但你想想這個(gè)成本也太高了，而且萬一某個(gè)控件忘記加灰色樣式了豈不是變成生產(chǎn)事故要扣獎(jiǎng)金了。

解決方案很簡(jiǎn)單，只需要幾行代碼就能搞定了。F12看下各大網(wǎng)站怎么實(shí)現(xiàn)的。

百度：

京東：

：

慕課網(wǎng)：

給大家總結(jié)出一段規(guī)范的代碼，把這段代碼加入網(wǎng)站頁面的CSS里面即可實(shí)現(xiàn)頁面變成灰色的效果：

filter是濾鏡的意思，filter:gray的意思就是說給頁面加上一個(gè)灰度的濾鏡，所以html里面的所有內(nèi)容都會(huì)變成黑白的了。不過這個(gè)濾鏡對(duì)于chrome和safari瀏覽器是無效的，所以下面會(huì)有一行-webkit-filter: grayscale(100%);

擴(kuò)展：CSS3 filter(濾鏡)

一、blur(px)高斯模糊

給圖像高斯模糊。如果沒有設(shè)定值，則默認(rèn)值是0；這個(gè)參數(shù)可設(shè)置css長(zhǎng)度值，不接受百分比值

img {
   -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
   filter: blur(5px);
}

二、brightness(%)亮度

使圖像看起來更亮或更暗。值是100%，圖像無變化，超過100%，變亮，小于100%，變暗。

filter: brightness(150%)

三、contrast(%)對(duì)比度

filter: contrast(200%)

四、drop-shadow(x y blur speed color) 陰影效果

filter-shadow: (50px 50px 5px tomato)

與box-shadow效果上有顯著的區(qū)別

五、grayscale(%)灰度

filter: grayscale(100%)

六、hue-rotate()色相旋轉(zhuǎn)

filter: hue-rotate(100%)

七、invate(%)

反轉(zhuǎn)輸入圖像。值為100%是完全反轉(zhuǎn)。 值為0%則圖像無變化。0%~100%之間，則是效果的線性乘子。

filter: invate(100%)

八、opacity(%)

轉(zhuǎn)化圖像的透明度。值為0%則是完全透明。值為100%則圖像無變化

filter: opacity(100%)

九、saturate(%)

轉(zhuǎn)換圖像的飽和度。值為0%則是完全不飽和，值為100%則圖像無變化。值允許大于100%，會(huì)有更高的飽和度。

filter: saturate(100%)

十、sepia(%)

將圖像轉(zhuǎn)為深褐色。值為100%則完全是深褐色

img {
 	-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
 	filter: sepia(100%);
}

十一、復(fù)合函數(shù)

使用多個(gè)濾鏡，每個(gè)濾鏡使用空格分割。

注意：順序是非常重要的（例如使用grayscale()再使用sepia()將產(chǎn)生一個(gè)完整的灰度圖片）

img {
 -webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
 filter: contrast(200%) brightness(150%);
}

filter效果示例

SS 是自定義網(wǎng)頁呈現(xiàn)的語言。它用于添加顏色、背景圖像和紋理，以及在頁面上排列元素。然而，CSS 不僅僅是繪制漂亮的圖片。它還能增強(qiáng)網(wǎng)站的可用性。下圖顯示了 YouTube 的首頁。左邊是頁面的常規(guī)渲染，右邊是沒有 CSS 的頁面。

右側(cè)的圖像不僅不那么有趣，而且使用起來也更加困難

在這個(gè)簡(jiǎn)短的指南中，我們將介紹 CSS、演示 CSS 語法、解釋 CSS 的工作原理、向您展示如何將 CSS 標(biāo)記添加到 HTML 文檔中，并為您提供來自網(wǎng)絡(luò)的大量資源，您可以在其中了解有關(guān) CSS 的更多信息。

什么是 CSS？

CSS 代表層疊樣式表，它是用于設(shè)置網(wǎng)頁視覺呈現(xiàn)樣式的語言。CSS 是告訴 Web 瀏覽器如何呈現(xiàn)網(wǎng)頁的不同部分的語言。

網(wǎng)頁上的每個(gè)項(xiàng)目或元素都是以標(biāo)記語言編寫的文檔的一部分。在大多數(shù)情況下，HTML 雖然是標(biāo)記語言，但也有其他語言在使用，例如 XML。在本指南中，我們將使用 HTML 來演示 CSS 的實(shí)際應(yīng)用，請(qǐng)記住，如果您使用 XML或不同的標(biāo)記語言，同樣的原則和技術(shù)也適用。

CSS 與 HTML 有何不同？

談到 CSS 提問題時(shí)，首先要了解的是何時(shí)使用 CSS 等樣式語言以及何時(shí)使用 HTML 等標(biāo)記語言。

• 所有重要的網(wǎng)站內(nèi)容都應(yīng)使用 HTML 等標(biāo)記語言添加到網(wǎng)站。
• 網(wǎng)站內(nèi)容的呈現(xiàn)應(yīng)該由樣式語言定義，例如 CSS。

不屬于網(wǎng)頁演示的博客文章、頁面標(biāo)題、視頻、音頻和圖片都應(yīng)使用 HTML 添加到網(wǎng)頁中。背景圖像和顏色、邊框、字體大小、排版以及網(wǎng)頁上項(xiàng)目的位置都應(yīng)該由 CSS 定義。

做出這種區(qū)分很重要，因?yàn)槲茨苁褂谜_的語言可能會(huì)導(dǎo)致將來難以對(duì)網(wǎng)站進(jìn)行更改，并為使用純文本瀏覽器或屏幕閱讀器的網(wǎng)站訪問者造成可訪問性和可用性問題。

CSS 語法

CSS 語法包括選擇器、屬性、值、聲明、聲明塊、規(guī)則集、at 規(guī)則和語句。

• 選擇器是一個(gè)代碼片段，用于標(biāo)識(shí)受樣式影響的網(wǎng)頁元素或元素。
• 屬性是要受影響的元素的方面。例如，顏色、內(nèi)邊距、邊距和背景是一些最常用的顏色 CSS 屬性。
• 值用于定義屬性。例如，屬性顏色可能被賦予紅色值，如下所示color: red;：
• 屬性和值的組合稱為聲明。
• 在許多情況下，多個(gè)聲明應(yīng)用于單個(gè)選擇器。聲明塊是用于指代應(yīng)用于單個(gè)選擇器的所有聲明的術(shù)語。
• 單個(gè)選擇器和緊隨其后的聲明塊組合稱為規(guī)則集。
• At-rules類似于規(guī)則集，但以**@符號(hào)而不是selector開頭。最常見的@media規(guī)則是通常用于創(chuàng)建基于查看網(wǎng)頁的設(shè)備大小應(yīng)用的 CSS 規(guī)則塊的規(guī)則。
• 規(guī)則集和at-rules都是CSS語句。

CSS 語法示例

讓我們使用一段 CSS 來闡明這些項(xiàng)目是什么。

h1 { 
    color: red; 
    font-size: 3em; 
    text-decoration: underline; 
    }

在本例中，h1是選擇器。選擇器后跟一個(gè)包含三個(gè)聲明的聲明塊。每個(gè)聲明與下一個(gè)聲明之間用分號(hào)分隔。制表符和換行符是可選的，但大多數(shù)開發(fā)人員使用它來使 CSS 代碼更易于閱讀。

通過h1用作選擇器，我們是說網(wǎng)頁上的每個(gè) 1 級(jí)標(biāo)題都應(yīng)遵循此規(guī)則集中包含的聲明。

規(guī)則集包含三個(gè)聲明：

• color:red;
• font-size: 3em;
• text-decoration: underline;

color、font-size 和text-decoration都是性質(zhì)。您可以使用數(shù)百個(gè) CSS 屬性，但常用的只有幾十個(gè)。

我們將值red、3em和underline應(yīng)用于我們使用的屬性。每個(gè) CSS 屬性都被定義為接受以特定方式格式化的存在。

對(duì)于color屬性，我們可以使用顏色關(guān)鍵字或 Hex、RGB 或 HSL 格式的顏色公式。在這種情況下，我們使用了 color 關(guān)鍵字red。CSS3 中有幾十個(gè)顏色關(guān)鍵字可用，但其他顏色模型可以訪問數(shù)百萬種顏色。

我們將 的值應(yīng)用于3em屬性font-size。我們可以使用多種尺寸單位，包括像素、百分比等。

最后，我們將值添加underline到屬性text-decoration中。我們也可以使用overlineorline-through作為 的值text-decoration。此外，CSS3 允許使用純線、雙線、點(diǎn)線、虛線和波浪線樣式，這些都是文本裝飾顏色的規(guī)范。我們可以通過使用這樣的聲明一次應(yīng)用所有三個(gè)值：

text-decoration: blue double underline;

該規(guī)則將導(dǎo)致h1我們最初示例中的 用藍(lán)色雙線下劃線。color文本本身將保持為我們屬性中定義的紅色。

為樣式準(zhǔn)備 HTML 標(biāo)記

CSS 應(yīng)該用于向網(wǎng)頁添加內(nèi)容。該任務(wù)最好由 HTML 和 XML等標(biāo)記語言處理。相反，CSS 用于選擇網(wǎng)頁上已經(jīng)存在的項(xiàng)目并定義每個(gè)項(xiàng)目的顯示方式。

為了盡可能容易地選擇網(wǎng)頁上的項(xiàng)目，應(yīng)將標(biāo)識(shí)符添加到網(wǎng)頁上的元素中。這些標(biāo)識(shí)符，在 CSS 上下文中通常稱為鉤子，可以更容易地識(shí)別應(yīng)該受 CSS 規(guī)則影響的項(xiàng)目。

類和 ID 用作 CSS 樣式的掛鉤。雖然 CSS 的呈現(xiàn)方式不受使用類和鉤子的影響，但它們使開發(fā)人員能夠精確定位他們希望設(shè)置樣式的 HTML 元素。

類和 ID 不可互換。知道何時(shí)使用它們很重要。

何時(shí)使用類

當(dāng)單個(gè)網(wǎng)頁上有多個(gè)元素需要設(shè)置樣式時(shí)，請(qǐng)使用類。例如，假設(shè)您希望頁面頁眉和頁腳中的鏈接以一致的方式設(shè)置樣式，但與頁面正文中的鏈接不同。要查明這些鏈接，您可以為每個(gè)鏈接或包含鏈接的容器添加一個(gè)類。然后，您可以使用該類指定樣式，并確保它們僅應(yīng)用于具有該類屬性的鏈接。

何時(shí)使用 ID

對(duì)僅在網(wǎng)頁上出現(xiàn)一次的元素使用 ID。例如，如果您使用 HTML 無序列表進(jìn)行站點(diǎn)導(dǎo)航，則可以使用nav等 ID為該列表創(chuàng)建唯一的掛鉤。

這是一個(gè)用于基本電子商務(wù)網(wǎng)站的簡(jiǎn)單導(dǎo)航欄的 HTML 和 CSS 代碼示例。

<style>
    #nav { 
         background: lightgray; 
         overflow: auto; 
         } 
     #nav li {
         float: left; 
         padding: 10px;
         } 
      #nav li:hover {
         background: gray; 
         } 
  </style> 
  <ul id="nav"> 
      <li><a href="">Home</a></li>
      <li><a href="">Shop</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Contact Us</a></li> 
  </ul>

該代碼將生成一個(gè)從頁面左側(cè)開始的淺灰色背景的水平導(dǎo)航菜單。每個(gè)導(dǎo)航項(xiàng)目的四周都有 10 像素的間距，當(dāng)您將鼠標(biāo)懸停在每個(gè)項(xiàng)目的背景上時(shí)，它的背景會(huì)變暗。

同一網(wǎng)頁上的任何其他列表都不會(huì)受到該代碼的影響。

#example-nav {
background: lightgray;
overflow: auto;
}
#example-nav li {
float: left;
padding: 10px;
}
#example-nav li:hover {
background: gray;
}

何時(shí)不使用 Hooks

您不必為 HTML元素添加類或 ID 即可使用 CSS對(duì)其進(jìn)行樣式設(shè)置。如果您知道要為網(wǎng)頁上特定元素的每個(gè)實(shí)例設(shè)置樣式，則可以使用元素標(biāo)簽本身。

例如，假設(shè)您要?jiǎng)?chuàng)建一致的標(biāo)題樣式。與向每個(gè)標(biāo)題添加類或 ID 相比，使用標(biāo)題標(biāo)簽簡(jiǎn)單地設(shè)置所有標(biāo)題元素的樣式會(huì)容易得多。

<style> 
   ul { 
       list-style-type: upper-roman; 
       margin-left: 50px; 
       } 
     p { 
       color: darkblue 
       } 
 </style> 
 <p>Some paragraph text here. Two short sentences.</p> 
 <ul> 
 <li>A quick list</li>
 <li>Just two items</li> 
 </ul> 
 <p>Additional paragraph text here. This time let's go for three sentences. Like this.
 </p>

該代碼顯示的效果如下：

.code_sample ul {
list-style-type: upper-roman;
左邊距：50px；
}
.code_sample p {
顏色：深藍(lán)色
}

這里有一些段落文本。兩個(gè)短句。

快速列表
只有兩個(gè)項(xiàng)目
此處附加段落文本。這次讓我們來三句話。像這樣。

另一個(gè)清單
仍然只有兩個(gè)項(xiàng)目

在這種情況下，即使我們只為ul和p元素編寫了一次樣式規(guī)則，但會(huì)影響多個(gè)項(xiàng)目。通過在網(wǎng)站的每個(gè)頁面上創(chuàng)建一致的標(biāo)題、列表和段落文本樣式，使用元素選擇器是創(chuàng)建有吸引力、可讀性和一致的網(wǎng)站體驗(yàn)的好方法。

為樣式準(zhǔn)備標(biāo)記的最佳實(shí)踐

既然您知道如何將類、ID 和元素標(biāo)簽用作 CSS 規(guī)則集的鉤子，那么您如何才能最好地利用這些知識(shí)來編寫標(biāo)記，以便輕松定位特定元素？

• 自由而一致地應(yīng)用課程。對(duì)應(yīng)該在一個(gè)方向或另一個(gè)方向?qū)R的項(xiàng)目以及在單個(gè)網(wǎng)頁上重復(fù)出現(xiàn)的任何元素使用類。
• 將 ID 應(yīng)用于在網(wǎng)頁上僅出現(xiàn)一次的項(xiàng)目。例如，在div包含您的網(wǎng)頁內(nèi)容的ul、包含導(dǎo)航菜單的 以及div包含您的網(wǎng)頁標(biāo)題的 上使用 ID。

將 CSS 規(guī)則鏈接到 HTML 文檔的方法

向網(wǎng)頁添加 CSS 規(guī)則的方法有以下三種：

• 內(nèi)聯(lián)樣式
• 內(nèi)部樣式表
• 外部樣式表

在絕大多數(shù)情況下，應(yīng)該使用外部樣式表。但是，在某些情況下可以使用內(nèi)聯(lián)樣式或內(nèi)部樣式表。

內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式應(yīng)用于特定的 HTML 元素。HTML 屬性style用于定義僅適用于該特定元素的規(guī)則。下面看一下編寫內(nèi)聯(lián)樣式的語法。

<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>

該代碼將導(dǎo)致該標(biāo)題以紅色下劃線文本和所有邊的 10 像素填充呈現(xiàn)。在極少數(shù)情況下應(yīng)該使用內(nèi)聯(lián)樣式。在幾乎所有情況下，都應(yīng)該避免它們并將樣式添加到樣式表中。

內(nèi)部樣式表

前面的示例使用了內(nèi)部樣式表。內(nèi)部樣式表是添加到 HTML 文檔head元素的 CSS 塊。style元素用于開始和結(jié)束標(biāo)簽之間，head所有的 CSS 聲明都添加在style標(biāo)簽之間。

我們可以使用這種語法在內(nèi)部樣式表中復(fù)制上面代碼中的內(nèi)聯(lián)樣式。

<head> 
     <style> 
         h1 { 
              color: red; 
              padding: 10px; 
              text-decoration: underline;
             } 
      </style> 
   </head> 
<body> 
       <h1>Example Heading</h1>
</body>

該代碼將產(chǎn)生與內(nèi)聯(lián)樣式相同的結(jié)果。但是，使用內(nèi)部樣式表而不是內(nèi)聯(lián)樣式的好處是h1頁面上的所有元素都會(huì)受到樣式的影響。

外部樣式表

外部樣式表是只包含 CSS 語句的文檔。文檔中定義的規(guī)則通過使用 HTML 文檔元素中的link標(biāo)記鏈接到一個(gè)或多個(gè) HTML文檔。head

要使用外部樣式表，首先要?jiǎng)?chuàng)建 CSS 文檔。

/************************************************* 
Save with a name ending in .css such as styles.css 
*************************************************/
h1 { 
    color: red; 
    padding: 10px; 
    text-decoration: underline;
    }

現(xiàn)在我們有了一個(gè)帶有一些樣式的外部樣式表，我們可以使用該link元素將它鏈接到一個(gè) HTML 文檔。

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
</head> 
<body> 
    <h1>Example Heading</h1>
</body>

加載此 HTML 文檔時(shí)，該link標(biāo)記將導(dǎo)致將文件styles.css中*的樣式加載到網(wǎng)頁中。因此，所有 1 級(jí)標(biāo)題元素都將顯示為紅色文本、帶下劃線，并且每邊都應(yīng)用了 10 像素的填充。

何時(shí)使用每種方法

在幾乎所有情況下，外部樣式表都是設(shè)置網(wǎng)頁樣式的正確方法。使用外部樣式表的主要好處是它們可以鏈接到任意數(shù)量的 HTML 文檔。因此，可以使用單個(gè)外部樣式表來定義整個(gè)網(wǎng)站的呈現(xiàn)方式。

設(shè)計(jì)簡(jiǎn)單的單頁網(wǎng)站時(shí)可以使用內(nèi)部樣式表。如果網(wǎng)站永遠(yuǎn)不會(huì)超出使用內(nèi)部樣式表的單個(gè)初始頁面是可以接受的。

內(nèi)聯(lián)樣式可以在兩種情況下使用：

1. 編寫僅應(yīng)用于單個(gè)網(wǎng)頁上的單個(gè)元素的 CSS 規(guī)則時(shí)。
2. 當(dāng)被集成到內(nèi)容管理系統(tǒng)（如 WordPress）中的 tinyMCE 編輯器等所見即所得編輯器應(yīng)用時(shí)。

在所有其他情況下，應(yīng)避免使用內(nèi)聯(lián)樣式以支持外部樣式表。

CSS 是如何工作的

在編寫 CSS 時(shí)，很多時(shí)候編寫的規(guī)則相互沖突。例如，在設(shè)置標(biāo)題樣式時(shí)，以下所有規(guī)則都可能適用于h1元素。

• h1在網(wǎng)站的所有頁面上創(chuàng)建一致呈現(xiàn)的元素級(jí)規(guī)則。
• 定義在特定位置呈現(xiàn)的元素的類級(jí)別規(guī)則h1——例如博客文章的標(biāo)題。
• 一個(gè) id 級(jí)別的元素，定義了一個(gè)h1元素在一個(gè)或多個(gè)網(wǎng)頁上的一個(gè)地方的渲染——例如網(wǎng)站名稱。

開發(fā)人員如何編寫足夠通用的規(guī)則以涵蓋每一個(gè)h1又足夠具體的規(guī)則，以定義只應(yīng)出現(xiàn)在給定元素的特定實(shí)例上的樣式？

CSS 樣式遵循兩個(gè)規(guī)則，您需要了解這些規(guī)則才能編寫有效的 CSS。了解這些規(guī)則將幫助您編寫在需要時(shí)可以廣泛使用的 CSS，但在需要時(shí)卻可以非常具體。

控制 CSS 行為方式的兩個(gè)規(guī)則是繼承和特異性。

級(jí)聯(lián)繼承

為什么CSS 樣式被稱為級(jí)聯(lián)？當(dāng)編寫多個(gè)相互沖突的規(guī)則時(shí)，將執(zhí)行最后編寫的規(guī)則。通過這種方式，樣式向下級(jí)聯(lián)并應(yīng)用最后寫入的規(guī)則。

讓我們看一個(gè)例子。讓我們?cè)谝粋€(gè)內(nèi)部樣式表中編寫兩個(gè)直接相互矛盾的 CSS 規(guī)則。

<head>
     <style> 
         p {color: red;} 
         p {color: blue;} 
      </style> 
</head> 
<body> 
<p>What color will the text of this paragraph be?</p> 
</body>

瀏覽器將級(jí)聯(lián)樣式并應(yīng)用遇到的最后一個(gè)樣式，推翻所有以前的樣式。結(jié)果，標(biāo)題是藍(lán)色的。

.code_sample_p {顏色：紅色；}
.code_sample_p {顏色：藍(lán)色；}

這一段的文字是什么顏色的？

當(dāng)使用外部樣式表時(shí)，同樣的級(jí)聯(lián)效應(yīng)也會(huì)發(fā)揮作用。使用多個(gè)外部樣式表是很常見的。head發(fā)生這種情況時(shí)，樣式表會(huì)按照它們?cè)?HTML 文檔元素中出現(xiàn)的順序加載。如果樣式表規(guī)則之間發(fā)生沖突，則每個(gè)樣式表中包含的 CSS 規(guī)則將覆蓋先前加載的樣式表中包含的那些規(guī)則。以下面的代碼為例：

<head>
<link rel="stylesheet" type="text/css" href="styles_1.css">
<link rel="stylesheet" type="text/css" href="styles_2.css">
</head>

如果這兩個(gè)樣式表中包含的樣式之間存在沖突，則將應(yīng)用styles_2.css中的規(guī)則。

樣式的繼承是 CSS 樣式級(jí)聯(lián)行為的另一個(gè)例子。

當(dāng)您為父元素定義樣式時(shí)，子元素會(huì)收到相同的樣式。例如，如果我們將顏色樣式應(yīng)用于無序列表，則子列表項(xiàng)將顯示相同的樣式。

<head>
    <style>
        ul {color: red;} 
    </style>
 </head> 
 <body> 
   <ul> 
 <li>Item 1</li> 
 <li>Item 2</li>
   </ul> 
 </body>

以下是該代碼的呈現(xiàn)方式。

.code-sample-ul {顏色：紅色；}
項(xiàng)目 1
第 2 項(xiàng)

并非每個(gè)屬性都從父元素傳遞到其子元素。瀏覽器將某些屬性視為非繼承屬性。邊距是不從父元素傳遞到子元素的屬性的一個(gè)示例。

特異性

確定對(duì)每個(gè) HTML 元素應(yīng)用哪些規(guī)則的第二個(gè)規(guī)則是[特異性規(guī)則。

具有更多特定選擇器的CSS 規(guī)則將覆蓋具有較少特定選擇器的 CSS 規(guī)則，無論哪個(gè)先出現(xiàn)。正如我們所討論的，三個(gè)最常見的選擇器是元素標(biāo)簽、類和 ID。

• 最不具體的選擇器類型是元素級(jí)別選擇器。
• 當(dāng)一個(gè)類被用作選擇器時(shí)，它會(huì)否決使用元素標(biāo)簽作為選擇器編寫的 CSS 規(guī)則。
• 當(dāng)一個(gè) ID 用作選擇器時(shí)，它會(huì)否決使用元素或類選擇器編寫的 CSS 規(guī)則。

影響特異性的另一個(gè)因素是編寫 CSS 樣式的位置。與屬性內(nèi)聯(lián)style編寫的樣式會(huì)覆蓋在內(nèi)部或外部樣式表中編寫的樣式。

增加選擇器特異性的另一種方法是使用一系列元素、類和 ID 來精確定位您要處理的元素。例如，如果您想精確定位列表上的無序列表項(xiàng)目，其中包含divid 為“example-div”的類“example-list”，您可以使用以下選擇器來創(chuàng)建具有高度特異性的選擇器。

div#example-div > ul.example-list > li {styles here}

雖然這是創(chuàng)建非常具體的選擇器的一種方法，但建議限制使用這些類型的選擇器，因?yàn)樗鼈儽群?jiǎn)單的選擇器需要更多的時(shí)間來處理。

一旦您了解了繼承和特異性的工作原理，您將能夠高度準(zhǔn)確地定位網(wǎng)頁上的元素。

CSS 能做什么？

一個(gè)更好的問題可能是：“CSS 不能做什么？”

CSS 可用于將 HTML 文檔轉(zhuǎn)換為專業(yè)、精美的設(shè)計(jì)。下面是一些你可以通過 CSS 完成的事情：

• 創(chuàng)建一個(gè)靈活的網(wǎng)格，用于設(shè)計(jì)在任何設(shè)備上都能呈現(xiàn)精美的完全響應(yīng)式網(wǎng)站。
• 從排版到表格，再到表格等，應(yīng)有盡有。
• float使用諸如、position、overflow、flex和等屬性將網(wǎng)頁上的元素相對(duì)于彼此定位box-sizing。
• 將背景圖像添加到任何元素。
• 創(chuàng)建形狀、交互和動(dòng)畫。

這些概念和技術(shù)超出了本入門指南的范圍，但以下資源將幫助您解決這些更高級(jí)的主題。

盒子模型

如果您打算使用 CSS 來構(gòu)建網(wǎng)頁布局，那么首先要掌握的主題之一就是盒子模型。盒子模型是一種可視化和理解網(wǎng)頁上每個(gè)項(xiàng)目如何組合內(nèi)容、填充、邊框和邊距的方法。

了解這四個(gè)部分如何組合在一起是一個(gè)基本概念，在繼續(xù)討論其他 CSS 布局主題之前必須掌握它。

了解盒子模型的兩個(gè)好地方包括：

• 來自萬維網(wǎng)聯(lián)盟的盒子模型的解釋。
• 來自 Mozilla 開發(fā)者網(wǎng)絡(luò)的CSS 盒子模型介紹。

創(chuàng)建布局

有許多技術(shù)和策略用于使用 CSS 創(chuàng)建布局，理解盒子模型是每個(gè)策略的先決條件。掌握了盒子模型后，您將準(zhǔn)備好學(xué)習(xí)如何操作網(wǎng)頁上的內(nèi)容盒子。

Mozilla 開發(fā)者網(wǎng)絡(luò)對(duì) CSS 布局進(jìn)行了很好的介紹]。這篇簡(jiǎn)短的閱讀涵蓋了 CSS 布局背后的基本概念，并快速介紹了諸如text-align、float和position.

W3C 提供了更廣泛、更深入的 CSS 布局指南：CSS 布局模型。本文檔是面向?qū)I(yè)開發(fā)人員的資源，因此如果您是 CSS 新手，請(qǐng)花點(diǎn)時(shí)間查看它。這不是快速閱讀。但是，您需要了解的有關(guān)創(chuàng)建 CSS 布局的所有信息都包含在本文檔中。

多年來，網(wǎng)格布局一直是設(shè)計(jì)響應(yīng)式布局的首選策略。CSS 網(wǎng)格已經(jīng)從零開始創(chuàng)建多年，市場(chǎng)上有許多不同的網(wǎng)格生成網(wǎng)站和開發(fā)框架。然而，在幾年內(nèi)，對(duì)網(wǎng)格布局的支持將成為 CSS3 規(guī)范的一部分。您可以通過閱讀 W3C 網(wǎng)站上的主題來了解很多關(guān)于網(wǎng)格的知識(shí)。有關(guān)網(wǎng)格布局的更輕松、更簡(jiǎn)短的介紹。

幾年之內(nèi)，CSS3靈活框或flexbox有望成為設(shè)計(jì)網(wǎng)站布局的主導(dǎo)模型。flexbox 規(guī)范還沒有完全完成和最終確定，并且瀏覽器之間對(duì) flexbox 的支持并不一致。然而，每個(gè)初露頭角的 CSS 開發(fā)者都需要熟悉flexbox并準(zhǔn)備在不久的將來實(shí)現(xiàn)它。

網(wǎng)頁字體和排版

可以做很多事情來增加個(gè)性并提高網(wǎng)站內(nèi)容的可讀性。在我們的字體和網(wǎng)頁排版指南中了解有關(guān)為網(wǎng)絡(luò)選擇字體和排版的更多信息。

創(chuàng)建一致的跨瀏覽器體驗(yàn)

每個(gè)瀏覽器對(duì) HTML 規(guī)范的解釋略有不同。因此，當(dāng)在兩個(gè)不同的瀏覽器中呈現(xiàn)相同的代碼時(shí)，呈現(xiàn)代碼的方式通常會(huì)存在細(xì)微差別。

以這段簡(jiǎn)短的代碼為例。

<h1>Heading 1</h1> 
<p>A short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p> 
<h2>Heading 2</h2>
<ul>
   <li>Just a short list</li>
   <li>Three items on this list</li> 
   <li>We'll make it an unordered list</li>
 </ul>
  <h3>Heading 3</h3>
  <p>One final short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p>

如果我們?cè)趦蓚€(gè)不同的瀏覽器中渲染該代碼，我們會(huì)看到細(xì)微的差別。以下是 Mozilla Firebox 和 Microsoft Edge 呈現(xiàn)該代碼的方式。

你能看出細(xì)微的差別嗎？左邊的 Firefox 在每個(gè)標(biāo)題元素周圍增加了一點(diǎn)邊距。此外，在 Edge 中渲染時(shí)，項(xiàng)目符號(hào)點(diǎn)會(huì)小一些。雖然這些差異不是必然的，但在某些情況下，瀏覽器之間的這些微小差異可能會(huì)產(chǎn)生問題。

CSS 可用于解決這些跨瀏覽器兼容性問題。一種流行的方法是實(shí)現(xiàn)一個(gè)名為normalize.css的樣板 CSS 文檔。這個(gè)免費(fèi)提供的 CSS 文件可以鏈接到任何 HTML 文檔，以幫助最小化跨瀏覽器的呈現(xiàn)差異。

在您的設(shè)計(jì)工作中包含normalize.css的最簡(jiǎn)單方法是鏈接到Google 托管的副本。為此，只需將這行代碼放入HTML 文檔的元素中。head

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />