CSS 入門

Created: October-16, 2018

CSS 可以通過各種方式包含在 HTML 文件中。

CSS 入門

在本教程中，你將瞭解使用 CSS 向網頁新增樣式和格式資訊是多麼容易。但是，在我們開始之前，請確保你具有一些 HTML 的工作知識。

如果你剛開始從事 Web 開發，請從HTML這裡開始學習

好吧，讓我們開始使用最流行的樣式表語言。

在 HTML 文件中包含 CSS

你可以通過三種方式在 HTML 文件中包含 CSS：

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

在本教程中，我們將逐一介紹所有這三種插入 CSS 的方法。

內聯樣式

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

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

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

使用內聯樣式通常被認為是一種不好的做法。由於樣式規則直接嵌入 HTML 標記內，因此它會使表示與文件內容混合在一起; 這使程式碼難以維護，並否定了使用 CSS 的目的。

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

嵌入式樣式表

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

嵌入式樣式表使用 <style> 元素在 HTML 文件的 <head> 部分中定義。你可以在 HTML 文件中定義任意數量的 <style> 元素，但它們必須出現在 <head> 和 </head> 標記之間。這是一個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <style type="text/css">
        body { background-color: YellowGreen; }
        p { color: #fff; }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

提示： <style> 和 <link> 標籤（比如 type="text/css"）的 type 屬性定義樣式表的語言。這個屬性純粹是提供資訊的。你可以省略這一點，因為 CSS 是 HTML5 中的標準和預設樣式表語言。

外部樣式表

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

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

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

連結外部樣式表

在連結之前，我們需要先建立一個樣式表。讓我們開啟你最喜歡的程式碼編輯器並建立一個新檔案。現在在此檔案中鍵入以下 CSS 程式碼並將其另存為 style.css。

body {
    background: lightyellow;
    font: 18px Arial, sans-serif;
}
h1 {
    color: orange;
}

可以使用 <link> 標記將外部樣式錶連結到 HTML 文件。該 <link> 標籤在 <head> 內部，如本例所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

提示： 在所有這三種方法中，使用外部樣式表是定義和應用樣式到 HTML 文件的最佳方法。正如你可以通過外部樣式表清楚地看到的那樣，受影響的 HTML 檔案只需要對標記進行最小的更改。

匯入外部樣式表

@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 規則必須出現在樣式表的開頭。樣式表中定義的任何樣式規則都會覆蓋匯入樣式表中的衝突規則。但是，由於效能問題，不建議在另一個樣式表中匯入樣式表。