html怎麼連接css-前端問答-PHP中文網

HTML和CSS是前端技術中的重要組成部分，兩者合作能夠幫助頁面實現一個更好的外觀和互動體驗。本文將為大家介紹HTML如何與CSS關聯，實現頁面的樣式控制。

一、關於HTML和CSS

HTML是網頁的基礎結構，可以理解為房子的骨骼，它定義了網頁中的內容、排版、標籤和連結等。 CSS則是樣式表，可以理解為房子的裝修，它控制網頁的外觀、佈局和顏色等。

二、在HTML中加入CSS

在HTML文件中新增CSS樣式表有兩種方式，分別是內部樣式和外部樣式，以下將分別介紹：

內部樣式 內部樣式是在HTML文檔中的 和 標籤之間加上 標籤，之後在 標籤內編寫CSS樣式程式碼。例如：

My Website body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { color: #333333; } Welcome to my website This is the home page of my website

登入後複製 在上面的程式碼中， 標籤包含了CSS樣式，其中「body」標籤控制了網頁的背景色和字體，而「h1」標籤控制了標題顏色。

2.外部樣式

外部樣式是將CSS程式碼放在一個獨立的CSS檔案中，之後透過HTML文檔的 標籤將CSS檔案匯入到HTML文檔中。例如：

My Website Welcome to my website This is the home page of my website

登入後複製 在上面的程式碼中， 標籤指向了一個名為「style.css」的CSS文件，HTML程式碼將使用這個來控制網頁的樣式。

三、CSS選擇器

要了解如何建立CSS樣式，必須先了解CSS選擇器。選擇器是一種指定要新增樣式的HTML元素的方法。以下是一些常見的CSS選擇器：

1.元素選擇器

元素選擇器是使用標籤名稱作為選擇器的一種方法。例如，下面的CSS程式碼將所有的段落元素設定成顏色為紅色：

p { color: red; } 登入後複製 2.類別選擇器

類別選擇器是給HTML元素分配類別名稱，這些類別名稱可以在樣式表中使用來指定樣式。例如，下面的CSS程式碼將所有類別屬性為「my-class」的元素設定為紅色背景色和16pt的字體大小：

.my-class { background-color: red; font-size: 16pt; } 登入後複製 在HTML程式碼中，可以透過新增class屬性將此樣式套用到元素上，方式如下：

Hello, this is a paragraph

登入後複製 ID選擇器 ID選擇器是為一個HTML元素指定唯一的ID名稱，透過在樣式表中使用此名稱，可以為ID元素設定樣式。例如，下面的CSS程式碼將ID屬性值為「my-id」的元素設定為藍色背景和18pt字體大小：

#my-id { background-color: blue; font-size: 18pt; } 登入後複製 在HTML程式碼中，可以透過新增id屬性將此樣式套用到元素上，方式如下：

Hello, this is a paragraph

登入後複製 四、總結

在HTML中新增CSS樣式表可以輕鬆控制頁面的外觀和樣式，可以透過內部和外部樣式表兩種方式來實現。在編寫CSS樣式時，必須了解CSS選擇器，它們是指定要套用樣式的HTML元素的方法。透過組合使用這些技術，可以得到美觀且易於管理的頁面。