一、內聯式css樣式，直接寫在現有的HTML標簽中 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>認識html標簽< ...
一、內聯式css樣式，直接寫在現有的HTML標簽中
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>認識html標簽</title> 6 <style type="text/css"> 7 span{ 8 color:red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>慕課網，<span>超酷的互聯網</span>、IT技術免費學習平臺，創新的網路一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專註服務互聯網工程師快速成為技術高手！</p> 14 </body> 15 </html>內聯式css樣式，直接寫在現有的HTML標簽中
CSS樣式可以寫在哪些地方呢？
從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內聯式、嵌入式和外部式三種。
內聯式css樣式表就是把css代碼直接寫在現有的HTML標簽中，如下麵代碼：
<p style="color:red">這裡文字是紅色。</p>
註意要寫在元素的開始標簽里，下麵這種寫法是錯誤的：
<p>這裡文字是紅色。</p style="color:red">
並且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號隔開。如下代碼：
<p style="color:red;font-size:12px">這裡文字是紅色。</p>
試一試：使用內聯式css樣式為"超酷的互聯網"這幾個字設置字體顏色為藍色
在編輯器中13行中的第一個span標簽中寫入代碼：
style="color:blue"
你寫是否寫入的代碼像下麵的樣子：
<span style="color:blue">超酷的互聯網</span>
二、嵌入式css樣式，寫在當前的文件中
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>嵌入式css樣式</title> 6 <style type="text/css"> 7 span{ 8 color:red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>慕課網，<span>超酷的互聯網</span>、IT技術免費學習平臺，創新的網路一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專註服務互聯網工程師快速成為技術高手！</p> 14 </body> 15 </html>嵌入式css樣式，寫在當前的文件中
現在有一任務，把編輯器中的“超酷的互聯網”、“服務及時貼心”、“有趣易學”這三個短詞文字字型大小修改為18px。
如果用我們學習的內聯式css樣式的方法進行設置將是一件很頭疼的事情（為每一個<span>標簽加入sytle="font-size:18px"語句）。
嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標簽之間。如下麵代碼實現把三個<span>標簽中的文字設置為紅色：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css樣式必須寫在<style></style>之間，並且一般情況下嵌入式css樣式寫在<head></head>之間。如編輯器中的代碼。
來試一試：用嵌入式css樣式設置字體顏色
在代碼編輯器中的段落中，有三個<span>標簽，請把這三個<span>標簽中的文字顏色都設置為藍色
你是否輸入像下麵樣式的代碼：
span
{color:blue;
}
三、外部式css樣式，寫在單獨的一個文件中
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>嵌入式css樣式</title> 6 <link href="style.css" rel="stylesheet" type="text/css" /> 7 </head> 8 <body> 9 <p>慕課網，<span>超酷的互聯網</span>、IT技術免費學習平臺，創新的網路一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專註服務互聯網工程師快速成為技術高手！</p> 10 </body> 11 </html>外部式css樣式，寫在單獨的一個文件中
1 span{ 2 color:red; 3 4 }外部式css樣式，寫在單獨的一個文件中
外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，
在<head>內（不是在<style>標簽內）使用<link>標簽將css樣式文件鏈接到HTML文件內，如下麵代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
註意：
1、css樣式文件名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標簽位置一般寫在<head>標簽之內。
來試一試：用外部式css樣式設置文字字型大小
1、單擊打開style.css文件(在html文件的下麵)，在第3行輸入代碼font-size:20px;觀察結果視窗中文字大小的變化。
style.css文件中的代碼是不是跟下麵的一樣：
span
{color:red;
font-size:20px;
}
內聯：<span style="color:red;font-size:10px;" >text</span>
嵌入：<style type="text/css">span{color:red;font-size:10px;}</style>
外部：<link href="style.css" rel="stylesheet" type="text/css">
rel屬性用於定義鏈接的文件和HTML文檔之間的關係。StyleSheet，的意思就是樣式調用，
內聯式適用情況:局部特殊化
嵌入式適用情況:統一標簽樣式格式
外聯式適用情況:方便代碼重用和管理
rel是relationship的英文縮寫
stylesheet中style是樣式的意思,sheet是表格之意,總起來是樣式表的意思
rel="stylesheet" 描述了當前頁面與href所指定文檔的關係.即說明的是,href連接的文檔是一個新式表
link內聲明外鏈css文件，href路徑，rel為外鏈文檔和本文檔的關係即relative，type即為外鏈文檔的類型。
四、三種方法的優先順序
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>嵌入式css樣式</title> 6 <link href="style.css" rel="stylesheet" type="text/css"> 7 <style type="text/css"> 8 span{ 9 color:red; 10 } 11 </style> 12 </head> 13 <body> 14 <p>慕課網，<span style="color:pink">超酷的互聯網</span>、IT技術免費學習平臺，創新的網路一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專註服務互聯網工程師快速成為技術高手！</p> 15 </body> 16 </html>三種方法的優先順序
1 span{ 2 color:blue; 3 }三種方法的優先順序
如果有一種情況：對於同一個元素我們同時用了三種方法設置css樣式，那麼哪種方法真正有效呢？在編輯器就出現了這種情況
1、使用內聯式CSS設置“超酷的互聯網”文字為粉色。
2、然後使用嵌入式CSS來設置文字為紅色。
3、最後又使用外部式設置文字為藍色（style.css文件中設置）。
但最終你可以觀察到“超酷的互聯網”這個短詞的文本被設置為了粉色。
因為這三種樣式是有優先順序的，記住他們的優先順序：內聯式 > 嵌入式 > 外部式
但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的後面。
如代碼編輯器就是這樣，<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面（實際開發中也是這麼寫的）。
感興趣的小伙伴可以試一下，把它們調換順序，再看他們的優先順序是否變化。
其實總結來說，就是--就近原則（離被設置元素越近優先順序別越高）。
但註意上面所總結的優先順序是有一個前提：內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下。
任務
分別使用內聯式、嵌入式和外部式CSS樣式，把“超酷的互聯網”文本字型大小進行設置，感受一下這三種方法的優先順序。
別忘了設置字型大小的css樣式代碼：
font-size:20px;
有的小伙伴問了，如果有一種情況：對於同一個元素我們同時用了三種方法設置css樣式，那麼哪種方法真正有效呢？在右邊編輯器就出現了這種情況
1、使用內聯式CSS設置“超酷的互聯網”文字為粉色。
2、然後使用嵌入式CSS來設置文字為紅色。
3、最後又使用外部式設置文字為藍色（style.css文件中設置）。
但最終你可以觀察到“超酷的互聯網”這個短詞的文本被設置為了粉色。因為這三種樣式是有優先順序的，記住他們的優先順序：內聯式 > 嵌入式 > 外部式
但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的後面。如右代碼編輯器就是這樣，<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面（實際開發中也是這麼寫的）。感興趣的小伙伴可以試一下，把它們調換順序，再看他們的優先順序是否變化。
其實總結來說，就是--就近原則（離被設置元素越近優先順序別越高）。
但註意上面所總結的優先順序是有一個前提：內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下，什麼是權值呢？在後面的9-2小節中會講解到。
任務:
分別使用內聯式、嵌入式和外部式CSS樣式，把“超酷的互聯網”文本字型大小進行設置，感受一下這三種方法的優先順序。
別忘了設置字型大小的css樣式代碼：
font-size:20px;
複習：
CSS內鏈式寫在Html標簽內。
CSS外鏈式寫在外部單獨.css文件中，併在Html頭部中要聲明其路徑(href)。
CSS嵌入式寫在Html頭部中。
1. 內聯樣式表的權值最高 1000
2. ID 選擇器的權值為 100
3. Class 類選擇器的權值為 10
4. HTML 標簽選擇器的權值為 1
一般情況是內聯樣式級別最高，內嵌其次，外部最低，如果同一元素在三個樣式中都有設定則為多重樣式的情況
如果權重相同則使用就近原則，後大於前
在同一組屬性設置中標有“!important”規則的優先順序最大
CSS 優先順序法則：
A 選擇器都有一個權值，權值越大越優先
B 當權值相等時，後出現的樣式表設置要優於先出現的樣式表設置
C 創作者的規則高於瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式
D 繼承的CSS 樣式不如後來指定的CSS 樣式
E 在同一組屬性設置中標有“!important”規則的優先順序最大
如果不計較權重，離css修飾對象越近，就按照誰的規則去修飾。但是，比如要修飾<span>，那麼
①在span內添加內鏈的style必然最近，於是就用這個了
②即便頭部里有類選擇器，比如.lei{font-size:20px;}，而且這個類也是要在<span>標簽內聲明的，
即<span class="lei"></span>，是不是也挺近，但不會執行的，
因為CSS三大選擇器權重都沒有內鏈式<span style="font-size:15px">高，內鏈式很牛的。
內聯式CSS的優先順序比嵌入式要高，也就是說在spen中加入style="color:blue"是沒有問題的，他會優先於上面的樣式表執行。
