Common CSS font attributes (more text hidden, or displayed in the form of ellipsis), background styles, and two uncommon attributes of the background image: background-origin and background-clip,

Source: Internet
Author: User

Common CSS font attributes (more text hidden, or displayed in the form of ellipsis), background styles, and two uncommon attributes of the background image: background-origin and background-clip,

(1) Common font attributes:

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

Font-size: font size, in px or %

Font-family: font family, for example,

Font-style: The font style italic normal

Font-variant: small-caps converts a letter to a letter in size

Note: All attributes can also be written using one font attribute, for example:

               Font: italic bold 75%/1.8 'Microsoft yahei', sans-serif, write order: font-style font-variant font-weight font-size line-height font-famiyl, multiple styles are separated by spaces and must be written in this order. The font-size and line-height must be separated /.        (2) font color:Color: the attribute value can be in English, for example, red or rgb (0-255, 0-255, 0-255), or rgba (0-255, 0-255, 0-255, 0-1 ); 0 indicates transparency, 1 indicates opacity Opacity: 0-1; transparent. The difference between rgba () and rgba () is that this attribute applies to the label of the descendant, while rgba () does not(3) line spacing and alignment
    Line-height (Row height):. pixel unit, such as 48px B. c. the percentage is the same as that of B (adjust the vertical center of the text in the control, the height of the control = the line-height of the Control) text-align (align ): horizontal Alignment of text in block-level elements left center right letter-spacing (Character spacing): distance between words text-decoration (text modifier ): underline strikethrough line-through overline none (Hyperlink underline can be removed) overflow: controls the display mode of out-of-range text. auto automatically displays the scroll bar based on the number of texts, and scroll always displays the scroll bar, you can also use overflow-x and overflow-y to set the horizontal and vertical text-overflow: to set the display mode of Redundant text. Subtraction, ellipsis (Focus, let the Redundant text in each line show ellipsis,. white-spacing: nowrap B. overflow: hiddern text-overflow: ellipsis) text-shadow :( four property values: horizontal shadow distance from vertical shadow distance from fuzzy distance shadow color) text shadow, the first two property values cannot be saved. The larger the horizontal shadow distance, the right shift of the shadow. The longer the vertical shadow distance, the longer the shadow distance. The Shadow blur distance. The larger the value, the blurrier the shadow. The default value is 0. Shadow color. Optional. The default value is black text-indent: indent of the first line. You can use the pixel value to adjust the indent size. text-stroke: stroke width. stroke color: white-space: nowarp is used to display the last line of a Chinese line (the line breaks automatically by default in Chinese, but not in English. The line breaks automatically according to spaces) word-break: the browser breaks the line at spaces by default, when the length of a word exceeds the range, it is displayed continuously. break-all allows line breaks within the word. (5) Background style:Background (abbreviated form) background-color (background color) background-image (background image): url (image address). The background image and background color both exist, the background image will overwrite the background color background-repeat (repeat mode of the background image): no-repeat (not tiled) repeat-x (horizontal tile) repeat-y (vertical tile) repeat tile (default) background-position (two attribute values: horizontal and vertical at the position coordinate and offset): Specify the position left/center/right. You can write the pixel or percentage and only write one attribute value, the default value is the horizontal direction, and the other direction is the vertical center (NOTE: When pixels are used, the actual distance from the upper left corner of the image to each direction is used. When percentages are used, we recommend that you do not use a negative number to indicate the ratio of the remaining blank distance after the image is removed. For example, background-positon: 30% after the image is removed horizontally, the remaining area is) top/center/bottom when writing only one attribute value, the other is centered by default. background-clip: border-box (displayed starting from the outer border of the border) padding-box (displayed from the inner margin of the border) content-box (displayed from the text content, background images or background colors that are not in the display area will be cropped and not displayed) background-origin: position start point border-box (starting from the outer border of the border) padding-box (starting from the inner border) content-box (starting from the text content area) background-size: the size of the background image is generally two attributes: width and height. When there is only one attribute value, the default value is width, and the height is proportional to the zoom width.. write pixel B directly. write percentage (percentage of parent container width)

 

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.