[CSS Notes 5] CSS formatting and typesetting

1. Text layout: font
We can use css styles to set font, font size, color and other style attributes for the text in the web page. Let's take a look at an example. The following code implements: setting the font to Song Dynasty for the text in the web page.

body{font-family:"宋体";}

Be careful not to set uncommon fonts here, because if the fonts you set are not installed on the user's local computer, the browser's default fonts will be displayed. (Because whether the user can see the font style you set depends on whether the font you set is installed on the user's local computer.)
Nowadays, most web pages like to set "Microsoft Yahei", as follows:

body{font-family:"Microsoft Yahei";}

or

body{font-family:"微软雅黑";}

Note: The first method is more compatible than the second method.

Because this font is beautiful and can be displayed safely on the client (it is usually installed by default locally).

2. Text layout: font size, color
You can use the following code to set the font size of the text on the web page to 12 pixels, and set the font color to #666 (gray):

body{font-size:12px;color:#666}

3. Text layout: bold
We can also use css styles to change the text style: bold, italic, underline, strikethrough. You can use the following code to set the text to be displayed in bold style.

p span{font-weight:bold;}

If you want to set bold text for text, there is a separate css style to achieve it. You no longer need to use h1-h6 or strong tags to achieve bold style.

4. Text layout: italics
The following code can realize the text to be displayed in italics in the browser:

p a{font-style:italic;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

5. Text layout: underline
In some cases Next, I want to set the underline style for the text, so that the text can be visually emphasized. You can use the following code to achieve this:

p a{text-decoration:underline;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

6. Text layout: strikethrough
Use the following code to strikethrough Can be realized:

.oldPrice{text-decoration:line-through;}

7. Paragraph typesetting: indentation
In Chinese text, it is customary to leave two spaces before a paragraph. This special style can be achieved with the following code:

p{text-indent:2em;} <p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。
那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>

Note: 2em means twice the size of the text.

8. Paragraph layout: line spacing (line height)
The line spacing (line height) attribute (line-height) that plays an important role in paragraph layout, the following code implements setting paragraph lines The spacing is 1.5 times.

p{line-height:1.5em;} <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，
其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

9. Paragraph typesetting: Chinese character spacing and letter spacing
If you want to set text spacing or letter spacing in web page layout, you can use letter-spacing to achieve it, as shown in the following code:

h1{ letter-spacing:50px; } ... <h1>了不起的盖茨比</h1>

Note: When this style is used in English words, it sets the spacing between letters.

Word spacing setting:

What if I want to set the spacing between English words? This can be achieved using word-spacing. The following code:

h1{ word-spacing:50px; } ... <h1>welcome to imooc!</h1>

10. Paragraph layout: alignment
Want to set a centering style for text and pictures in block elements? You can use text-align style code. The following code can achieve centered display of text.

h1{ text-align:center; } <h1>了不起的盖茨比</h1>

You can also set it to the left:

h1{ text-align:left; } <h1>了不起的盖茨比</h1>

You can also set it to the right:

h1{ text-align:right; } <h1>了不起的盖茨比</h1>

The above is the CSS format of [CSS Notes 5] For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!