Heyyy~歡迎來到「30天前端設計之旅」的DAY 9！今天將進入網頁設計中最具美學與創意的領域——CSS。CSS（階層式樣式表）是為網頁添加設計與佈局的關鍵技術。無論想要設計出色彩豐富的視覺效果，還是讓佈局變得更具層次感，CSS 都能實現。

CSS簡介與沿革
CSS（Cascading Style Sheets）於1996年首次亮相，主要功能在分離內容（HTML）與設計（CSS），使網頁設計更靈活。自從 CSS 出現以來，它經歷了多次更新和改進，現在已經成為現代網頁設計不可或缺的技術之一。

D-9的學習目標：

1. CSS的基本概念與作用：
   • CSS 的基本原理，用來控制 HTML 元素的樣式，包括色彩、字體、邊距、邊框、定位等。
2. CSS樣式規則與選擇器：
   • 樣式規則：CSS 樣式規則的基本結構包括選擇器（Selector）、屬性（Property）與屬性值（Value）。例如：p { color: red; } 這段 CSS 規則選擇了所有的 p 元素，並將其文字顏色設置為紅色。
   • 選擇器：學習常見的 CSS 選擇器類型，包括元素選擇器（p）、類選擇器（.classname）、ID選擇器（#idname）、屬性選擇器（[attribute=value]），以及更複雜的組合選擇器。
3. CSS的四種寫法：
   • 直接在HTML元素內使用 style 屬性設置樣式。例如：p style="color: red;"這是一段紅色文字。
   • 在HTML文件的 head 區域使用 style 標籤定義樣式規則，這種方法適合單一頁面的樣式設計。
   • 將 CSS 代碼寫在獨立的 .css 文件中，然後通過 link 標籤將這個文件引入HTML頁面。這是最常用的方法，因為它使樣式表能夠在多個頁面間共享和重用。
   • 引使用 @import 語法從另一個樣式表中引入樣式，這種方式通常用於將多個樣式表組合在一起。
4. CSS選擇器宣告方式：
   • 類別選擇器與ID選擇器的宣告：使用類別選擇器（以 . 開頭）和ID選擇器（以 # 開頭）來宣告CSS樣式。例如：.btn { background-color: blue; } 和 #header { font-size: 24px; }。
   • 屬性選擇器：通過[]篩選含有其條件的標籤。例如：[class] { font-size: 30px; }。
   • 萬用選擇器：使用 * 條件，所有標籤皆符合條件。例如：* { color: green; }

CSS 是將網頁從平凡變成出色的魔法工具，運用這些技術，讓網頁設計更加吸引人吧！🎨✨