Front-end -- about CSS text, -- CSS text

Front-end -- about CSS text, -- CSS text

Text is the most important form of content on a webpage. text can be written almost anywhere, and block-level elements can also be written into line elements. The text is composed of characters.

In the css layout, each character has an em box. Generally, the font-size is set to the size of the em box; in this way, the em box strings of these characters are combined.

Is the content area of the text. When line-height is 1 without row spacing, the content areas of the upper and lower rows are closely connected. In this case, the size of font-size is the baseline.

The distance between them. If line-height is set, the line-height minus font-size value will be used for layout, and then divided into two parts and evenly distributed to the upper and lower ends of the content area,

In this way, the line box is displayed. At this time, there are two features: 1. line-height minus font-size equals to row spacing. 2. The line-height value is the distance between baselines. Of course

The premise is that line-height must be greater than font-size. If the line-height value is smaller than the font-size value, a negative row spacing occurs.

Rows and rows overlap, and the height of the overlap is the absolute value of their difference.

Set text-related styles:
1. font-size set font size syntax <length> | <percentage>

2. font-family: Set the font type syntax [<family-name>] #. When multiple types are set, the preceding alternative is followed.

3. font-weight: font bold | normal | 100 | 200 |...

4. font-style: Set the font skew syntax. normal | italic

5. line-height: Set the line height syntax to normal | <number >|< length >|< percentage>
Note that when the row height is inherited from the row height, the percent and number inheritance are different. Numbers are inherited directly, that is, the inherited line-height or number.
The Row Height of the child element is calculated based on the number. Percentages are the calculated values. For example, if the line-height of the parent element is 50% and the font-size is 20px, the child element inherits
Instead of 50%, 20*50 & = 10px.

The abbreviated font Value Syntax: [<font-style >||< font-weight>]? <Font-size> [/<line-height>? <Font-family>], minimum size and type

6. set text shadow syntax none | [<length> {2, 3} & <color>?] The first value indicates the offset of the X axis, the second value is the offset of the Y axis, and the third value is optional.
Is the shadow blur radius.

7. text-decoration: Set the text underline syntax none | [underline | overline | line-through] to indicate underline, overline, and pipe threading

8. text-overflow setting clip | ellipsis indicates that clip is added when overflow occurs.
Note that text-overflow is generally not used independently. It must be used with overflow and white-space, for example, h2 {text-overflow: ellipsis; overflow: hidden; white-space: nowrap ;}

The following styles are used to set text rows:
1. text-align: sets the horizontal alignment mode and sets all rows. This style can only be applied to block-level elements. Syntax left | right | center | justify

2. vertical-align: It sets the vertical alignment mode. It can only be applied to intra-row elements and cannot be inherited. It sets the vertical position of the text in the intra-Row Element relative to the text in the parent element.
Syntax baseline | sub | supper | top |...

3. text-indent specifies the indentation of the first line. It can only be applied to block-level elements. The <lenght> | <percentage> negative indentation hides the text instead of overflow.

4. The white-space setting is the processing Syntax of line breaks and spaces in the text. nowrap | pre-wrap | pre-line
Nowrap indicates no line feed
Pre indicates that text line breaks and spaces are retained, and do not wrap when overflow occurs.
Pre-wrap indicates retaining text line breaks and spaces, but automatically wrapping when overflow occurs.
Pre-line retains only line breaks