What are the font attributes and text attributes used by CSS attributes?

CSS font properties

font

p {
    font-family: "微软雅黑";
}
h2 {
    font-family: "Microsoft YaHei",Arial;
}

• Multiple fonts can be selected, and multiple fonts are separated by commas
• Use quotation marks when there are multiple words in a font
• For the purpose of multiple fonts, the first font is used first, and if the font is not available on the user's computer, the next font will be used
• If none of these fonts are available, use the browser's own fonts
• Chrome default font, Microsoft Yahei

font size

p {
    font-size: 20px;
}

• Don't forget to add px (pixel) later
• The default text size of chrome browser is 16px
• If the text size is specified for the body, the default size of the text on the entire page will be changed (the title size will not change, if you want to change it, you need to specify it separately)

font weight

p {
    font-weight: normal | bold | bolder | lighter | number
}

• normal: normal font, default value

• blod: bold

• bolder: extra bold

• lighter: thin body

• number: Numbers (do not add units later)  are commonly used in development

  • 700 bold (bold), 400 thinner (nomal)

• For example, the title is often removed from bold when used

h2 {
    font-weight: 400;
}

text style

• mostly italics

p {
    font-style: normal | italic;
}

• normal: normal style, italic: italic style

Font Composite Properties

• Example: the text becomes italic, bold, font size 16, font Microsoft Yahei

div {
    font: italic(font-style) 700(font-weight) 16px(font-size/line-hight) 'Microsoft yahei'(fonnt-family);
}

• Note! The order cannot be changed, and the attributes inside are separated by spaces
• Inside the brackets is the attribute to fill in
• Unnecessary attributes can be omitted, but font-sizethe and font-familyattributes must be reserved, otherwise font (the entire css attribute) will not work

CSS text property

• Text appearance, color, alignment, indentation, line spacing

text color

div {
    color: red;
}

• Predefined values: various English words
• Hexadecimal value: #ff0000(red)  is the most commonly used in development
• RGB writing: rgb(200,0,0)

Align text

• Note: Only horizontal alignment can be set

div {
    text-align: center | left | right;
}

• left: left-aligned (default)
• right: right alignment
• center: center alignment

decorative text

p {
    text-decoration: none | underline | overline | line-through;
}

• none: default, no decorations
• underline: underscore
• overline: overline
• line-through: delete line

Example: Remove underlines from links

a {
    text-decoration: none;
}

text indent

• Indent the first line of text
• Can take negative values

p {
    text-indent: 20px | 2em;
    /* 首行缩进20px */
    /* 2em是当前2个文字大小 */
}

• The unit is em, and em is a relative unit, which is equivalent to the size of an element currently  used for development

Line spacing

• Control the distance between rows

p {
    line-height: 26px;
}