Css基本样式————文本-优快云博客

本文详细介绍了CSS中用于定义文本外观的属性，包括文本颜色、方向、行高、字符间距等，并展示了如何使用这些属性来调整文本对齐方式、添加文本装饰、设置首行缩进及转换文本大小写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS文本属性可定义文本外观

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

三、常用属性：

color 文本颜色

body{

    color: aqua;
}

<body>

    <p>查看颜色</p>

</body>

这里给body设置color,在p标签中可以看到效果

说明color这个属性是可以继承的

direction 文本方向

line-height 行高

letter-spacing 字符间距

text-align 对齐元素中的文本

p{

    color: red;

    text-align: right;
}

<body>

    <p>Hello World</p>

</body>

text-decoration 向文本中添加修饰

text-indent 缩进元素中文本的首行

h3{

    text-indent: 2em;
}

<body>

    <div>

        <h3>静夜思</h3>

        <p>床前明月光</p>

        <p>疑是地上霜</p>

        <p>举头望明月</p>

        <p>低头思故乡</p>

    </div>

</body>

也可以按百分比缩进

text-transform 元素中的字母

p{

    text-transform: capitalize;
}

<body>

    <div>

        <p>there is a beautiful girl</p>

        <p>a so lovely girl</p>

        <p>i always tell myself "never give up,never give up, never give up!"</p>

    </div>

</body>

capitalize:把所有单词的首字母大写

lowercase：全部变小写

uppercase：全部变大写

inherit(中文意思为“继承”):默认方式（不改变原文内容）

unicode-bidi 设置文本方向

white-sapce 元素中空白的处理方式

word-spacing 字间距

四、CSS3文本效果：

text-shadow:向文本添加阴影

p{

    text-shadow: 5px 5px 5px #FF0000;
}

<body>

    <div>

        <p>there is a beautiful girl</p>

        <p>a so lovely girl</p>

        <p>i always tell myself "never give up,never give up, never give up!"</p>

    </div>

</body>

text-shadow需要设置4个值

第一个值：相对于原本文字距左的距离

第二个值：距当前文本上方的位置

第三个值：清晰度

第四个值：背景颜色

word-wrpa:规定文本的换行规则

p{

    width: 100px;

    text-wrap: normal;
}

width:100px; 设置p元素整体宽度为100

text-wrap:normal; 自动换行

此外还有一个功能

如果<p></p>内写的是英文，"text-wrap"这个属性不会把当前的文字本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1771941