css綜述
1.css全稱為層疊樣式表，他主要時定義html內(nèi)容在瀏覽器中的顯示樣式，如文字大小，顏色，字體加粗等
2。使用css樣式的一個好處就是通過定義某種樣式，使得不同網(wǎng)頁位置有著統(tǒng)一的文字，字號等
3.css代碼樣式由選擇符和聲明符組成而聲明符又由屬性和值組成
p{
font-size：12px；
}
1.css樣式的基本知識
①.內(nèi)聯(lián)樣式
②.嵌入樣式
③.外部樣式
對于內(nèi)聯(lián)樣式，css樣式表就是把css代碼直接寫到原有的html標簽中
<p style="color:red">這里文字是紅色</p>
對于嵌入樣式，就是把css寫在style中（比較常用）
<style type="text/css">
span{
color:red;
}
</style>
對于外部css樣式就是把css代碼寫在一個單獨的外部文件中，這個文件以“.css"命名，通過link引入
<link href="base.css" rel=:"stylesheet" type="text/css“/>
對于三種方法的優(yōu)先級
為內(nèi)聯(lián)式>嵌入式>外部式
2.css的選擇器
在原來的html屬性中提到過
3.繼承
CSS的某些樣式是具有繼承性的，繼承是一種規(guī)則，它允許樣式不僅應用于某個特定html標簽元素，而且應用于其后代。
border屬性不能繼承
4.特殊性
標簽的權(quán)值為1，類選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100
p{color:red;} /*權(quán)值為1*/ p span{color:green;} /*權(quán)值為1+1=2*/ .warning{color:white;} /*權(quán)值為10*/ p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/ #footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/
5.層疊
層疊就是在html文件中對于同一個元素可以有多個css樣式存在，當有相同權(quán)重的樣式存在時，會根據(jù)這些css樣式的前后順序來決定，處于最后面的css樣式會被應用
6.我們可以用!important來設置優(yōu)先級
下面的例子中p就會被設置為紅色
p{color:red!important;} p{color:green;}
三年級時，我還是一個膽小如鼠的小女孩。?????????????????????????????????????????????????????????
7.CSS格式化排版
1.關于文字的各種現(xiàn)實屬性在html標簽文章中
2.用line-height屬性對行高進行調(diào)整（2em代表的是段落間距為2倍）
3.用letter-spacing用來設置文字間距和字母間距
用word-spacing用來設置英語單詞之間的間距
4.若想為塊狀元素中的文本，圖片設置為居中樣式要用text-align進行設置
8.CSS盒模型
1.元素分類
在css中，html中的標簽元素大體分為三種基本類型：塊狀元素，內(nèi)聯(lián)元素（行內(nèi)元素），內(nèi)聯(lián)塊狀元素；
常用塊狀元素：
<div>,<p>,<h>,<ol>,<ul>,<table>,<address>,<blockquote>,<form>,<dl>
常見內(nèi)聯(lián)元素
<a>,<span>,<br>,<I>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
常見的內(nèi)聯(lián)塊狀元素
<img>,<input>
2.塊狀元素
塊狀元素可以又display:block進行轉(zhuǎn)化
1.每個塊狀元素都獨占一行
2.元素的高度寬度，行高，以及頂，和底邊距都可以設置
3.元素的寬度在不設置的情況下都是100%
3.內(nèi)聯(lián)元素
:內(nèi)聯(lián)元素可以用display:inline;
1.和其他元素在一行上
2.元素的高度，寬度，及頂部底部的邊距是不可設置
2.元素的寬度就是它包含的文字或圖片的寬度，不可改變
4.內(nèi)聯(lián)塊狀元素
內(nèi)聯(lián)塊狀元素就是同時具備內(nèi)聯(lián)元素和塊狀元素共同的特性
1.和其他元素都在一行上
2.元素的高度寬度和·行高都可以進行設置
5.元素div的border，padding，margin
1、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線）。
2、border-color（邊框顏色）中的顏色可設置為十六進制顏色，如:
border-color:#888;//前面的井號不要忘掉。
3、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O置為：
thin | medium | thick（但不是很常用），最常還是用象素（px）。
4.同樣可以使用下面代碼實現(xiàn)其它三邊(上、右、左)邊框的設置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
5.盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內(nèi)定義的寬（width）和高（height），指的是填充以里的內(nèi)容范圍。
因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。
9.css代碼簡寫
外邊距(margin)、內(nèi)邊距(padding)和邊框(border)設置上下左右四個方向的邊距是按照順時針方向設置的：上右下左。具體應用在margin和padding的例子如下：
margin:10px 15px 12px 14px;/*上設置為10px、右設置為15px、下設置為12px、左設置為14px*/
1、如果top、right、bottom、left的值相同，如下面代碼：
margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代碼：
margin:10px 20px;
3、如果left和right的值相同，如下面代碼：
margin:10px 20px 30px;
4.關于顏色的css樣式也是可以縮寫的，當你設置的顏色是16進制的色彩值時，如果每兩位的值相同，可以縮寫一半。
5.字體也可進行簡寫
10.css單位和值
1.顏色
在網(wǎng)頁中的顏色設置是非常重要，有字體顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設置顏色的方法也有很多種：
1、英文命令顏色
前面幾個小節(jié)中經(jīng)常用到的就是這種設置方法：
p{color:red;}
2、RGB顏色
這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。
p{color:rgb(133,45,200);}
每一項的值可以是 0~255 之間的整數(shù)，也可以是 0%~100% 的百分數(shù)。如：
p{color:rgb(20%,33%,25%);}
3、十六進制顏色
這種顏色設置方法是現(xiàn)在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。
p{color:#00ffff;}
2.單位
1.px像素
2.em,1em=14px;
3.百分比
11.css布局模型
在網(wǎng)頁中，元素有三種布局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）
1.對于流動模型
塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認狀態(tài)下，塊狀元素的寬度都為100%???? 流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。
2.對于浮動模型
浮動模型就是float類屬性
3.層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網(wǎng)頁設計領域，由于網(wǎng)頁大小的活動性，層布局沒能受到熱捧。但是在網(wǎng)頁上局部使用層布局還是有其方便之處的。下面我們來學習一下html中的層布局。
如何讓html元素在網(wǎng)頁中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來支持層布局模型。
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
