注釋

CSS 中的注釋用斜杠和星號(hào)表示。

示例

/* 這是一個(gè)單行注釋 */

/* 這是一個(gè)
多行注釋 */

屬性

定義

屬性在選擇器內(nèi)定義，通過(guò)指定一個(gè)屬性和一個(gè)值來(lái)設(shè)置。屬性和值之間用冒號(hào)分隔，每個(gè)屬性用分號(hào)分隔。

語(yǔ)法

selector { property: value; }

示例

h1 { color: blue; }

閱讀更多

• CSS 屬性參考

定義多個(gè)屬性

每個(gè) CSS 規(guī)則可以包含多個(gè)屬性。每個(gè)屬性都適用于選擇器所選的元素。

示例

h1 {
  font-size: 24px;
  font-weight: bold;
  border: 1px solid black;
  color: pink;
}

內(nèi)邊距（Padding）

內(nèi)邊距是內(nèi)容和邊框（元素邊緣）之間的間距。我們可以通過(guò) CSS 調(diào)整這個(gè)值，使邊框更靠近或遠(yuǎn)離內(nèi)容。這里，id 為 'box' 的 div 將在四周獲得 10 像素的內(nèi)邊距。

示例

#box { padding: 10px; }

閱讀更多

• CSS Padding屬性參考

外邊距（Margin）

外邊距是元素周?chē)目瞻?。外邊距越大，元素與其他元素之間的間距就越大。我們可以通過(guò)調(diào)整外邊距使 HTML 元素更靠近或遠(yuǎn)離彼此。這里，id 為 'box' 的 div 將在上下獲得 10 像素的外邊距，在左右獲得 5 像素的外邊距。

示例

#box { margin: 10px 5px 10px 5px; }

閱讀更多

• CSS margin 屬性參考

字體族（font-family）

字體族屬性設(shè)置 HTML 元素文本的字體。

語(yǔ)法

p { font-family: Arial, Helvetica, sans-serif; }

閱讀更多

• CSS font 屬性參考

選擇器

選擇器用于在 CSS 中選擇要樣式的 HTML 部分。你可以使用多種方法來(lái)選擇元素。

語(yǔ)法

selector { rules; rules; rules; }

閱讀更多

• CSS 選擇器參考

類(lèi)名選擇器

你還可以通過(guò)類(lèi)名選擇 HTML 元素。與 ID 選擇器不同，類(lèi)選擇器選擇所有具有匹配類(lèi)的元素。

示例

a.link { font-size: 12px; }

示例

.jumbo { text-size: 1000px; }

元素選擇器

你可以通過(guò)簡(jiǎn)單地使用元素的名稱(chēng)來(lái)選擇 HTML 元素。

示例

body { background-color: #333; }

示例

h1 { color: blue; }

示例

a { text-decoration: none; }

ID 選擇器

ID 選擇器用于選擇頁(yè)面上的單個(gè)元素。如“標(biāo)識(shí)”一詞所示，ID 選擇器只選擇第一個(gè)具有匹配 ID 的元素。

示例

#thatThingINeededToStyle {
  color: blue;
  font-size: 24px;
}

示例

a#codecademy { color: purple; }

閱讀更多

• CSS ID 選擇器參考

屬性選擇器

HTML 元素也可以通過(guò)其屬性進(jìn)行選擇。

示例

a[ rel="external nofollow" target="_blank" ] { color: purple; }

示例

input[type="text"] { width: 100px; }

示例

input[required] { border: 1px red solid; }

閱讀更多

• CSS 屬性選擇器參考

子選擇器

你還可以通過(guò)使用父子嵌套來(lái)精確選擇元素。通過(guò)使用“大于”符號(hào)（>），你可以只選擇元素的直接子元素，向下只選擇一層。

示例

ul > li { display: inline-block; }

示例

ul a { text-decoration: none; }

示例

ul + span { display: inline; }

示例

a ~ h1 { color: blue; }

閱讀更多

• CSS 子選擇器

通用選擇器

通用選擇器（*）可以用來(lái)選擇特定范圍內(nèi)的所有元素。請(qǐng)注意，通用選擇器是最耗費(fèi)性能的選擇器，應(yīng)謹(jǐn)慎使用。

示例

* { background-color: blue; }

示例

body * { color: red; }

示例

div > * { color: red; }

閱讀更多

• CSS 通用選擇器
• 簡(jiǎn)化 CSS 選擇器
• CSS 基礎(chǔ)

偽類(lèi)選擇器

偽類(lèi)選擇器可以用來(lái)根據(jù)某些規(guī)則縮小選擇范圍。

示例

li:first-child { color: red; }
li:last-child { color: red; }

示例

a:hover { text-decoration: underline; }
a:active { font-weight: bold; }

閱讀更多

• CSS 偽類(lèi)
• CSS 基礎(chǔ)

編程獅相關(guān)課程推薦

如果你想深入學(xué)習(xí) CSS，可以查看編程獅上的 CSS 入門(mén)課程，這些課程涵蓋了 CSS 的基礎(chǔ)知識(shí)到高級(jí)技巧，幫助你全面提升 CSS 技能。