CSS(Cascading Style Sheets)是一種樣式表語言,用於描述 HTML 或 XML(包括如 SVG、XHTML 等語言)文件的呈現方式。CSS 是 Web 標準的一部分,由 W3C(World Wide Web Consortium)來維護。
以下是幾種常見的 CSS 規則格式:
- 選擇器和宣告塊 CSS 的基本構成部分包括選擇器(Selector)和宣告塊(Declaration Block)。選擇器用於選擇你想要樣式化的 HTML 元素,宣告塊包含一或多個宣告,每個宣告包含一個 CSS 屬性名和一個值,由冒號分隔,每個宣告以分號結尾。
h1 { color: red; font-size: 20px; }
- 類選擇器和ID選擇器 類選擇器(.className)用於選擇具有特定類別屬性的元素,ID選擇器(#idName)用於選擇具有特定 ID 屬性的元素。
.myClass { color: blue; }
#myID { color: green; }
- 群組選擇器 當你想為多個選擇器設定相同的樣式時,可以使用群組選擇器,選擇器之間用逗號分隔。
h1, h2, h3 { color: purple; }
- 組合選擇器 當你想選擇特定的 HTML 元素或特定情況下的元素,可以使用組合選擇器,例如子元素選擇器(child selector)、後代選擇器(descendant selector)、鄰接兄弟選擇器(adjacent sibling selector)和一般兄弟選擇器(general sibling selector)。
/* 子元素選擇器 */
div > p { color: orange; }
/* 後代選擇器 */
div p { color: orange; }
/* 鄰接兄弟選擇器 */
h1 + p { color: yellow; }
/* 一般兄弟選擇器 */
h1 ~ p { color: yellow; }
- 偽類和偽元素 偽類(Pseudo-classes)和偽元素(Pseudo-elements)用於選擇HTML元素的特定狀態或部分。
/* 偽類 */
a:hover { color: pink; }
/* 偽元素 */
p::first-line { color: brown; }
- 屬性選擇器 屬性選擇器用於選擇具有特定屬性或屬性值的元素。
input[type="text"] { color: grey; }
- @規則 有些 CSS 規則是以 @ 開頭的,例如 @media、@import、@keyframes、@font-face 等。
@media (max-width: 600px) {
body { font-size: 18px; }
}
以上是 CSS 的一些基本格式,但實際上 CSS 的內容和特性更加豐富,包括變數、計算功能、過渡、變形、動畫、排版、彈性盒子(Flexbox)、網格佈局(Grid)等等,都是 CSS 的重要部分。