CSS compound attributes

========================================================== ============================
1. Background-Background
========================================================== ============================

Writing a single attribute

. Sample1 {
Background-color: # cccccc;/* Background Color */
Background-image: url(sample.gif);/* background image */
Background-repeat: No-Repeat;/* tiled (?) */
Background-Attachment: fixed;/* scroll with text (?), Rarely used */
Background-position: center;/* Background Image Position */
}

Composite attributes

Writing format
Background: Background-color background-image background-repeat background-Attachment Background-position;

Default Value
Background: transparent none repeat scroll 0% 0%;

Default Value (Chinese meaning)
Background: transparent/non-background image/Tile/background image scrolling with text (You must try it yourself if you do not understand it)/located in the upper left corner of the element

Change. sample1 to. sample2 according to the above method to get the same style.
. Sample2 {
Background: # cccccc url(sample.gif) No-repeat fixed center;
}

The writing sequence of background is easy to understand.

1. First, you must have the background color background-color. The background color is displayed before the background image (if any) is loaded. The default value is transparent (transparent, that is, the background setting of the application parent element or body), which can be omitted. However, it is best to write it to demonstrate the standard when applying some JS events;

2. The next step is the background image background-image. If this option is not available, the subsequent items will be meaningless;

3. Whether to tile background-repeat should be written before background-position. It is easy to understand that if repeat is set for this item (the entire element is filled), the position setting will basically be ineffective;

4. Fixed is generally used on the body, which is not seen in other places;

5. Background-position: There are two values, vertical and horizontal. PressCodeThere is no order in writing: for example, if the background image is located in the bottom right corner of the element, you can write it as bottom right or right bottom. If the percentage is written in order: for example, 20% 30%, 1st percentage indicates the horizontal position, and 2nd percentage indicates the vertical position. Interestingly, the vertical center here is center rather than middle. You can set a center to indicate the center of the image, which is equivalent to center or 50% 50%.

========================================================== ============================
2. Font
========================================================== ============================

Only the three most common font attributes are listed here.

. Sample3 {
Font-weight: bold;
Font-size: 12px;
Font-family: verdana;
}

Composite attributes

Writing format (css1 only)
Font: font-style font-variant font-weight font-size line-height font-family;

Default Value
Font: normal medium normal "Times New Roman ";

So the above. sample3 can be written as this
. Sample4 {
Font: bold 12px verdana;
}

You may be unfamiliar with this writing method, because the compound attribute of font is rarely seen because of its strict writing requirements.

1. The font attribute must contain the font-size and font-family values. If one item is missing, it is useless to write other font attributes.
In this case, Font: bold 12px; or font: bold verdana; may be abnormal in most browsers.

2. The writing order must strictly follow the sequence mentioned above.
If it is written as Font: 12px bold verdana; or font: verdana 12px bold, the browser will not explain it correctly.

3. 12 PX indicates the font size, not the Row Height.
To present both items at the same time, you must write: Font: bold 12px/2.0em verdana;, 12px indicates the font size, and 2.0em (that is, 12 * 2.0px) indicates the Row Height.

========================================================== ============================
Note the following:

If there is only one value, it is best not to apply the composite attribute. To avoid unnecessary troubles.

For example, if. sample6 {font-weight: bold} is written as. sample6 {Font: bold}, it will be useless.

Let's take another column, such. sampl5 {background-color: # cccccc;}, if written. sampl5 {Background: # cccccc;}, although the browser can correctly explain, this is not a standard writing.