在HTML中可以指定開啟CSS的外部套用檔案。
在網頁開發中,CSS(層疊樣式表)用於定義 HTML 元素的外觀和佈局。CSS 有三種主要的使用方式:External CSS、Internal CSS 和 Inline CSS。每種方式都有其特定的優勢和使用情況。以下是對這三種方式的詳細解釋:
說明: External CSS 是將所有的 CSS 樣式寫在一個單獨的 .css 檔案中,然後使用 <link>
標籤將該檔案連接到 HTML 文件中。
優點:
範例:
在 HTML 文件的 <head>
部分連接 CSS 檔案:
<link rel="stylesheet" type="text/css" href="styles.css">
<--額外附加一份CSS檔,使得程式碼簡潔易維護-->
說明: Internal CSS 是在 HTML 文件的 <head>
標籤中,使用 <style>
標籤來定義 CSS 樣式。
優點:
範例:
在 HTML 文件的 <head>
部分定義 CSS:
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
<!--通常在頁面首部用style標籤來定義後面的CSS內容,層級較低-->
說明: Inline CSS 是直接在 HTML 元素的 style
屬性中定義樣式。
優點:
範例: 在 HTML 元素中直接使用 CSS:
<h1 style="color:blue; margin-left:30px;">Hello World</h1>
<!--直接在要變更處附加CSS屬性,方便變更,但使得code雜亂不易閱讀-->