※ CSS結構：
- 選擇器：選擇哪一個HTML的元素。
- 樣式屬性：加上哪一個樣式的屬性。
- 設定值：樣式設定成哪一個設定值。
- 大括號｛｝：大括號裡面都是這個選擇器的樣式。
※ HTML和CSS的連結：＜link＞
原因：HTML檔案和CSS檔案原本是分開的，需要透過link的標籤來做連結。
※ CSS實作：
- 建立css資料夾。
- 建立首頁html和css檔案。
- css檔案：
div {
color: blue;
}
<!-- 載入css樣式 -->畫面顯示：
<link rel="stylesheet" href="./style.css">
※ .class 類別選擇器介紹：
● 建立box類別：index.html
<body>
<div class="large_box">box1</div>
<div class="middle_box">box2</div>
<div class="small_box">box3</div>
</body>
● 建立box類別樣式：style.css
.large_box {
width: 150px;
height: 150px;
}
說明：
- 「.」：代表class 選擇器，用來選取具有
class="large_box"的 HTML 元素。
div是一種區塊級元素（block-level element），通常作為容器使用，協助結構化網頁內容。在 CSS 中，如果使用div作為選擇器，會套用樣式到所有標籤上。不過，如果沒有搭配語意明確的 class 或 id，可能會讓 HTML 結構變得難以閱讀與維護。 因此，為了提升可讀性與可維護性，建議使用具意義的 class 名稱來針對特定區塊設定樣式。
※ ID選擇器介紹：通常是一對一
● 建立ID：index.html
<div id="John" class="large_box">box 1</div>
● 建立ID類別樣式：style.css
說明：「#」選擇器：代表ID。
#John {
background-color: cornflowerblue;
}
※ 總結：
- 我們用CSS的樣式去做為HTML的外表。
- 在HTML中加入link的連結，將css的樣式表載入HTML頁面中。
- 在CSS撰寫格式中，是寫一個選擇性名稱，再寫一個大括號，大括號裡面是樣式名稱和樣式的值，最後用一個分號做結尾。
- 常見三個選擇器：
- 元素選擇器：選擇HTML裡面有相同標籤名稱的元素。
- CLASS類別選擇器：選擇HTML裡面有class屬性的元素。
- ID選擇器：ID的重點是一對一，「#」代表ID。
