zoukankan      html  css  js  c++  java
  • 三、CSS样式——文本

    CSS文本

    概念:CSS文本属性可定义文本外观

       通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进

    属性 描述
    color 文本颜色
    direction 文本方向
    line-height 行高
    letter-spacing 字符间距
    text-align 对齐元素中的文本
    text-decoration 向文本添加修饰
    text-indent 缩进元素中文本的首行
    text-transform 元素中的字母
    unicode-bidi 设置文本方向
    white-space 元素中空白的处理方式
    word-spacing 字间距
    <!--index.html-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <p id="p_hello">hello CSS</p>
        <div>
            <h3>静夜思</h3>
            <p>窗前明月光,</p>
            <p>窗前明月光。</p>
            <p>窗前明月光,</p>
            <p>窗前明月光。</p>
        </div>
    
        <div>
            <p id="p_transform1">This Is A Test</p>
            <p id="p_transform2">this is a test</p>
            <p id="p_transform3">this is a test</p>
        </div>
    
        <div>
            <h1>test shadow!</h1>
            <p id="wrap">test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!</p>
        </div>
    </body>
    </html>
    /*style.css*/
    #p_hello{
        color: brown;
        text-align: center;
    }
    
    h3{
        text-indent: 0.5em;
    }
    
    #p_transform1{
        text-transform:lowercase ;  /*全部小写*/
    }
    #p_transform2{
        text-transform: uppercase;  /*全部大写*/
    }
    #p_transform3{
        text-transform: capitalize;  /*首字母大写*/
    }
    
    h1{
        text-shadow: 5px 5px 5px #ff0000;
    }
    
    #wrap{
        width: 100px;
        text-wrap:normal ;
    }
    /*
     h-shadow   必需。水平阴影的位置。允许负值。
     v-shadow   必需。垂直阴影的位置。允许负值。
     blur       可选。模糊的距离。
     color      可选。阴影的颜色。
     */

     运行结果:

  • 相关阅读:
    第一讲小结(位运算)
    新学期开始
    前缀表达式-怎样用空格分隔一个字符串
    计概期末前的小小总结
    动规作业-求数组不相邻元素之和的最大值
    网格-递归作业2-放苹果问题
    1025 数的划分(搜索和递推方法)
    网格-递归作业 集合里的乘法
    网格-递归作业 城堡问题
    去先导零的一个大坑
  • 原文地址:https://www.cnblogs.com/gyqqqqq/p/10533877.html
Copyright © 2011-2022 走看看