02 css attributes

1. Font attributesFonts

Used to define font family , size, thickness, and text style (such as italics)

Font family

Use ,separate fonts between font-family to
write multiple fonts, the compatibility will be better

 body {
  /* font-family: '微软雅黑'; 中文名, 下面的是英文名,一样的效果,常用英文名*/
  /* font-family: 'Microsoft YaHei'; */
  font-family: 'Microsoft YaHei' Arial, Helvetica, sans-serif;
}

font size

font-size

• Different browsers may display different font sizes by default. We try to give a name with an exact size instead of the default size

Font weight

font-weight

• font-weight : normal | bold | bolder | lighter | number
• number (recommended)
• font-weight default value normal = 400

Font style

font-style
font-style : normal | italic | oblique

• Normal is used to make the slanted fonts not slanted
• italic, tilt is not commonly used

Compound attribute

font: font-style font-weight font-size/link-height font-family;

• The order cannot be disordered
• Font size and font must appear at the same time.
  For example:

 /* font-size 和font-family不能省略 */
 font: italic 700 20px/30px 'Microsoft yahei';

Text attributesText

The Text attribute can define the appearance of the text , such as the color of the text, align text, decorative text, text indentation, line spacing, etc.

Text color

color
rgb: red green blue

Color representation	Attribute value
Predefined color value	red, green, blue
Hexadecimal	# FF0000, # FF6600
RGB code	rgb(255, 0, 0) or rgb(100%, 0%, 0%)

Its text

text-align
left center right is
used to set the horizontal alignment of the text content in the element , it can only be horizontal!

Decorative text

text-decoration
can add underline\strikethrough\overline etc to the text

Attribute value	description
none	There is no decorative line by default ( most commonly used )
underline	Underline. Link a comes with underline (commonly used)
overline	Underline (almost no need)
line-through	Strikethrough (not commonly used)

Text indent

text-indent

• Used to specify the indentation of the first line of text, usually to indent the first line of the paragraph
• The unit is in em.
  For example: text-indent: 2 em ; Indicates the distance of indenting the current element by 2 text sizes

Line spacing

line-height

• Used to set the distance between the lines (line height). You can control the distance between the text line and the line.
  Line spacing: the
  length of the upper and lower spacing is the same