CSS-基礎

2024-04-27 15:16:00

字體：大中小

來源：轉載

供稿：網友

CSS 概述

CSS 指層疊樣式表 (Cascading Style Sheets)樣式定義如何顯示 HTML 元素樣式通常存儲在樣式表中把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題外部樣式表可以極大提高工作效率外部樣式表通常存儲在 CSS 文件中多個樣式定義可層疊為一

CSS 語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。例如：

h1 {color:red; font-size:14px;}

h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。

CSS引入方式

行內式

<p style="background-color: rebeccapurple">hello yuan</p>

嵌入式

<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>

鏈接式

CSS 選擇器

元素選擇器，文檔的元素就是最基本的選擇器，例如：

html {color:black;}h1 {color:blue;}h2 {color:silver;}

通用選擇器，匹配任何元素，例如：

* { margin:0; padding:0; }

類選擇器，為了將類選擇器的樣式與元素關聯，必須將 class 指定為一個適當的值。例如：

語法*.important {color:red;}.important {color:red;}<h1 class="important">This heading is very important.</h1>

ID 選擇器，ID 選擇器前面有一個 # 號，例如：

#intro {font-weight:bold;}

屬性選擇器，如果希望選擇有某個屬性的元素，例如：

[title] {color:red;}a[href] {color:red;}a[href][title] {color:red;}planet[moons="1"] {color: red;}根據部分屬性值選擇：[abc~="def"] 選擇 abc 屬性值包含 "def" 的元素[abc^="def"] 選擇 abc 屬性值以 "def" 開頭的所有元素[abc$="def"] 選擇 abc 屬性值以 "def" 結尾的所有元素[abc*="def"] 選擇 abc 屬性值中包含子串 "def" 的所有元素

后代選擇器，例如：

h1 em {color:red;}

子代選擇器，只選擇某個元素的子元素，例如：

h1 > strong {color:red;}

相鄰選擇器，如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器，例如：

h1 + p {margin-top:50px;}

選擇器分組，如果您想把很多元素顯示為灰色，可以使用類似如下的規則：

body, h2, p, table, th, td, PRe, strong, em {color:gray;}

CSS 偽類

CSS 偽類用于向某些選擇器添加特殊的效果。語法

selector : pseudo-class {property: value}selector.class : pseudo-class {property: value}

錨偽類 在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。

a:link {color: #FF0000} /* 未訪問的鏈接 */a:visited {color: #00FF00} /* 已訪問的鏈接 */a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */a:active {color: #0000FF} /* 選定的鏈接 */

提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。提示：偽類名稱對大小寫不敏感。

CSS 偽元素

偽元素的語法：

selector:pseudo-element {property:value;}selector.class:pseudo-element {property:value;}

“first-line” 偽元素用于向文本的首行設置特殊樣式。注釋：”first-line” 偽元素只能用于塊級元素。注釋：下面的屬性可應用于 “first-line” 偽元素：font，color，background，Word-spacing，letter-spacing，text-decoration，vertical-align，text-transform，line-height，clear

“first-letter” 偽元素用于向文本的首字母設置特殊樣式。注釋：”first-letter” 偽元素只能用于塊級元素。注釋：下面的屬性可應用于 “first-letter” 偽元素：font，color，background，word-spacing，letter-spacing，text-decoration，vertical-align，text-transform，line-height，clear

多重偽元素可以結合多個偽元素來使用。

“before” 偽元素可以在元素的內容前面插入新內容。下面的例子在每個 <h1> 元素前面插入一幅圖片：

h1:before { content:url(logo.gif); }

“after” 偽元素可以在元素的內容之后插入新內容。下面的例子在每個 <h1> 元素后面插入一幅圖片：

h1:after { content:url(logo.gif); }