CSS (text formatting, text format processing)

Source: Internet
Author: User

Text formatting, processing of text formatting

Text formatting

1. Control font

1. Specify font

Font-family: "Microsoft Yahei", Arial, "Song Body";

2. Font size

FONT-SIZE:PX, PT as Unit 30pt 16pt

Common font Size: 12px-14px

3. Font Bold

Equivalent to <b></b>

Font-weight:normal/bold;

Recommendation: Replace the B label with this attribute

4. Font style

Italic body

Font-style:normal/italic;

Equivalent to <i></i>

5. Small Caps

Font-variant:normal/small-caps;

6. Font properties

Set all the properties in a declaration

Font:font-style font-varaint font-weight font-size font-family;

Eg:font:italic small-caps Bold 12px "Microsoft Yahei", Arial;

Common wording:

Font:font-size font-family;

Font:bold 12px "Microsoft Yahei";

Other wording:

Font:font-size/line-height font-family;

font:12px/24px "Microsoft Yahei";

Line-height: Row Height

2. Text Properties

1. Color

Color: colour value;

RGBA (255,0,0,0.5);

2. Text arrangement

Text-align:left/right/center; Content horizontal alignment in elements, most mainstream browsers only work on inline elements and do not work on blocks

Vertical-align:top/bottom/middle/baseline; Vertical alignment of text content

Baseline: Baseline alignment

3, Text decoration (lines)

Text-decoration:none/underline

None: Remove lines from text

Underline: Underline

Overline: Underline

Linethrough: Strikethrough <s></s>

4, Row high

The height at which each line of text occupies. If the value of the row height is higher than the height of the text, the text is centered vertically in the high range of rows.

How to use:

1. Set the row height to match the container heights so that the text inside the container is centered vertically. (for one row of data only)

2, if you want to increase the upper and lower margins of text, you can also use Line-height

5, the first line of text indentation

Let the first line of text within the element, empty out the specified pixel value

Text-indent:value;

6. Text Shadow

Text-shadow:h-shadow V-shadow blur color;

Common examples: text-shadow:5px 5px 5px #FF0000;

3. Text overflow processing

1, processing blank

White-space:normal/nowrap;

Occasion: With the Overflow:hidden; to hide out of range content. Thus guaranteeing the height of the element

2. Text Overflow

Overflow:hidden; Element-to-overflow processing

Properties: Text-overflow:

Value:

Clip: crop, cut

Ellipsis: Hide overflow content and show ...

Note: Text-overflow to cooperate with Overflow:hidden;

3. Long Word Wrapping

Property: Word-wrap

Value: Normal/break-word (long word wrapping)

CSS (text formatting, text format processing)

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.