03 使用css改变页面样式

在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