8-[css]-font, text, background

1. Introduction to font-related CSS properties (1) font-family: Font family.

font-familyYou can save multiple font names as a "fallback" system. If the browser does not support the first font, it will try the next one. The browser uses the first value that it can recognize.

Simple example:

body {  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}

If set inherit to, the font that inherits the parent element is represented.

(2) Font-weight: Character weight (font weight).

Range of values:

value	Description
Normal	Default value, Standard weight
Bord	Bold body
Border	More coarse
Lighter	More fine
100~900	Set the specific thickness, 400 equals normal, and 700 equals the bold
Inherit	Inherit the weight value of the parent element font

(3) Font-size

Font size.

p {  font-size: 14px;}

If set inherit to represent a font size value that inherits the parent element.

(4) Color

Sets the font color for the content.

Supports three color values:

• Hexadecimal values such as: #ff0000
• An RGB value such as: RGB (255,0,0)
• The name of the color, such as: red

p {  color: red;}

2. Font attributes (1) text-align: text alignment

The Text-align property specifies the horizontal alignment of the text in the element.

value	Description
Left	Left aligns default values
Right	Align Right
Center	Center Alignment
Justify	Justify on both sides

(2) Line-height: Row height

Rule: Text is centered vertically when row height = Box Heights

(3) Text-decoration: Text decoration.

value	Description
None	Default. Defines the standard text.
Underline	Defines a line below the text.
Overline	Defines a line on the text.
Line-through	Defines a line that passes through the text.
Inherit	Inherits the value of the parent element's Text-decoration property.

3. Background properties

Common background-related attributes:

Properties	Description
Background-color	Specifies the background color to use.
Background-image	Specifies the background image to use.
Background-size	Specifies the size of the background image.
Background-repeat	Specifies how the background image is repeated.
Background-attachment	Specifies whether the background image is fixed or scrolls along with the rest of the page.
Background-position	Specifies the location of the background image.
Inherit	Specifies that the settings for the background property should be inherited from the parent element.

　　background-repeatRange of values:

value	Description
Repeat	Default. The background image repeats in both vertical and horizontal directions.
Repeat-x	The background image repeats in the horizontal direction.
Repeat-y	The background image repeats in the vertical direction.
No-repeat	The background image will be displayed only once.
Inherit	Specifies that the settings for the Background-repeat property should be inherited from the parent element.

　　background-attachmentRange of values:

value	Description
Scroll	The default value. The background image moves as you scroll through the rest of the page.
Fixed	The background image does not move when the rest of the page scrolls.
Inherit	Specifies that the settings for the Background-attachment property should be inherited from the parent element.

　　background-positionRange of values:

value	Description
Top left Top Center Top Right Center left Center Center Center Right Bottom Left Bottom Center Bottom right	If only one keyword is set, then the second value is "center". Default value: 0% 0%.
X y%	The first value is a horizontal position, and the second value is the vertical position. The upper-left corner is 0% 0%. The lower right corner is 100% 100%. If only one value is set, the other value is 50%.
Xpos ypos	The first value is a horizontal position, and the second value is the vertical position. The upper-left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit. If only one value is set, the other value is 50%. Can be mixed % and position values are used.

Example:

body {  background-color: red; backgraound-image: url(xx.png); background-size: 300px 300px; background-repeat: no-repeat; background-position: center }

Shorthand:

body {   background: red url(xx.png) no-repeat fixed center/300px 300px; }

8-[css]-font, text, background