CSS3-基本文本属性Text（上）

最新推荐文章于 2024-09-02 11:19:23 发布

MelanceXin

最新推荐文章于 2024-09-02 11:19:23 发布

阅读量5.3k

点赞数 1

分类专栏： HTML+CSS+JS ASP.NET 文章标签： CSS3 Text 文本属性

本文链接：https://blog.csdn.net/Q672405097/article/details/89535186

版权

ASP.NET 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML+CSS+JS

15 篇文章 0 订阅

订阅专栏

对文本属性的操作

1. 对齐文本 Text-align
2. 文本方向 Direction
3. 指定字母间距，单词间距，行高 Letter-spacing,word-spacing,line-height
4. 首行缩进 Text-indent
5. 文本装饰 Text-decoration
6. 文本大小写转换 Text-transform
7. etc…

实例1：（对齐文本）

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin TextAlignCSS_Test</title>
    <style type="text/css">
        .class1 {
            text-align: center; 
            /* 文本对齐方式 	值可以为 left ,center, right  */
        }
    </style>
</head>

<body>

    <body>
        <p class="class1">MelanceXin </p>
        <p align="center">MelanceXin </p> 
        <!-- html5核心规范中设置文本居中的方式 -->
    </body>
</body>

</html>

实例2：（文本方向)

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin TestDirectionCSS_Test</title>
    <style type="text/css">
        .class1 {
            direction: rtl;
            /* 文本方向		值为  ltr,rtl   	(可以理解为 left to right 的简写) */
        }
    </style>
</head>

<body>

    <body>
        <p class="class1">MelanceXin </p>
    </body>
</body>

</html>

实例3：(指定字母间距，单词间距，行高)

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin TextWordCSS_Test</title>
    <style type="text/css">
        	.class1{
						letter-spacing:10px; 	
                        /* 字母间距 为 10px */
				}
				.class2{
						word-spacing:100px; 	
                        /* 单词间间距为100px */
				}
				.class3{
						line-height:100px; 	
                        /* 行高为100px */
				}
    </style>
</head>

<body>

    <body>
            <p class="class1">MelanceXin </p>
            <p class="class2">Hello world </p>
            <p class="class3">Hello world </p>			
            <!-- 文本内容输入大于一行能看出效果 -->
    </body>
</body>

</html>

实例4：（首行缩进）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>MelanceXin TextIndentCSS_Test</title>
    <style type="text/css">
        .class1 {
            text-indent: 50px;
           /* 首行缩进 为 50px  */
        }
    </style>
</head>

<body>
    <p class="class1">MelanceXin </p>
</body>

</html>

实例5：（文本装饰）

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin TextDecorateCSS_Test</title>
    <style type="text/css">
        .class1 {
            text-decoration: underline;
            /* 设置下划线  常用属性值  overline 上划线		line-throuth 删除线 */
        }
    </style>
</head>

<body>

    <body>
        <a href=".../ab.html">MelaceXin</a>
        <p class="class1">MelaceXin</p>
    </body>
</body>

</html>

实例6：（大小写转换）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>MelanceXin TextTransformUpToLowerCSS_Test</title>
    <style type="text/css">
        .class1 {
            text-transform: capitalize;
            /* 属性值：capitalize 每个单词首字母大写  uppercase 全大写		lowercase 全小写 （输入不区分大小写时可以用到）  */
        }
    </style>
</head>

<body>
    <p class="class1"> welcome to MelanceXin </p>
</body>

</html>