CSS3+作业

h3418846435_

220人浏览 · 2025-10-07 14:28:11

h3418846435_ · 2025-10-07 14:28:11 发布

一、常用字体属性

1.字体族

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            font-size: 100px;
            font-family: "STCaiyun","Microsoft YaHei",sans-serif
        }
    </style>
</head>
<body>
    <div>尚硅谷</div>
</body>
</html>

2.字体风格3、字体粗细

4、字体复合属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            font: lighter normal 200px "STCaiyun","STHupo,sans-serif";
        }
    </style>
</head>
<body>
    <div>尚硅谷</div>
</body>
</html>

二、常用文本属性

1.文本颜色

2、文本间距

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            /*letter-spacing :110px;*/
            word-spacing :10px;
        }
    </style>
</head>
<body>
    <div>tomato watermelon 尚硅谷</div>
</body>
</html>

3、文本修饰

4、文本缩进

5、文本对齐水平

6、行高+注意事项

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #tt {
            font-size :40px;
            background :green;
            /* line-height :60px; */
            /* line-height :normal; */
            /* line-height :1.5; */
            line-height :150%;
        }
    </style>
</head>
<body>
    <div id="tt">王安宇王安宇王安宇王安宇王安宇王安宇王安宇王安宇王安宇王安宇王安宇王安宇</div>
</body>
</html>

7、文本对齐竖直

8、vrtical-align

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            font-size:100px;
            background-color:green;
        }
        span {
             font-size: 10px;
             /*vertical-align:top;*/
             /*vertical-align:baseline*/
             /*vertical-align:middle*/
             vertical-align:bottom;
        }
        .zhang {
            vertical-align:top;
        }
    </style>
</head>
<body>
    <div>
       尚硅谷X<span>尚硅谷x</span> 
    </div>
    <table border="1" cellspacing="0">
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr height="200">
                <td class="zhang">张三</td>
                <td>男</td>
                <td>19</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

三、列表相关属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
           /*list-style-type:none;*/
           /* list-style-position:outside;*/
           list-style:decimal outside; 
        }
        li {
            background-color:green;
        }
    </style>
</head>
<body>
    <ul>
        <li>《王安宇》</li>
        <li>《杯子》</li>
    </ul>
</body>
</html>

四、表格相关属性

1、边框相关属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table {
            /* border-width:3px;
            border-color:green;
            border-style:solid; */
            border:3px green solid;
        }
        th,td {
            border:1px red solid;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>19</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

2、表格独有属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table {
            border:3px green solid;
            width:800px;
            border-spacing:10px;
            table-layout:fixed;
            border-collapse:collapse;
            empty-cells:hiddle;
        }
        th,td {
            border:1px red solid;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>19</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

五、背景相关属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height:400px;
            border: black 2px solid;
            /*background-color: skyblue;
            background-image: url(../背景图片.png);
            background-position: left top;
            background-repeat:no-repeat;*/
            background:skyblue url(../背景图片.png) 1px no-repeat;
        }
    </style>
</head>
<body>
    <div>尚硅谷</div>
</body>
</html>

六、鼠标相关属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width:400px;
            height:500px;
            background-color:red;
            cursor:pointer;
        }
        a {
            cursor:help;
        }
        input {
            width: 20px
            /* cursor:url("../图片代码"),pointer; */
        }
    </style>
</head>
<body>
    <div>今朝玉醉<input type=text></div>
    <a href="#">百度</a>
</body>
</html>

七、作业

码道开发者社区

码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践

更多推荐

AI 已经能直接改设计稿了:Windows部署Penpot，接入Codex MCP实测

码道开发者社区

【AI 业务流架构师】AI 业务流架构师方法论：Agentic AI 范式转移与业务编排思维

2026 年，Anthropic CEO Dario Amodei 在 Code with Claude 大会上的一个判断广为流传：一个人运营一家十亿美元级公司的概率是 70%–80%。这句话听起来像科幻小说的设定，但它背后是一个正在发生的结构性变化——AI 把"执行"的成本压到了历史低点，同时把"编排"的价值推到了前台。这意味着我们需要一套新的思考框架，来回答两个问题：一个人如何拥有一个公司的产