15th CSS Text style [bottom]

Learning Essentials:

1. Text Summary

2. Text Style

3. Text control

Keynote Teacher: Li Tinghui

This chapter focuses on the CSS text styles in HTML5, changing the font size, style, and orientation of text with text style settings.

A Text summary

In this lesson, we focus on the CSS text style in the Chinese content of some of the settings, style sheet is as follows:

Property name	Description	CSS version
Text-decoration	Decorative text appears in various dashes.	1
Text-transform	Converts the English text to uppercase and lowercase.	1
Text-shadow	Add a shadow to text	3
Text-align	Set text alignment	1,3
White-space	Blank handling in typesetting	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 paragraph Words	3
Text-indent	Sets the indentation of the first line of text	1

Two Text Style

There are three types of CSS text styles: text decoration, English case conversion, and text shading.

1.text-decoration

{    text-decoration: underline;}

Explanation: The setting text appears underlined. The property values are the following table:

Value	Description
None	Let the text that has its own underlined decoration be removed
Underline	Make an underscore appear at the bottom of the text

Overline	Make the text appear underlined on the head
Line-through	Let the text appear in the middle of a delete dash
Blink	Let the text blink, basically do not support

Cancel a hyperlink that is already underlined

{    text-decoration: none;}

2.text-transform

{    text-transform: uppercase;}

Explanation: Set the English text to case.

Value	Description
None	Restores the converted case value to the default state
Capitalize	Capitalize the first letter of the English word
Uppercase	Convert English to uppercase
lowercase	Convert English to lowercase letters

3.text-shadow

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

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

Three Text control

The CSS text style also has a set of styles for accessing and controlling the shape of the text.

1.text-align

{    text-align: center;}

Explanation: Specifies how text is aligned.

Value	Description
Left	Align Left, default
Right	Align to Right
Center	Center Alignment
Justify	Align content on both sides
Start	Leave text at the end of the boundary
End	Leave text at the end of the boundary

Start and end belong to the new features of CSS3, but currently IE and Opera are not supported.

2.white-space

{    white-space: nowrap;}

Explanation: Handle blank layout.

Value	Description
Normal	Default value, white space character is compressed, text wraps automatically
NoWrap	Blank character is compressed, text does not wrap
Or:	Whitespace characters are preserved and line breaks are encountered
Pre-line	White space characters are compressed and text wraps or breaks in line with newline characters
Pre-wrap	White space characters are preserved, text is filled in or wrapped in line breaks

3.letter-spacing

{    letter-spacing: 4px;}

Explanation: Sets the spacing between text.

Value	Description
Normal	Set default spacing
Length value	For example: "number" + "px"

4.word-spacing

{    word-spacing: 14px;}

Explanation: Set the spacing between English lists.

Value	Description
Normal	Set default spacing
Length value	For example: "number" + "px"

5.line-height

{    line-height: 200%;}

Explanation: Sets the height of the paragraph line.

Value	Description
Normal	Set default spacing
Length value	For example: "number" + "px"
Numerical	For example:
%	For example: 200%

6.word-wrap

{    word-wrap: break-word;}

Explanation: Let the long English word break.

Value	Description
Normal	The words keep on opening
Break-word	Break word

7.text-indent

{    text-indent: 20px;}

Explanation: Sets the indentation for the first line of text.

Value	Description
Normal	Set default spacing
Length value	For example: "number" + "px"

15th CSS Text style [bottom]