文本css样式有哪些

前言

CSS（Cascading Style Sheets） 是一种用于网页排版的样式表语言。它能够为HTML（Hypertext Markup Language）网页添加样式，比如文字大小和颜色、页面布局、背景图像以及字体样式等等。本篇文章将重点介绍与文本相关的CSS样式。

段落一：文本外观样式

text-decoration属性控制文本的修饰线，如下的html代码将在文本下方添加一个下划线。

        p {
           text-decoration: underline;
        }
        

text-transform即可实现字母大小变换的设置

            p.uppercase {
                text-transform: uppercase;
            }
        

text-shadow 属性定义的是文本添加阴影,这里是给文字添加了一个类，实现文本阴影的设置。

            p.shadow {
                text-shadow: 2px 2px 5px grey;
             }
        

font-style属性控制文本的字体样式，包括斜体、倾斜和正常。下面的代码将文本设置为斜体：

            p {
              font-style: italic;
            }
        

段落二：文本对齐和字间距

text-align属性可定义文本的水平对齐方式，包括left(默认值)、center、right。

            p {
                text-align: center;
            }
        

letter-spacing属性可定义字符间距，单位为px或em，用途是控制字符间距离。下面的代码为文本设置了间距为3px：

            p.spacing {
                letter-spacing: 3px;
            }
        

word-spacing属性可定义单词间距，单位为px或em，用途是控制单词间距离。

            p.word {
                word-spacing: 6px;
            }
        

段落三：文本大小和颜色

font-size属性定义文本的字体大小，其值可为像素、百分比或者em。下面代码将文本的大小设置为24px：

            p {
                font-size: 24px;
            }
        

color属性定义文本的颜色,下面的代码将文本颜色设置为红色：

            p {
                color: red;
            }
        

line-height属性定义了文本的行高，即一个文本行与一个文本行之间距离。行高可以帮助调整行间距和文本对齐。

            p {
                line-height: 1.5;
            }
        

段落四：文本属性继承性

CSS中有些属性具有继承性，即该属性可以继承父元素的值。例如，font和color属性都具有继承性。下面的代码可以使p元素继承父元素div的字体大小和颜色。

            div {
                font-size: 20px;
                color: blue;
            }
            p {
                font-family: Georgia, serif;
            }
        

当p元素未定义font-size和color属性时，它将继承父元素的值，即font-size为20px，color为蓝色。这些样式会应用于p元素中文本的字体系列，而不会改变元素的大小或位置。

总结：

通过本篇文章的介绍，我们了解了CSS中与文本相关的一些常用样式，包括文本外观、文本对齐和字间距、文本大小和颜色以及继承性。熟练掌握这些基础样式是Web开发的重要基础。