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)