css樣式寫法

CSS（Cascading Style Sheets）樣式是前端開發必備的技術。它可以控制網頁的版面、字體、顏色等樣式，以實現網頁風格的統一。本文將重點放在CSS樣式的寫法，幫助讀者更深入理解並應用CSS。

一、嵌入式樣式表 嵌入式樣式表是將CSS樣式直接寫在HTML程式碼中的一種方式。在HTML文件的 中使用 標籤定義樣式。例如：

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樣式寫法，提高程式碼的可讀性和維護性。