Summary of common knowledge about CSS page layout (text style)

There is a lot of knowledge in CSS, and it is impossible for us to remember it all. In my spare time, I compiled some common knowledge about CSS page layout. This article will share with you the common knowledge about CSS text styles. Friends in need can refer to it, I hope it can help you.

1. Font type

The Chinese fonts supported by most user systems by default are Song, Hei, Youyuan, and Kai; the English fonts supported by default are Arial, Arial Black, Arial Narrow, Century Gothic, Comic SansMS, Times New Roman, etc. In use, Song Dynasty and Arial are used most frequently.

CSS provides the font-family property to set the font type.

Example: p{font-family: 宋体;}

Note: If multiple font attributes are set at the same time, the priority is in order.

2. Font size

CSS provides the font-size attribute to set the font size.

Example: p{font-size: 12px;}

Relative size

px, em, 10%, larger, smaller (the last two are relative to the parent element )

Absolute size

pt, pc, in cm, mm

Keywords

xx-small, x-small, small, large, x -large,xx-large

3. Font bold

CSS provides the font-weight attribute to set the font to be bold.

Example: p{font-weight: bold;}

Numbers: 100, 200,…,900

Keywords: bold, bolder, lighter, normal

4. Text color

CSS provides the color attribute to set the text color.

Example: p{color: red;}

Color name: red, green,……

RGB value: (255,255,255),…….

Hexadecimal value: #ff0000,...

5, italic

CSS provides the font-style attribute to set the word italic. There are three attribute values: normal, italic, and oblique.

Example: p{font-style: italic;}

6, underline, underline, strikethrough

CSS provides font-decoration Properties set underline, underline, and strikethrough. There are four attribute values: underline (underline), blink (blinking text), overline (top line), and line-through (strikethrough).

Example: p{font-decoration: underline;}

7. English letter case

CSS provides the font-transform attribute to set English letters Upper and lower case. There are four attribute values: none, capitalize (the first letter is capitalized), uppercase (all uppercase), and lowercase (all lowercase).

Example: p{font-transform: none;}

8. Text paragraph style

Horizontal alignment

CSS Provide text-align attribute to set horizontal alignment. There are four attribute values: left (left-aligned), right (right-aligned), center (centered), and justify (aligned on both ends).

Example: p{text-align: left;}

Vertical alignment

CSS provides writing-mode and layout-flow attributes to set vertical alignment.

Grammar: writing-mode: lr-tb; (left-right-up-down)

writing-mode: tb-rl; (up-down-right-left)

layout-flow: horizontal; (horizontal arrangement)

layout-flow: vertical-ideographic; (vertical arrangement)

First line indentation

CSS provides the text-indent attribute to set the first line indentation Enter. Attribute values ​​can be pixel values ​​or percentages.

Example: p{text-indent: 12px;}

Line spacing

CSS provides the line-height attribute to set the line spacing. The attribute value can be a length value.

Example: p{line-height: 12px;}

Character spacing

CSS provides the letter-spacing attribute to set the character spacing. The attribute value can be a length value.

Example: p{letter-spacing: 12px;} (letter spacing)

p{word-spacing: 12px;} (word spacing)

The above is the detailed content of Summary of common knowledge about CSS page layout (text style). For more information, please follow other related articles on the PHP Chinese website!