在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