文本相关的属性

最新推荐文章于 2022-07-06 22:38:20 发布

杨宗健

最新推荐文章于 2022-07-06 22:38:20 发布

阅读量428

点赞数

分类专栏： CSS新手学习

本文链接：https://blog.csdn.net/Ameir_yang/article/details/66476309

版权

CSS新手学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、text-decoration属性（文本样式：下划线、删除线、上删除线）：

1.下划线（underline）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本相关的属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

2.删除线（line-through)：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本相关的属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

3.上删除线（overline）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本相关的属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

4.无（none）

最主要的作用是：去掉超链接下面的下划线。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本相关的属性</title>
    <base target="_self">
    <style type="text/css">
        .xxx{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">我是段落1</a>
    <br>
    <br>
    <a href="#" class="xxx">我是段落1</a>
</body>
</html>

效果图：

二、text-align属性（文本水平对齐）：

重要的值：center（居中）、left（居左）、right（居右）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字相关的属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            text-align: center/left/right;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

三、text-indent（文本缩进）：

一个em等于一个字的距离，两个em（2em）就是两个字的距离。

text-indent:2em;意思是文本缩进两个字的距离。

也可以用px，一个px就是一个像素。

text-indent:100px;意思是文本缩进100个像素格。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字相关的属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

杨宗健

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文本相关的属性

一、text-decoration属性（文本样式：下划线、删除线、上删除线）：1.下划线（underline）：文字相关的属性 p{ text-decoration: underline; } 我是段落2.删除线（line-through)：
复制链接

扫一扫