CSS Common Text 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 Text properties