Article directory
foreword
This article mainly explains the text and text styles in CSS and some practical skills. There is a mind map at the end of the article.
font size
属性名:font-size
Value: number+px
Notice:
- Google Chrome default font size is 16px
- The unit needs to be set, otherwise it will be invalid
font weight
属性名: font-weight
There are two values :
- Keyword: normal (normal) bold (bold)
- Numbers 100~900: 400(normal) 700(bold)
加粗标签:<strong></strong>
粗体标签:<b></b>
Although in HTML, the strong and b tags also have a bold effect, but it is recommended to use CSS to set the font bold style
font style
The font style here refers to whether it is italic
属性名:font-style
Value: normal (normal) is the default value italic (tilted)
the font
属性名:font-family
Common values: specific font 1, specific font 2, specific font 3, ..., font family
- Common fonts: Microsoft Yahei, Hei Ti, Song Ti, Kai Ti, etc.
- Font family: sans-serif, serif, monospace, etc.
Notice:
- There are multiple values, and the browser will search in turn. If the font is not installed on the computer, the next font will be displayed.
如果前面的字体都没有安装,就会显示最后字体系列的任意一个字体- If there are multiple words in the font, it is recommended to use quotation marks
最后一项字体系列不需要使用引号包裹- Try to use the fonts commonly used by computers to ensure that users can browse the webpage correctly
font composite property
The font compound attribute is a shorthand attribute for the previous font style
属性名:font(符合属性)
Value: font-style font-weight font-size font-family (顺序固定,用空格隔开)
values can only omit the first two, omitting is equivalent to the default value
text indent
属性名:text-indent
Value: number+px or number+em
Note: 1em is equivalent to the font-size of the current label
The general text indentation is the first line indentation of 2 characters,如果要进行首行缩进两个字符,建议使用em. 直接写text-indent: 2em 就可以了
As for why not use the form of number + px.
It is because the default font size of the browser is 16px. If you want to use the form of number + px, you need to write text-indent: 32px
but this is not recommended because Once the size of the font is changed, the value becomes the size of the modified font multiplied by 2+px
text horizontal alignment
属性名:text-align
Value:
| attribute value | Effect |
|---|---|
| left | align left |
| right | right align |
| center | center alignment |
text decoration line
属性值:text-decoration
Value:
| attribute value | Effect |
|---|---|
| underline | underline |
| line-through | strikethrough |
| overline | underline |
| none | No decorative lines |
Effect:
Here's one that's often used:
⭐可以使用text-decoration: none 来去除a标签的下划线
For example:
line height
属性名:line-height
Function: Control the upper and lower spacing of a line
Value:
- number+px
- Multiple (multiple of the current font-size)
行高由上间距,文字高度和下间距组成
- line-height: 1 can cancel the top and bottom spacing of the text
There is a common place for line height: when the line height of the text is the same as the height of the box, the text will be displayed in the middle. Note that the
effect here is different from setting text-align: center.
The line height is also written in the font (conforming to the attribute)
写法:font-style font-weight font-size/line-height font-family
Note that font-size and line-height are used between/
color
Setting the color is still used a lot in the front end, so we still need to know about it.
There are many attribute names, so I won’t list them one by one. Let’s talk about the values.
Value:
| Color representation | Representation | attribute value |
|---|---|---|
| keywords | pre-defined color names | Such as: red, blue, green, etc. |
| rgb | The three primary colors of red, green and blue, each value is 0~255 | rgb(0~255 , 0~255, 0~255) |
| rgba | The three primary colors of red, green and blue,a表示透明度,a的取值为(0~1) |
rgba(0~255 , 0~255, 0~255, 0~1) |
| hexadecimal | # Convert the number to hexadecimal at the beginning | #000000 #ff0000 etc. can also be abbreviated as: #f00 #000 |
Center the label horizontally
标签水平居中: margin: 0 auto
The effect is as shown in the figure:
the main part of the page we usually use should be in the middle of our screen. This is also achieved by using the method of horizontally centering the label. Briefly explain
here, margin is the outer margin. It will be introduced in detail in the box model later,0 auto: 上下外边距为0,左右自适应相同值
⭐Mind Map
Thank you for watching! I hope this article can help you!
The web front-end development column is constantly being updated, welcome to subscribe!
"Wish to encourage you and work together!"
