一.CSS描述
CSS全稱為“層疊樣式表(Cascading Style Sheets)”，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。
使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網頁位置的文字有著統一的字體、字號或者顏色等。
1.CSS 代碼語法
css樣式由選擇符和聲明組成，而聲明又由屬性和值組成。
選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素，
聲明：在英文大括號“{}”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當有多條聲明時，中間可以英文分號“;”分隔
注意：
1.最后一條聲明可以沒有分號，但是為了以后修改方便，一般也加上分號。
2.為了使用樣式更加容易閱讀，可以將每條代碼寫在一個新行內
2.CSS注釋代碼
就像在html的注釋一樣，在CSS中也有注釋語句：用/*注釋語句*/來表明（html中使用<!--注釋語句-->）
3.內聯式CSS樣式，直接寫在現有的HTML標簽中
CSS樣式代碼插入形式來看，CSS樣式基本可以分為3種：
內聯式、嵌入式和外部式
內聯式:CSS樣式表就是把css代碼直接寫在現有的HTML標簽中
如：<p style="color:red">這里的文字時紅色</p>，注意要寫在元素的開始標簽里
并且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號隔開。如：<p style="color:red; font-size:12px">這里的文字為紅色</p>
嵌入式：css樣式表，寫在當前的文件中
嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標簽之間，嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間
外部式：css樣式表，寫在單獨的一個文件中
外部式css樣式（也可稱為外聯式）就是把css代碼寫在一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，在<head>內（不是在<style>標簽內）使用<link>標簽將css樣式文件鏈接到HTML文件內，如：
<link href="base.css" rel="stylesheet" type="text/css">
注意：
1.css樣式文件名稱以有意義的英文字母命名，如main.css。
2.rel="stylesheet" type="text/css"是固定寫法不可修改。
3.<link>標簽位置一般寫在<head>標簽之內。
三種方法的優先級——就近原則（離被設置元素越近優先級別越高）
內聯式>嵌入式>外部式
但是“嵌入式>外部式”有一個前提：嵌入式css樣式的位置一定在外部式的后面
二、選擇器
每一條css樣式聲明（定義）由兩部分組成，形式如下：
選擇器
{
? ?樣式；
}
在{}之前的部分就是“選擇器”，選擇器指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。
1.標簽選擇器
標簽選擇器其實就是html代碼中的標簽。如<html>、<body>、<h1>、<p>、<img>等。
2.類選擇器
語法：
? ? ? ?.類選器名稱{css樣式代碼；}
注意：
1.英文圓點開頭
2.其中類選器名稱可以任意取名（但不要起中文）
使用方法：
第一步：使用合適的標簽把要修飾的內容標記起來，如下：
<span>膽小如鼠</span>
第二步：使用class=“類選擇器名稱”為標簽設置一個類，如：
<span class="stress">膽小如鼠</span>
第三步：設置類選器css樣式，如：
.stress{color:red;}/*類前面要加入一個英文圓點*/
3.ID選擇器
在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區別：
1.位標簽設置id=“ID名稱”，而不是class=“類名稱”
2.ID選擇符的前面是井號（#），而不是英文圓點（.）
類和ID選擇器的區別
相同點：可以應用于任何元素
不同點：
1.ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個html文檔中，ID選擇器只能使用一次，而且僅一次，而類選擇器可以使用很多次。
2.可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時設置多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用ID詞列表）
4.子選擇器
還有一個比較有用的選擇器子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素。
例：.food>li{border:1px solid red;}
5.包含（后代）選擇器
包含選擇器，即加入空格，用于選擇指定標簽元素下的后輩元素
例：.first? span{color:red;}
包含選擇器和子選擇器的區別:
子選擇器僅是指它的直接后代，后者可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。
總結：>作用于元素的第一代后代，空格作用于元素的所有后代。
6.通用選擇器
通用選擇器是功能最強大的選擇器，它使用一個(*)號指定，它的作用是匹配html中所有標簽元素，如* {color:red;}使html中任意標簽元素字體顏色全部設置為紅色。
7.偽類選擇符
它允許給html不存在的標簽（標簽的某種狀態）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態來設置字體顏色
例：a:hover{color: red;}
上面一行代碼就是為a標簽鼠標滑過的狀態設置字體顏色變紅。這樣就會使被修飾的文字加入鼠標滑過字體顏色變為紅色的特效。
關于偽類選擇符，到目前為止，可以兼容所有瀏覽器的“偽類選擇符”就是a標簽上使用：hover了（其實偽類選擇符還有很多，尤其是css3中，但是因為不能兼容所有瀏覽器）
8.分組選擇符
當想為html中多個標簽元素設置同一個樣式時，可以使用分組選擇符（,），如將h1、span標簽同時設置字體顏色為紅色
h1,span{color:red;}
等同于
h1{color:red;}
span{color:red;}
CSS的繼承、層疊和特殊性
繼承
css的某些樣式具有繼承性的，繼承是一種規則，它允許樣式不僅應用于某個特定html標簽元素，而且應用于其后代。一些css樣式時不具備繼承性的。
特殊性
瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式
權值的規則：
標簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100,還有一個權值比較特殊——繼承也有權值但很低，有的文獻提出它的權值只有0.1，所以可以理解為集成的權值最低。
層疊
層疊就是在html文件中對于同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前后順序來決定，處于最后面的css樣式會被應用。
css樣式優先級：
內聯樣式表（標簽內部）>嵌入樣式表（當前文件中）>外部樣式表（外部文件中）
重要性
有些特殊的情況需要為某些樣式設置具有最高權值，這時可以使用！important來解決
注意：!important要寫在分號前面
三、CSS格式化排版
1.文字排版——字體、字號、顏色、粗體、斜體、下劃線、刪除線
使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。例：
body{font-family:"宋體";}
注意不要設置不常用的字體，因為如果用戶本地電腦上沒有安裝率設置的字體，就會顯示瀏覽器默認的字體。（因為用戶是否可以看到設置的字體樣式主要取決于用戶本地電腦上是否安裝了設置的字體）
一般的將網頁設置為微軟雅黑的樣式
body{font-family:"Microsoft Yahei";} ? ?//字體
body{font-size:20px; color:red;} ? ? ? ? ?//字號、顏色
*{font-weight:bold;} ? ? ? ? ? ? ? ? ? ? ? ? ? ?//粗體
*{font-style:italic;} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //斜體
*{text-decoration:underline;} ? ? ? ? ? ? ?//下劃線
*{text-decoration:line-through; } ? ? ? ?//刪除線
2.段落排版——縮進、行高、文字間距、字母間距、對齊
*{text-indent:2em;} ? ? ? ? ? ? ?//縮進兩個空格 ? 2em的意思就是文字的2倍大小
*{line-height:2em;} ? ? ? ? ? ? ? //行高設置
*{letter-spacing:10px;} ? ? ? ?//文字間距、字母間距
*{text-align:center;} ? ? ? ? ? ?//居中對齊
四、css盒模型
1.元素分類
在css中，html中的元素大致被分為三種不同的類型：塊狀元素、內聯元素（又稱行內元素）和內聯塊狀元素
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
常用的內聯元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內聯塊狀元素有：
<img>、<input>
2.塊級元素
在html中<div>、<p>、<h1>、<form>、<ul>和<li>就是塊級元素。設置display:block就是將元素顯示為塊級元素。
如將內聯元素轉換為塊狀元素，從而使得*元素具有塊狀元素的特點。
*{display:block;}
塊狀元素的特點：
1.每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（一個塊級元素獨占一行）
2.元素的高度、寬度、行高以及頂和底邊距都可以設置。
3.元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
3.內聯元素
在html中，<span>、<a>、<label>、<strong>、<em>就是典型的內聯元素（行內元素）(inline)元素。當然，快內元素也可以通過代碼display:inline將元素設置為內聯元素。
如將快內元素div轉換為內聯元素，從而使div元素具有內聯元素特點。
div{display:inline;}
內聯元素的特點：
1.和其他元素都在一行上；
2.元素的高度、寬度以及頂部和底部邊距不可設置；
3.元素的寬度就是它包含的文字或圖片的寬度， 不可改變。
4.內聯塊狀元素
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼display:inline-block就是將元素設置為內聯塊狀元素。<img>、<input>標簽就是這種內聯塊狀元素。
inline-block元素特點：
1.和其他元素都在同一行上；
2.元素的高度、寬度、行高以及頂和底邊距都可設置。
5.盒模型
（1）邊框
盒子模型的邊框就是圍繞著內容及補白的線，這條線可以設置粗細、樣式和顏色（邊框三個屬性）
如：
為div來設置邊框粗細為2px、樣式為實心的、顏色為紅色邊框：
div{border:2px ?solid ? red;}
等價于：
div{border-width:2px; border-style:solid; ?border-color:red;}
·邊框又分為：上邊框(border-top)、下邊框()border-bottom、左邊框(border-left)和右邊框(border-right)
p{border-left:2px solid #888}
注意：
1.border-style(邊框樣式)常見樣式有：dashed(虛線)|dotted（點線）|solid（實線）
2.border-color（邊框顏色）中的顏色可設置為十六進制顏色，如：border-color:#888;
3.border-width（邊框寬度）中的寬度也可以設置為：thin|medium|thick，最常見的還是用像素來表示：px;
（2）寬度(width)和高度(height)
盒模型的寬度和高度和平常所說的寬度和高度的理解是不一樣的，css內定義的寬(width)和高(height)。指的是填充以里的內容范圍。因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界
比如:
css代碼：
div{
? ? width:200px;
? ? padding:20px;
? ? border:1px solid red;
? ? margin:10px;
}
html代碼：
<body>
? ? ? ? ? <div>文本內容</div>
</body>
（3）填充
元素內容與邊框之間是可以設置距離的，稱之為“填充”。填充也可分為上、右、下、左（順時針）
（4）邊界
元素與其他元素之間的距離可以使用邊界(margin)來設置。邊界也是可分為上、右、下、左。
邊界(margin)語法與padding(填充)一樣。
padding和margin的區別，padding在邊框里，margin在邊框外。
五.css布局模型
布局模型和盒模型一樣都是css最基本、最核心的概念。但布局模型是建立在盒模型基礎之上，又不同于常說的css布局樣式或css布局模板。如果說布局模型是本，那么css布局模板就是末了，是外在的表現形式。
css包含3中基本的布局模型：Flow、Layer和Float。
在網頁中，元素有三種布局模型：1.流動模型（Flow） 2.浮動模型（Float） 3.層模型（Layer）
1.流動模型
流動（Flow）是默認的網頁布局模型。網頁在默認狀態下的HTML網頁元素是根據流動模型來分布網頁內容的。
流動布局模型具有兩個比較典型的特征：
1.塊元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據位置。
2.在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。（內聯元素可不像塊狀元素那么霸道獨占一行）
2.浮動模型
塊狀元素都是獨占一行，但是可以通過設置元素浮動能夠使得兩個塊狀元素并排顯示。
任何元素在默認情況下是不能浮動的，但可以用css定義為浮動，如：div、p、table、img等元素都可以定義為浮動。
樣式為:
*{float}
3.層模型
層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由于網頁大小的活動性，層布局沒能受到熱捧。但是在網頁上局部使用層布局還是有其方便之處的。
層模型有三種形式：
1.絕對定位(position:absolute)
2.相對定位(position:relative)
3.固定定位(position:fixed)
（1）絕對定位
如果想為元素設置層模型中的絕對定位，需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。
（2）相對定位
如果想為元素設置層模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素（并且元素像層一樣浮動了起來），然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
（3）固定定位
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中
移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。
（4）Relative和Absolute組合使用
可以通過Relative和Absolute來實現設置某個元素相對于其他元素進行定位，但必須遵守的規則：
1.參照元素必須是相對定位元素的前輩元素
2.參照定位的元素必須加入position:relative;
3.定位元素加入position:absolute,便可以使用top、bottom、left、right來進行偏移定位了。
六.CSS代碼縮寫，占用更少的帶寬
1.盒模型代碼簡寫
盒模型中的外邊距（margin）、內邊距(padding)和邊框(border)設置上下左右四個方向的邊距是按照順時針方向設置的：上右下左。
具體例子：
margin:10px 15px 12px 14px;/*上設置為10px、右設置為15px、下設置為12px、左設置為14px*/
通常有下面三種縮寫方法：
1.如果top、right、bottom、left的值相同，如下面代碼：
margin:10px 10px 10px 10px;
可縮寫為：margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代碼：
margin:10px 20px 10px 20px;
可縮寫為：margin:10px 20px;
3、如果left和right的值相同，如下面代碼：
margin:10px 20px 30px 20px;
可縮寫為：margin:10px 20px 30px;
注意：padding、border的縮寫方法和margin是一致的。
2.顏色縮寫
顏色的css樣式同樣可以縮寫，當設置顏色為16進制的色彩值時，如果每兩位的值相同，可以縮寫一半。
例子1：p{color:#000000;}
可以縮寫為：p{color: #000;}
例子2：p{color: #336699;}
可以縮寫為：p{color: #369;}
3.字體縮寫
網頁中的字體css樣式代碼也有他自己的縮寫方式，下面是給網頁設置字體的代碼：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
這么多行的代碼其實可以縮寫為一句：
body{
font:italic? small-caps? bold? 12px/1.5em? "宋體",sans-serif;
}
注意：
1.使用這一簡寫方式至少要指定font-size和font-family屬性，其他的屬性（如：font-weight、font-style、font-varient、line-height）如未指定將自動使用默認值。
2.在縮寫時font-size與font-height中間要加入"/"斜杠
一般情況下因為對于中文網站，英文還是比較少的，所以下面的縮寫比較常用：
body{font:12px/1.5em? "宋體",sans-serif;}
只是有字號、行間距、中文字體、英文字體設置
七.單位和值
1.顏色值
在網頁中顏色設置是非常重要的，有字體顏色(color)、背景顏色(background-color)、邊框顏色(border)等，設置顏色的方法也有很多種：
1.英文命令顏色
例：p{color:red;}
2.RGB顏色
這個與photoshop中的RGB顏色是一直的，有R(red)、G(green)、B(blue)三種顏色的比例來配色。
例：p{color:rgb(133, 45, 212);}
每一項的值可以是0-255之間的證書，也可以是0%-100%的百分數。
例：p{color:rgb(20%, 33%, 45%);}
3.十六進制顏色
這種顏色設置方法是現在比較普遍使用的方法。
其原理其實也是RGB設置，但是其每一項的值是由0-255變成十六至今00-ff。
例：p{color:#00ffff;}
2.長度值
長度單位總結一下，目前比較常用到px（像素）、em、%百分比，要注意其實這三種單位都是相對單位。
1.像素
為什么像素是相對單位呢？因為像素指的是顯示器上的小點（CSS規范中假設“90像素=1英寸”）。實際情況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向于使用像素（px）作為單位。
2.em
就是本元素給定字體的font-size值，如果元素的font-size為14px，那么1em=14px；如果font-size為18px，那么1em=18px
例：p{font-size:12px; text-line:2em;}
上面代碼就是可以實現段落首行縮進24px（也就是兩個字體大小的距離）。
下面注意一個特殊情況：
但當給font-size設置單位為em時，此時計算的標準以p的父元素的font-size為基礎。
例如：
html:
<p>以這個<span>例子</span>為例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
結果 span 中的字體“例子”字體大小就為 11.2px（14 * 0.8 = 11.2px）。
3.百分比
p{font-size:12px; line-height:130%;}
設置行高（行間距）為字體的130%（12*1.3=15.6px）
八.CSS樣式的小技巧
1.水平居中設置
·行內元素
被設置的元素是文本、圖片等行內元素時，水平居中是通過父元素設置text-align:center來實現的
·定寬塊狀元素
被設置的為塊狀元素時用text-align:center就不起作用了，這是分兩種情況：定寬塊狀元素和不定寬塊狀元素。
滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的
例：
? div.txtCenter{text-align:center;}
·不定寬塊狀元素方法
不定寬的塊狀元素有三種方法居中：
1.加入table標簽
2.設置display:inline方法
3.設置position:relative和left:50%
1.加入table標簽
第一步：為需要設置的居中的元素外面加一個table標簽（包括<tbody>、<tr>、<td>）
第二步：為這個table設置“左右margin居中”（這個定寬塊狀元素的方法一樣）
2.設置display:inline方法
改變塊級元素的display為inline類型，然后使用text-align:center來實現居中效果。
這種方法相比于第一種方法的優勢是不用增加無語義標簽，簡化了標簽的嵌套深度，但也存在著一些問題：它將塊狀元素的display類型改成了inline，變成了行內元素，所以少了一些功能，比如設置長度值。
3.設置position：relative和left：50%
通過給父元素設置float，然后給父元素設置position:relative和left：50%，子元素設置position：relative和left：50%來實現水平居中
2.垂直居中
·父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的height和line-height高度一致來實現的。
·父元素高度確定的多行文本
父元素高度確定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種：
方法一：使用插入table(包括tbody、tr、td)標簽，同時設置vertical-align:middle
說到豎直居中，css中有一個用于豎直居中的屬性vertical-align，但這個樣式只有在父元素為td或th時，才會生效。所以要插入table標簽了。
方法二：在chrome、firefox以及IE8以上的瀏覽器下可以設置塊級元素的display為table-cell，激活vertical-align屬性，但IE6、7并不支持這個樣式
這個方法的好處是不用添加多余的無意義的標簽，但缺點也很明顯，它的兼容性不是很好，不兼容IE6、7
3.隱性改變display類型
當為元素設置一下2個句之一：
1.position：absolute；
2.float：left或left：right；
元素會自動變為以display:inline-block的方式顯示，當然就可以設置元素的width和height了且默認寬度不占滿父元素。
