黑马CSS第三讲

最新推荐文章于 2024-05-17 17:19:19 发布

Beatmyselfonce

最新推荐文章于 2024-05-17 17:19:19 发布

阅读量143

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_74202561/article/details/134722183

版权

hello，今天是黑马css第三讲，（老习惯在上代码之前先废话亿会）博主最近在学linux Ubuntu版本，下周会开始更新Linux的内容，软件的话就基本上也得掌握这个技能，Linux的重要性不言而喻好吧，先不讲这么多了上代码

今天讲解设计div盒子、设计字体（这个跟之前那个不一样）、行高、盒子内嵌套文字、font复合属性。

<!-- 设计div盒子 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: brown;
        }

        .orange {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="red">div1</div>
    <div class="orange">div2</div>
</body>

</html>

<!-- 字体粗细 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            font-weight: 400;
        }

        div {
            font-weight: 700;
        }
    </style>
</head>

<body>
    <h3>h3标签</h3>
    <div>div标签</div>
    <br><br>
</body>

</html>

<!-- 字体大小 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 经验：谷歌浏览器文字有默认大小16px */
        p {
            /* font-size属性必须有单位，否则属性不生效 */
            font-size: 30px;
        }
    </style>
</head>

<body>
    <p>测试字体大小</p>
    <div>测试默认字体大小</div>
    <br><br>
</body>

</html>

</html>

<!-- 行高 -->
<!-- 属性值：数字+px；
数字（当前标签font-size属性值的倍数） -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 20px;
            /* 行高属性 */
            line-height: 2;
        }
    </style>
</head>

<body>
    <p>不过，一场晚会却让大家看到如今演员和歌手们的真实水平，网友通过专业软件对比，列举出了当晚真唱与假唱的嘉宾名单。
        其中41位歌手假唱，有人口型对不上，有人用力过猛，一看就是在演戏。
        不得不说，这次歌坛被扒的底裤都不剩了</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            background-color: skyblue;
            line-height: 100px;
            /* 注意：只能是单行文字垂直居中，就设置height=line-height先记住后面有介绍行高的图片 */
        }
    </style>
</head>

<body>
    <div>文字</div>
    <br><br>
</body>

</html>
<!-- 字体族 -->

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-family: 楷体;
        }
    </style>
</head>

<body>
    <div>测试文字</div>
    由于是两个文档建在一个html里所以这个楷体嵌套在上一个蓝色方盒子里了
</body>

</html>

<!-- font复合属性
使用场景：设置网页文字公共样式
复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
font:是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
注意：字号和字体值必须写 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 文字倾斜，字体大小是30px，行高2倍、楷体 */
        div {
            font: italic 700 30px/2 楷体;

        }
    </style>
</head>

<body>
    <div>测试font属性</div>
</body>

</html>

第一段代码运行效果如上

第二段代码运行效果如上

第三段代码运行结果如上

第四段代码运行如上

第五段代码运行如上

以上的内容是黑马课程但是我感觉我们有一节上课作业跟这个有联系感兴趣的同学可以试试

先放效果图做一下试试，然后对答案

效果图片

我这里是用外联的方式去做的，其实内联外联都一样看个人习惯吧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业11.30.css">
</head>

<body>
    <div>
        <ul>
            <li><a>雪域西藏</a>
            </li>
            <li><a href="">天府四川</a>
            </li>
            <li><a href="">稻城亚丁</a>
            </li>
            <li><a href="">神奇九寨</a>
            </li>
            <li><a href="">永恒三峡</a>
            </li>
            <li><a href="">雄秀峨眉</a>
            </li>
            <li><a href="">川藏万里</a>
            </li>
            <li><a href="">城市驿站</a>
            </li>
            <li><a href="">出国咨询</a>
            </li>
        </ul>
    </div>
</body>

</html>

div {
    background-color: #515151;
    font-size: 14px;
    color: #ffffff;
    border-bottom: #CF3 dashed 5px;
    margin: auto 300px;
    width: 1000px;
    height: 27px;
}

li {
    float: left;
    line-height: 27px;
    text-align: center;
    list-style-type: none;
}

a {
    color: #FFF;
    text-decoration: none;
    display: block;
    width: 100px;
}

a:hover {
    background-color: yellow;
    color: #9C6;
}

今天结束内容。

Beatmyselfonce

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马CSS第三讲

hello，今天是黑马css第三讲，（老习惯在上代码之前先废话亿会）博主最近在学linux Ubuntu版本，下周会开始更新Linux的内容，软件的话就基本上也得掌握这个技能，Linux的重要性不言而喻好吧，先不讲这么多了上代码。今天讲解设计div盒子、设计字体（这个跟之前那个不一样）、行高、盒子内嵌套文字、font复合属性。以上的内容是黑马课程但是我感觉我们有一节上课作业跟这个有联系感兴趣的同学可以试试。第一段代码运行效果如上。第二段代码运行效果如上。第三段代码运行结果如上。
复制链接

扫一扫