本文節選自霍格沃茲測試開發學社內部教材

CSS 就是層疊樣式表（Cascading Style Sheets），定義如何顯示 HTML 元素。HTML 元素的樣式通常存儲在層疊樣式表中。

為什么要使用CSS

使用 CSS 可以定義 HTML 元素顯示的樣式，其實是為了解決內容與表現分離的問題。通過 CSS 可以讓相同的一個頁面在不同的瀏覽器當中呈現相同的樣式。

CSS組成

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

選擇器通常是需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。屬性（property）是希望設置的樣式屬性（style attribute）。每個屬性有一個值，屬性和值被冒號分開。

要查看頁面中的 CSS 又需要用到瀏覽器的開發者工具了。打開 Elements 面板。在面板右側展示的就是 CSS。

CSS選擇器

CSS 首先需要通過選擇器來確定要定義樣式的元素。常用的選擇器有下面這幾種。

通用選擇器：*

id 選擇器：#id {}

class 選擇器：.className {}

元素選擇器：tag {}

屬性選擇器：[屬性] {}

CSS創建

外部樣式表

內部樣式表

上面例子中的?hr?和?p?就是用了元素選擇器來確定要定義樣式的元素。

內聯樣式：

這是一個段落。

常見CSS樣式

背景

background 簡寫屬性，可以跟下面的所有值

background-color 設置元素的背景顏色

background-image 把圖像設置為背景

background-position 設置背景圖像的起始位置

background-repeat 設置背景圖像是否及如何重復

文本

color 設置文本顏色

text-align 對齊元素中的文本

text-decoration 向文本添加修飾

text-indent 縮進元素中文本的首行

字體

font 在一個聲明中設置所有的字體屬性

font-family 指定文本的字體系列

font-size 指定文本的字體大小

font-style 指定文本的字體樣式

font-weight 指定字體的粗細

列表

list-style 把所有用于列表的屬性設置在一個聲明中

list-style-image 將圖像設置為列表項標志

list-style-type 設置列表項標值的類型

表格

border 設置表格邊框

border-collapse 設置表格的邊框是否被折疊成一個單一的邊框或者隔開

width 定義表格的寬度

text-align 表格中的文本對齊

padding 設置表格中的填充

定位

static：沒有定位，遵循正常的文檔流對象

relative：相對定位，元素的定位是相對其正常位置

fixed：元素的位置相對于瀏覽器窗口是固定位置

absolute：絕對定位，元素的位置相對于最近的已定位父元素

sticky：粘性定位，基于用戶的滾動位置來定位

定位

設置不同的定位方式

盒子模型

所有 HTML 元素可以看作盒子，在 CSS 中，“box model”這一術語是用來設計和布局時使用。

CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素。它包括：邊距，邊框，填充，和實際內容。

盒模型允許在其它元素和周圍元素邊框之間的空間放置元素。

Margin（外邊距）：清除邊框外的區域，外邊距是透明的。

Border（邊框）：圍繞在內邊距和內容外的邊框。

Padding（內邊距）：清除內容周圍的區域，內邊距是透明的。

Content（內容）：盒子的內容，顯示文本和圖像。

也就是說，當要指定元素的寬度和高度屬性時，除了設置內容區域的寬度和高度，還可以添加內邊距，邊框和外邊距。

獲取更多內容：https://qrcode.testing-studio.com/f?from=hwyun&url=https://ceshiren.com/t/topic/16586

點擊查看更多信息

CSS web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。