邊看《css那些事兒》邊對書中的知識點做的整理，只是爲了自己方便查看和鞏固。
背景的簡寫
body {
background-color: #FF0000;
background-image: url(background.png);
background-repeat: no-repeat; /* 背景圖片無平鋪 */
background-attachment: fixed; /* 將背景圖片固定，不隨頁面滾動而滾動 */
background-position: 0 0;
}
可以縮寫成
body {
background: #FF0000 url(background.png) no-repeat fixed 0 0;
}
background的基本語法是 background: background-color || background-image || background-repeat || background-attachment || background-position
字體的縮寫
body {
font-style: italic;
font-variant: small-caps; /* 定義字體爲小型的大寫字母，針對英文 */
font-weight: bold; /* 將文字加粗 */
font-size: 12px;
line-height: 140%; /* 定義行高 */
font-family: "Lucida Grand", sans-serif; /* 定義字體名稱 */
}
可以縮寫成：
body {
font: italic small-caps bold 12px 140% "Lucida Grand", sans-serif;
}
font的基本語法是 font: font-style || font-variant || font-weight || font-size || line-height || font-family
表的簡寫
li {
list-style-type: square;
list-style-position: inside;
list-style-image: url(image.png);
}
可以縮寫成
li {
list-style: square inside url(image.png);
}
list-style的基本語法是 list-style: list-style-type || list-style-position || list-style-image
僞類： 指定一個或多個與其相關的選擇的狀態
a:link {color: red; } /* 錨點鏈接的默認狀態 */
a:visited {color: red; } /* 錨點被訪問過後 */
a:hover {color: red; } /* 鼠標懸浮在錨點鏈接上 */
a:active {color: red; } /* 錨點被激活 */
僞對象：在HTML的文檔指定的信息之外，創建了文檔的額外信息。
例如 :before , :after
使用@import關鍵字導入樣式的方式時，@import寫在樣式表的最前面，但瀏覽器解析的時候是最後才解析的，因此容易導致IE6出現閃頻或者在打開頁面的過程中無樣式直到頁面加載完畢後纔會加載樣式的現象出現，因此建議不要使用導入樣式表的方式，而使用外聯樣式表的方式來連接外部樣式表文件。
第三章 頁面佈局
IE瀏覽器存在兩種渲染方式：Quirks（怪異模式）和Standard（標準模式）。在Standard模式中，瀏覽器根據規範表現頁面。早Quirks模式中，頁面以一種比較寬鬆的向後兼容的方式顯示，通常模擬老師瀏覽器的行爲以防止老站點無法工作。
第四章 兩列頁面佈局
主要有以下的一些佈局：
- 兩列定寬結構的頁面佈局
- 兩列寬度自適應結構的頁面佈局
- 單列定寬單列自適應結構的頁面佈局
- 實現兩列等高佈局的方式
頁面結構的編寫代碼：
<div id="header">頭部信息</div>
<div id="container">
<div class="mainBox">主要內容區域</div>
<div class="sideBox">側邊欄</div>
</div>
<div id="footer">底部信息</div>
1.兩列定寬結構
將mainBOX和sideBox這兩個div的標籤元素的寬度值固定，再將其控制在頁面內容區域中的左右兩側。
.mainBox {
float:left; /* 將主要內容區域向左浮動 */
width:680px;
height:250px;
color:#FF0000;
background-color:#333333;
} /* 設置主要內容區域的寬度爲680px，高度爲250px，背景色以及文本顏色，並居左顯示 */
.sideBox {
float:right; /* 將側邊欄向右浮動 */
width:270px;
height:250px;
color:#FFFFFF;
background-color:#999999;
} /* 設置側邊欄的寬度爲270px，高度爲250px，背景色以及文本顏色，並居右顯示 */
2.兩列自適應結構
在兩列自適應結構的頁面佈局中，其實是將寬度屬性以百分比的形式計算，但該寬度不是盒模型的總寬度，而是盒模型的內容區域的寬度。
text-indent: 首行縮進
line-height屬性的屬性值可以不設置單位，也可以使用小數點，但不設置單位的時候會以段落中某個最大的文字字體爲基準做行高處理。
:first-letter 設置對象內的第一個字符的樣式；
:first-line 影響標籤元素中第一行的文本；
.jpg格式也成爲JPEG格式，是一種圖像格式，使用有損壓縮的方式去除冗餘的圖像和彩色數據，在獲得極高的壓縮率的同時展現圖像。可以用最少的磁盤空間得到較高的圖像質量。
JPEG格式的文件尺寸較小，下載速度快。
gif格式用來交換圖片。壓縮比高，磁盤空間佔用較少。缺點是存儲不能超過256色的圖像。但是它有圖像文件小，下載速度快，可用許多具有同樣大小的圖像文件組成動畫的優勢。網頁中用GIF格式的以圖標類的圖片居多，這類圖片對色彩沒有太多要求。
.png
存儲形式豐富，兼容GIF和JPG的色彩模式，
能把圖像文件壓縮到極限以利於網絡傳輸，
又能保留所有與圖像品質有關的信息，因爲PNG是採用無損壓縮的方式來減少文件的大小，這一點與犧牲圖像品質以換取高壓縮率的JPG不同。
另一個特點是現實速度很快，只需下載1/64的圖像信息就可以顯示出低分辨率的預覽圖像。
PNG同樣支持透明圖像的製作。
../images/logo.png 爲上一級目錄下的images文件夾中的logo.png文件。
/images/logo.png 爲根目錄下的images文件夾中的logo.png文件。
images/logo.png 爲同一目錄中的images文件夾中的logo.png文件。
在網頁中background-image屬性優先於background-color屬性，背景圖片永遠覆蓋於背景色之上。
background-position屬性除了可以用數值精確控制背景圖片的位置，也可以用top,center,bottom,left,right等關鍵詞控制背景圖片的現實位置。