CSS (text formatting, text format processing)

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)