CSS（Cascading Style Sheets）樣式是前端開發必備的技術。它可以控制網頁的版面、字體、顏色等樣式，以實現網頁風格的統一。本文將重點放在CSS樣式的寫法，幫助讀者更深入理解並應用CSS。 一、嵌入式樣式表嵌入式樣式表是將CSS樣式直接寫在HTML程式碼中的一種方式。在HTML文件的中使用標籤定義樣式。例如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><head> <style> body { background-color: #f2f2f2; color: #262626; } h1 { font-size: 36px; font-weight: bold; } 登入後複製在上述範例中，body元素的背景色為 #f2f2f2，文字顏色為 #262626，h1元素的字號為36像素，加粗展示。 二、外部樣式表外部樣式表是將CSS樣式單獨寫在一個外部的CSS檔案中的一種方式。在HTML文件的中使用標籤引入外部樣式表。例如： 登入後複製style.css檔案中的內容為：body { background-color: #f2f2f2; color: #262626; } h1 { font-size: 36px; font-weight: bold; }登入後複製這樣，HTML中的所有元素都可以從外部樣式表中取得樣式訊息，實現更清晰簡潔的HTML程式碼。 三、內嵌樣式內聯樣式是將CSS樣式直接寫在HTML標籤的style屬性中的一種方式。例如：Hello, world!登入後複製在上述範例中，h1元素的字體顏色為紅色，字號為36像素。 四、CSS選擇器CSS選擇器是用來選取HTML元素並套用樣式的機制。它可以根據元素的名稱、類別名稱、ID等屬性來定位元素，並繼承或覆寫其對應的CSS樣式。以下是CSS選擇器的常見用法：標籤選擇器：透過元素的標籤名稱定位元素並套用樣式。例如：h1 { color: red; }登入後複製類別選擇器：透過元素的class屬性定位元素並套用樣式。例如：.red { color: red; }登入後複製在HTML程式碼中，將需要套用樣式的元素的class屬性設為「red」即可實作字體顏色為紅色。 ID選擇器：透過元素的ID屬性定位元素並套用樣式。在HTML程式碼中，將需要套用樣式的元素的ID屬性設為「id」即可實現樣式效果。例如：#header { background-color: #f2f2f2; }登入後複製在上述範例中，元素的ID為“header”，實現了背景顏色為#f2f2f2的效果。 屬性選擇器：根據元素的屬性值來定位元素並套用樣式。例如：input[type="text"] { border: 1px solid #ccc; }登入後複製在上述範例中，所有type屬性值為「text」的input元素邊框為1像素粗的灰色實線。 後位選擇器：透過元素的父子關係來定位元素並套用樣式。例如：div p { color: #262626; }登入後複製在上述範例中，所有在div元素內的p元素的字體顏色為#262626。 以上是CSS選擇器的常見寫法，它們的靈活應用，可以實現繁瑣的樣式調整，讓網頁的佈局、字體、顏色等更加美觀。 五、總結本文介紹了CSS樣式的嵌入式樣式表、外部樣式表、內聯樣式、CSS選擇器等常見寫法，它們可以幫助開發者實現網頁風格的統一，創造出更美觀、更舒適的使用者體驗。在實際開發中，需要根據具體需求選擇適合的CSS樣式寫法，提高程式碼的可讀性和維護性。
