CSS 術語詞典：注釋、屬性、選擇器等核心概念解析

注釋

CSS 中的注釋用斜杠和星號表示。

示例

/* 這是一個單行注釋 */

/* 這是一個
多行注釋 */

屬性

定義

屬性在選擇器內定義，通過指定一個屬性和一個值來設置。屬性和值之間用冒號分隔，每個屬性用分號分隔。

語法

selector { property: value; }

示例

h1 { color: blue; }

閱讀更多

• CSS 屬性參考

定義多個屬性

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

示例

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

內邊距（Padding）

內邊距是內容和邊框（元素邊緣）之間的間距。我們可以通過 CSS 調整這個值，使邊框更靠近或遠離內容。這里，id 為 'box' 的 div 將在四周獲得 10 像素的內邊距。

示例

#box { padding: 10px; }

閱讀更多

• CSS Padding屬性參考

外邊距（Margin）

外邊距是元素周圍的空白。外邊距越大，元素與其他元素之間的間距就越大。我們可以通過調整外邊距使 HTML 元素更靠近或遠離彼此。這里，id 為 'box' 的 div 將在上下獲得 10 像素的外邊距，在左右獲得 5 像素的外邊距。

示例

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

閱讀更多

• CSS margin 屬性參考

字體族（font-family）

字體族屬性設置 HTML 元素文本的字體。

語法

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

閱讀更多

• CSS font 屬性參考

選擇器

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

語法

selector { rules; rules; rules; }

閱讀更多

• CSS 選擇器參考

類名選擇器

你還可以通過類名選擇 HTML 元素。與 ID 選擇器不同，類選擇器選擇所有具有匹配類的元素。

示例

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

示例

.jumbo { text-size: 1000px; }

元素選擇器

你可以通過簡單地使用元素的名稱來選擇 HTML 元素。

示例

body { background-color: #333; }

示例

h1 { color: blue; }

示例

a { text-decoration: none; }

ID 選擇器

ID 選擇器用于選擇頁面上的單個元素。如“標識”一詞所示，ID 選擇器只選擇第一個具有匹配 ID 的元素。

示例

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

示例

a#codecademy { color: purple; }

閱讀更多

• CSS ID 選擇器參考

屬性選擇器

HTML 元素也可以通過其屬性進行選擇。

示例

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

示例

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

示例

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

閱讀更多

• CSS 屬性選擇器參考

子選擇器

你還可以通過使用父子嵌套來精確選擇元素。通過使用“大于”符號（>），你可以只選擇元素的直接子元素，向下只選擇一層。

示例

ul > li { display: inline-block; }

示例

ul a { text-decoration: none; }

示例

ul + span { display: inline; }

示例

a ~ h1 { color: blue; }

閱讀更多

• CSS 子選擇器

通用選擇器

通用選擇器（*）可以用來選擇特定范圍內的所有元素。請注意，通用選擇器是最耗費性能的選擇器，應謹慎使用。

示例

* { background-color: blue; }

示例

body * { color: red; }

示例

div > * { color: red; }

閱讀更多

• CSS 通用選擇器
• 簡化 CSS 選擇器
• CSS 基礎

偽類選擇器

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

示例

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

示例

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

閱讀更多

• CSS 偽類
• CSS 基礎

編程獅相關課程推薦

如果你想深入學習 CSS，可以查看編程獅上的 CSS 入門課程，這些課程涵蓋了 CSS 的基礎知識到高級技巧，幫助你全面提升 CSS 技能。