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="類選擇器名稱"為標簽設(shè)置一個類赁咙，如下：
class="stress">膽小如鼠
第三步：設(shè)置類選器css樣式，如下：
.stress{color:red;}/*類前面要加入一個英文圓點*/
3免钻、取個唯一標識：ID選擇器
? ? ? ? ?使用ID選擇器彼水，必須給標簽添加上id屬性，為標簽設(shè)置id="ID名稱"极舔，而不是class="類名稱"凤覆。
????????ID選擇符的前面是井號（#）號，而不是英文圓點（.）拆魏。
????????id屬性的值既為當前標簽的id盯桦，盡量見名思意，語義化渤刃。
4拥峦、類和ID選擇器的區(qū)別
相同點：可以應(yīng)用于任何元素
不同點：
①、ID選擇器只能在文檔中使用一次卖子。與類選擇器不同略号，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次玄柠。而類選擇器可以使用多次突梦。
②、可以使用類選擇器詞列表方法為一個元素同時設(shè)置多個樣式随闪。我們可以為一個元素同時設(shè)多個樣式阳似，但只可以用類選擇器的方法實現(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中任意標簽元素字體顏色全部設(shè)置為紅色：
* {color:red;}
8礼预、偽類選擇器：
? ??????允許給html不存在的標簽（標簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態(tài)來設(shè)置字體顏色：
a:hover{color:red;}
注意：其實 :hover 可以放在任意的標簽上虏劲，比如說 p:hover托酸，但是它們的兼容性也是很不好的，所以現(xiàn)在比較常用的還是 a:hover 的組合柒巫。
9励堡、分組選擇器：
? ??????為html中多個標簽元素設(shè)置同一個樣式時，可以使用分組選擇符（堡掏，）应结，如下代碼為右側(cè)代碼編輯器中的h1、span標簽同時設(shè)置字體顏色為紅色：
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)頁制作者樣式 < 用戶自己設(shè)置的樣式秕重，但記住!important優(yōu)先級樣式是個例外不同，權(quán)值高于用戶自己設(shè)置的樣式。)
12溶耘、font-family設(shè)置字體：
? ??????????body{font-family:"宋體";}
? ? ? ? 一般網(wǎng)頁喜歡設(shè)置微軟雅黑：body{font-family:"Microsoft Yahei";}
13二拐、font-weight設(shè)置粗體：p span{font-weight:bold;}
14凳兵、font-style設(shè)置字體樣式：
? ? ①、正常字體為normal,也是font-style的默認值庐扫。
? ? ②、italic為設(shè)置字體為斜體铅辞，用于字體本身就有傾斜的樣式萨醒。
? ? ③巷挥、oblique為設(shè)置傾斜的字體验靡，強制將字體傾斜雏节。
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可以設(shè)置添加到文本的修飾变过。
????????②涝涤、text-decoration默認值為none, 定義標準的文本。
????????③阔拳、text-decoration的值為underline為定義文本下的一條線。
????????④辨宠、text-decoration的值為overline為定義文本上的一條線。
????????⑤嗤形、text-decoration的值為line-through為定義穿過文本下的一條線，一般用于商品折扣價赋兵。
17、text-indent 為文本添加首行縮進（開頭空兩格）
? ??????p{text-indent:2em;}
18拓轻、line-height 為文本設(shè)置行間距
? ??????p{line-height:1.5em;}
19经伙、letter/word spacing 增加或減少字符間的空白
? ? ? ? letter：字母之間的間距
? ? ? ? word： 單詞之間的間距
20、text-aline 設(shè)置文本對齊方式
? ??????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將元素設(shè)置為內(nèi)聯(lián)元素
? ??????div{display:inline;}
23荒典、內(nèi)聯(lián)塊狀元素
? ? ? ? 內(nèi)聯(lián)元素是不能設(shè)置寬高的，需要將其設(shè)置為內(nèi)聯(lián)塊狀元素：
? ??????????display:inline-block
24寺董、設(shè)置元素隱藏不顯示
? ??????display: none;
25、使用border為盒子添加邊框
? ? ? ? ①滩字、border-style（邊框樣式）常見樣式有：dashed（虛線）| dotted（點線）| solid（實線）御吞。
?????????②、border-color（邊框顏色）中的顏色可設(shè)置為十六進制顏色陶珠，如: border-color:#888;//前面的井號不要忘掉。
????????③话瞧、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為： thin | medium | thick（但不是很常用），最常還是用像素（px）交排。
26、使用border為盒子添加邊框
? ??????css 樣式中允許只為一個方向的邊框設(shè)置樣式：
????????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;}
