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元素的樣式。
參考：
沒有留言:
張貼留言