## 一、概述 ### 1.1 什么是 CSS？ Cascading Style Sheets (CSS) 是一門指定文檔該如何呈現給用戶的語言。 在 HTML 中，使用標記語言來描述文檔的內容而不是它的樣式。使用 CSS 來指定它的樣式而不是它的內容。 ### 1.2 為什么使用 CSS？ CSS 幫助您將文檔信息的內容和如何展現它的細節相分離。眾所周知，如何展現文檔的細節即為樣式（style）。將樣式從它的內容分離出來，以便能夠： * 避免重復 * 更容易維護 * 為不同的目的，使用不同的樣式而內容相同 ## 二、CSS 基本使用 ### 2.1 內聯樣式 內聯 CSS 也可稱為行內 CSS，它直接在標簽內部引入，顯著的優點是十分的便捷、高效；但是同時也造成了不能夠重用樣式的缺點，如果代碼行數到達一定長度不建議采用。 ``` <p style="color: red;">這是我學習 CSS 的第一天</p> ``` ### 2.2 選擇器 我們可以通過 CSS 選擇器選擇你想要的元素，從而向這些元素添加相應的樣式。 CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明構成。同一個聲明中的屬性和值組成一個名值對（property-value pairs），名值對用分號分隔。 ``` selector { property: value; property: value; ... } ``` * 標簽選擇器：我們可以將標簽名作為選擇器，為所有該標簽表示的元素添加樣式。示例如下： ``` <style> p { color: red; } </style> <p>這是我學 CSS 的第一天</p> <p>這是我學 CSS 的第二天</p> ``` * 類選擇器：通過設置元素的`class`屬性，可以為元素指定類名。文檔中的多個元素可以擁有同一個類名。可以使用類名作為選擇器，為擁有同一類名的元素添加樣式。類名選擇器使用`.類名`表示。示例如下： ``` <style> .color-red { color: red; } .color-blue { color: blue; } </style> <p class="color-red">這是我學 CSS 的第一天</p> <ul> <li class="color-red">蘋果</li> <li class="color-red">香蕉</li> <li class="color-blue">橙子</li> <li class="color-blue">菠蘿</li> </ul> ``` * ID 選擇器：通過設置元素的`id`屬性為該元素指定ID。每個ID在文檔中必須是唯一的。可以通過 ID 選擇器為某一個元素添加樣式。ID 選擇器使用`#ID名`表示。示例如下： ``` <style> #hello { color: green; } </style> <p id="hello">這是我學 CSS 的第一天</p> <p>這是我學 CSS 的第二天</p> ``` ### 2.3 層疊和繼承 一個元素的樣式，可以通過多種方式來定義，而多種定義方式之間通過復雜的影響關系決定了元素的最終樣式。 對于層疊來說，主要的樣式來源如下： * 瀏覽器對HTML定義的默認樣式。 * 開發者定義的樣式，可以有三種形式： * 定義在外部文件（外鏈樣式）：在實際開發中主要是通過這種形式定義樣式。 * 在頁面的頭部定義（內聯樣式）：通過這種形式定義的樣式只在本頁面內生效。 * 定義在特定的元素身上（行內樣式）：這種形式多用于測試，可維護性較差。 嵌套的標簽構建了網頁元素的層級關系。此時父級元素的樣式也會被子類元素繼承。如下： ``` <style> p { color: red; text-decoration: underline; } </style> <p>這是我學<strong>CSS</strong>的第一天</p> ``` ## 三、CSS 常用樣式 ### 3.1 文本樣式 * `color`顏色 ***** * `font-size`文字大小 * `font-weight`文字粗細 * `font-family`字體集 * `font-variant`字體變體 * `font-style`字體樣式 ***** * `text-align`文字對齊 * `text-decoration`文字裝飾 * `text-indent`文字縮進 * `text-shadow`文字陰影 ***** * `line-height`行高 * `word-spacing`單詞間距 * `letter-spacing`字母間距 ### 3.2 顏色 * `關鍵字`：red、blue、black等 * `rgb坐標值`：rgb(255, 0, 0)、rgb(0, 0, 255)、rgb(0, 0, 0)等 * `十六進制值`：#ff0000、#0000ff、#000000等 ### 3.3 列表 * `list-style-type`列表樣式類型 * `list-style-image`列表樣式圖片 ### 3.4 內容 * 內容文字：CSS可以在元素的前后插入文本：在選擇器的后面加上`::before`或者`::after`。在聲明中，指定`content`屬性，并設置文本內容。 * 內容圖片：可以通過將`content`屬性值設置為某個圖片的URL，可以將圖片插到元素的前面或后面。 * 背景圖片：將`background`的值設為圖片的URL可以將圖片設置成元素的背景圖。 ## 四、偽類 CSS偽類（pseudo-class）是加在選擇器后面的用來指定元素狀態的關鍵字。 偽類不僅可以讓你為符合某種文檔樹結構的元素指定樣式，還可以為符合某些外部條件的元素指定樣式：瀏覽歷史(比如是否訪問過 (`:visited`)， 內容狀態(如`:checked`), 鼠標位置 (如`:hover`)。 ``` selector:pseudo-class { property: value; } ``` * `:link`是用來選中元素當中的鏈接 * `:visited`表示用戶已訪問過的鏈接 * `:hover`適用于用戶使用指示設備虛指一個元素的情況 * `:active`匹配被用戶激活的元素 * `:focus`表示獲得焦點的元素 * `:checked`表示任何處于選中狀態的元素