HTML 網頁開發、CSS 基礎語法——十.CSS語法
阿新 • • 發佈：2021-01-10
CSS程式碼書寫位置
• CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告 1.內聯式 ① 內聯式簡介 •內聯式，也被習慣叫做行內式。 •書寫位置：在 HTML 標籤之上的 style 屬性中書寫 css 樣式。 •所有的 css 樣式屬性總體組成標籤的 style 屬性的屬性值。<div style="width: 100px;height: 100px; font-size: 14px;">1</div>
② 內聯式缺點
a. 內聯式必須寫在標籤上，沒有完全脫離HTML標籤。
b.css樣式程式碼讓標籤結構繁重，不利於HTML結構和解讀。
c.一個內聯式的CSS程式碼，只能給一個標籤使用，如果多個標籤有相同的樣式，同樣的CSS程式碼徐奧書寫多次，增加程式碼量。
因此，實際工作中不會使用內聯式（行內式）編寫CSS程式碼。
2. 內嵌式
① 內嵌式簡介
書寫位置：在HTML檔案中，<head> 標籤內部有一個<style> 標籤。
<style> 標籤書寫在<title> 標籤後面，所有CSS程式碼書寫在<style> 標籤內部。
<style>標籤有意標籤屬性叫做type，屬性值是“text/css”。
<style type="text/css">
div {
width:100px;
height:100px;
background-color:pink;
}
</style>
② 內嵌式特點
| 優點 | 缺點 |
|
a.實現了結構和樣式的初步分離，css只負責樣式，HTML負責結構。 b.多個標籤可以利用一段程式碼設定相同的樣式，節省程式碼量。 |
a.結構和樣式並沒有完全分離，程式碼依舊寫在HTML吻技安的<style>標籤內部。 b.css樣式只能給一個HTML檔案使用，不能夠被多個HTML檔案同時利用。 c.在HTML中如果CSS程式碼太多，會造成檔案頭重腳輕。 |
3.外聯式
<link rel="stylesheet" href="目標檔案路徑.css" type="text/css">
優點：
a. 實現了HTML和CSS完全分離
b.多個HTML檔案可以公用一個CSS檔案，便於提取公共CSS，減少程式碼
4.匯入式
•書寫位置：在內嵌式樣式表 <style> 標籤內部，或者在外聯式樣式表內部，匯入其他的外部的 .css 檔案。 •匯入方式：利用一條 @import url(路徑) 語句進行引入。<style>
@import url(css/01.css);
div {
border-color: #00f
}
</style>
匯入式問題：
•匯入式樣式表的作用與外聯式樣式表基本相同。 •但是由於匯入式在瀏覽器中載入時，會在 HTML 結構載入完畢後再進行編譯，如果網速比較慢時，會導致網頁出現沒有 css 樣式的效果，給使用者的體驗不好。 •實際工作中，較少使用匯入式，推薦使用外聯式樣式表。 注： •小型案例：可以使用內嵌式 CSS。 •實際工作、大型網站專案：推薦使用外聯式 CSS。 習慣程式碼書寫風格 1.CSS 樣式格式 展開格式：開發過程使用，程式碼可讀性強，便於調錯<style>
div {
width: 200px;
height:200px;
background-color: skyblue;
margin-bottom: 10px;
}
</style>
2.英文大小寫
CSS中的英文可以用大寫，也可以用小寫。
建議：CSS中的選擇器和樣式屬性名，屬性值等都使用小寫英文特殊情況除外。