Shulou(Shulou.com)06/01 Report--

This article mainly introduces what the Css text style is, which is very detailed and has a certain reference value. Friends who are interested must finish it!

Text is a very basic content of a web page, and the styling of the text is also very important.

Font-size: absolute size units and relative size units, absolute size units are cm,mm in (centimeters, millimeters, inches), etc. This is the size does not change with the screen resolution, the relative size unit: px,em% their actual display size varies with the resolution

Therefore, the size setting is generally made in relative size units.

Font size is inheritable. When using em% percentage, its calculation reference is based on em and% calculation based on the actual calculated font size inherited by the parent container.

Font color is the foreground color of the page, using rgb rgba or keywords, or hexadecimal color values, in which the percentage in rgb or rgba can also be actual values such as rgb (255, 20, 20, 30). Of course, this is easy to understand, if there is an intercept according to the nearest valid value beyond the valid range.

The font color represents the foreground color of the element, so naturally, such as border, text underline, middle line, overline, etc., where the foreground color is used by default, the font color is used as the default value.

Text-align:left center right justfy are left alignment, play alignment, right alignment, and both ends alignment. This is the horizontal alignment setting. The css attribute is valid only for block-level elements, but not for inline elements. The corresponding block-level elements can be aligned in a horizontal drama in a margin:0px auto way.

Vertical-align:baseline | text-bottom | text-top | bottom | top | middle

It is understood as baseline alignment, inline text bottom line alignment, text top line alignment, line bottom alignment, line top alignment, and line center alignment.

Vertical alignment is only valid for inline and cell display types, but not for block-level elements. If you want to align block-level elements vertically, you can display the parent container display:table itself display:table-cell as a cell. Generally speaking, line-height sets the row height for the container to make the row content vertically aligned. Vertical alignment is not well understood. This needs to be summarized in practical use.

Line-height: the default line height of the browser is 1.2em, which is 1.2 times the text size. Line-height can inherit, but inherits the actual calculated value of the parent element. Line height can also be set to define the role of line spacing, which is calculated on the basis of line text size.

Calculate. It is important to note that generally we have em or% way to set the line height so that the line spacing changes according to the font size resolution.

Word-spacing: the spacing between words, where the word refers to the English word, and the English word is separated by spaces. This attribute can set the interval between two adjacent words.

Letter-spacing: the spacing between characters, where the character refers to any character, and the corresponding attribute can be set for the character display interval.

Text-decoration: underline | none | overline text underline, overline, middle line, etc.

Text-indent: the first line is indented. 2em is usually used here, that is, 2 times text size indentation, that is, 2 characters indent.

Text-transform:lowercase | capitalize | whether uppercase; text is converted to uppercase and lowercase. This is valid only for English characters.

Vertical-align,text-align,line-height is mainly because their effectiveness and calculation methods, as well as inheritance have their own characteristics, more meticulous need more memory

The above is all the content of this article "what are the Css text styles?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.