前端-CSS-介紹及三種引入方式
阿新 • • 發佈：2018-11-08
我們為什麼需要CSS?
使用css的目的就是讓網頁具有美觀一致的頁面，另外一個最重要的原因是內容與格式分離 在沒有CSS之前，
我們想要修改HTML元素的樣式需要為每個HTML元素單獨定義樣式屬性，當HTML內容非常多時，就會定義很
多重複的樣式屬性，並且修改的時候需要逐個修改，費心費力。是時候做出改變了，所以CSS就出現了。
CSS的出現解決了下面兩個問題：
將HTML頁面的內容與樣式分離。
提高web開發的工作效率。
什麼是CSS?
CSS是指層疊樣式表(Cascading Style Sheets)，樣式定義如何顯示HTML元素，樣式通常又會存在於樣式表中。
也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS檔案裡。
css的優勢
1.內容與表現分離
2.網頁的表現統一，容易修改
3.豐富的樣式，使頁面佈局更加靈活
4.減少網頁的程式碼量，
增加網頁瀏覽器速度，節省網路頻寬
5.運用獨立頁面的css,有利於網頁被搜尋引擎收錄
如何使用CSS？
我們通常會把樣式規則的內容都儲存在CSS檔案中，此時該CSS檔案被稱為外部樣式表，
然後在HTML檔案中通過link標籤引用該CSS檔案即可。這樣瀏覽器在解析到該link標
籤的時候就會載入該CSS檔案，並按照該檔案中的樣式規則渲染HTML檔案。
CSS基礎語法
css的三種引入方式
內嵌方式（不方便維護，不建議使用）
每個專案分別建立資料夾
style標籤
<!doctype html>
<html>
<head>
<meta charset="utf8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>這是一個p標籤！</p>
</body>
</html>行內樣式
<!doctype html> <html> <head> <meta charset="utf8"> </head> <body> <p style="color: blue;">這是一個p標籤！</p> </body> </html>
外聯樣式表-連結式（主要使用這種方法）
link標籤 ---------- index.css p { color: green; } ---------- 然後在HTML檔案中通過link標籤引入： <!doctype html> <html> <head> <meta charset="utf8"> 絕對路徑 <link rel="stylesheet" href="./index.css"> </head> <body> <p>這是一個p標籤！</p> </body> </html> ----------------------------------------------------------
外聯樣式表[email protected] url()方式 匯入式
瞭解即可。 ---------------------- index.css @import url(other.css) --------------------- 注意： @import url()必須寫在檔案最開始的位置。 連結式與匯入式的區別 1、<link/>標籤屬於XHTML,@import是屬性css2.1 2、使用<link/>連結的css檔案先載入到網頁當中，再進行編譯顯示 3、使用@import匯入的css檔案，客戶端顯示HTML結構，再把CSS檔案載入到網頁當中 4、@import是屬於CSS2.1特有的，對於不相容CSS2.1的瀏覽器來說就是無效的