HTML 樣式

Created: October-16, 2018

樣式規則描述瞭如何在 Web 瀏覽器上顯示文件。

樣式化 HTML 元素

在文件表示方面，HTML 非常有限。它最初被設計為一種呈現資訊的簡單方式。 CSS（層疊樣式表）於 1996 年 12 月由 W3C 引入，以提供更好的 HTML 元素樣式。

使用 CSS，可以輕鬆指定用於文字和背景的顏色、字型的大小和樣式、元素之間的空間、向元素新增邊框和輪廓以及許多其他樣式。

向 HTML 元素新增樣式

樣式資訊可以作為單獨的文件附加，也可以嵌入 HTML 文件中。這是將樣式資訊實現到 HTML 文件的三種方法（從最高優先順序到最低優先順序）。

內聯樣式 - 使用 HTML 開始標記中的 style 屬性。
嵌入式樣式 - 使用文件頭部分中的 <style> 元素。
外部樣式表 -使用 <link> 元素，指向外部 CSS 檔案。

在本教程中，我們將逐一介紹所有這些不同型別的樣式表：

內聯樣式

內聯樣式用於通過將 CSS 規則直接放入開始標記來將唯一樣式規則應用於元素。它可以使用 style 屬性附加到元素。

style 屬性包括一系列 CSS 屬性和值對。每個 property: value 對都用分號（;）分隔，就像寫入嵌入式或外部樣式表一樣。但它需要全部在一行中，即分號後沒有換行符。

以下示例將向你展示如何更改文字 color 和 font-size 文字：

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>

使用內聯樣式通常被認為是一種不好的做法。由於樣式規則直接嵌入在 html 標記內，因此它會使表示與文件內容混合在一起; 這其實違背了使用 CSS 的目的。

注意： 使用內聯樣式設定偽元素和類的樣式是不可能的。因此，你應該避免在標記中使用樣式屬性。使用外部樣式表是向 HTML 文件新增樣式的首選方法。

嵌入式樣式表

嵌入式或內部樣式表僅影響它們嵌入的文件。

嵌入式樣式表使用 <style> 標記在 HTML 文件的 <head> 部分中定義。你可以在 HTML 文件的 <head> 部分中定義任意數量的 <style> 元素。請參閱以下示例：

<head>
    <style type="text/css">
        body {background-color: YellowGreen;}
        p {color: Black;}
    </style>
</head>

外部樣式表

當樣式應用於許多頁面時，外部樣式表是理想的選擇。

外部樣式表將所有樣式規則儲存在單獨的文件中，你可以從站點上的任何 HTML 檔案進行連結。外部樣式表是最靈活的，因為使用外部樣式表，你可以通過僅更改一個檔案來更改整個網站的外觀。

你可以通過兩種方式附加外部樣式表 - 連結和匯入：

連結外部樣式表

可以使用標籤 <link> 將外部樣式錶連結到 HTML 文件。 <link> 標籤在 <head> 裡面：

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

匯入外部樣式表

@import 規則是載入外部樣式表的另一種方法。@import 語句指示瀏覽器載入外部樣式表並使用其樣式。

你可以通過兩種方式使用它。最簡單的是在文件的標題內。請注意，其他 CSS 規則可能仍包含在 <style> 元素中。

<style type="text/css">
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
</style>

同樣，你可以使用 @import 規則在另一個樣式表中匯入樣式表。

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}

注意： 所有 @import 規則必須出現在樣式表的開頭。樣式表中定義的任何樣式規則都會覆蓋匯入樣式表中的衝突規則。