1、外部式css樣式(也可稱為外聯(lián)式)是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，在內(nèi)（不是在<style>標簽內(nèi)）使用<link>標簽將css樣式文件鏈接到HTML文件內(nèi)，如下面代碼：標簽內(nèi)）使用標簽將css樣式文件鏈接到HTML文件內(nèi)，如下面代碼：
? ??<link href="base.css" rel="stylesheet" type="text/css" />
base.css" rel="stylesheet" type="text/css">
注意：
? ? ? ? ? ? ? ? css樣式文件名稱以有意義的英文字母命名，如 main.css。
? ? ? ? ? ? ? ? rel="stylesheet" type="text/css" 是固定寫法不可修改。
? ? ? ? ? ? ? ? <link>標簽位置一般寫在<head>標簽之內(nèi)。
2、類選擇器?
? ? ? ? 語法：.類選器名稱{css樣式代碼;}
? ??????使用方法：
第一步：使用合適的標簽把要修飾的內(nèi)容標記起來，如下：
<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"為標簽設置一個類，如下：
class="stress">膽小如鼠
第三步：設置類選器css樣式，如下：
.stress{color:red;}/*類前面要加入一個英文圓點*/
3、取個唯一標識：ID選擇器
? ? ? ? ?使用ID選擇器，必須給標簽添加上id屬性，為標簽設置id="ID名稱"，而不是class="類名稱"。
????????ID選擇符的前面是井號（#）號，而不是英文圓點（.）。
????????id屬性的值既為當前標簽的id，盡量見名思意，語義化。
4、類和ID選擇器的區(qū)別
相同點：可以應用于任何元素
不同點：
①、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
②、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時設多個樣式，但只可以用類選擇器的方法實現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。
下面的代碼是正確的(完整代碼見右側(cè)代碼編輯器)
5、子選擇器：
????大于符號(>),用于選擇指定標簽元素的第一代子元素。如右側(cè)代碼編輯器中的代碼：
.food>li{border:1px solid red;}
這行代碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框。
6、包含選擇器
? ??????加入空格,用于選擇指定標簽元素下的后輩元素。如右側(cè)代碼編輯器中的代碼：
.first? span{color:red;}
? ? ? ? 注意：>作用于元素的第一代后代，空格作用于元素的所有后代。
7、通過選擇器：
? ??????????功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素，如下使用下面代碼使用html中任意標簽元素字體顏色全部設置為紅色：
* {color:red;}
8、偽類選擇器：
? ??????允許給html不存在的標簽（標簽的某種狀態(tài)）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態(tài)來設置字體顏色：
a:hover{color:red;}
注意：其實 :hover 可以放在任意的標簽上，比如說 p:hover，但是它們的兼容性也是很不好的，所以現(xiàn)在比較常用的還是 a:hover 的組合。
9、分組選擇器：
? ??????為html中多個標簽元素設置同一個樣式時，可以使用分組選擇符（，），如下代碼為右側(cè)代碼編輯器中的h1、span標簽同時設置字體顏色為紅色：
h1,span{color:red;}
10、選擇器的優(yōu)先級：
? ? ? ? 一個元素使用了多個選擇器，則會按照選擇器的優(yōu)先級給定樣式： 內(nèi)聯(lián)樣式 > id選擇器 > 類選擇器 > 標簽選擇器 > 通配符選擇器
11、權(quán)值計算——特殊性
? ? ? ? 元素啟用css樣式時，啟用哪一個樣式，選擇權(quán)值高的樣式
? ??????標簽的權(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*/
? ? ? ? 選擇器最高層級 !important(注意樣式優(yōu)先級為：瀏覽器默認的樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設置的樣式，但記住!important優(yōu)先級樣式是個例外，權(quán)值高于用戶自己設置的樣式。)
12、font-family設置字體：
? ??????????body{font-family:"宋體";}
? ? ? ? 一般網(wǎng)頁喜歡設置微軟雅黑：body{font-family:"Microsoft Yahei";}
13、font-weight設置粗體：p span{font-weight:bold;}
14、font-style設置字體樣式：
? ? ①、正常字體為normal,也是font-style的默認值。
? ? ②、italic為設置字體為斜體，用于字體本身就有傾斜的樣式。
? ? ③、oblique為設置傾斜的字體，強制將字體傾斜。
15、font樣式的簡寫方式：body{ font:italic? bold? 12px/1.5em? "宋體",sans-serif;}（在縮寫時 font-size 與 line-height 中間要加入“/”斜扛）
16、text-decoration添加文本裝飾：
? ?????????? span { text-decoration: line-through;? }
? ? ? ? ①、text-decoration可以設置添加到文本的修飾。
????????②、text-decoration默認值為none, 定義標準的文本。
????????③、text-decoration的值為underline為定義文本下的一條線。
????????④、text-decoration的值為overline為定義文本上的一條線。
????????⑤、text-decoration的值為line-through為定義穿過文本下的一條線，一般用于商品折扣價。
17、text-indent 為文本添加首行縮進（開頭空兩格）
? ??????p{text-indent:2em;}
18、line-height 為文本設置行間距
? ??????p{line-height:1.5em;}
19、letter/word spacing 增加或減少字符間的空白
? ? ? ? letter：字母之間的間距
? ? ? ? word： 單詞之間的間距
20、text-aline 設置文本對齊方式
? ??????h1{text-align: center;}
? ? ? ? h1{text-align: left;}
????????h1{text-align: right;}
21、獨占一行的塊級元素：?將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素，從而使a元素具有塊狀元素特點
? ??????a{display:block;}
22、塊狀元素也可以通過代碼display:inline將元素設置為內(nèi)聯(lián)元素
? ??????div{display:inline;}
23、內(nèi)聯(lián)塊狀元素
? ? ? ? 內(nèi)聯(lián)元素是不能設置寬高的，需要將其設置為內(nèi)聯(lián)塊狀元素：
? ??????????display:inline-block
24、設置元素隱藏不顯示
? ??????display: none;
25、使用border為盒子添加邊框
? ? ? ? ①、border-style（邊框樣式）常見樣式有：dashed（虛線）| dotted（點線）| solid（實線）。
?????????②、border-color（邊框顏色）中的顏色可設置為十六進制顏色，如: border-color:#888;//前面的井號不要忘掉。
????????③、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O置為： thin | medium | thick（但不是很常用），最常還是用像素（px）。
26、使用border為盒子添加邊框
? ??????css 樣式中允許只為一個方向的邊框設置樣式：
????????div{border-bottom:1px solid red;
? ? ? ? ? ? ? ?border-top:1px solid red;
????????????????border-right:1px solid red;
????????????????border-left:1px solid red;}
27、 border-radius圓角可分為左上、右上、右下、左下。如下代碼：
?????????div{border-radius: 20px 10px 15px 30px;}
