什麼是CSS？
HTML 雖然規定了網頁中的標題、段落應該使用的標籤，但是沒有涉及這些內容應該以何種樣式(比如大小、位置、間距、縮進等屬性)呈現在瀏覽器中。
引入採用CSS（層疊樣式表）（Cascading Style Sheets）是用於增強和控制網頁的樣式和佈局，以指定的特性去繪製頁面元素，現代網頁中HTML 和 CSS 總是那麼密不可分的。
CSS允許將樣式信息與網頁內容分離，將頁面的內容與表現形式分離，並放在一個獨立外部樣式文件中，同時控制多個網頁的佈局。HTML文件中只存放文本信息，這樣的頁面對搜索引擎更加友好，而且不必在所有網頁上都進行編輯佈局。
CSS 發展
CSS1指CSS的第一個版本，於1994年由伯特·波斯和哈肯·維姆·萊合作設計，於1996年12月17日成爲W3C推薦標準，主要規定了選擇器、樣式屬性、僞類 、對象幾個大的部分。
CSS2是CSS的第二個版本，W3C組織於1998年5月由 W3C 推出的技術規範，基於 CSS1 設計的，擴充和改進了很多更加強大的屬性。包括選擇器、位置模型、佈局、表格樣式、媒體類型、僞類、光標樣式。
CSS3是CSS技術的升級版本，集成了之前版本CSS 的部分內容，並進行了很多的增補與修訂，於1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案。CSS3朝着模塊化發展，分爲若干個相互獨立的模塊，利於規範及時更新和發佈，及時調整。
什麼是CSS3？
CSS3 是最新的 CSS 標準。
CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的，被分爲若干個相互獨立的模塊。一方面分成若干較小的模塊較利於規範及時更新和發佈，及時調整模塊的內容，這些模塊獨立實現和發佈。
CSS3 新特性
CSS3集成了 之前版本CSS 的部分內容，並進行了很多的增補與修訂。
CSS3新增了許多可使用的選擇器使得前端開發人員在選擇頁面元素時更加靈活。屬性選擇器、結構僞類選擇器、UI元素狀態僞類選擇器、目標僞類選擇器、否定選擇器、通用兄弟選擇器。
CSS3 新增圓角、盒子陰影、半透明、文字效果、漸變背景等視覺效果。
CSS3 不再侷限於背景色、背景圖像的運用，還可以在一個元素上設置多層背景圖片。
CSS3可以用圖像、顏色爲一個元素設置製圖像邊框。
CSS3規範提供了box-sizing屬性並允許設置瀏覽器使用content-box或者border-box盒模型。
CSS3 引入了多列布局將像報紙、雜誌那樣，把一個簡單的區塊拆分成多列。
5.彈性盒佈局與網格佈局支持
CSS3 彈性盒佈局決定一個盒子在其他盒子中的分佈方式以及如何處理可用的空間。
CSS3 網格佈局將網頁劃分成一個個網格，同時處理列和行，可以任意組合不同的網格。
6.變形支持
CSS3 變形（transform）特性支持在 2D 或者 3D 空間裏操作網頁對象的位置和形狀，例如旋轉、扭曲、縮放或者移位。
7.過渡支持
CSS3 過渡（transition）特性能在網頁製作中實現的一些簡單的動畫效果變得更具流線性、平滑性。
8.動畫支持
CSS3 動畫（animation）特性支持在網頁製作中實現更復雜的樣式變化，以及一些交互效果。
9.開放字體的支持
CSS3提供@font-face特性爲頁面自定義字體的展示提供支持。
10.媒體適配支持
CSS3 媒體特性可以實現一種響應式（Responsive）佈局，根據用戶的顯示終端或設備特徵選擇對應的樣式文件，從而在不同的顯示分辨率或設備下具有不同的佈局效果。
插入樣式表
插入樣式表的方法有三種:外部樣式表(External style sheet)、內部樣式表(Internal style sheet)、內聯樣式(Inline style)。
外部樣式表
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標籤鏈接到樣式表。 <link> 標籤在（文檔的）頭部。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。可以使用 <style> 標籤在文檔頭部定義內部樣式表。使用內部樣式表就意味着需要在每個這樣的頁面都進行同樣的輸入和維護。
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
內聯樣式
在相關的標籤內使用樣式（style）屬性。style屬性可以包含任何 CSS 屬性。這種內聯樣式後期的維護投入很大的，應儘量避免使用內聯樣式。
<p style="color:sienna;margin-left:20px">這是一個段落。</p>
多重樣式表優先級
樣式表允許以多種方式規定樣式信息，屬性可以在不同的樣式表中被同樣的選擇器定義。
在單個的 HTML 元素中（內聯），在 HTML 頁的頭元素中（內部），或在一個外部的樣式表文件中（外部）。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。
一般情況下，瀏覽器使用以下順序查找屬性值。
內聯樣式 （Inline style） - 使用元素上的style全局屬性定義的樣式。
內部樣式 （Internal style sheet） - 在樣式元素中定義的樣式。
外部樣式 （External style sheet） - 使用鏈接元素導入的樣式。
瀏覽器默認樣式 - 瀏覽器應用的默認樣式。
內部樣式表和外部樣式表的優先級別跟他們在文檔的先後順序有關。
按照順序判斷哪些屬性值與元素最相關以決定並應用到該元素上的。
CSS 語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。選擇器用於選擇你想要的HTML元素，聲明由一個屬性和一個值組成，被冒號分開。
選擇器
HTML 元素的名稱位於開始。用於選擇一個或多個需要添加樣式的HTML 元素。
聲明
一個單獨的規則。 用來指定添加樣式元素的屬性，根據結果繪製元素，排布樣式。
屬性
用可讀的名稱來表示該HTML 元素的特性 ，屬性一般有以下幾種類型：整數和實數、長度值、百分比值、URL和顏色5種。
屬性的值
在屬性的右邊，冒號後面即屬性的值，描述了瀏覽器引擎如何處理該特性。
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
CSS聲明總是以分號(;)結束，聲明總以大括號({})括起來。
樣式層疊
層疊是CSS的一個基本特徵，它是一個定義瞭如何合併來自多個源的屬性值的算法。
CSS樣式可能來自這些不同的樣式表，相互之間的作用範圍是重疊的，層疊算法則定義了它們如何相互作用。
當兩個不同的css規則應用到同一個html元素上時，並且這兩個不同的css規則對同一屬性的修飾存在不同的值，css層疊規則會決定應用哪個樣式。相當直觀:通常權重更高的選擇器勝出，如果權重相同，定義在後邊的規則勝出。
層疊算法是先於優先級算法的。
樣式繼承
一些設置在父元素上的css屬性是可以被子元素繼承的，有些則不能。
當子元素元素的一個繼承屬性沒有指定值時，則取父元素的同屬性的計算值 。
當子元素的一個非繼承屬性沒有指定值時，不取父元素的同屬性的計算值，而取屬性的初始值。
繼承到樣式的標籤和定義樣式的標籤必須是從屬關係（後代標籤關係）。
對文本樣式設置的屬性基本能被默認/隱式繼承（顏色color、樣式text、字體font、行屬性line）。
所有關於對於盒子模型（div、span等）的屬性設置（border、定位）基本都不能默認/隱式繼承。
inherit 關鍵字 用於顯式地指定繼承性，可用於繼承性/非繼承性屬性。
繼承遵從css樣式層疊的規則。
CSS 知識題
| 題目 | 答案 |
|---|---|
| 在HTML文檔中插入樣式表的方式，優先級最高的 | 內聯樣式表 |
| 關於網頁展示的圖片中<img>和背景圖 | 背景圖屬於css樣式、img屬於html結構 |
| css設置文本內容大小寫 | text-transform、font-variant |
| font-color表示描述文本顏色 | 錯 |
| margin外邊距可以是負數 | 對 |
| margin外邊距摺疊/合併後的間距 | 兩個或多個毗鄰的普通流中的塊元素垂直方向上的margin會摺疊/合併，垂直間距是兩者中的較大者 |
| css設置文本內容溢出省略號 | text-overflow: ellipsis |