6 common text styles in CSS and 6 CSS styles

6 common text styles in CSS and 6 CSS styles
× Contents [1] First line indent [2] horizontal alignment [3] Word interval [4] letter interval [5] Text conversion [6] Text Modifier

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.

 

First line indent

Definition

The first line of indentation is to indent the first line of the 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: <length >|< percentage> | inherit

Initial Value: 0

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

Inheritance: Yes

Percentage: The width relative to the contained block.

Application

[Suspension indent]

Div {width: 200px; border: 1px solid black; text-indent:-1em; // key code padding-left: 1em; // key code}

[Sinking the first word]

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

Horizontal Alignment

Definition

Horizontal alignment is the horizontal alignment that affects the text in an element.

Text-align

Value: left | center | right | justify | inherit

Initial Value: left

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

Inheritance: Yes

Alignment at both ends

When the horizontal alignment is on both ends, word-spacing may be adjusted so that the text can be properly put down in the entire line. If you specify a length value for the letter-spacing, the letter-spacing will not affect the alignment of the two ends unless the letter-spacing value is normal.

IE compatibility

For IE7-browsers, using text-align not only changes the horizontal alignment of text, but also changes the horizontal alignment of child block-level elements.

.box{    width: 200px;    height: 200px;    background-color: pink;    border: 1px solid black;    text-align: right;}    .in{    height: 100px;    width: 100px;    background-color: lightgreen;}

<Div class = "box"> <div class = "in"> test text </div>

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: <length> | normal | inherit

Initial Value: normal (0 by default)

Apply to: All elements

Inheritance: Yes

 

Letter Interval

Letter spacing refers to the Character spacing.

[Note] the letter interval can be negative.

Letter-spacing

Value: <length> | normal | inherit

Initial Value: normal (0 by default)

Apply to: All elements

Inheritance: Yes

 

Text Conversion

Text conversion is used to process English case conversion.

Text-transform

Value: uppercase (uppercase) | lowercase (lowercase) | capitalize (uppercase) | none | inherit

Initial Value: none

Apply to: All elements

Inheritance: Yes

 

Text Modifier

Definition

Text modifier is used to provide modifier lines for text

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

Text-decoration

Value: none | [underline (underline) | overline (upper line) | line-through (middle line)] | inherit

Initial Value: none

Apply to: All elements

Inheritance: None

Inheritance

The text modifier attribute cannot be inherited, meaning that any modifier line on the child element text is the same color as the parent element. The modifier line on the child element text is actually the parent element, but it is just "going through.

[Note] There may be multiple lines of non-conflicting text Modifiers