15th CSS Text style [bottom]

Source: Internet
Author: User

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]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.