13文本属性

3.文本属性:
1) color: 文本颜色
值:
[1] 表示颜色的单词
[2] 色号: #ff0000, #00ff00, #0000ff, #000000, #ffffff
[3] rgb函数: rgb(255, 0, 0), ...
[4] rgba函数: 在rgb基础上添加了透明度. opacity

2) text-align: 文本水平对齐
值: left, right, center

3) line-height: 行高. 常用单位: px, em, rem
注: 行高不能小于文字大小

4) text-decoration: 文本装饰
值:
[1] underline: 下划线. 常用
[2] none: 无装饰. 常用
[3] line-through: 删除线. 常用

5) text-indent: 首行缩进. 常用单位: em, rem

6) vertical-align: 文本垂直对齐
值: top, bottom, middle
常用场景:
1) 同一行存在图片和文字时使用
2) 在表格的单元格中

7) text-shadow: 文本阴影
值由一组参数组成:
参数1: 必填. 表示阴影在水平方向上的平移距离. 常用单位: px
参数2: 必填. 表示阴影在垂直方向上的平移距离. 常用单位: px
参数3: 可选. 表示阴影的模糊半径(扩散半径). 常用单位: px
参数4: 可选. 表示阴影的颜色

<head>
    <meta charset="UTF-8">
    <title>文本属性</title>
    <style>
        .color{
            color: red;
        }
        .color2{
            color: rgba(216,104,93,0.8);
        }
        .test1{
            color: indianred;
            text-align: center;
            font-family: 仿宋;
            line-height: 200px;
            text-decoration: line-through;
        }
        .test2{
            color: teal;
            text-indent: 2rem;
        }
        .test3{
            vertical-align: middle;
        }
        .tbl tr td{
            width: 25%;
            height: 100px;
            vertical-align:middle;
            text-align: center;
            color: indianred;
        }
    </style>
</head>
<body>
        <div class="color">文本属性:colour</div>
        <div class="color2">文本属性:colour2</div>
        <hr>
        <div class="test1">水平对齐</div>
        <div >水平对齐</div>
        <div class="test1">
            <input type="button" value="提交">提交
        </div>

        <div class="test2">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
            wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
            wwwwwwwwwwwww</div>

        <hr>
        <div>
            文本水平对齐
            <img src="../images/book.jpg" alt="" class="test3" width="200" height="300">
        </div>
        <hr>
        <table border="1" cellpadding="5" cellspacing="0" class="tbl" align="center" width="90%" >
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>


</body>

posted on 2022-04-06 17:40 小小程序猿level1 阅读(57) 评论(0) 收藏举报