怎麼在html頁面寫css-前端問答-PHP中文網

CSS（層疊樣式表）是用來設計和美化HTML頁面的技術。可以透過HTML文件內的 標籤或外部CSS檔案來建立和引用CSS樣式。

下面詳細介紹如何在HTML頁面中寫CSS樣式：

內嵌式 內嵌式是指將CSS樣式直接嵌入到HTML頁面中，使用&lt ;style>標籤將CSS代碼包裹起來。例如： 内嵌式CSS样式表 body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; text-align: center; } 欢迎来到我的网站 这是一段普通的文字

登入後複製 在上面的範例中，我們先使用 標籤設定文件的字元集，然後在 標籤中使用 標籤來寫CSS樣式。在 標籤內，我們設定了文件背景顏色、字型樣式和標題文字顏色。

注意， 標籤必須放在 標籤中，並且所有CSS樣式都必須放在 標籤內。在 標籤內直接使用CSS樣式是無效的。

外部式 外部樣式表是指我們將CSS樣式放在一個獨立的檔案中，然後透過 標籤將其引用到HTML頁面中。外部樣式表具有多次使用和維護方便的優點。 在這種情況下，我們需要使用一個帶有.css副檔名的檔案來儲存CSS樣式。該檔案可以放在伺服器上，也可以放在本機的電腦上。例如：

/* css/style.css */

body { background-color: #f0f0f0; font-family: Arial, sans-serif; }

h1 { color: #333; text-align: center; } 登入後複製 在HTML頁面中，我們需要使用 標籤將外部CSS檔案與HTML文件進行關聯。例如：

外部式CSS样式表 欢迎来到我的网站 这是一段普通的文字

登入後複製 在上面的程式碼中，我們使用 標籤將style.css檔案與HTML文件關聯起來。注意，href屬性必須指向CSS檔案的URL或相對路徑。如果CSS檔案與HTML文檔位於同一個目錄下，則href屬性可以直接指向CSS檔案名稱。

行內式 行內式是指將CSS樣式直接套用到HTML元素中。而不是在樣式表中定義它們。例如： 行内式CSS样式表 欢迎来到我的网站 这是一段普通的文字

登入後複製 在行內式中，我們在HTML元素的style屬性中定義CSS樣式。每個屬性必須用分號分隔，屬性值必須用引號包裹。請注意，使用行內式會使HTML程式碼變得混亂，難以維護。因此，在實際專案中通常不建議使用行內式。

總結 在HTML頁面中寫CSS樣式時，可以使用內嵌式、外部式和行內式方式來實作。其中，外部式是最常用的方式，它可以將樣式集中在一個檔案中，方便維護和多次使用。對於內嵌式和行內式，建議僅在必要時使用，否則可能導致HTML程式碼的混亂和難以維護。