網站都變成灰色，幾行代碼就搞定了

家看到網站的內容都變成了灰色，包括按鈕、圖片等等。這時候我們可能會好奇這是怎么做到的呢？

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

解決方案很簡單，只需要幾行代碼就能搞定了。F12看下各大網站怎么實現的。

百度：

百度

京東：

京東

：

慕課網：

慕課網

給大家總結出一段規范的代碼，把這段代碼加入網站頁面的CSS里面即可實現頁面變成灰色的效果：

規范代碼

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

擴展：CSS3 filter(濾鏡)

一、blur(px)高斯模糊

給圖像高斯模糊。如果沒有設定值，則默認值是0；這個參數可設置css長度值，不接受百分比值

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

二、brightness(%)亮度

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

filter: brightness(150%)

三、contrast(%)對比度

filter: contrast(200%)

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

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

與box-shadow效果上有顯著的區別

五、grayscale(%)灰度

filter: grayscale(100%)

六、hue-rotate()色相旋轉

filter: hue-rotate(100%)

七、invate(%)

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

filter: invate(100%)

八、opacity(%)

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

filter: opacity(100%)

九、saturate(%)

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

filter: saturate(100%)

十、sepia(%)

將圖像轉為深褐色。值為100%則完全是深褐色

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

十一、復合函數

使用多個濾鏡，每個濾鏡使用空格分割。

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

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

filter效果示例

全文共1382字，11圖）

>原視頻教程來源：https://huke88.com/course/17391.html

變暗系案例：

圖 1 裂紋肌肉男合成效果

今天帶來的是來源于虎課網講師——設計狗，制作的變暗系混合模式的實例操作。本文的主要目的是分析講師的設計意圖，并解讀其所有的操作。

各位可以先觀看一遍操作視頻，再結合本文進行理解，如有分析不到位的地方，敬請諒解。

>原圖展示

圖 2 原圖

*設計意圖：運用裂紋素材與原圖進行合成處理，鍛煉變暗系圖層混合模式的運用能力。

>案例所用工具及功能

圖層混合模式（正片疊底、線性加深、顏色加深）
魔棒工具
套索工具
色階調整功能
色相/飽和度調整功能
圖層蒙版功能

>素材展示

圖 3 裂紋素材

*注：素材經過了“去色”處理，只保留顏色的亮度信息，便于使用圖層混合模式與原圖進行合成處理。

>原圖與素材圖片顏色信息對比

圖 4 原圖和素材的直方圖

*查看直方圖可以發現原圖整體的亮度比素材圖片要更亮（軍綠色區域為素材圖片的顏色信息），所以我們在實際操作中需要使用色階（可以專門用來調整灰度圖像）來適當提亮素材圖片的亮度，以響應下面的原圖。

>實例操作

1）第一步，使用魔棒工具將原圖的白底選取出來，并應用圖層蒙版去除。

2）第二步，將原圖和素材都拖到一個組中，并給這個組應用第一步做的蒙版。這樣做可以讓原圖和素材都只保留中間人物的區域，屬于一個小技巧。

圖 5

3）第三步，對原圖執行一個色相/飽和度調整層和一個色階調整層，簡單的給原圖調色，并應用剪切蒙版。

圖 6

*分析:原圖的色調整體偏紅，這里執行色相/飽和度調整層是為了減淡一點紅色調，然后再加一個色階提亮原圖的灰色像素，彌補一下原圖的高光過曝。

4）將素材復制3個出來，隱藏其他2個，對第一個執行“正片疊底”，將素材就融入到原圖中。

圖 7

*分析：素材圖片比原圖更暗的像素在正片疊底模式下會顯示出來，素材圖片與原圖混合后，結果色會更暗。

5）在這個素材上方執行一個“色階”調整層，移動白色滑塊的數值至110~115，并創建剪切蒙版。

圖 8

*分析：這一步是將圖7中多余的細小裂紋去除，運用色階是為了將素材圖片變的比原圖更亮，這樣那些更亮的區域，用正片疊底就不會顯示出來了。

6）顯示之前隱藏的第2個素材圖片，更改其混合模式為“顏色加深”。同樣加一個色階拖動灰色滑塊將素材圖片稍微提亮，去除掉一些細小裂紋，并創建剪切蒙版。

圖 9

*分析：因為上一步使用色階將素材圖片大幅度提亮去除了大部分小裂紋，但破壞了很多細節，所以這一步執行“顏色加深”是為了將原圖和素材圖片的顏色修復回來，再稍微去除一下小裂紋。

7）顯示之前隱藏的第3個素材圖片，更改混合模式為“線性加深”，同樣加一個色階拖動灰色滑塊將素材圖片大幅度提亮，然后拖動黑色滑塊靠近灰色滑塊，去除掉一些細小裂紋，并讓大裂紋更顯真實。

圖 10

*分析：“線性加深”的作用就是讓暗的地方變得更暗，這樣可以使裂紋陷入的感覺更加真實，同時加一個色階是為了去除多余的細小裂紋。

8）最后一步，使用多邊形套索工具順著裂紋開裂的方向摳出合適的形狀，讓最后的合成效果更顯真實感。

圖 11

注：用多邊形套索工具摳出的選區直接在“組”的蒙版上填充黑色即可。

小結：這個案例不僅是鍛煉你對于圖層混合模式運用能力，更多的鍛煉你對圖層混合模式的綜合理解，并不是說我看懂了就行了，你還得思考，要能夠用自己的話說出來這么做是為什么。且都運用了什么原理。只有這樣才算是真正的吸收了知識。

（本文最后編輯于2018年10月9日，編號0038）

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

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

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

什么是 CSS？

CSS 代表層疊樣式表，它是用于設置網頁視覺呈現樣式的語言。CSS 是告訴 Web 瀏覽器如何呈現網頁的不同部分的語言。

網頁上的每個項目或元素都是以標記語言編寫的文檔的一部分。在大多數情況下，HTML 雖然是標記語言，但也有其他語言在使用，例如 XML。在本指南中，我們將使用 HTML 來演示 CSS 的實際應用，請記住，如果您使用 XML或不同的標記語言，同樣的原則和技術也適用。

CSS 與 HTML 有何不同？

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

所有重要的網站內容都應使用 HTML 等標記語言添加到網站。
網站內容的呈現應該由樣式語言定義，例如 CSS。

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

做出這種區分很重要，因為未能使用正確的語言可能會導致將來難以對網站進行更改，并為使用純文本瀏覽器或屏幕閱讀器的網站訪問者造成可訪問性和可用性問題。

CSS 語法

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

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

CSS 語法示例

讓我們使用一段 CSS 來闡明這些項目是什么。

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

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

通過h1用作選擇器，我們是說網頁上的每個 1 級標題都應遵循此規則集中包含的聲明。

規則集包含三個聲明：

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

color、font-size 和text-decoration都是性質。您可以使用數百個 CSS 屬性，但常用的只有幾十個。

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

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

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

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

text-decoration: blue double underline;

該規則將導致h1我們最初示例中的用藍色雙線下劃線。color文本本身將保持為我們屬性中定義的紅色。

為樣式準備 HTML 標記

CSS 應該用于向網頁添加內容。該任務最好由 HTML 和 XML等標記語言處理。相反，CSS 用于選擇網頁上已經存在的項目并定義每個項目的顯示方式。

為了盡可能容易地選擇網頁上的項目，應將標識符添加到網頁上的元素中。這些標識符，在 CSS 上下文中通常稱為鉤子，可以更容易地識別應該受 CSS 規則影響的項目。

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

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

何時使用類

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

何時使用 ID

對僅在網頁上出現一次的元素使用 ID。例如，如果您使用 HTML 無序列表進行站點導航，則可以使用nav等 ID為該列表創建唯一的掛鉤。

這是一個用于基本電子商務網站的簡單導航欄的 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>

該代碼將生成一個從頁面左側開始的淺灰色背景的水平導航菜單。每個導航項目的四周都有 10 像素的間距，當您將鼠標懸停在每個項目的背景上時，它的背景會變暗。

同一網頁上的任何其他列表都不會受到該代碼的影響。

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

何時不使用 Hooks

您不必為 HTML元素添加類或 ID 即可使用 CSS對其進行樣式設置。如果您知道要為網頁上特定元素的每個實例設置樣式，則可以使用元素標簽本身。

例如，假設您要創建一致的標題樣式。與向每個標題添加類或 ID 相比，使用標題標簽簡單地設置所有標題元素的樣式會容易得多。

<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 {
顏色：深藍色
}

這里有一些段落文本。兩個短句。

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

另一個清單
仍然只有兩個項目

在這種情況下，即使我們只為ul和p元素編寫了一次樣式規則，但會影響多個項目。通過在網站的每個頁面上創建一致的標題、列表和段落文本樣式，使用元素選擇器是創建有吸引力、可讀性和一致的網站體驗的好方法。

為樣式準備標記的最佳實踐

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

自由而一致地應用課程。對應該在一個方向或另一個方向對齊的項目以及在單個網頁上重復出現的任何元素使用類。
將 ID 應用于在網頁上僅出現一次的項目。例如，在div包含您的網頁內容的ul、包含導航菜單的以及div包含您的網頁標題的上使用 ID。

將 CSS 規則鏈接到 HTML 文檔的方法

向網頁添加 CSS 規則的方法有以下三種：

內聯樣式
內部樣式表
外部樣式表

在絕大多數情況下，應該使用外部樣式表。但是，在某些情況下可以使用內聯樣式或內部樣式表。

內聯樣式

內聯樣式應用于特定的 HTML 元素。HTML 屬性style用于定義僅適用于該特定元素的規則。下面看一下編寫內聯樣式的語法。

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

該代碼將導致該標題以紅色下劃線文本和所有邊的 10 像素填充呈現。在極少數情況下應該使用內聯樣式。在幾乎所有情況下，都應該避免它們并將樣式添加到樣式表中。

內部樣式表

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

我們可以使用這種語法在內部樣式表中復制上面代碼中的內聯樣式。

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

該代碼將產生與內聯樣式相同的結果。但是，使用內部樣式表而不是內聯樣式的好處是h1頁面上的所有元素都會受到樣式的影響。

外部樣式表

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

要使用外部樣式表，首先要創建 CSS 文檔。

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

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

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

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

何時使用每種方法

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

設計簡單的單頁網站時可以使用內部樣式表。如果網站永遠不會超出使用內部樣式表的單個初始頁面是可以接受的。

內聯樣式可以在兩種情況下使用：

編寫僅應用于單個網頁上的單個元素的 CSS 規則時。
當被集成到內容管理系統（如 WordPress）中的 tinyMCE 編輯器等所見即所得編輯器應用時。

在所有其他情況下，應避免使用內聯樣式以支持外部樣式表。

CSS 是如何工作的

在編寫 CSS 時，很多時候編寫的規則相互沖突。例如，在設置標題樣式時，以下所有規則都可能適用于h1元素。

h1在網站的所有頁面上創建一致呈現的元素級規則。
定義在特定位置呈現的元素的類級別規則h1——例如博客文章的標題。
一個 id 級別的元素，定義了一個h1元素在一個或多個網頁上的一個地方的渲染——例如網站名稱。

開發人員如何編寫足夠通用的規則以涵蓋每一個h1又足夠具體的規則，以定義只應出現在給定元素的特定實例上的樣式？

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

控制 CSS 行為方式的兩個規則是繼承和特異性。

級聯繼承

為什么CSS 樣式被稱為級聯？當編寫多個相互沖突的規則時，將執行最后編寫的規則。通過這種方式，樣式向下級聯并應用最后寫入的規則。

讓我們看一個例子。讓我們在一個內部樣式表中編寫兩個直接相互矛盾的 CSS 規則。

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

瀏覽器將級聯樣式并應用遇到的最后一個樣式，推翻所有以前的樣式。結果，標題是藍色的。

.code_sample_p {顏色：紅色；}
.code_sample_p {顏色：藍色；}

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

當使用外部樣式表時，同樣的級聯效應也會發揮作用。使用多個外部樣式表是很常見的。head發生這種情況時，樣式表會按照它們在 HTML 文檔元素中出現的順序加載。如果樣式表規則之間發生沖突，則每個樣式表中包含的 CSS 規則將覆蓋先前加載的樣式表中包含的那些規則。以下面的代碼為例：

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

如果這兩個樣式表中包含的樣式之間存在沖突，則將應用styles_2.css中的規則。

樣式的繼承是 CSS 樣式級聯行為的另一個例子。

當您為父元素定義樣式時，子元素會收到相同的樣式。例如，如果我們將顏色樣式應用于無序列表，則子列表項將顯示相同的樣式。

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

以下是該代碼的呈現方式。

.code-sample-ul {顏色：紅色；}
項目 1
第 2 項

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

特異性

確定對每個 HTML 元素應用哪些規則的第二個規則是[特異性規則。

具有更多特定選擇器的CSS 規則將覆蓋具有較少特定選擇器的 CSS 規則，無論哪個先出現。正如我們所討論的，三個最常見的選擇器是元素標簽、類和 ID。

最不具體的選擇器類型是元素級別選擇器。
當一個類被用作選擇器時，它會否決使用元素標簽作為選擇器編寫的 CSS 規則。
當一個 ID 用作選擇器時，它會否決使用元素或類選擇器編寫的 CSS 規則。

影響特異性的另一個因素是編寫 CSS 樣式的位置。與屬性內聯style編寫的樣式會覆蓋在內部或外部樣式表中編寫的樣式。

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

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

雖然這是創建非常具體的選擇器的一種方法，但建議限制使用這些類型的選擇器，因為它們比簡單的選擇器需要更多的時間來處理。

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

CSS 能做什么？

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

CSS 可用于將 HTML 文檔轉換為專業、精美的設計。下面是一些你可以通過 CSS 完成的事情：

創建一個靈活的網格，用于設計在任何設備上都能呈現精美的完全響應式網站。
從排版到表格，再到表格等，應有盡有。
float使用諸如、position、overflow、flex和等屬性將網頁上的元素相對于彼此定位box-sizing。
將背景圖像添加到任何元素。
創建形狀、交互和動畫。

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

盒子模型

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

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

了解盒子模型的兩個好地方包括：

來自萬維網聯盟的盒子模型的解釋。
來自 Mozilla 開發者網絡的CSS 盒子模型介紹。

創建布局

有許多技術和策略用于使用 CSS 創建布局，理解盒子模型是每個策略的先決條件。掌握了盒子模型后，您將準備好學習如何操作網頁上的內容盒子。

Mozilla 開發者網絡對 CSS 布局進行了很好的介紹]。這篇簡短的閱讀涵蓋了 CSS 布局背后的基本概念，并快速介紹了諸如text-align、float和position.

W3C 提供了更廣泛、更深入的 CSS 布局指南：CSS 布局模型。本文檔是面向專業開發人員的資源，因此如果您是 CSS 新手，請花點時間查看它。這不是快速閱讀。但是，您需要了解的有關創建 CSS 布局的所有信息都包含在本文檔中。

多年來，網格布局一直是設計響應式布局的首選策略。CSS 網格已經從零開始創建多年，市場上有許多不同的網格生成網站和開發框架。然而，在幾年內，對網格布局的支持將成為 CSS3 規范的一部分。您可以通過閱讀 W3C 網站上的主題來了解很多關于網格的知識。有關網格布局的更輕松、更簡短的介紹。

幾年之內，CSS3靈活框或flexbox有望成為設計網站布局的主導模型。flexbox 規范還沒有完全完成和最終確定，并且瀏覽器之間對 flexbox 的支持并不一致。然而，每個初露頭角的 CSS 開發者都需要熟悉flexbox并準備在不久的將來實現它。

網頁字體和排版

可以做很多事情來增加個性并提高網站內容的可讀性。在我們的字體和網頁排版指南中了解有關為網絡選擇字體和排版的更多信息。

創建一致的跨瀏覽器體驗

每個瀏覽器對 HTML 規范的解釋略有不同。因此，當在兩個不同的瀏覽器中呈現相同的代碼時，呈現代碼的方式通常會存在細微差別。

以這段簡短的代碼為例。

<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>

如果我們在兩個不同的瀏覽器中渲染該代碼，我們會看到細微的差別。以下是 Mozilla Firebox 和 Microsoft Edge 呈現該代碼的方式。

你能看出細微的差別嗎？左邊的 Firefox 在每個標題元素周圍增加了一點邊距。此外，在 Edge 中渲染時，項目符號點會小一些。雖然這些差異不是必然的，但在某些情況下，瀏覽器之間的這些微小差異可能會產生問題。

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

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

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

在線咨詢

上一篇：HTML基礎
下一篇：CSS Float(浮動)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商