CSS Common font attributes (extra text hidden, or as ellipses) and background styles and 2 infrequently used properties of the background map: Background-origin and Background-clip

Source: Internet
Author: User
Tags word wrap

(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 are separated by a space, must be written in this order, font-size and line-height must be separated from the middle                      (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 rightletter-spacing (character spacing): The distance between a word and a wordtext-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 valuestext-stroke: Thickness of stroke, color of strokeWhite-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 colorbackground-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 horizontal, the other direction is vertically centered ( 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 ratio of the remaining white space after the image is removed, for example: background-positon:30% horizontal direction After removing the picture, the remaining area 3 : 7 min)Top/center/bottom When you write only one property value, the other one is centered by defaultBackground-clip:border-box (displayed from the edge of the border) Padding-box (displayed from the inner edge of the border) Content-box (from the beginning of the text content, not the background or back color of 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 zoomthe wording of the width and height: a. Directly write pixel b. Write percentage (percentage of parent container height)

CSS Common font attributes (extra text hidden, or as ellipses) and background styles and 2 infrequently used properties of the background map: Background-origin and Background-clip

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.