CSS中的文本格式

最新推荐文章于 2024-09-26 13:12:25 发布

cumtb2002

最新推荐文章于 2024-09-26 13:12:25 发布

阅读量446

点赞数

文章标签： css css3 html python 正则表达式

原文链接：https://www.includehelp.com/code-snippets/text-formatting-in-css.aspx

版权

CSS文字格式 (CSS text formatting)

CSS text properties allow you to style your text in various ways very easily. Such as color, alignment, spacing, direction, etc.

CSS文本属性使您可以轻松地以各种方式设置文本样式。例如颜色，对齐方式，间距，方向等。

文字颜色(颜色属性) (Text Color (color property))

The color property is defined by the CSS. We can either write the name of the color or the color code to use our color on the site.

color属性由CSS定义。我们可以在网站上写下颜色的名称或颜色代码以使用我们的颜色。

Syntax:

句法：

    Element{
        color:white; //#000000
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        h1 {
            color: red;
        }
        
        p {
            color: green;
        }
    </style>
</head>
<html>

<body>
    <p>HELLO WORLD!</p>
    <h1>HEADING</h1>
</body>

</html>

Output

输出量

文本对齐(text-align属性) (Text Alignment (text-align property))

text-align property is used to align text horizontally. The possible values of this property could be: left, right, center, justify and inherit.

text-align属性用于水平对齐文本。该属性的可能值为： left ， right ， center ， justify和Inherit 。

Syntax:

句法：

    Element{
        text-align:right;
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        h1 {
            Text-align: center;
        }
        
        p {
            Text-align: right
        }
    </style>
</head>
<html>

<body>
    <p>HELLO WORLD!</p>
    <h1>HEADING</h1>
</body>

</html>

Output

输出量

文字修饰(文字装饰属性) (Text Decoration (text-decoration property))

The text-decoration property is used to remove or set decorations from the text. The possible values of this property could be: none, underline, overline, blink, line-through and inherit.

文本装饰属性用于从文本中删除或设置装饰。该属性的可能值为： none ，下划线， overline ， blink ， line-through和Inherit 。

Syntax:

句法：

    Element{
        text-decoration: overline;
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        h1 {
            text-decoration: none;
        }
        
        h2 {
            text-decoration: overline;
        }
    </style>
</head>
<html>

<body>
    <h1>HELLO WORLD!</h1>
    <h2>HEADING</h2>
</body>

</html>

Output

输出量

文本转换(text-transform属性) (Text Transformation (text-transform property))

The text-transform property is used to change the cases of the text for example, it sets the case to lowercase or uppercase or just makes the initial letter capital. Possible values could be: none, capitalize, lowercase, uppercase and inherit.

text-transform属性用于更改文本的大小写，例如，将大小写设置为小写或大写，或者仅使首字母大写。可能的值可以是： none ，大写，小写，大写和Inherit 。

Syntax:

句法：

    Element{
        text-transform: none;
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        p {
            text-transform: uppercase;
        }
    </style>
</head>
<html>

<body>
    <p> Some content</p>
</body>

</html>

Output

输出量

文字缩进(text-indent属性) (Text Indentation (text-indent property))

The text-indent property comes in use when we have to indent the first line of text of any element. This property comes with the following values: percentage, length (specifying space) and inherit.

当我们必须缩进任何元素的第一行文本时，将使用text-indent属性。此属性具有以下值： percent ， length (指定空间)和Inherit 。

Syntax:

句法：

    Element{
        text-indent: 50%;
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        p {
            text-indent: 100px;
        }
    </style>
</head>
<html>

<body>
    <p> Some content</p>
</body>

</html>

Output

输出量

字间距(字间距属性) (Word Spacing (word-spacing property))

The word-spacing property deals with the spacing between the words. Possible values are: length, normal and inherit.

单词间距属性处理单词之间的间距。可能的值为： length ， normal和Inherit 。

Syntax:

句法：

    Element{
        word-spacing: 20px;
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        p {
            word-spacing: 50px;
        }
    </style>
</head>
<html>

<body>
    <p> Some content</p>
</body>

</html>

Output

输出量

字母间距(字母间距属性) (Letter Spacing (letter-spacing property))

The letter-spacing is a very useful property when it comes to putting spaces between the letters of the words. This can also have negative values as well. Its values are the same as word-spacing: normal, length and inherit.

当在单词的字母之间放置空格时，字母间距是非常有用的属性。这也可以具有负值。它的值与单词间距相同： normal ， length和Inherit 。

Syntax:

句法：

    Element{
        letter-spacing: 10px;
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        h1 {
            letter-spacing: -3px;
        }
    </style>
</head>
<html>

<body>
    <h1>Some content</h1>
</body>

</html>

Output

输出量

线高(线高属性) (Line Height (line-height property))

The line-height or leading property defines the height of a line of a text. Its possible values are length, percentage, inherit, number and normal.

line-height或Leading属性定义文本行的高度。它的可能值是长度，百分比，继承，数字和正常。

Syntax:

句法：

    Element{
        line-height:50%;
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        p {
            letter-spacing: 3px;
        }
    </style>
</head>
<html>

<body>
    <h1>Test page</h1>
    <p>
	IncludeHelp site is specially designed to provide help to students, 
	working professionals and job seekers. We are fully dedicated to make each tutorial 
	very simple to learn and understand. This site is not created for business purpose, 
	but for spreading education about programming languages and to help the concerned learners 
	out who are enthusiastic to learn new technologies.
    </p>
</body>

</html>

Output

输出量