Kidney Fun version CSS tutorial Chapter3 Text

Chapter 3 Text

Version	Update	Note
1.0	2016-6-1	Added for the first time. You are welcome to indicate errors in the comments, revise them as soon as they are verified, and indicate contributors.

Text
Font	Color	Typesetting	Modified	Writing mode	Other

1. Font

1.1 Font-style

Value: Normal (default), Italic,oblique

Italic is to select the italic style from the font, and if a font has no italic style, the italic is set with oblique.

1.2 font-variant

Value: Normal,small-caps

Variant denotes "Variant", which is used to make the size of uppercase letters smaller.

1.3 Font-weight

Values: keywords, values (100,200 ... 900)

1.4 Font-size

Values: keywords, length values, and percentages

1.5 font-family

Value: keyword

You can set multiple comma-separated fonts, and the font name contains spaces that need to be quoted.

1.6 Font

The first five properties of the +line-height attribute are abbreviated.

Must be set in the order described above.

Font-size and font-family are required and the rest are optional.

The line spacing needs to be written with the font size, separated by a slash, Font-size/line-height

2.Color

Value: the color value.

3. Typesetting

3.1 Line-height

Values: Length values, percentages, and numbers

3.2 Vertical-align

Values: Length values, percentages, and keywords

Lets you set the vertical alignment of the elements in the row box and inside the table.

Line box: A rectangular area containing boxes from the same row.

3.3 letter-spacing

Value: Length value, percent. can be negative.

3.4 White-space

Controls the space and line breaks for text.

Spaces are spaces within the text inside the editor.

Line break refers to the line break behavior that is struck in the editor and the text arrives at the container boundary.

The pre represents a preformatted, simple understanding that the line breaks in the editor are reflected in the browser's display.

Normal (default): Ignores line breaks. Text arrives at the boundary and wraps. Spaces will be merged.

Pre: Preserves line breaks. Text arrives at the border without wrapping. Spaces are not merged.

NoWrap: Ignores newline characters. Text arrives at the border without wrapping. Spaces will be merged.

Pre-wrap: Preserves line breaks. Text arrives at the boundary and wraps. Spaces are not merged.

Pre-line: Preserves line breaks. Text arrives at the boundary and wraps. Spaces are merged.

3.5 word-spacing

Value: Length value, percent. can be negative.

3.6 Text-align

Values: Left, center, right

Sets the horizontal alignment of text.

3.7 Text-indent

Value: Length value, percent

Sets the first line indent. Negative values are allowed.

3.8 Text-overflow

Value: Clip (default), ellipsis,string

The suffix used to set the text truncation.

Clip is directly cut off, no suffix; ellipsis will be prefixed with an ellipsis; You can also use a string as a suffix.

Note: To implement the suffix, it must be combined with White-space:nowrap, Overflow:hidden.

3.9 Text-wrap

Used to set text wrapping (wrap) rules.

3.10 Overflow-wrap

Formerly known as Word-wrap. Used to set text wrapping (wrap) rules.

4. Decoration

4.1 text-decoration

Value: None,underline,overline,line-through,blink

CSS3 also adds line styles and colors, so the property becomes a shorthand attribute, but this syntax is not widely supported at this time.

4.2 Text-shadow

Value: Offsetx,offsety,blur,color

You can set multiple sets of shadows separated by commas.

4.3 text-emphasis

Used for accent marks. Browser support is still poor at the moment.

5. Writing mode

5.1 derection

Value: Ltr,rtl

Specifies the orientation of the elements in the row, the direction of the table column layout, the direction of the horizontal overflow, and so on

5.2 Unicode-bidi

Value: Normal,embed,bidi-override

In combination with direction, control the direction of text writing

5.3 Writing-mode

Value: Normal (default), HORIZONTAL-TB,VERTICAL-RL,VERTICAL-LR

6. Other

6.1 User-select

Specifies whether the text is optional. The default value, text, is optional and, if set to none, is not selectable.

Kidney Fun version CSS tutorial Chapter3 Text