centos7 安裝 maven
阿新 • • 發佈：2020-12-22
■ 三種引入方式
按照CSS樣式書寫的位置(或者引入的方式)，CSS樣式表可以分為三大類：
▶行內樣式表(行內式)
▶內部樣式表(嵌入式)
▶外部樣式表(連結式)--推薦使用
■ 行內樣式表
□ 使用說明
在元素標籤內部的style屬性中設定CSS樣式，適合於修改簡單樣式
使用行內樣式表設定CSS，通常也被稱為行內式引入
注意：
▶style其實就是標籤的屬性
▶在雙引號中間，寫法要符合CSS規範
▶可以控制當前的標籤設定樣式
▶由於書寫繁瑣，並沒有體現出結構與樣式相分離的思想，所以不推薦大量使用，只有對當前元素新增簡單樣式的時候，可以考慮使用
□ 示例
<div style="color:red; font-size:12px;" >行內樣式表</div>
■ 內部樣式表
□ 使用說明
將CSS寫到HTML頁面內部，將所有的CSS程式碼抽取出來，單獨放到一個<style>標籤中
使用內部樣式表設定CSS，通常也被稱為嵌入式引入，這種方式是練習或者除錯時常用的方式
注意：
▶ <style>標籤理論上可以放在HTML文件的任何地方，但一般會放在文件的<head>標籤中，通過此種方式，可以方便控制當前整個頁面中的元素樣式設定
▶ 該方式使程式碼結構清晰，但是並沒有實現結構與樣式完全分離
□ 示例
<style> <div> color: red; font-size: 12px; </div> </style> <div>內部樣式表</div>
■ 外部樣式表
□ 使用說明
將樣式單獨寫到CSS檔案中，之後把CSS檔案引入到HTML頁面中使用
實際開發都是外部樣式表，適合於樣式比較多的情況
引入外部樣式表分為兩步：
1) 新建一個字尾名為.css的樣式檔案，把所有CSS程式碼都放入此檔案中
2) 在HTML頁面中，使用<link>標籤引入這個檔案
□ 示例
CSS檔案(XXX.css)
div { color: red; font-size: 12px; }
HTML檔案
... <head> <link rel="stylesheet" href="CSS檔案路徑"> </head> ... <body> <div>使用外部樣式表</div> </body>
■ 總結
□ 行內樣式表
優點：書寫方便，權重高
缺點：結構樣式混寫
使用情況：較少
控制範圍：控制一個標籤
□ 內部樣式表
優點：部分結構和樣式相分離
缺點：沒有徹底分離
使用情況：較多
控制範圍：控制一個頁面
□ 外部樣式表
優點：完全實現結構和樣式相互分離
缺點：需要引入
使用情況：最多，推薦使用
控制範圍：控制多個頁面