CSS樣式可直接在HTML元素的style屬性進行設定，又稱為行內樣式(Inline styles)。
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。
在<p>加入style屬性，並把style的值設定為CSS樣式的字體顏色(color)為藍色(blue)如下。
welcome.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>您好，歡迎光臨</h1>
<p style="color:blue;">普通段落文字</p> <!-- 加入style屬性及設定CSS字體顏色 -->
</body>
</html>
修改完後存檔，並在瀏覽器重新整理welcome.html頁面，重新載入後的畫面如下。
可以看到<p>元素的文字變成藍色了。
CSS的撰寫語法如下。
前面為CSS的屬性(properties)名稱，如上例中的color；後面為CSS屬性值(value)。兩者用冒號:隔開；並在每個CSS屬性設定後加上分號;結束。
接著在<p>設定另一個CSS屬性background-color:yellow把底色變為黃色。
welcome.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>您好，歡迎光臨</h1>
<p style="color:blue; background-color:yellow;">普通段落文字</p> <!-- 加入style屬性及設定CSS字體顏色與背景顏色 -->
</body>
</html>
可以看到字體與背景顏色兩個CSS設定後面都有加上分號;結尾。
重新整理後如下。
恭喜學會了如何對HTML元素使用CSS行內樣式(Inline styles)來改變該元素的樣式效果。
沒有留言:
張貼留言