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)來改變該元素的樣式效果。
沒有留言:
張貼留言