一.基礎知識
1.基本構(gòu)成：選擇符和聲明逐虚，聲明包括屬性和值匿值。
2.注釋/*...*/
3.在html中插入形式(離被設置元素越近，優(yōu)先級越高)
(1)內(nèi)聯(lián)式:直接寫在現(xiàn)有的html標簽中
<p style=“color:red;font-size:12px;...”>...</p>
(2)嵌入式(寫在<head></head>之間)
<style type=“text/css”>
span
{
color:red;
}
</style>
(3)外部式:寫入單獨文件*.css
在head內(nèi)使用link鏈接入html
<link href=“*.css” rel=“stylesheet” type=“text/css”> ?rel和type是固定寫法
二.選擇器
1.標簽選擇器(html中的標簽)
標簽{樣式設置;}
?可寫成分組選擇器
標簽1物喷，標簽2{樣式設置;}
2.類選擇器
<span class=“類名1 類名2”>...</span>...
<span class=“類名1 類名2”>...</span>...
.類名1{樣式設置;}
.類名2{樣式設置;}
3.id選擇器
<span id=“id名”>...</span>
#id名{樣式設置}唯一性
4.子選擇器(只包含第一代)
.類名>span{樣式設置;}
5.包含(后代)選擇器
.類名 span{樣式設置;}
6.通用選擇器(設置所有的標簽樣式)
*{樣式設置;}
7.偽類選擇器(給標簽的某種狀態(tài)添加樣式)
標簽.hover{樣式設置;}鼠標劃過時的樣式
三.選擇器權(quán)值
1.標簽是1
2.類選擇是10
3.id選擇是100
例:
四.文字排版
1.body{font-family:"Microsoft Yahei";}給網(wǎng)頁設置字體-微軟雅黑
2.body{font-size:12px;color:red;}給網(wǎng)頁設置字號和顏色
3.p span{font-weight:bold;}文字設置為粗體
4.p a{font-style:italic;}文字設置為斜體
5.p a{text-decoration:underline;}文字設置下劃線
6. ? .oldPrice{text-decoration:line-through;}文字設置刪除線
7.p{text-indent:2em;}段落縮進2個
8.p{line-height:2em;}行間距2倍行高
9.h1{letter-spacing:50px;}中文字职车，字母間距
h1{word-spacing:50px;}單詞間距
10.h1{text-align:center;}段落居中
h1{text-align:left;}段落居左
h1{text-align:right;}段落居右
五.布局模型
1.流動模型(flow)默認
第一點，塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布济榨，因為在默認狀態(tài)下燎含，塊狀元素的寬度都為100%。實際上腿短，塊狀元素都會以行的形式占據(jù)位置。如右側(cè)代碼編輯器中三個塊狀元素標簽(div，h1橘忱，p)寬度顯示為100%赴魁。
第二點，在流動模型下钝诚，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示颖御。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨占一行）
2.浮動模型(float)
div{float:left}
div塊在一行按居左順序顯示
3.層模型(layer)
層模型有三種形式：
(1)絕對定位(position: absolute)
(2)相對定位(position: relative)
(3)固定定位(position: fixed)
fixed：表示固定定位，與absolute定位類型類似凝颇，但它的相對移動的坐標是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身潘拱。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化拧略，除非你在屏幕中移動瀏覽器窗口的屏幕位置芦岂，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置垫蛆，不會受文檔流動影響
(4)相對于某個模塊定位
六.代碼縮寫
1.盒模型縮寫見html
2.顏色縮寫
p{color:#000000} ? 縮寫 p{color:#000} ? ?
p{color:#336699} ? ?縮寫p{color:#369} ?
3.字體縮寫
注意：
1禽最、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight袱饭、font-style川无、font-variant、line-height)如未指定將自動使用默認值虑乖。
2懦趋、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
一般情況下因為對于中文網(wǎng)站疹味，英文還是比較少的仅叫，所以下面縮寫代碼比較常用：
七.值
1.顏色值
在網(wǎng)頁中的顏色設置是非常重要，有字體顏色（color）佛猛、背景顏色（background-color）鹃两、邊框顏色（border）等谣拣，設置顏色的方法也有很多種：
八.樣式設置
(一).居中
1.行內(nèi)元素
? ? ? 如果被設置元素為文本、圖片等行內(nèi)元素時，水平居中是通過給父元素設置 text-align:center 來實現(xiàn)的别瞭。(父元素和子元素：如下面的html代碼中，div是“我想要在父容器中水平居中顯示”這個文本的父元素俺抽。反之這個文本是div的子元素 )如下代碼：
2.塊狀元素之定寬
? ? ? ?定寬塊狀元素：塊狀元素的寬度width為固定值川抡。
? ? ? ?滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現(xiàn)居中的。我們來看個例子就是設置 div 這個塊狀元素水平居中：
3.塊狀元素之不定寬
(1)加入 table 標簽
? ? ? ?為什么選擇方法一加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據(jù)其內(nèi)文本長度決定）边臼，因此可以看做一個定寬度塊元素哄尔，然后再利用定寬度塊狀居中的margin的方法，使其水平居中柠并。
第一步：為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 岭接、富拗、 )。
第二步：為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）鸣戴。
舉例如下：
(2)設置 display: inline 方法：與第一種類似啃沪，顯示類型設為 行內(nèi)元素，進行不定寬元素的屬性設置窄锅。
改變塊級元素的 display 為 inline 類型（設置為 行內(nèi)元素 顯示）创千，然后使用 text-align:center 來實現(xiàn)居中效果。
這種方法相比第一種方法的優(yōu)勢是不用增加無語義標簽入偷，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline追驴，變成了行內(nèi)元素，所以少了一些功能疏之，比如設定長度值殿雪。
(3)設置 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% 体捏，即達到居中的目的冠摄。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊几缭；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊河泳，從而實現(xiàn)li層的居中。
4.垂直居中
(1)父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現(xiàn)的年栓。(height: 該元素的高度拆挥，line-height: 顧名思義，行高（行間距）某抓，指在文本中纸兔，行與行之間的 基線間的距離 )。
line-height 與 font-size 的計算值之差否副，在 CSS 中成為“行間距”汉矿。分為兩半，分別加到一個文本行內(nèi)容的頂部和底部备禀。
這種文字行高與塊高一致帶來了一個弊端：當文字內(nèi)容的長度大于塊的寬時洲拇，就有內(nèi)容脫離了塊。
(2)父元素高度確定的多行文本
a)使用插入 table ?(包括tbody曲尸、tr赋续、td)標簽，同時設置 vertical-align：middle另患。
css 中有一個用于豎直居中的屬性 vertical-align纽乱，在父元素設置此樣式時，會對inline-block類型的子元素都有用昆箕。下面看一下例子：
b)這種方法兼容性比較差鸦列，只是提供大家學習參考租冠。
在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell（設置為表格單元顯示）薯嗤，激活 vertical-align 屬性肺稀，但注意 IE6、7 并不支持這個樣式, 兼容性比較差应民。
5.隱性改變diaplay類型
有一個有趣的現(xiàn)象就是當為元素（不論之前是什么類型元素，display:none 除外）設置以下 2 個句之一：
a) position : absolute
b) float : left 或 float:right
簡單來說夕吻，只要html代碼中出現(xiàn)以上兩句之一诲锹，元素的display顯示類型就會自動變?yōu)橐?display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了涉馅，且默認寬度不占滿父元素归园。
如下面的代碼，小伙伴們都知道 a 標簽是 行內(nèi)元素 稚矿，所以設置它的 width 是 沒有效果的庸诱，但是設置為 position:absolute 以后，就可以了晤揣。
九.樣式
1.font-size:12px;字號
2.color:red;字體顏色
3.line-height:1.6em;行間距
4.font-weight:normal;去掉字體加粗
5.border:1px;邊框1像素寬
6.solid:red;邊框紅色實心
