如何使用CSS？

猿友 2021-01-18 16:38:25 瀏覽數(shù) (4311)

反饋

導讀：本章主要講解在 HTML 頁面中如何使用 CSS 樣式以及 CSS 的語法結構。通過本小節(jié)的學習，我們將掌握 CSS 語法中最為基礎核心的內容。這些內容也將成為后續(xù)我們編寫 CSS 樣式代碼必備的內容。

如何使用 CSS

CSS 樣式主要的應用場景是在 HTML 頁面中，其作用就是為 HTML 頁面設置在瀏覽器運行后的顯示效果。而在 HTML 頁面使用 CSS 樣式具有三種方式：

HTML 元素的 style 屬性的作用是為該元素設置 CSS 樣式。如下示例代碼所示展示了內聯(lián)樣式的寫法：

<div style="color: lightcoral;">這是測試內容.</div>

內聯(lián)樣式的語法結構如下圖所示：

但使用內聯(lián)樣式的缺點也非常明顯，具體缺點如下：

HTML 元素中的元素可以用來為當前 HTML 頁面的元素設置 CSS 樣式。如下示例代碼所示展示了內嵌樣式表的寫法：

<style type="text/css">
    p {
        color: lightcoral;
        font-size: 24px;
    }
</style>

使用內嵌樣式表的優(yōu)點在于解決內聯(lián)樣式中的兩個問題：

但內嵌樣式表依舊編寫在 HTML 文件中。如果一個 HTML 頁面中包含大量的 CSS 樣式的話，會導致 HTML 文件變得很大，從而瀏覽器加載 HTML 頁面時耗時變長。

CSS 樣式代碼可以定義在一個 CSS 文件中，這樣有效地解決了內嵌樣式表中的問題。具體的做法如下所示：

創(chuàng)建一個擴展名為 .css 的文件，并且將 CSS 樣式代碼編寫在這個文件中。
在 HTML 頁面中，通過元素中的元素將創(chuàng)建的 CSS 文件引入到 HTML 頁面中。如下示例代碼所示展示了 `` 元素如何引入 CSS 文件：<link rel="stylesheet" href="style/demo.css">1rel 屬性：用來定義引入文件與當前 HTML 頁面的關系，該屬性值必須是鏈接類型值。href 屬性：用來定義引入文件的 URL。說明：一個 HTML 頁面允許引入多個 CSS 文件，多個 CSS 文件的加載順序按照 HTML 頁面引入的順序進行加載。

需要注意的是，外聯(lián)樣式表不會與 HTML 頁面同步被瀏覽器加載。具體的加載過程如下所示：

如下圖所示展示了外聯(lián)樣式表的加載過程：

無論是以上三種方式引入 CSS 樣式的哪一種，我們都需要學習 CSS 的語法結構，這也是學習 CSS 后續(xù)內容的基礎。如下示例所示展示了 CSS 樣式的基本代碼結構：

p {
    color: lightcoral;
    font-size: 24px;
}

如下圖所示展示了CSS 的語法結構以及相關概念：

CSS 語法的基本結構可分為：

CSS 語法結構中除了選擇器之外，就是聲明了。CSS 聲明是一個由 CSS 定義的規(guī)則，具體的語法結構是一對鍵/值對形式。

CSS 聲明的語法結構可分為：

屬性（Properties）：用來定義 HTML 元素樣式的方式，是由 CSS 給定的。例如 color 屬性是用來定義元素的文本顏色等。
屬性的值（Property value）：用來定義 HTML 元素的樣式。例如 color 屬性的值可以是 lightcoral 等。注意：不同的 CSS 屬性對應的屬性值是不同的。具體的可以參考 MDN提供的參考文檔。
分隔符：是一個冒號（:），用來分隔 CSS 屬性和值的。
結束符：是一個分號（;），用來表示一個 CSS 聲明結束。