Learn CSS (i)

Source: Internet
Author: User
Tags ming

  1. font:12px/22px "\5b8b\4f53", Arial, Helvetica, Sans-serif
    1. FONT:12PX/22PX refers to font size/font line height
    2. "\5b8b\4f53″" is "Song Body". In Unicode, it is not necessary to SimSun because some versions of Firefox and Opera do not support the SimSun notation. Comment garbled: It is strongly recommended not to comment in Chinese.
    3. New Fine Ming body \65b0\7ec6\660e\4f53
      Fine Ming Body \7ec6\660e\4f53
      Standard Italic \6807\6977\4f53
      Blackbody \9ed1\4f53
      Song Body \5b8b\4f53
      New song Body \65b0\5b8b\4f53
      Imitation \4eff\5b8b
      Italic \6977\4f53
      Imitation _gb2312 \4eff\5b8b_gb2312
      Italic _gb2312 \6977\4f53_gb2312
      Microsoft is in black \5fae\x8f6f\6b63\9ed1\4f53
      Microsoft ya Black \5fae\8f6f\96c5\9ed1
    4. Arial is a non-liner-style TrueType font distributed with multiple sets of Microsoft applications
    5. Helvetica is the default font for Apple computers, and the Arial font used by Microsoft is also derived from it.
    6. Sans-serif represents a sans serif font and is a generic font family.
  2. Margin:0 Auto indicates that the upper and lower bounds are 0, and the left or right is adaptive to the same value (i.e. centering) according to width
  3. Background:url (.. /images/list01.png) no-repeat 0 center;background:url (.. /images/bg.png) no-repeat-4px-3px;
    1.  0 Center means horizontal position 0 Vertical Position Center
      -4PX-3PX means horizontal position -4px vertical position -3px
    2. Is the same as the Background-position property, which sets the starting position of the background image.
    3. Possible values
      Top left
      Top Center
      Top Right
      Center left
      Center Center
      Center Right
      Bottom Left
      Bottom Center
      Bottom right (above, if you specify only one keyword, then the second value will be "center".) )
      X y% (The first value is the horizontal position and the second value is the vertical position.) The upper-left corner is 0% 0%. The lower right corner is 100% 100%. If you specify only one value, the other value will be 50%. )
      MPX NPX (the first value is a horizontal position, the second value is the vertical position.) The upper-left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit. If you specify only one value, the other value will be 50%. )
      You can mix the% and position values.
  4. Display
    1. D isplay:inline; inline elements, which are displayed on the same line.
      Display:block; Block-level elements, which are line breaks, are swapped to the second row.
      Display:inline-block; is a block-level element within the same line .
    2. Some HTML elements have display:block in the natural zone; style attributes, such as
      <div>
      <p>
      <ul>,<ol>,<dl>
      <li>,<dt>,<dd>
      <table>
      <pre>
      Element, which is displayed as a block style, takes the space that is available in a row to occupy the span and not allow another element to walk with it.
    3. Some HTML elements are naturally with display:inline; style attributes, which are also the default styles for elements, such as
      <span>
      <a>
      <strong>
      <em>

      <br>
      elements, which do not break the flow of the document arrangement, are arranged in a row one by one.
    4. When you want to make a horizontal list, one way is to use float to do it, but you have to tolerate its drawbacks, and the other is to use display:inline-block;
    5. Display:inline-block; When you style a list, the list elements can be arranged in rows, while elements retain their block properties, such as high and wide, top and bottom margins, and so on. However, for elements with different height content, it is often necessary to set the alignment such as Vertical-align:top, which aligns the top of the element.
  5. Description of cursor

    Sets or retrieves the cursor shape of the mouse pointer that is moved on the object.
    The value of this property can be multiple, separated by commas. If the first value cannot be understood by the client system or the cursor specified cannot be found and displayed, the second value will be tried. And so on This property does not work if all values are not available. The cursor is not changed.

Learning css (i)

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.