Examples of common CSS text styles

This article introduces the summary of common CSS text styles to coders, this includes text-indent in the first line of a paragraph, text-indent in the font, text-align in the font align, and word-spacing settings among other common text processing methods popular to the masses. For more information about the code farmers, see. CSS text styles are style Modifications Relative to the content. Because the content in the cascade relationship is higher than that in the background. Therefore, text styles are more important. Some people do not know much about the differences between text and font styles. Simply put, text is content, while fonts are used to display this content. This topic describes text styles in detail.

Css text-indent first line indent

Definition: the first line indent refers to the first line indent of a paragraph, which is a common text formatting effect. Generally, there are two spaces at the beginning of Chinese writing, similar to this.

Note: This attribute can be negative.

Text-indent value: | | Inherit

Text-indent Initial Value: 0

Text-indent applies to: block-level elements (including block and inline-block)

Text-indent inheritance: Yes

Text-indent percentage: The width relative to the contained block

CSS text-indent instance

The first line of the indent section is 50 pixels:

The text indent attribute is used to specify the indent of the first line of the text. P {text-indent: 50px;} p {text-indent: 50px;} p {text-indent: 50px;} p {text-indent: 50px ;}

Online operation

Read more: CSS text-indent

Css text-align Horizontal Alignment

Text-align definition: horizontal align is the horizontal alignment that affects the text in an element.

Text-align value: left | center | right | justify | inherit

Text-align Initial Value: left

Text-align applies to: block-level elements (including block and inline-block)

Text-align inheritance: Yes

Css text-align instance

H1, h2, and h3 elements set the text alignment:

CSS text-align instance
March 14, 2015
"When I was young, I dreamed of changing the world. When I was mature, I found that I could not change the world. I shortened my eyes, I decided to change my country only. When I entered the twilight years, I found that I could not change our country. My last wish was to change my family. However, this is also impossible. When I was lying in bed, I suddenly realized that, if I only changed myself at first, then I could change my family. With the help and encouragement of my family, I may do something for my country. Who knows? I may even change the world ."
Note:Reset the browser window size to see how "justify" works.

Online operation

See: CSS text-align

Css word-spacing word Interval

Word spacing is used to set the spacing between words or words. In fact, "word" represents a string composed of any non-blank characters and is surrounded by a blank character.

[Note] words are separated by spaces. The spacing between words is = word-spacing + space size.

[Note] the word interval can be negative.

Word-spacing value: | Normal | inherit

Initial Value of word-spacing: normal (0 by default)

Word-spacing applies to: All elements

Word-spacing inheritance: Yes

Css word-spacing instance:

The space between the specified segments should be 30 pixels:

This is some text. This is some text.

Online operation

Refer to: CSS word-spacing

Css letter-spacing letter Interval

Letter spacing refers to the Character spacing.

[Note] the letter interval can be negative.

Letter-spacing value: | Normal | inherit

Initial letter-spacing value: normal (0 by default)

Letter-spacing applies to: All elements

Letter-spacing inheritance: Yes

CSS letter-spacing instance

Set the letter spacing for h1 and h2 elements:

This is heading 1This is heading 2

Online operation

Read more: CSS letter-spacing

CssText-transformText Conversion　

Text-transform text conversion is used to process English case conversion.

Text-transform value: uppercase (all uppercase) | lowercase (all lowercase) | capitalize (first capital) | none | inherit

Text-transform Initial Value: none

Text-transform applies to: All elements

Text-transform inheritance: Yes

CSS text-transform instance

Convert text in different elements:

This is some text.
This is some text.
This is some text.

Online operation

Refer to: CSS text-transform

Css text-decoration text Modifier

Text-decoration text modifier is used to provide a modifier line for text

[Note] the text-decoration text modifier line is of the same color as the text line.

Text-decoration value: none | [underline (underline) | overline (upper line) | line-through (middle line)] | inherit

Text-decoration Initial Value: none

Text-decoration applies to: All elements

Text-decoration inheritance: None

CSS text-decoration instance

Set text decoration for h1, h2, h3, and h4 elements:

This is heading 1This is heading 2This is heading 3

Online operation

Read more: CSS text-decoration