CSS樣式可直接在HTML文件的<style>...</style>
標籤內進行設定,又稱為內部樣式表(Internal style sheet)。
請先參考CSS 行內樣式(Inline styles) 在HTML元素的style屬性設定CSS。
CSS是與HTML搭配使用的,所以需要建立一份HTML文件welcome.html
。請參考在Visual Studio Code建立第一個HTML文件。
welcome.html
建立好後將內容修改如下。
welcome.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>您好,歡迎光臨</h1>
<p>普通段落文字</p>
</body>
</html>
在瀏覽器開啟畫面如下。
到這裡為止HTML文件中的任何元素並未施加任何CSS設定。接下來會針對<p>
標籤來套用CSS。
在<head>...</head>
間加入<style>
標籤如下。
welcome.html
<!DOCTYPE html>
<html>
<head>
<style><!-- style元素 -->
</style>
</head>
<body>
<h1>您好,歡迎光臨</h1>
<p>普通段落文字</p>
</body>
</html>
CSS內部樣式表就是把CSS設定在<style>...</style>
內。
而<style>
標籤習慣放在<head>...</head>
中。
與CSS行內樣式的差別是,內部樣式表必須定義CSS樣式要套用在哪個HTML元素上,而「CSS選擇器(CSS selectors)」即用來選取要套用的HTML元素對象。
例如下面用CSS元素選擇器(Type selector)把元素<p>
的文字顏色(color
)改為藍色,背景顏色(background-color
)改為黃色。
welcome.html
<!DOCTYPE html>
<html>
<head>
<style>
p {
color:blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1>您好,歡迎光臨</h1>
<p>普通段落文字</p>
</body>
</html>
上例中CSS內部樣式表設定開頭的p
即為元素選擇器,選擇的對象為<p>
元素,然後將要修改的CSS屬性放在選擇器後的大括弧{ ... }
中。
在瀏覽器開啟畫面如下。
除了元素選擇器外,還有很多種其他選擇器,請參考CSS selectors。
接著新增以下CSS設定來修改<h1>
的樣式,把文字顏色變成紅色。
welcome.html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:red;
}
p {
color:blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1>您好,歡迎光臨</h1>
<p>普通段落文字</p>
</body>
</html>
同樣地,h1
為元素選擇器,選擇的對象為<h1>
元素。
在瀏覽器開啟畫面如下。
以上即為使用CSS內部樣式表(Internal style sheet) 來改變HTML元素的樣式。
參考:
沒有留言:
張貼留言