引入CSS樣式表（即CSS的書寫位置）
行內式（內聯樣式）
- 是通過標籤內的style屬性來設置元素的樣式。基本語法格式如下
<標籤名 style=" 屬性1：屬性值1; 屬性2：屬性值2; 屬性3：屬性值3; 、、、"></標籤名>
- 語法中的 style 是標籤的屬性，實際上任何HTML標籤都擁有style屬性，用來設置行內樣式。
- 行內樣式只對其所在的標籤及嵌套在其中的子標籤起作用。
內部樣式表（內嵌式）
- 內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標籤中，並且用style標籤定義。基本語法格式如下
<head> <meta charset="UTF-8"> <title>Document</title> <style> 選擇器 { 屬性1：屬性值1; 屬性2：屬性值2; 屬性3：屬性值3; 、、、 } </style> </head>
- 語法中，style 標籤一般位於 head 標籤中的 title 標籤之後，也可以把他放在HTML文檔的任何地方。
外部樣式表（外鏈式）
- 鏈入式是將所有的樣式放在一個或多個以CSS（.css）爲擴展名的外部樣式表中，通過link標籤將外部樣式表文件鏈接到HTML文檔中。基本語法格式如下：
<head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css文件的路徑" type="text/css"/> </head>
注意：link是個單標籤
上述語法中，link 標籤需要放在 head 頭部標籤中，並且必須指定 rel 、href、type三個屬性，具體如下：
- rel：定義當前文檔與被鏈接文檔間的關係，在這裏需要指定爲”stylesheet“，表示被鏈接的文檔是一個樣式表文件。
- href：定義所鏈接外部樣式表的URL，可以是相對路徑，也可以是絕對路徑。
- type：定義所鏈接的文檔類型，在這裏需要指定爲”text/css“，表示鏈接的外部文件爲css樣式表。
三種樣式表總結
標籤顯示模式（display）
塊級元素（block-level）
- 每個塊元素通常都會獨自佔據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。
常見的塊元素有：<h1></h1> ~ <h6></h6>、<p></p> 、<div></div>、 <ul></ul>、<ol></ol>、 <li></li>等，其中<div></div>標籤是最典型的塊元素。
- div 標籤是最典型的塊元素
塊元素特點：
- 總是從新一行開始
- 高度、行高、外邊距以及內邊距都可以控制
- 寬度默認是容器的100%
- 可以容納 內聯元素 和 其他塊元素
行內元素（inline-level）
- 行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬高、對齊等屬性，常用於控制頁面中文本的樣式。
常見的行內元素有：<a></a>、 <strong></strong>、 <b></b>、 <em></em>、 <i></i>、 <del></del>、 <s></s>、 <ins></ins>、 <u></u>、 <span></span>等，其中 <span></span> 標籤是最典型的行內元素。
行內元素的特點：
- 和相鄰行內元素在一行上
- 寬高無效，但水平方向的 margin 和 padding 可以設置，垂直方向無效
- 默認寬度就是它本身內容的寬度
- 行內元素只能容納 文本 或者 其他行內元素（a標籤特殊，可以放塊元素）
注意：
- 只有 文字 才能組成段落，因此 p 裏面不能放塊級元素，同理還有這些標籤 h1~h6、dt，他們都是文字類塊級標籤，裏面不能放其他塊級元素
- 鏈接裏面不能再放鏈接
塊級元素和行內元素的區別在於它們各自的特點。
行內塊元素（inline-block）
- 在行內塊元素中有幾個特殊的標籤：<img/>、<input/>、<td>，可以對它們設置寬高和對齊屬性。
特點：
- 和相鄰行內塊元素在一行上，但是之間會有空白間隙
- 默認寬度就是它本身內容的寬度
- 高度、行高、外邊距以及內邊距都可以控制
標籤顯示模式轉換（display）
- 塊轉行內： display:inline
- 行內轉塊：display:block
- 塊、行內元素轉換爲行內塊元素： display:inline-block
塊|行內元素示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body> <div> <!-- 文字塊元素標籤 --> <h2>我自己的房子</h2> <!-- 行內元素標籤：span、strong、i --> <span>不是小公寓.也不是陰面的大公寓。</span> <span> <strong style="color: gold;">也不是哪個男人的房子.</strong> <i style="color: rgb(255, 94, 0);">也不是爸爸的房子。</i> </span> <!-- 塊元素：div、h2、p、ol、ul、li --> <p style="background-color: hotpink;">是完完全全屬於我自己的.那裏有我的前廊我的枕頭,我漂亮的紫色矮牽牛。</p> <p style="background-color: hotpink;">沒有別人扔下的垃圾要拾起。</p> <ol> <li>我的書和我的故事.</li> <li>我的兩隻等在牀邊的鞋.</li> <li>不用和誰去作對。</li> </ol> <ul> <li>只是一所寂靜如雪的房子,</li> <li>一個自己歸去的空間,</li> <li>潔淨如同詩筆未落的紙。</li> </ul> </div> </body> </html>
頁面效果如下
顯示模式（display）示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 塊元素 轉爲 行內元素 */ .display-inline{ display: inline; background-color: hotpink; } /* 行內元素 轉爲 塊元素 */ .display-block{ display: block; background-color: lightgreen; } /* 行內元素 轉爲 行內塊元素 */ .display-inline-block{ display: inline-block; color: rgb(26, 175, 235); width: 40px; height: 20px; } </style> </head> <body> <!-- 顯示模式轉換：display --> <!-- 塊元素 --> <div>不是小公寓.也不是陰面的大公寓。</div> <div>也不是哪個男人的房子.也不是爸爸的房子。</div> <!-- 塊元素 轉爲 行內元素 --> <div class="display-inline">不是小公寓.也不是陰面的大公寓。</div> <div class="display-inline">也不是哪個男人的房子.也不是爸爸的房子。</div> <br/><br/> <!-- 行內元素 --> <span>不是小公寓.也不是陰面的大公寓。</span> <span>也不是哪個男人的房子.也不是爸爸的房子。</span> <!-- 行內元素 轉爲 塊元素 --> <span class="display-block">不是小公寓.也不是陰面的大公寓。</span> <span class="display-block">也不是哪個男人的房子.也不是爸爸的房子。</span> <br/><br/> <a href="http://#">行內元素</a> <a href="http://#">行內元素</a><br/><br/> <!-- 行內元素 轉爲 行內塊元素 --> <a class="display-inline-block" href="http://#">行內元素</a> <a class="display-inline-block" href="http://#">行內元素</a> </body> </html>
頁面效果如下：
