【20220928】css文字与文本

最新推荐文章于 2024-09-05 23:48:57 发布

zhangzhangxinya

最新推荐文章于 2024-09-05 23:48:57 发布

阅读量75

点赞数 1

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44931575/article/details/127097821

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文字样式

效果：在这里插入图片描述
代码实现：

<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>文字</title>
    <style>
        /* font-size是字体大小,font-weight是字体粗细，font-style是字体倾斜与否 */
        p {
            font-size: 30px;
            font-weight: 700;
            font-style: italic;
        }

        /* font-weight可以使二级标题字体变细 */
        h2 {
            font-weight: 400;
        }
    </style>
</head>

字体

效果：在这里插入图片描述
代码实现：

<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>字体</title>
        <style>
        * {
            font-size: 40px;
        }

        #div {
            font-family: 微软雅黑;
        }

        #div1 {
            font-family: 宋体;
        }

        #div2 {
            font-family: 黑体;
        }

        #div3 {
            font-family: 楷体;
        }

        #div4 {
            font-family: Arial;
        }

        #div5 {
            font-family: 幼圆;
        }
    </style>
</head>

<body>
       
    <!-- windows电脑默认是微软雅黑 -->
        <div id="div">微软雅黑</div>
        <div id="div1">宋体</div>
        <div id="div2">黑体</div>
        <div id="div3">楷体</div>
        <div id="div4">Arial</div>
    <div id="div5">幼圆</div>
</body>

字体font相关属性的连写

代码：

<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>复合属性</title>

    <style>
        p {
            /* font:style weight size family*/
            font: italic 700 66px 隶书;
        }
        div {
            /* 
            font:style weight size family
            只能省略前两个，前两个不写的话取默认值 normal 和 400
            */
            font: 66px 隶书;
        }
    </style>

</head>
<body>
    <p>我是一个段落</p >
    <div>我是一个Div</div>
</body>

文本缩进

<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>文本缩进</title>
    <style>
        p {
         font-size: 20px;
         text-indent: 2em;
          }
    </style>
</head>
<body>
    <p>
        近段时间，巴基斯坦不断遭受洪灾的侵袭，遇难人数也在不断上涨。作为巴基斯坦的邻国，中国也在第一时间为巴方提供了4亿元人民币的援助金，然而布林肯却借此机会喊话让中方免除巴基斯坦的债务，中方也对此进行了回应。
    </p>
    <p>
        近期，因为受到季风性降水的影响，巴基斯坦不断爆发洪灾。据巴基斯坦国家灾害管理局统计，截至到9月26日，巴基斯坦因为洪灾导致遇难的人数已经有1638人了，并且还有12865人为此受伤。
    </p>
</body>

文本水平对齐方式

<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>文本水平对齐方式</title>
    <style>
        /* text-align文本水平对齐方式，center是水平居中，left左，right右 */
        .title {
            text-align: center;
        }

        .title1 {
            text-align: right;
        }

        .title2 {
            text-align: left;
        }
    </style>
</head>

<body>
    <h1 class="title">新闻标题</h1>
    <h2 class="title1">新闻标题</h2>
    <h3 class="title2">新闻标题</h3>
    <!-- 图片居中用text-aligh center 修饰图片的父标签 -->
    <div style="text-align: center">
        <!-- 图片的标签是img 属性是src -->
        <img src="../html/imgs/图片.jpg" alt="加载失败" title="标题">
    </div>
</body>