CSS Basic Syntax II (common text and background properties)

"CSS Common Text Properties"
1, font, size class:
①font-weight: Font weight. bold-Bold, normal-Normal, lighter-fine body
You can also use a 100-900 value, 400 means that normal,700 represents bold
②font-style: Font style. italic-tilt, normal-normal
③font-size: Font size. Can write PX units, can also write%
200% = twice times the default size of the browser (16px) =32px
④font-family: Font family (font family).
>>> can write the font name directly or write the system column name.
>>> Common Font Series: serif-liner body sans-serif-non-liner body;
>>> font-family can receive multiple values, separated by commas. The first one is preferred, and if there is no font, use it backwards. Typically, the last value puts the font family name;
eg:font-family: "Blackbody", "Microsoft Jas Black", Sans-serif; ⑤font abbreviated form:

The >>> order must be:
Font-weight Font-style font-size/line-height font-family
>>> between different attributes, separated by a space;
>>> Font-size/line-height must be a group, with/separated;
>>> font-family between multiple fonts, separated by commas
>>> eg:font:bold italic 32px/50px "Microsoft Ya Black", serif;
2. Font Color
①color: Font color can make words, 16, RGB, etc.
②opacity: Transparency, selectable value 0-1
[The difference between opacity and RGBA]
>>> Rgba itself can set the color, and opacity must match other color attributes to use;
>>> Rgba is just the color of the current element set to be transparent;
And opacity, will make the current element inside all text, background, child elements are transparent;
3. Line spacing, alignment, other classes
①line-height: Row height. Can write PX units, can write numbers directly (indicating a number of times the default line spacing), can write% (indicates the percentage of default leading)
>>> High Importance: Let single-line text center vertically in div?
Set the height of the line higher than the div so that the single line of text is centered vertically.
②text-align: Sets the horizontal alignment of row-level elements within a range left/center/right
③letter-spacing: Character spacing, distance between words and words
④text-decoration: Text retouching;
underline-underline, overline-underline, line-through-strikethrough, none
⑤overflow: Sets how the text is displayed beyond the region.
>>> Overflow:hidden; Text hiding beyond the area is not displayed;
>>> Overflow:scroll; Horizontal vertical scroll bar, no matter how much text is displayed
>>> Overflow:auto; Automatic. Text displays more scroll bars, less text, and does not display scroll bars.
>>> you can use Overflow-x and overflow-y to modify two-direction scroll bars individually
OVERFLOW-Y: scroll; Overflow-x: Hidden;
⑥text-overflow: Set the display mode of extra text at the end of line;
>>> clip-extra text cut out ellipsis-extra text ellipsis display
>>> display ellipsis, need to cooperate with white-space:nowrap;
>>> "Focus" set the end of the line display ellipsis (three lines of code, indispensable)
Overflow:hidden;
White-space:nowrap;
Text-overflow:ellipsis;
⑦white-space:nowrap; Set the end of the Chinese line, keep the line displayed
⑧text-indent: First line indent.
⑨-WEBKIT-TEXT-STROKE:0.5PX Blue; Text strokes.
-webkit-indicates that only the WebKit kernel browser is in effect, common with chrome, safari
⑩text-shadow: Text Shadow, there are four attribute values, space-delimited;
>>> horizontal shadow distance, positive number means shadow right shift, negative shift left;
>>> vertical shadow Distance, positive number indicates the shadow moves down, negative numbers move up.

>>> shadow blur distance, 0 means the shadow is not blurred;

>>> Color of Shadows;
>>> eg:text-shadow:20px-10px 2px Blue;

"CSS Common background Properties"

 1, Background-color: Background color
 2, background-image: Background map. Use the URL ("") to select the background picture. Background and background colors are both present, and backgrounds are overlaid with the back color.
 3, Background-repeat: How the background map repeats.
 no-repeat-, repeat-tile, repeat-x-x axis tiling, repeat-y-y axis tiling
 4, background-size: Size of the background map
 [ Specify width height]
 >>> Width height specified, can write px, can write% (percentage of parent container width)
 >>> When writing two attributes, the width, height, respectively;
  When writing an attribute, the width is expressed, and the height will be equal to the scale;
[other property values]
 >>> contain: The picture is scaled until it is scaled to 100% on a wide or high school side. (may lead to shorter side <100%, picture cannot cover all areas)
>>> cover: The picture is scaled until it is scaled to 100% on the smaller side of the wide or high school. (may result in larger side >100%, picture out of range display not complete)
 5, background-position: Background image offset
 >>> Specify location: Left/center/right top/center/bottom
  when , when you write only one value, the other is centered by default.
 >>> Specify coordinates: Two properties: Horizontal displacement vertical Displacement
The value of the  ① coordinate, which can be PX units or percentages  ② when writing px units:

Horizontal: Positive right shift negative shift left, vertical direction: Positive shift negative move up;
(left negative right positive upper negative positive)
③ When writing% percentages:
Generally only a positive number. Indicates that the width of the image is removed, and the remaining white space is distributed proportionally. eg:background-position:30%; The width of the picture is removed horizontally and the remaining area is 3:7 points.

CSS Basic Syntax II (common text and background properties)