How to write css composite properties
===================================================== ========
1. Background - background
======================================= =====================
Single property
writing.sample1 {
background-color: #CCCCCC; /*background color*/
background-image: url(sample.gif ); /*background image*/
background-repeat: no-repeat; /*tiling(?)*/
background-attachment: fixed; /*scroll with text(?), rarely used*/
background-position: center center; /*Background image position*/
}
Writing format of compound properties
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 / no background image / tiled / background image scrolls with the text (if you don't understand, you must try it yourself) / located in the upper left corner of the element
According to the above method, change .sample1 to .sample2 to get the same style.
.sample2 {
background: #CCCCCC url(sample.gif) no-repeat fixed center center;
}
The writing order of background is easier to understand.
1. First of all, there must be a background color background-color. Before the background image (if set) is not loaded, the background color is displayed first. The default is transparent (transparent, that is, the background setting of the parent element or BODY is applied), which can be omitted, but it is better to write it when applying some JS events to show the specification;
2. The next is the background image background-image. If there is no item, then the following items have no meaning;
3. Whether the background-repeat is tiled should be written before the background-position, which is easy to understand. If this item is set to repeat (to cover the entire element), then the position The setting is basically useless;
4. fixed is generally used on the body, and is rarely seen in other places;
5. background-position: There are 2 values, vertical position and horizontal position. There is no order in the code writing method: for example, the background image is located in the lower right corner of the element, which can be written as bottom right or right bottom; if it is written in percentage, there is an order: such as 20% 30%, the first percentage means horizontal position, the 2nd percentage represents the vertical position. The interesting thing is that the vertical centering here is center instead of middle. You can set a center to represent the center of the image, which is equivalent to center center or 50% 50%.
===================================================== ========
2. Font - font
======================================= ======================
Writing of a single attribute, only the three most commonly used font attributes are listed here.
.sample3 {
font-weight: bold;
font-size: 12px;
font-family: Verdana;
}
Writing format for compound properties
(css1 only)
font : font-style font-variant font-weight font-size line-height font -family;
default value
font: normal normal normal medium normal "Times New Roman" ;
so the above .sample3 can be written like
this.sample4 {
font: bold 12px Verdana;
}
You may be unfamiliar with this writing, because the font is a composite property Rarely seen, due to its stricter writing requirements.
1. There must be two values of font-size and font-family in the font property. If there is one missing item, it is useless to write all the other font attributes.
If so font: bold 12px; or font: bold Verdana; will behave strangely in most browsers.
2. The order of writing must be strictly in the order mentioned above.
If written as font: 12px bold Verdana; or font: Verdana 12px bold, the browser will not interpret it correctly.
3. The 12px here is the font size, not the line height.
If you want to express these two at the same time, you must write: font: bold 12px/2.0em Verdana; , 12px means font size, 2.0em (that is, 12*2.0px) means line height.
===================================================== ========
One final note:
if there is only one value, it is best not to apply a composite property. To avoid unnecessary trouble.
For example, .sample6 {font-weight: bold} , if you write .sample6 {font: bold}, it will have no effect.
Take another example, such as .sampl5 {background-color: #CCCCCC; } , if it is written as .sampl5 {background: #CCCCCC; } , although the browser can interpret it correctly, it is not a standard way of writing.
1. Background - background
======================================= =====================
Single property
writing.sample1 {
background-color: #CCCCCC; /*background color*/
background-image: url(sample.gif ); /*background image*/
background-repeat: no-repeat; /*tiling(?)*/
background-attachment: fixed; /*scroll with text(?), rarely used*/
background-position: center center; /*Background image position*/
}
Writing format of compound properties
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 / no background image / tiled / background image scrolls with the text (if you don't understand, you must try it yourself) / located in the upper left corner of the element
According to the above method, change .sample1 to .sample2 to get the same style.
.sample2 {
background: #CCCCCC url(sample.gif) no-repeat fixed center center;
}
The writing order of background is easier to understand.
1. First of all, there must be a background color background-color. Before the background image (if set) is not loaded, the background color is displayed first. The default is transparent (transparent, that is, the background setting of the parent element or BODY is applied), which can be omitted, but it is better to write it when applying some JS events to show the specification;
2. The next is the background image background-image. If there is no item, then the following items have no meaning;
3. Whether the background-repeat is tiled should be written before the background-position, which is easy to understand. If this item is set to repeat (to cover the entire element), then the position The setting is basically useless;
4. fixed is generally used on the body, and is rarely seen in other places;
5. background-position: There are 2 values, vertical position and horizontal position. There is no order in the code writing method: for example, the background image is located in the lower right corner of the element, which can be written as bottom right or right bottom; if it is written in percentage, there is an order: such as 20% 30%, the first percentage means horizontal position, the 2nd percentage represents the vertical position. The interesting thing is that the vertical centering here is center instead of middle. You can set a center to represent the center of the image, which is equivalent to center center or 50% 50%.
===================================================== ========
2. Font - font
======================================= ======================
Writing of a single attribute, only the three most commonly used font attributes are listed here.
.sample3 {
font-weight: bold;
font-size: 12px;
font-family: Verdana;
}
Writing format for compound properties
(css1 only)
font : font-style font-variant font-weight font-size line-height font -family;
default value
font: normal normal normal medium normal "Times New Roman" ;
so the above .sample3 can be written like
this.sample4 {
font: bold 12px Verdana;
}
You may be unfamiliar with this writing, because the font is a composite property Rarely seen, due to its stricter writing requirements.
1. There must be two values of font-size and font-family in the font property. If there is one missing item, it is useless to write all the other font attributes.
If so font: bold 12px; or font: bold Verdana; will behave strangely in most browsers.
2. The order of writing must be strictly in the order mentioned above.
If written as font: 12px bold Verdana; or font: Verdana 12px bold, the browser will not interpret it correctly.
3. The 12px here is the font size, not the line height.
If you want to express these two at the same time, you must write: font: bold 12px/2.0em Verdana; , 12px means font size, 2.0em (that is, 12*2.0px) means line height.
===================================================== ========
One final note:
if there is only one value, it is best not to apply a composite property. To avoid unnecessary trouble.
For example, .sample6 {font-weight: bold} , if you write .sample6 {font: bold}, it will have no effect.
Take another example, such as .sampl5 {background-color: #CCCCCC; } , if it is written as .sampl5 {background: #CCCCCC; } , although the browser can interpret it correctly, it is not a standard way of writing.