一.CSS引入的四種方式
1.內聯樣式（行內樣式），即將style樣式直接寫在html5的標簽中。
<!-- CSS樣式引入的方式一：（內聯樣式）行內樣式，優先級最高，缺點是代碼臃腫，不容易維護 --> <p style="font: '微軟雅黑';line-height: 30px;border:1px solid firebrick"> 寫這篇文章源自我之前的一次面試，題目便是問img標簽屬於 塊級元素還是行內元素，當時想都沒想就說了是<b>行內<font color="red">(inline)</font>元素</b>， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。寫這 篇文章源自我之前的一次面試，題目便是問<font color="red">img</font>標簽屬於塊級元素還是行內元素，當時想都沒想就說了是行內(inline)元素， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。</p>
效果圖
2.嵌入式，即在head標簽中間增加style標簽，並在style標簽中中寫css樣式，最后在body中引用
<!-- CSS樣式引入的方式二：嵌入式--> <style> .p_two { font-size: 24px; font-family: "隸書"; line-height: 30px; border: 2px dotted green; } </style>
<p class="p_two"> 寫這篇文章源自我之前的一次面試，題目便是問img標簽屬於 塊級元素還是行內元素，當時想都沒想就說了是<b>行內<font>(inline)</font>元素</b>， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。寫這 篇文章源自我之前的一次面試，題目便是問<font>img</font>標簽屬於塊級元素還是行內元素，當時想都沒想就說了是行內(inline)元素， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。</p>
效果圖：
3.鏈接式，講CSS樣式寫到外部文件中，在html頁面中使用link標簽鏈接。
在項目中增加一個名為css的文件夾，添加一個擴展名為css的樣式文件，文件名稱為css，寫入以下內容
.p_three { font-family: "隸書"; width: 500px; height: 400px; color: darkred; }
在html文件的head之間加入link標簽
<!-- CSS樣式引入的方式三：鏈接式--> <link href="css/css.css" type="text/css" rel="stylesheet" />
html文件中增加一個p標簽，樣式名為.p_three
<p class="p_three"> 寫這篇文章源自我之前的一次面試，題目便是問img標簽屬於 塊級元素還是行內元素，當時想都沒想就說了是<b>行內<font>(inline)</font>元素</b>， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。寫這 篇文章源自我之前的一次面試，題目便是問<font>img</font>標簽屬於塊級元素還是行內元素，當時想都沒想就說了是行內(inline)元素， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。</p>
效果圖為：
4.使用@import引入： 跟鏈接式的用法相似，但必須放在<STYLE>...</STYLE> 中。
在項目CSS文件夾中增加一個外部樣式表文件，名為css_import.css文件
編寫內容如下
.p_four{ width: 700px; height: 300px; background-color: antiquewhite; }
在html文件中使用@import導入該文件
<!-- CSS樣式引入的方式四：使用@import導入外部css文件--> <style> @import url("css/css_import.css"); </style>
html文件中增加一個p標簽，樣式名為.p_four
<p class="p_four"> 寫這篇文章源自我之前的一次面試，題目便是問img標簽屬於 塊級元素還是行內元素，當時想都沒想就說了是<b>行內<font>(inline)</font>元素</b>， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。寫這 篇文章源自我之前的一次面試，題目便是問<font>img</font>標簽屬於塊級元素還是行內元素，當時想都沒想就說了是行內(inline)元素， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。</p>
效果圖：
完整代碼：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS樣式的使用</title> <!-- CSS樣式引入的方式三：鏈接式--> <link href="css/css.css" type="text/css" rel="stylesheet" /> <!-- CSS樣式引入的方式二：嵌入式--> <style> .p_two { font-size: 24px; font-family: "隸書"; line-height: 50px; border: 2px dotted green; } </style> <!-- CSS樣式引入的方式四：使用@import導入外部css文件--> <style> @import url("css/css_import.css"); </style> </head> <body> <!-- CSS樣式引入的方式一：（內聯樣式）行內樣式，優先級最高，缺點是代碼臃腫，不容易維護 --> <p style="font-family: '微軟雅黑';line-height: 30px;border:1px solid firebrick"> 寫這篇文章源自我之前的一次面試，題目便是問img標簽屬於 塊級元素還是行內元素，當時想都沒想就說了是<b>行內<font color="red">(inline)</font>元素</b>， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。寫這 篇文章源自我之前的一次面試，題目便是問<font color="red">img</font>標簽屬於塊級元素還是行內元素，當時想都沒想就說了是行內(inline)元素， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。</p> <p class="p_two"> 寫這篇文章源自我之前的一次面試，題目便是問img標簽屬於 塊級元素還是行內元素，當時想都沒想就說了是<b>行內<font>(inline)</font>元素</b>， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。寫這 篇文章源自我之前的一次面試，題目便是問<font>img</font>標簽屬於塊級元素還是行內元素，當時想都沒想就說了是行內(inline)元素， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。</p> <p class="p_three"> 寫這篇文章源自我之前的一次面試，題目便是問img標簽屬於 塊級元素還是行內元素，當時想都沒想就說了是<b>行內<font>(inline)</font>元素</b>， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。寫這 篇文章源自我之前的一次面試，題目便是問<font>img</font>標簽屬於塊級元素還是行內元素，當時想都沒想就說了是行內(inline)元素， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。</p> <p class="p_four"> 寫這篇文章源自我之前的一次面試，題目便是問img標簽屬於 塊級元素還是行內元素，當時想都沒想就說了是<b>行內<font>(inline)</font>元素</b>， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。寫這 篇文章源自我之前的一次面試，題目便是問<font>img</font>標簽屬於塊級元素還是行內元素，當時想都沒想就說了是行內(inline)元素， 面試官追問為什么能夠設置img標簽的寬和高，當時腦子突然一懵，發現這是自己技術上的一個空白，所以有了這篇文章。</p> </body> </html>