What are the text css styles?

Text css styles include: text color "color", text direction "direction", character spacing "letter-spacing", text horizontal alignment "text-align", text decoration "text-decoration", header Line indent "text-indent" etc.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Text css style

## colorSet text colordirectionSet text direction. letter-spacingSet character spacingline-heightSet line heighttext-alignText horizontal alignmenttext-decorationAdd decorations to texttext-indentIndent the first line of text in the elementtext-shadowSet the text shadowtext-transformControl the letters in the elementunicode-bidiSet or Returns whether the text has been rewritten vertical-alignText vertical alignmentwhite-spaceSet the processing method of blanks in elementsword-spacingSet the word spacing

Attribute	Description

The following is Let’s introduce some css text styles.

text-indentFirst line indent

First line indent is to indent the first line of a paragraph, which is commonly used text Formatting effects. Generally, when writing in Chinese, there are two blank spaces at the beginning, similar to this.

The value of this attribute is allowed to be negative.

Syntax:

text-indent:<length> | <percentage> | inherit

tip: The initial value is 0;

Applies to: block-level elements (including block and inline-block)

Inheritance : Yes

Percentage: relative to the width of the containing block

Case: first character sinking

div {
    width: 200px;
    border: 1px solid black;
    text - indent: 0.5em;
}
div: first - letter {
    font - size: 30px;
    float: left;
}

text-align horizontal alignment

Horizontal alignment affects the horizontal alignment of text within an element.

Syntax:

text-align: left | center | right | justify | inherit

Initial value: left

Apply to: block-level elements (including block and inline-block)

Inheritance: Yes

For IE7-browser, using text-align will not only change the horizontal alignment of the text, but also change the horizontal alignment of descendant block-level elements

word -spacing word spacing

Word spacing refers to the word spacing, which is used to set the spacing between text or words. In fact, a "word" represents any string of non-whitespace characters surrounded by some kind of whitespace.

Note: Words are separated by spaces. The spacing between words = word-spacing space size

Note: Word spacing can be negative values

Syntax:

word-spacing: <length> | normal | inherit

Initial value: normal (default is 0)

Applies to: all elements

Inheritance: Yes

letter-spacing Letter interval

The letter interval refers to the character interval

Note: the letter interval can be a negative value

letter-spacing：<length> | normal | inherit

Initial value: normal (default is 0)

Applies to: All elements

Inheritance: has

text-transformText-transform

Text conversion is used to handle English case conversion.

Syntax:

text-transform:uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

Initial value: none

Applies to: all elements

Inheritance: yes

text-decorationText decoration

Text decoration is used to provide decorative lines for text.

Note: The color of the text modification line is the same as the text color.

Syntax:

text-decoration:none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

Initial value: none

Apply to: all elements

Inheritance: none

（Learning video sharing :

css video tutorial)

The above is the detailed content of What are the text css styles?. For more information, please follow other related articles on the PHP Chinese website!