10 文本属性-下划线、缩进、行高、对齐

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box1{
            /*下划线*/
            text-decoration: underline;

            /*无下划线*/
            text-decoration: none;

            /*上划线*/
            text-decoration: overline;

            /*删除线*/
            text-decoration: line-through;
        }

        /*缩进 
        px为绝对单位:默认16px=一个字体 除非自己设置比如大小20px 那就是20px=一个字体.
        
        */
        .box2{
            text-indent: 32px;
            /*行高:设置默认16px,32px就是行高设置两倍,行高一定要大于字体大小,行高和盒子高度一样,文本内容就是垂直居中*/
            line-height: 32px;
            background-color: red;
            /*中文文字间距设置*/
            letter-spacing: 5px;
            /*英文间距设置*/
            word-spacing: 10px;
        }

        /*em为相对单位:也就是相对一个标签,单位的变化而变化,一个em=xpx*/
        .box3{
            text-indent: 2em;
            font-size: 20px;
            line-height: 40px;
        }

        div{
            background-color: red;
            /*对齐设置 left center right*/  盒子里面文本排列方式
            text-align:center;
        }

        /*综合属性*/
        .box4{
            /*单属性*/
            font-family: 'Dubai','Arial';
            font-size: 20px;
            line-height: 60px;
            /*综合属性代替上面代码*/
            font:20px/3 'Dubai','Arial';
        }
    </style>
</head>
<body>
    <p class="box1">小圆圈</p>

    <p class="box2">
    hello world,不到一年前,2019年8月,***在甘肃考察时,专程前往敦煌莫高窟。那一次,他鲜明地提出:“保护好我们的国粹”“讲好敦煌故事”“只有充满自信的文明才能在保持自己特色的同时包容、借鉴、吸收各种文明的优秀成果”。
    </p>

    <p class="box3">
        2017年7月,鼓浪屿列入《世界遗产名录》后不久,***作出重要指示:“申遗是为了更好地保护利用,要总结成功经验,借鉴国际理念,健全长效机制,把老祖宗留下的文化遗产精心守护好,让历史文脉更好地传承下去。
    </p>

    <div>鼓浪屿列入《世界遗产名录》</div>

    <p class="box4">老祖宗留下的文化遗产精心守护好</p>
</body>
</html>


<!-- 宽高的区别:
font-size:设置字体大小  
width和height:设置文本内容的宽度和高度
line-height line-widht:设置行高,行高中文本内容默认垂直居中 -->
posted @ 2020-12-19 20:47  *!Walter!*  阅读(295)  评论(0编辑  收藏  举报