Html5中css设置文字的样式

qq_55555550

于 2024-06-13 18:00:08 发布

阅读量210

点赞数 2

分类专栏： HTML笔记文章标签： html5 css 前端

本文链接：https://blog.csdn.net/qq_55555550/article/details/139661054

版权

HTML笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>
        /* font-size字体大小 以px结尾 表示像素大小*/
        .size26{
            font-size: 26px;
        }
        /* font-weight字体粗细 400正常 700加粗*/
        .weight{
            font-weight: 700;
        }
        /* font-style字体倾斜 italic倾斜 normal正常 */
        .style{
            font-style:italic;
        }
        /* line-height段落行高 加上px就代表像素  不加px纯数字就代表倍数 */
        .height{
            /* line-height: 2;两倍行距 */
            line-height: 30px;
        }
        /* 使用技巧 当行高等于盒子的高度时 一段文字就会水平居中 */
        .boxtext1{
            height: 100px;
            width: 100px;
            background-color: aquamarine;
            line-height: 100px;
        }
        /* font-family设置字体 */
        .family{
            font-family: 黑体;
        }
        /* font 复合属性值  里面可以按顺序设置  文字倾斜 文字加粗 文字大小 文字行高 文字字体 */
        /* 其中文字大小和文字字体必须设置 */
        .font{
            font : italic 700 30px/2 宋体;
            /* font: 30px 楷体; */
            /* 其中文字大小和文字字体必须设置否则属性不会生效 */
        }
        /* text-indent 文本缩进 可以用px像素来间隔 也可以用 em格数来调用他*/
        .indent{
            /* text-indent: 30px; */
            text-indent: 2em;
        }
        /* text-align 文本的对齐  */
        .align{
            /* 左对齐 text-align: left; */
            text-align: center;
            /* 右对齐text-align: right; */
        }
        /* text-decoration修饰线  none没有线 underline下划线 line-through删除线 overline上划线 */
        /* 可以将链接中的下划线给删掉用 none */
        .decoration{
            text-decoration: none;
            /* text-decoration: underline;
            text-decoration: line-through;
            text-decoration: overline; */
        }
        
    </style>
</head>
<body>
    <div class="size26 weight">这是一个段落这是一个段落</div>
    <div class="style">这是一个段落这是一个段落</div>
    <p class="height">
        在演艺圈里，许多替身凭借出色的演技和个人努力被选中出道，杜奕衡正是其中之一
        他曾担任天王刘德华的“御用替身”达八年之久，如今不仅成功跻身“影帝”行列，更迎娶了刘德华的前女友为妻
        那么，他究竟是怎样成为天王的替身，成功地走红并最终抱得美人归的？这到底是怎样戏剧性的故事呢？
        “黄金替身”杜奕衡
        四川出生的杜奕衡于1978年问世，他在1998年参加了北京卫视的“欢乐总动员”节目。这是一档模仿秀类节目，杜奕衡因其与刘德华惊人相似的外貌和在节目中出色的表演才华而赢得了冠军。
        正是这次表演吸引了刘德华的注意，他决定邀请这个年轻人担任自己的替身。于是，从1999年起，杜奕衡开始了长达八年的替身生涯
        在《未来警察》、《狄仁杰之通天帝国》和《三国之见龙卸甲》等影片中，虽然刘德华出演了多个角色，但那时他仅仅是替身演员，因此除了剧组人员外，几乎无人知晓他的存在。
        他不是文替，而是非常辛苦且危险的武替。
    </p>
    <div class="boxtext1">这是一行文字</div>
    <div class="family">这是一行文字</div><br>
    <div class="font">这是一行文字</div>
    <p class="indent">在演艺圈里，许多替身凭借出色的演技和个人努力被选中出道，杜奕衡正是其中之一 他曾担任天王刘德华的“御用替身”达八年之久</p>
    <div class="align">这是一段文字</div>
    <a href="#" class="decoration">这是一个链接</a>

    
</body>
</html>