03 使用css改變頁面樣式
阿新 • • 發佈：2020-08-19
在VSCode中建立03.html， 輸入以下程式碼：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>使用css改變頁面樣式</title> <style> /* 使用class選擇元素 */ .box { width: 100px; /* 設定寬度 */ height: 80px; /* 設定高度 */ border: 1px solid #000; /* 設定一個1畫素黑色邊框 */ margin: 10px; /* 兩個元素之間增加10畫素間距 */ } .box1 { background: #ff0000; /* 設定背景色，十六進位制，兩位分割，表示紅、綠、藍，範圍0x00~0xff */ } /* 使用id表示樣式，id不能重複 */ #box2 { background: rgba(0,255,0,255); /* 使用rgba表示顏色，分別是紅、綠、藍、透明度，範圍0~255*/ border-radius: 12px; /* 邊框圓角 */ } .word { color: blue; /* 文字顏色，這裡用英文單詞表示顏色 */ font-family: 微軟雅黑; /* 字型 */ font-size: 20px; /* 字號 */ font-weight: 600; /* 文字粗細 */ } .absolute { position: absolute; /* 絕對定位，從不是絕對定位的父元素算起*/ left: 200px; /* 到左側的距離 */ top: 200px; /* 到瀏覽器頂部距離 */ } /* 表格中的每個單元格 */ .tbl td { border: 1px solid red; } </style> </head> <body> <!-- 紅色方塊 --> <div class="box box1"></div> <!-- 綠色方塊 --> <div class="box" id="box2"></div> <!-- 一段文字 --> <p class="word">這是一段文字</p> <!-- 絕對定位 --> <div class="box absolute">絕對定位</div> <!-- 表格 --> <table class="tbl"> <thead> <tr> <td>表頭一</td> <td>表頭二</td> </tr> </thead> <tbody> <tr> <td>單元格一</td> <td>單元格二</td> </tr> <tr> <td>單元格三</td> <td>單元格四</td> </tr> </tbody> </table> </body> </html>
啟動Live Server，在瀏覽器中訪問檢視效果：http://localhost:5500/03.html
效果圖：
想學習更多css樣式，請參考：
w3school css參考手冊：https://www.w3school.com.cn/cssref/index.asp
runoob css參考手冊：https://www.runoob.com/cssref/css-reference.html
css3中文參考文件：http://css.cuishifeng.cn/index.html