Styling Our Content

造型簡介

在過去的幾周里，我們討論瞭如何在網頁上獲取您需要的所有資訊。但是，如果您一直在追蹤並編寫程式碼，您可能會注意到您的頁面看起來不太吸引人。事實上，他們甚至可能看起來很糟糕…

到目前為止，我們還沒有為網頁添加任何樣式。樣式是我們為瀏覽器提供的規則，告訴它我們希望 HTML 元素在頁面上的外觀。我們可以更改大小、字體、顏色、位置、對齊方式和許多其他內容！但如何呢？

新增我們的第一個樣式

<p style="color: blue;">This text is blue now!</p>

登入後複製

就是這樣！如果您好奇，請將其複製並貼上到文件中，然後在瀏覽器中開啟它。你看到了什麼？文字現在是藍色的！不錯！

那麼，這是怎麼回事？我們用段落元素包圍文字內容，並為該段落元素賦予樣式屬性。請注意開頭

中的 style=標籤。在屬性值中，我們將顏色樣式指定為藍色值：「color: blue;」。

現在，這很酷，但是如果我們想讓文字在頁面上居中怎麼辦？

<p style="color: blue; text-align: center;">This text is blue and centered!</p>

登入後複製

我們需要更改的只是 style 屬性中的值！強大的！但是該值屬性發生了什麼事？我們以前沒看過這種語法！這就是CSS！但是等等，如果我們正在編寫 HTML，為什麼它會在這裡？

我們是！但 HTML 並不是為樣式而設計的；它是為樣式而設計的。它是為結構和語義而設計的（我們將在後面的文章中介紹）。如果我們想改變頁面的外觀，我們必須修改樣式表。預設情況下，我們的瀏覽器決定如何使用所謂的「使用者代理樣式表」來解釋 HTML 中的資訊。到目前為止您所看到的字體大小和顏色都是基於此！當我們將 CSS 新增至 style 屬性時，我們定義的樣式將覆寫使用者代理樣式表，而我們未定義的任何樣式將回退到該表。 CSS 代表層疊樣式表，這就是原因！

這太棒了。現在我們可以改變頁面的外觀，可能性是無限的。但想像一下，如果我們想要更多客製化：

<h1 style="font-size: 36px; 
    font-weight: 500; 
    text-align: center;
    text-decoration: underline;
    padding-bottom: 16px;
    color: #b0b1b2;
    opacity: 0.7;">Welcome to My Website!</h1>
<p style="font-size: 16px;
    font-weight: 300;
    text-align: left;
    padding-left: 100px;
    background-color: yellow;">I hope you're having a great day!</p>

登入後複製

哇…只有兩行文字就有很多程式碼…而且很難快速了解發生了什麼！這是一個問題，因為如果您稍後嘗試返回編輯此信息，那麼您將花費例如下所示更長的時間：

<h1>Welcome to My Website</h1>
<p>I hope you're having a great day!</p>

登入後複製

我們該如何解決這個問題？

CSS 簡介

為了防止 HTML 變得混亂，我們將所有樣式移至 .css 檔案中！對於小型項目，我們通常稱之為 style.css。除了整理我們的程式碼之外，將樣式移到新檔案中還實作了稱為關注點分離的程式設計概念。這意味著我們希望我們的程式碼被分割成它的功能元件。我們的程式碼不應該嘗試做所有事情，而應該分解成更小的部分，只做好一件事！

在此範例中，我們沒有使用一個檔案來建立內容並對其進行樣式設置，而是使用兩個檔案：一個用於建立內容，另一個用於設定樣式。憂慮分開！那麼，這會是什麼樣子呢？

h1 {
  font-size: 36px; 
  font-weight: 500; 
  text-align: center;
  text-decoration: underline;
  padding-bottom: 16px;
  color: #b0b1b2;
  opacity: 0.7;
}

p {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  padding-left: 100px;
  background-color: yellow;
}

登入後複製

啊，好多了！現在，我們的 HTML 檔案不再因為所有這些樣式而混亂！您在上面看到的是兩個 CSS 規則集。規則集由一個選擇器和兩個大括號組成，其中包含有關如何設定選擇器樣式的所有資訊。在此範例中，我們看到的兩個選擇器是 h1 和 p。這表示此處列出的所有樣式都將套用於任何 HTML

樣式。或

分別為元素！

我們可以對任何類型的元素執行此操作！事實上，我們可以透過多種方式使用 CSS 選擇器來選擇對象，但我們將在另一周再討論。現在，只要知道如果您輸入元素類型，您就可以在大括號內新增樣式！

我們定義了一些樣式，但是我們如何確保我們的瀏覽器知道要將它們應用到哪個檔案？

連結元素

第一個我們將學習的元素是元素。它有一些用例，但出於我們的目的，我們將使用它將 style.css 連結到 index.html。換句話說，這個元素告訴我們的瀏覽器該頁面使用哪個樣式表。實際上，它看起來像這樣：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link href="./style.css" rel="stylesheet"/>
  </head>
  <body>
    ...
  </body>
</html>

登入後複製

就是這樣！我們的 style.css 連結到我們的 HTML 文檔，並且樣式將被套用。

讓我們分解這個連結元素。首先，它是一個自關閉元素，因此我們不需要關閉標籤，而且它內部不包含任何內容。該元素有兩個必需的屬性：href 和 rel。這些是必需的，因為元素將外部資源連結到 HTML 文件。因此，我們需要告訴瀏覽器 1）該資源在哪裡以及 2）該資源的用途。 href 代表“超文本引用”，決定了位置，而 rel 或關係決定了用途！

要注意的是，使用 href 屬性時，您提供的路徑可以是絕對路徑，也可以是相對路徑。這表示您可以給出根目錄中的檔案路徑的位置，例如 /Users/username/Documents/project/style.css （絕對）。或者您可以相對於您正在處理的文件的位置來執行此操作，如上所述。檔案名稱前的 ./ 表示瀏覽器應在與 HTML 檔案相同的資料夾（或目錄）中尋找 style.css。您也可以在此處新增 URL；許多內容傳遞網路可讓您使用預製樣式表，您可以使用來連接這些樣式表。元素也是！