★Learning source of the content of the article: Lagou Education Front-end Employment Training Camp
The above [14-19] chapters explained the basics of CSS:
[14] Basics of CSS (1)-Understanding CSS
[15] Basics of CSS (2)-Selectors ① Basic selectors
[16] Basics of CSS (2)- Selector ② Advanced selector
[17] CSS basics (2)-Selector ③ Selector weights
[18] CSS basics (3)-Understanding cascading
[19] CSS basics (4)-Common styles (text/ Box model)
Next [20-27] will introduce CSS core styles.
First of all, continue to the previous article to explain the two basic attributes of the font style: font attribute font-family, font size attribute font-size;
this article continues to introduce: font style (4 commonly used attributes)
1. Thickness font-weight
| Text weight attribute | A single attribute belonging to the font attribute |
|---|---|
| effect | Set whether the text is displayed in bold |
| Attribute name | font-weight |
| Attribute value | Word type, number type |
| font-weight word type attribute value | Description |
|---|---|
| normal | The default value, defines the standard font |
| bold | Define bold characters, the default value of b, strong label |
| bolder | Define a bolder font |
| lighter | Define a finer font |
| font-weight numeric attribute value | Description |
|---|---|
| 400 | Equivalent to normal display effect |
| 700 | Equivalent to bold effect |
| One hundred numbers between 100-900 | You can realize the effect by yourself |
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体粗细属性font-weight</title>
<style>
.ps1 {
font-weight: 700; /* 等价于font-weight：bold */
}
.ps2 {
font-weight: normal;
}
.ps3 {
font-weight: lighter;
}
</style>
</head>
<body>
<p class="ps1">看看文字是否加粗显示?</p>
<b>这是 b 标签内部的文字</b><!--加粗效果跟b标签效果做对比-->
<p class="ps2">看看文字是否正常粗细显示?</p>
<p class="ps3">看看文字是否更细显示?</p>
</body>
</html>
Two, font style font-style
| Font style attributes | A single attribute belonging to the font attribute |
|---|---|
| effect | Set whether the text is displayed in italics |
| Attribute name | font-style |
| Attribute value | Word type |
| font-style word type attribute value | Description |
|---|---|
| normal | Set a regular font, the default value for most labels |
| italic | Set italic text, mainly for English, and require English to be displayed in italic style in the font |
| oblique | Set the slanted text, only the text is displayed slanted, regardless of the font |
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体风格属性font-style </title>
<style>
.fs1 {
font-style: normal;
}
.fs2{
font-style: italic;
}
.fs3 {
font-style: oblique;
}
</style>
</head>
<body>
<p class="fs1">看一下文字是否正常显示？normal</p>
<p class="fs2">看一下文字是否进行斜体显示？italic</p>
<p class="fs3">看一下文字是否进行倾斜显示？oblique</p>
<i>这是i标签内部的文字</i><!--与i标签效果做对比-->
</body>
</html>
3. Line-height
| Text line height attribute | A single attribute belonging to the font attribute |
|---|---|
| effect | The setting is the actual height of a line of text, and the font size of the text is vertically centered in the line height. |
| Attribute name | line-height |
| Attribute value | px pixel value, percentage value |
(In actual applications, it is obtained through the design drawing, and some auxiliary tools are needed to measure the value, such as: FireWorks)
Steps to measure row height with Fireworks:
1. Software initial settings: select the text tool, in the property bar, smooth anti-aliasing, and change it to no anti-aliasing, so that the pixels of the text can be displayed clearly.
2. Determine the font size and font of the text. Use text tools to write two texts with the same content, adjust the font size and font, until the two texts are completely overlapped, which is the font size and font we need. When making, set a font color that is quite different from the content text color.
3. According to the known font size and font, write two lines of text aligned up and down, adjust the line height value unit of the property panel to pixels, change the value size until the two lines of text are aligned, and get the line height value we need .
Four, font comprehensive font
Font, font size, line height, bold, and italics are all single attributes of font comprehensive attributes.
The values of the five single attributes of the font attribute can be combined. The attribute values can be 2 or more, and the values are separated by spaces.
Writing 1
When font is used for comprehensive writing, the font size and font must be involved, and the font size must be in the front, and the font must be in the back, and the order cannot be reversed.
font: 14px "arial" "SimSum" "Microsoft Yahei";
Writing 2
The font attribute often combines font, font size, and line height. The writing order must be font size, line height, and font. The font size and line height must be separated by /.
font: 14px/28px "arial" "SimSum" "Microsoft Yahei";
Writing 3
If the font property needs to be bolded and italicized, the two property values can only be written at the top, and the positions of the two values can be exchanged. The font size, line height, and font cannot be changed.
font: italic bold 14px/28px "arial" "SimSum" "Microsoft Yahei";
font: bold italic 14px/28px "arial" "SimSum" "Microsoft Yahei";
Continue to the next part
[21] CSS core styles (2)-3 commonly used attributes of text