資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在 HTML 中插入 CSS？
CSS 是 層疊樣式表 (Cascading Style Sheets) 的縮寫。它指定 HTML 元素如何在螢幕、紙張或其他媒體上顯示。它可以一次控制多個網頁的佈局，從而節省時間和精力。它可以用於各種樣式目的，例如更改頁面文字和背景的顏色、移除連結下劃線以及動畫影像、文字和其他 HTML 元素。
CSS 可以透過三種方式新增到 HTML 中。要為頁面上的單個 HTML 元素設定樣式，可以在 style 屬性中使用內聯 CSS。可以透過在 head 部分包含 CSS 來在 HTML 文件中包含內部樣式表。我們還可以連結到包含所有 CSS（獨立於 HTML）的外部樣式表。
內聯 CSS：style 屬性必須放在 HTML 元素內。
內部 CSS：需要將 <style> 元素放在 HTML 檔案的 head 部分。
外部 CSS：需要在 HTML 檔案的 head 部分使用 <link> 元素。
在本文中，我們將詳細討論這三種在 HTML 中插入 CSS 的方法。
內聯 CSS
內聯 CSS 允許我們在 HTML 中“包含”CSS。要包含內聯 CSS，必須在 HTML 元素的起始標籤內使用 style 屬性。語法如下：
<element_name style="CSS property: attribute_value">
內聯 CSS 也稱為“嵌入式樣式表”，優先於任何其他針對相同元素的 CSS。但是，不建議使用內聯樣式，因為它會導致大量重複，因為樣式無法在其他地方重用。然而，有時它們是最佳（或唯一）選擇，例如當針對具有不同樣式屬性的單個元素時。
示例
在這個例子中，我們將使用內聯 CSS 來設定 HTML 元素的樣式。
<!DOCTYPE html>
<html>
<head>
<title>An example of inline CSS</title>
</head>
<body>
<div style="border:2px solid blue; width:230px; padding:5px">
<p style="background-color:lightblue; color:navy; font-weight:bold">This is a paragraph styled using inline CSS</p>
</div>
</body>
</html>
內部 CSS
內部 CSS 是最常用的 CSS 形式之一，用於更改、設定樣式和修改單個網頁的獨特樣式。可以透過在 HTML 網頁的 <head> 部分包含 <style> 元素來使用內部 CSS。CSS 屬性和值仍然設定，但不是直接放在 style 屬性內，而是放在方括號中並由 CSS 選擇器定義。它可以應用於整個網頁，但不能應用於多個網頁，我們可以使用每個頁面上的相同程式碼來設定多個網頁的樣式。
<!DOCTYPE html>
<html>
<head>
<style>
CSS selector {
CSS property_name: attribute_value;
}
</style>
</head>
內部 CSS 比內聯 CSS 更好，因為它允許我們一次設定多個元素的樣式，而不是必須重複地向元素新增相同的 style 屬性。
它也適用於單頁網站，因為它將 CSS 和 HTML 分隔到不同的部分，同時將它們保留在同一個文件中。如果我們有一個多頁網站並希望全面進行更改，則必須開啟代表這些頁面的每個 HTML 檔案，並在每個 head 部分新增或更改內部 CSS。
示例
在這個例子中，我們將使用內部 CSS 來設定 HTML 元素的樣式。
<!DOCTYPE html>
<html>
<head>
<title>An example of internal CSS</title>
<style>
body{
background-color:lemonchiffon;
}
div{
width:300px;
background-color:sienna;
margin:10px;
padding:10px;
border:5px solid wheat;
}
p{
text-align:justify;
color:white;
font-size:18px;
}
</style>
</head>
<body>
<div>
<p>All the HTML elements including this paragraph have been styled using internal CSS.</p>
</div>
</body>
</html>
外部 CSS
外部樣式表被廣泛認為是設定 HTML 程式碼最有效的方法。它們的格式與內部 CSS 類似，但它們沒有包含在 <style> 標記中，也沒有放在 HTML 檔案的 head 部分。相反，它們與 HTML 完全分開，必須放在一個 CSS 檔案（副檔名為 .css）中。我們只需要在 head 部分包含此外部樣式表的連結，就可以在 HTML 程式碼中使用它。
<link rel="stylesheet" href="path_to_css-file">
外部 CSS 比內聯和內部樣式表有多個優點。
更改樣式表後，它會影響所有連結的頁面。
我們可以建立樣式類，然後可以將其應用於各種 HTML 元素。
它在所有網頁上都具有統一的外觀和感覺。
由於 CSS 檔案只下載一次，並根據需要應用於每個相關頁面，因此載入時間減少了。
示例
在這個例子中，我們將使用外部 CSS 來設定 HTML 元素的樣式。
mystyle.css
body{
background-color:linen;
}
div{
width:480px;
background-color:powderblue;
border:3px dashed midnightblue;
padding:5px;
margin:20px;
}
p{
color:white;
font-size:18px;
font-weight:bold;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>An example of external CSS</title>
<style>
body{
background-color:linen;
}
div{
width:480px;
background-color:powderblue;
border:3px dashed midnightblue;
padding:5px;
margin:20px;
}
p{
color:white;
font-size:18px;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p>External CSS has been used for styling this HTML document.</p>
</div>
</body>
</html>
677 次瀏覽
