zoukankan      html  css  js  c++  java
  • 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:设置行高,行高中文本内容默认垂直居中 -->
  • 相关阅读:
    数据库添加字段的默认值
    Map中存放数组
    JSON字符串转换为Map
    java中Object转换成int或String类型方法
    Max_connect_errors – MySQL性能参数详解
    查看已经安装的软件
    eclipse远程调试tomcat
    eclipse控制台不限制显示的行数
    栈和堆(Stack && Heap)
    一道题引发的self和super
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14161011.html
Copyright © 2011-2022 走看看