前言
我們在上網的時候經常看到許多絢麗的網頁，這樣的網站代碼量是不是很多呀？ NoNoNo不是這樣的。先看一個例子（如下代碼爲HTML）：
<body>
<font color="#000fff" face="楷體" size="6">這是第一條</font>
<font color="#000fff" face="楷體" size="6">這是第二條</font>
<font color="#000fff" face="楷體" size="6">這是第三條</font>
</body>
結果是這個樣子的：
字體顏色爲藍色，字體爲楷體，字體大小爲6，如果在加上粗體、斜體等等是不是還要在後面加上一系列的代碼。如果有100條這個得信息，這些屬性就要寫100次。如果我們想把這100條信息的字體換位宋體，這時麻煩來了，這麼多該如何是好。可能有人說用替換，很顯然在大項目中也是很麻煩的。程序猿是聰明的，這時就有了CSS。
CSS
官話：層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
個人理解：根據HTML中設置的標籤，把他們分成幾類。一類一類去修飾它們。實現了網頁內容與樣式分離，這也是CSS最大的特點！
我們用CSS輔助我們上面的小例子，創建CSS就不錯陳述了，直接看代碼：
<!--HMTL中的代碼-->
<body>
<span class="menu">這是第一條</span>
<span class="menu">這是第二條</span>
<span class="menu">這是第三條</span>
</body>
<!--CSS中的代碼-->
.menu{
color:#000fff;
font-size:20px;
font-family:楷體;
}
結果：
如果我們需要修改字體的屬性，直接在CSS裏面修改即可，是不是簡單了很多。說到這裏，HTML中ID選擇器，類選擇器，標籤選擇器。他們之間肯定有個優先級。我們先看看他們都是什麼（下圖）
優先級：ID選擇器 > 類選擇器 > 標籤選擇器。
CSS還可以並列寫法和父子寫法
- 如果我們兩個選擇器的樣式相同，可以使用父子寫法，兩個選擇器用 “，” 隔開
- 父子寫法，兩個選擇器中間用空格隔開
塊級元素、行內元素
<body>
<div >這是第一條</div> 塊級元素，佔一整行
<span >這是第二條</span> 行內元素
<span >這是第三條</span>
</body>
結果：
把行內元素轉換爲塊級元素，可以在HTML之間修改，也可在CSS中編寫 idsplay:block;
盒子模型
外邊框：
border-width: 1px;
border-color: #00f;
border-style: solid; 邊框爲實線，dashed爲虛線。
內邊距：
padding-top:3px;
padding-left:10px;
padding-bottom:20px; 下邊距
外邊距：
margin:5px;
文本垂直居中：
line-height:60px;
浮動：
float:left; 向左浮動
clear:left; 清除浮動
定位：
position:relative; 相對定位，把自己位置看作定位,沒有脫離標準流
position:absolute; 絕對定位，包含它的更外一層盒子來定位，脫離標準流
總結
雖然總結用了好長時間，但是收穫的過程美滋滋！