CSS Common font properties: Background-origin and Background-clip Introduction instructions

(a) Commonly used font properties:

Font-weight: Attribute value 100-900 400 equals normal 700 equals bold, the larger the value, the thicker

Font-size: Font size, unit can be PX or%

Font-family: Font Family such as: Microsoft Ya Black

Font-style: Font style italic italic normal

Font-variant:small-caps the letter into the size of the smaller one

Note: All properties can also be written by a property of the font, for example:

Font:italic Bold 75%/1.8 ' Microsoft Yahei ', Sans-serif, write in order: Font-style font-variant font-weight font-size line-height Font-famiyl, multiple styles have spaces separated, must be written in this order, font-size and line-height must be separated between

(ii) Color of the font: Color: Property values can be written in English, for example: red

or RGB (0-255,0-255,0-255);

or Rgba (0-255,0-255,0-255,0-1), 0 for transparent, 1 for opaque

Opacity:0-1; it also means transparency. and Rgba (), the attribute acts on the descendant label, and Rgba () does not

(c) Line spacing, alignment

Line-height (Row height): A. Pixel units, such as 48px B. Multiples of normal line height without px c. percentage with B (the way the text in the control is vertically centered vertically, the line-height of the control's height= control)

Text-align (align): horizontal alignment of text in block-level elements left center right

Letter-spacing (character spacing): The distance between a word and a word

Text-decoration (text decoration): Underline underline strikethrough Line-through underline overline None (you can remove the underline of the hyperlink)

Overflow: Controls the display of out-of-range text, auto-displays scroll bars based on how much text, scroll always displays scrollbars, hidden out-of-range text hiding, and horizontal and vertical orientations by overflow-x, overflow-y

Text-overflow: Set the display of extra text, clip cut off, ellipsis ellipsis, (focus, let each line of extra text display ellipsis, A.white-spacing:nowrap B.overflow:hiddern Text-overflow:ellipsis)

Text-shadow: (4 attribute values: Horizontal shadow distance vertical shadow distance blur distance shadow color) text shadow, preceding 2 attribute values cannot be saved. The greater the horizontal shadow distance, the shadow shifts to the right. The greater the vertical shadow distance, the shadow moves down. Shadow blur distance, the larger the value, the more blurred the shadow, the default is 0, not blurred. Shadow color, optionally, black by default

Text-indent: First line indent, indent size can be adjusted with pixel values

Text-stroke: Thickness of stroke, color of stroke

White-space:nowarp set Chinese line at the end of the row display (Chinese default word wrap, English will not wrap, according to the space will wrap)

Word-break: The browser breaks line by default in a space, and when a word is out of range, it will continue to be displayed, break-all allow wrapping within words

(v) Background style:

Background (abbreviated form)

Background-color (background color)

Background-image (background map): URL (the address of the image), background and back color exist, background map will cover the background color

Background-repeat (background image repeat): no-repeat (uneven) repeat-x (horizontal tile) repeat-y (vertical tile) repeat tile (default)

Background-position (position coordinate, offset 2 attribute values: Horizontal and vertical): Specify position: left/center/right, can write pixels or percentages, write only one property value, default is write horizontal direction, The other direction is vertically centered by default (note: When using pixels, the upper-left corner of the picture moves in the actual distance in all directions, when using percentages, it is recommended not to use negative numbers, which represents the distribution of the remaining white space after the image is removed, for example: background-positon:30% After the picture is removed horizontally, the remaining area is 3:7 points)

Top/center/bottom when you write only one property value, the other one is centered by default

Background-clip:border-box (displayed from the outer edge of the border) Padding-box (displayed from the inner edge of the border) Content-box (starting from the text content, the background or back color not displayed in the display area will be cropped)

Background-origin: The starting point of the position Border-box (starting from the outer edge of the border) Padding-box (from the inner edge of the border) Content-box (starting from the text content area)

Background-size: Background Image size General 2 properties: Width height, when there is only one property value, the default is width, height, etc. than zoom

The wording of the width and height: a. Directly write pixel b. Write percentage (percentage of parent container height)