CSS(Cascading Style Sheets)是一種用于描述網頁樣式的語言。它可以控制文本、圖像及其他頁面元素的布局、字體、顏色等樣式特征。CSS的構成語法由選擇器、屬性和值三部分組成。
選擇器 { 屬性: 值; }
其中,選擇器指定要樣式化的HTML元素,屬性是要控制的樣式特征,而值則是對應屬性的設置取值。
選擇器有多種形式,包括標簽選擇器、類選擇器、ID選擇器、復合選擇器等。標簽選擇器是指對文檔中的某種HTML元素進行樣式化;類選擇器則是通過給HTML元素加上class屬性來定義樣式;ID選擇器則是對某個HTML元素的唯一ID進行樣式化;復合選擇器是指將多個選擇器組合在一起,如“元素1+元素2”表示選擇元素1后面的相鄰元素2。
p { /* 標簽選擇器 */ font-size: 14px; color: #333; } .my-class { /* 類選擇器 */ background-color: #f5f5f5; } #my-id { /* ID選擇器 */ border: 1px solid red; } p.my-class { /* 復合選擇器 */ font-weight: bold; }
屬性有很多種,如字體、背景、邊框、布局等。常見屬性包括font-size(字體大小)、color(字體顏色)、background-color(背景顏色)、border(邊框)、margin(外邊距)、padding(內邊距)等。
屬性的設置取值也多樣,如像素、百分比、顏色、關鍵字等。對于像素和百分比,可以指定具體數值,如“font-size: 12px”表示字體大小為12個像素;也可以使用相對單位,如“width: 50%”表示元素寬度為父元素寬度的50%。對于顏色,可以使用HTML顏色名稱,如“color: red”表示字體顏色為紅色;也可以使用RGB或RGBA值,如“background-color: rgba(255, 0, 0, 0.5)”表示半透明紅色背景色。
p { font-size: 14px; color: #333; background-color: #f5f5f5; border: 1px solid red; margin: 10px; padding: 5px; } .my-class { font-weight: bold; } #my-id { width: 50%; height: 300px; } p.my-class { text-align: center; }
通過選擇器、屬性和值的組合,可以創建豐富多彩的頁面樣式。需要注意的是,CSS是層疊式樣式表,即若干CSS規則可以同時作用于同一元素,這時會按優先級和特定規則為每個元素應用樣式。