CSS-基礎知識(核)
CSS核心基礎知識
一,CSS簡介
層疊樣式表,使HTML搭建好的框架更加美化
二,CSS簡單語法
建議寫在head標籤中
三,CSS選擇器
概念:引導指向需要修飾的標籤或者元素
a.ID選擇器
概念:ID選擇器可以為標有特定ID的HTML元素指定特定的樣式。HTML元素以ID屬性來設定ID選擇器,CSS中ID選擇器以 “#” 來定義。
格式:
#ID的名稱{
屬性名稱:屬性值;
屬性名稱:屬性值;
}
1,ID屬性不要以數字開頭
2,ID屬性只能在每個HTML文件中出現一次
b.class選擇器
概念:Class選擇器用於描述一組元素的樣式,Class選擇器有別於ID選擇器,Class可以在多個元素中使用。
Class選擇器在HTML中以Class屬性表示, 在CSS中類選擇器以一個點"."號顯示。
格式:
.類的名稱{
屬性名稱:屬性值;
屬性名稱:屬性值;
}
注類名的第一個字元不能使用數字
c.選擇器優先順序
按照選擇器搜尋精度進行編寫
行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器
四,CSS引入方式
a.外部樣式:當樣式需要應用於很多頁面時,通過Link標籤引入一個外部的CSS檔案
b.內部樣式:當單個文件需要特殊的樣式時,通過直接在style標籤內編寫CSS程式碼。
c.行內樣式:直接在標籤中新增一個style屬性,編寫CSS程式碼。
五,CSS浮動
概念:CSS的Float(浮動),Float屬性建立浮動框,將其移動到一邊,直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。
浮動屬性:
六、盒子模型
概念:萬物皆盒子,
所有HTML元素可以看作盒子,在CSS中"box model"這一術語是用來設計和佈局時使用。CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實際內容。盒子模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
Margin(外邊距) - 清除邊框區域。Margin沒有背景顏色,它是完全透明
Border(邊框) -邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響
Padding(內邊距) - 清除內容周圍的區域。會受到框中填充的背景顏色影響
Content(內容) - 盒子的內容,顯示文字和影象
計算公式:
最終元素的總寬度計算公式:
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
最終元素的總高度計算公式:
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
宣告:小部分內容借鑑於 W3C網站