(十四)CSS常用属性03

最新推荐文章于 2024-10-02 15:35:50 发布

cdxsc2015

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量77

点赞数

分类专栏： 0基础学前端文章标签： css

本文链接：https://blog.csdn.net/cdxsc2015/article/details/119392213

版权

0基础学前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

text-align

作用：设置文本的水平对齐方式（多行单行）
属性值：
（1）center 水平居中对齐
（2）left 水平居左对齐
（3）right 水平居右对齐

<!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>
        .center {
            background-color: skyblue;
            text-align: center;
        }
        .left {
            background-color: green;
            text-align: left;
        }
        .right {
            background-color: pink;
            text-align: right;
        }
    </style>
</head>
<body>
    <p class="center">这是一行文字,将要实现水平居中对齐</p>
    <p class="left">这是一行文字,将要实现水平居左对齐</p>
    <p class="right">这是一行文字,将要实现水平居右对齐</p>
</body>
</html>

text-decoration

作用：修改或添加文字线条修饰（下划线、上划线、中划线、删除线）
属性值：
（1）normal 正常没有修饰
（2）overline 上划线
（3）underline 下划线
（4）line-through 删除线、中划线

<!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>
        .none {
            text-decoration: none;
        }
        .over {
            text-decoration: overline;
        }
        .under {
            text-decoration: underline;
        }
        .through {
            text-decoration: line-through;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="none">没有线条</div>
    <div class="over">上划线</div>
    <div class="under">下划线</div>
    <div class="through">中划线</div>
    <del>我是一条删除线啊</del>
    <a href="#">我是本身带有下划线的a标签啊</a>
</body>
</html>

text-indent

作用：设置文本首行是否缩进
属性值：
（1）数字，单位为em 表示缩进多少个中文字符位置
（2）数字，单位为px 表示缩进多少像素
（3）百分比表示缩进文字所在标签的父级标签的width的百分比
注意：
（1）实际工作中，常用em
（2）数值区分正负，正表示向右缩进负表示向左缩进

<!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>
        .ex01 {
            width: 200px;
            font-size: 18px;
            text-indent: 2em;
        }
        .ex02 {
            width: 200px;
            font-size: 18px;
            text-indent: 10px;
        }
        .ex03 {
            width: 200px;
            font-size: 18px;
            /* 这里的父级标签是body */
            text-indent: 2%;   
        }
    </style>
</head>
<body>
    <p class="ex01">第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字</p>
    <p class="ex02">第二段文字第二段文字第二段文字第二段文字第二段文字第二段文字第二段文字第二段文字第二段文字第二段文字第二段文字第二段文字</p>
    <p class="ex03">第三段文字第三段文字第三段文字第三段文字第三段文字第三段文字第三段文字第三段文字第三段文字第三段文字第三段文字第三段文字</p>
</body>
</html>