HTML中字体系列（CSS）

最新推荐文章于 2024-05-25 16:50:19 发布

奈何彼岸花未开

最新推荐文章于 2024-05-25 16:50:19 发布

阅读量119

点赞数

分类专栏： CSS基本样式文章标签： css html 前端 java

本文链接：https://blog.csdn.net/weixin_75179509/article/details/129906509

版权

CSS基本样式专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* 字体大小font-size:数字+px
            font-size: 30px;
            /* 字体粗细font-weight:加数字100~900，关键字normal正常、bold加粗 */
            /* font-weight: 700;
            /* 字体样式（是否倾斜）font-style:normal不倾斜，italic倾斜 */
            /* font-style: italic; */
            /* 字体系列：font-family */
            /* font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;  */

            /* 连写 */
            font: italic 700 30px Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;

            /* 首行缩进text-indent：数字+px，em就是一个字的大小 */
            text-indent: 2em;

            /* 行高line-height */
            line-height: 1.5;
        }
        /* 文字水平居中 */
        .center{   
            text-align: center;
        }
        /* 文字垂直居中 */
        .vertical{
            height: 300px;
            line-height: 300px;
            background-color: aqua;
        }


        a{
            /* 取消a链接下的默认下划线 */
            text-decoration: none;
        }

        .outside-center{
            width: 500px;
            margin: 0 auto;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <p>我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签</p>
    <p class="center vertical">
        文字水平居中
    </p>
    <p class="center">
        <img src="../image/cat.gif" alt="">
    </p>
    <img src="../image/小狗.webp" alt="" style="text-align: left;">
    
    <div class="outside-center">
        <p class="center" style="text-indent: 0;">
            看什么看，我在盒子里呢
            <img  src="../image/cat.gif" alt="" height="200px" width="300px">
        </p>
    </div>
    
    <a href="#">我是一个a链接</a>
</body>
</html>

运行示例：