Design font style
font_size: 12px; //设置字体大小
You can use relative length units or absolute length units.
Usually use em (relative to the font size of the text in the current object) px (pixels)
font-family: xxxx; //定义字体类型
Multiple fonts can be specified at the same time, separated by a comma, indicating that if the browser does not support the first font, it will try the next one until it finds a suitable font.
font-weight: 600; //定义字体粗细
| Attribute value | description |
|---|---|
| normal | Default value (not bold) |
| bold | Define bold (bold) |
| 100~900 | 400 is equivalent to normal, and 700 is equivalent to bold, we focus on remembering this sentence |
font-style :normal|italic;
Define the font tilt effect, normal is the default value, which means normal font,
italic means italic; oblique means tilted font
font: comprehensively set the font style
选择器 { font: font-style font-weight font-size/line-height font-family;}
CSS text properties
color: red; //定义文本颜色
| Express | Attribute value |
|---|---|
| Predefined color values | red, green, blue, and our royal pink |
| Hex | #FF0000，#FF6600，#29D794 |
| RGB code | rgb (255,0,0) or rgb (100%, 0%, 0%) |
text-align: left; //文本水平对齐方式
| Attributes | Explanation |
|---|---|
| left | Left justify (default) |
| right | Right |
| center | Align center |
line-height: 24px; //行高
- If line height = height text will be centered vertically
- If the line height> height text will be lower
- If line height <height text will be on top
text-indent:2em; //定义文本首行缩进
1em is the width of a character. If it is a paragraph of Chinese characters, 1em is the width of a Chinese character
text-decoration:none; //文本的装饰
| value | description |
|---|---|
| none | default. Define standard text. Remove underline (most commonly used) |
| underline | Define a line under the text. The underline is also our own link (commonly used) |
| overline | Define a line on the text. (No need to) |
| line-through | Define a line through the text. (uncommonly used) |
text-overflow:clip //控制文本溢出
- clip: When the inline content overflows the block container, the overflow part is cut off, which is the default value.
- ellipsis: When the inline content overflows the block container, replace the overflow part with (...).
