Sample code sharing for six text styles that are very useful in CSS

Previous words

CSS text styles are style decorations that are relative to the content. Because in a cascading relationship, the content is higher than the background. So the text style is relatively more important. Some people don't know much about the difference between text and font styles, simply speaking, text is content, and fonts are used to display this content. This article describes the text-related styles in detail

First Line Indent

Defined

The first line indent is the indentation of the first line of the paragraph, which is a commonly used text formatting effect. Generally speaking, Chinese writing begins with two empty panes, similar to this

[note] This property can be a negative value

Text-indent

Value: <length> | <percentage> | Inherit

Initial value: 0

Applies To: block-level elements (including block and Inline-block)

Inheritance: There are

Percent: relative to the width of the containing block

Application

"Hanging indent"

p{    width:200px;    border:1px solid black;    Text-indent: -1em;//key code    padding-left:1em;//key Code}

"Drop Cap"

p{    width:200px;    border:1px solid black;    Text-indent:0.5em;} p:first-letter{    font-size:30px;    Float:left;}

Horizontal alignment

Defined

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

Text-align

Value: Left | Center | Right | Justify | Inherit

Initial value: Left

Applies To: block-level elements (including block and Inline-block)

Inheritance: There are

Justify on both sides

When the horizontal alignment is justified, the word-spacing may adjust so that the text is dropped exactly on the entire line. If you specify a length value for letter-spacing, letter-spacing is not affected by the justification unless the letter-spacing value is normal

IE compatible

For ie7-browsers, using text-align will not only change the horizontal alignment of text, but will also change the horizontal alignment of descendant 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;}

<p class= "box" >    <p class= "in" > Test text </p></p>

Word interval

A word interval is a word spacing that is used to set the spacing between text or words. In fact, "word" represents a string consisting of any non-whitespace character, surrounded by some kind of whitespace

[note] The spacing between words is separated by spaces = word-spacing + Space size

[note] The word interval can be negative

Word-spacing

Value: <length> | normal | Inherit

Initial value: normal (default = 0)

Applies to: all elements

Inheritance: There are

Letter Spacing

The letter spacing refers to the space between characters

[note] The letter interval can be negative

Letter-spacing

Value: <length> | normal | Inherit

Initial value: normal (default = 0)

Applies to: all elements

Inheritance: There are

Text conversion

Text conversion for handling uppercase and lowercase conversions in English

Text-transform

Value: Uppercase (all caps) | lowercase (all lowercase) | Capitalize (capital letter) | none | Inherit

Initial value: None

Applies to: all elements

Inheritance: There are

Text decoration

Defined

Text decorations to provide cosmetic lines for text

[note] The color of the text decoration line is the same as the text color

Text-decoration

Value: none | [Underline (underline) | | | overline (DASH) | | Line-through (DASH)] | Inherit

Initial value: None

Applies to: all elements

Inheritance: None

Inherited

Text-decoration properties cannot be inherited, meaning that any adornment line on the child element text is the same as the color of the parent element. The adornment line on the child element text is actually the parent element, but just "passing".

[note] A non-conflicting text decoration line can appear more than one

At last

In the first line indent (text-index), horizontal alignment (text-align), Word interval (word-spacing), Letter spacing (letter-spacing), text conversion (text-transform), Text decoration ( Text-decoration) in these 6 text styles, the first line indent (text-index) and horizontal alignment (Text-align) can only be applied to block-level elements (including block and Inline-block), which is the most important