Detailed introduction to CSS page layout techniques

The following is a detailed introduction to CSS page layout techniques that I have compiled for you. Interested students can take a look.

Set text style

1. Font type

The Chinese fonts supported by most user systems by default include Song, Hei, Youyuan, and Kai; the English fonts supported by default include 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 boldness

CSS provides the font-weight attribute to set the font boldness.
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 font italic. There are three attribute values: normal, italic, and oblique.
Example: p{font-style: italic;}

6, underline, underline, strikethrough

## provided by CSS The font-decoration attribute sets 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 font-transform attribute Set the upper and lower case of English letters. 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 and right-up and down)
                                                                                                                                                                       writing-mode: layout-flow: vertical-ideographic; (vertical arrangement)

First line indent

CSS provides the text-indent attribute to set the first line indent. 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 CSS page I compiled for everyone Layout skills, I hope it will be helpful to everyone in the future.

Related articles:

Explain the basic knowledge points of CSS in detail

What are the methods of dynamically operating js/css files

CSS implementation of sprites and font icons

The above is the detailed content of Detailed introduction to CSS page layout techniques. For more information, please follow other related articles on the PHP Chinese website!