CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。
一、CSS特性：
- 1、繼承性：繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個(gè)特定html標(biāo)簽元素，而且應(yīng)用于其后代。并不是所有樣式都可以繼承，如：border:1px solid red;
- 2、特殊性：當(dāng)同一元素被設(shè)置不同的CSS樣式代碼時(shí)，根據(jù)權(quán)值選擇元素格式。
- 3、層疊性：在html文件中對(duì)于同一個(gè)元素可以有多個(gè)css樣式存在，當(dāng)有相同權(quán)重的樣式存在時(shí)，會(huì)根據(jù)這些css樣式的前后順序來決定，處于最后面的css樣式會(huì)被應(yīng)用。
- 4、重要性：我們?cè)谧鼍W(wǎng)頁代碼的時(shí)，有些特殊的情況需要為某些樣式設(shè)置具有最高權(quán)值，這時(shí)候我們可以使用!important來解決。
二、權(quán)值的規(guī)則：
標(biāo)簽的權(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*/
三、具體實(shí)現(xiàn)
1、CSS添加注釋：/*添加注釋*/
2、設(shè)置相應(yīng)的格式：
p{
font-size:20px;/*設(shè)置文字字號(hào)*/
color:red;/*設(shè)置文字顏色*/
font-weight:bold;/*設(shè)置字體加粗*/
}
選擇要設(shè)置格式的文本：
<p>文本</p>
- 3、CSS 樣式代碼插入的形式
分為：內(nèi)聯(lián)式、嵌入式和外部式 - 內(nèi)聯(lián)式（直接寫在html標(biāo)簽中）：
<p style="color:red">這里文字是紅色。</p>
- 嵌入式（寫在當(dāng)前文件中）：把css樣式代碼寫在<style>標(biāo)簽之間。
<style type="text/css">要設(shè)置的格式</style>
- 外部式（寫在單獨(dú)文件中）：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css樣式文件名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)。
- 4、類選擇器：
.類選器名稱{css樣式代碼;}
.stress{
font-size:12px;
background:#900;
color:090;
}
<span class="stress">膽小如鼠</span>
- 5、ID選擇器：
#ID選擇器{css樣式代碼;}
#stress{
font-size:12px;
background:#900;
color:090;
}
<span id="stress">........</span>
類選擇器和ID選擇器區(qū)別：
1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個(gè)HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次
2、可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式。我們可以為一個(gè)元素同時(shí)設(shè)多個(gè)樣式，但只可以用類選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。
- 6、子選擇器：
.food>li{border:1px solid red;}
這行代碼會(huì)使class名為food下的子元素li（水果、蔬菜）加入紅色實(shí)線邊框。
- 7、包含(后代)選擇器：
.first span{color:red;}
總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。
- 8、通用選擇器：
* {color:red;}
- 9、偽類選擇符：
a:hover{color:red;}
當(dāng)鼠標(biāo)滑過這段內(nèi)容是，內(nèi)容變成紅色。
四、CSS盒模型
（一）盒模型中的標(biāo)簽及其含義
- 內(nèi)填充（內(nèi)容與邊框的距離）：padding
- 外邊距：margin
- 盒子邊框：border
以上三個(gè)都有四個(gè)方向：top、bottom、left、right - 元素分類：
- 常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
塊級(jí)元素特點(diǎn)：
1、每個(gè)塊級(jí)元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個(gè)塊級(jí)元素獨(dú)占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。常用的內(nèi)聯(lián)元素有：
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>內(nèi)聯(lián)元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設(shè)置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。常用的內(nèi)聯(lián)塊狀元素有：<img>、<input>
inline-block 元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
（二）設(shè)置邊框格式：
div{
border:2px solid red;/*全部邊框*/
}
div{
border-right:2px soid red;/*只設(shè)置右邊框*/
}
/*其余格式設(shè)置同上*/
1、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。
2、border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色，如:
border-color:#888;//前面的井號(hào)不要忘掉。
3、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：
thin | medium | thick（但不是很常用），最常還是用象素（px）。
五、布局模型
在網(wǎng)頁中，元素有三種布局模型：
- 1、流動(dòng)模型（Flow）
特點(diǎn)：第一點(diǎn)，塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。實(shí)際上，塊狀元素都會(huì)以行的形式占據(jù)位置。第二點(diǎn)，在流動(dòng)模型下，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行） - 2、浮動(dòng)模型 (Float)
- 3、層模型（Layer）
六、浮動(dòng)模型
塊狀元素這么霸道都是獨(dú)占一行，如果現(xiàn)在我們想讓兩個(gè)塊狀元素并排顯示，設(shè)置元素浮動(dòng)就可以實(shí)現(xiàn)這一愿望。任何元素在默認(rèn)情況下是不能浮動(dòng)的，但可以用 CSS 定義為浮動(dòng)，如 div、p、table、img 等元素都可以被定義為浮動(dòng)。如下代碼可以實(shí)現(xiàn)兩個(gè) div 元素一行顯示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
七、層模型
層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個(gè)圖層能夠精確定位操作，但在網(wǎng)頁設(shè)計(jì)領(lǐng)域，由于網(wǎng)頁大小的活動(dòng)性，層布局沒能受到熱捧。但是在網(wǎng)頁上局部使用層布局還是有其方便之處的。
層模型有三種形式：
- 1、絕對(duì)定位(position: absolute)
將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
- 2、相對(duì)定位(position: relative)
通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對(duì)定位完成的過程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)。 - 3、固定定位(position: fixed)
fixed：表示固定定位，與absolute定位類型類似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響，這與background-attachment:fixed?屬性功能相同。以下代碼可以實(shí)現(xiàn)相對(duì)于瀏覽器視圖向右移動(dòng)100px，向下移動(dòng)50px。并且拖動(dòng)滾動(dòng)條時(shí)位置固定不變。
還記得在講盒模型時(shí)外邊距(margin)、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個(gè)方向的邊距是按照順時(shí)針方向設(shè)置的：上右下左。當(dāng)這四個(gè)值相同時(shí)，可以只寫一個(gè)，如：margin:10px 10px 10px 10px;可以簡(jiǎn)寫為margin:10px;7
