Chapter 4 CSS text style [bottom]-original of water

Chapter 4 CSS text style [bottom]-original learning points of water:

1. Text Summary

2. Text Style

3. Text Control

Lecturer: Li Yanhui

This chapter mainly discusses CSS text styles in HTML5. By setting text styles, we can change the font size, style, and text orientation.

I. Text Summary

In this lesson, we will focus on setting text content in CSS text styles. The style sheet is as follows:

Attribute name	Description	CSS version
Text-decoration	Various dashes appear in the decorative text.	1
Text-transform	Converts English text to uppercase or lowercase.	1
Text-shadow	Add a shadow to text	3
Text-align	Set text alignment	1, 3
White-space	Blank Processing Method in typographical layout	1
Letter-spacing	Set the spacing between letters	1
Word-spacing	Set the spacing between words	1
Line-height	Set Row Height	1
Word-wrap	Control Term	3
Text-indent	Set the indent of the first line of text	1

Ii. Text Style

CSS text styles include text decoration, English case conversion, and text shadow.

1. text-decoration

p {    text-decoration: underline;}

Description: underline the text. Attribute values:

Value	Description
None	Cancel the underlined text.
Underline	Underline the bottom of the text

Overline	Mark the text Header
Line-through	Deletes a line in the middle of the text.
Blink	Text flashing is basically not supported

// Cancel the underlined hyperlink

a {    text-decoration: none;}

2. text-transform

p {    text-transform: uppercase;}

Explanation: converts English text to uppercase or lowercase.

Value	Description
None	Restores the converted case-sensitive values to the default status.
Capitalize	Uppercase letters
Uppercase	Convert English to uppercase letters
Lowercase	Convert English to lowercase letters

3. text-shadow

p {    text-shadow: 5px 5px 3px black;}

Explanation: Add a shadow to the text. Four values, the first value: horizontal offset; the second value: vertical offset; the third value: Shadow blur (optional); and the fourth value: shadow color (optional ).

Iii. Text Control

CSS text styles also contain a set of styles for text access and control.

1. text-align

p {    text-align: center;}

Description: Specifies the text alignment.

Value	Description
Left	Align to the left. Default Value:
Right	Align right
Center	Center alignment
Justify	Content alignment
Start	Leave the text at the end of the Boundary
End	Leave the text at the end of the Boundary

Start and end are new functions of CSS3, but they are not currently supported by IE and Opera.

2. white-space

p {    white-space: nowrap;}

Explanation: process the blank layout.

Value	Description
Normal	Default value. The blank space is compressed and the text is automatically wrapped.
Nowrap	The blank space is compressed and the text does not wrap
Pre	The blank space is retained, and the line breaks in case of line breaks
Pre-line	The blank space is compressed, and the text will be full or wrap in case of line breaks
Pre-wrap	The blank space is retained, and the text will be full or wrap in case of line breaks

3. letter-spacing

p {    letter-spacing: 4px;}

Description: sets the spacing between texts.

Value	Description
Normal	Set the default spacing
Length Value	For example: "Number" + "px"

4. word-spacing

p {    word-spacing: 14px;}

Explanation: Set the spacing between English lists.

Value	Description
Normal	Set the default spacing
Length Value	For example: "Number" + "px"

5. line-height

p {    line-height: 200%;}

Explanation: Set the section line height.

Value	Description
Normal	Set the default spacing
Length Value	For example: "Number" + "px"
Value	For example, 1, 2, 3
%	For example: 200%

6. word-wrap

p {    word-wrap: break-word;}

Explanation: disconnect long English words.

Value	Description
Normal	Keep opening words
Break-word	Disconnect a word

7. text-indent

p {    text-indent: 20px;}

Description: sets the indent of the first line of text.

Value	Description
Normal	Set the default spacing
Length Value	For example: "Number" + "px"