網頁

2019/7/21

CSS 行內樣式(Inline styles) 在HTML元素的style屬性設定CSS

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)來改變該元素的樣式效果。


沒有留言:

張貼留言