A very shallow fable, the millennium old tree, the electricity hit the thunder, can not stand down, but is destroyed by the invasion of the ant. People who think they are proficient in CSS are often dizzy with small problems. It is usually a very small value. After the layer-by-layer amplification and distortion, the entire layout is distorted. CSS is a simple language that is easy to learn and use, but also the easiest way to get rid of spam.Code. This is because we have not studied this language in depth. In my opinion, CSS consists of the following three parts: Default Value, inherited system and weighted system. Default value, that is, the default attribute specified by the browser when the user does not set the attribute. The css framework basically has a reset. CSS files are reset to eliminate the differences between browsers. Inheritance systems are the things to be discussed below. The weighted system, that is, the priority issue, is not discussed in this article.
In CSS, many attributes can be inherited. For example, if the font of a paragraph is set to white, the font of the element does not need to be set or set to inhert. It is white. These attributes are calledInherited propertyIt will get the corresponding attributes from the parent ElementComputingAndConversionValue (computed value). If the parent element is in the same situation as it, it will continue to look up. If not, it will use the default value of the browser.
The following is a list of inherited properties:
Http://reference.sitepoint.com/css/inheritvalue
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 8"> <br/> <style type = "text/CSS"> <br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> function getstyle (El, style) {<br/> If (! + "\ V1") {<br/> style = style. replace (/\-(\ W)/g, function (all, letter) {<br/> return letter. touppercase (); <br/>}); <br/> return el. currentstyle [style]; <br/>}else {<br/> return document. defaultview. getcomputedstyle (El, null ). getpropertyvalue (style) <br/>}< br/> VaR _ = function (ID) {<br/> return document. getelementbyid (ID); <br/>}; <br/> window. onload = function () {<br/> alert (getstyle (_ ("text2"), "color ")) <br/>}< br/> </SCRIPT> </P> <p> <title> CSS </title> <br/> </pead> <br/> <body> <br/> <Div id = "text" style = "width: 20em; Height: 140px; Background: #8080c0; padding: 2px; Border: 1px solid red; color: # fff "> parent element <br/> <Div id =" text2 "style =" width: 80%; Height: 4em; Background: # b45b3e "> child element </div> <br/> </body> <br/> </ptml> <br/>
Run code
We have set a font style for the parent element. If no child element is set, the value of the child element is converted to the RGB format when the child element is retrieved (except IE !)
However, in IE7 and earlier versions, you cannot use inhert to set style attributes other than ction and visibility. For more information, see here and here.
In IE8, text-align of inherited property is invalid in th.
<Table> <tr> <TH> ruby </Th> <TH> rouvre </Th> </tr> <TD> by </TD> <TD> situ zhengmei </TD> </tr> </table>
Table, TR, TD, Th {border-collapse: collapse; Border: 1px solid #000 ;}table {text-align: Right ;}td, Th {width: 100px ;}
Originally, th should inherit the right-aligned text settings from the table, but it is invalid ......
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 8"> <br/> <style type = "text/CSS"> <br/> table, tr, TD, Th {<br/> border-collapse: collapse; <br/> border: 1px solid #000; <br/>}< br/> table {<br/> text-align: Right; <br/>}< br/> TD, Th {<br/> width: 100px; <br/>}< br/> </style> <br/> <title> CSS </title> <br/> </pead> <br/> <body> <br/> <Table> <br/> <tr> <br/> <TH> ruby </Th> <br/> <TH> rouvre </Th> <br /> </tr> <br/> <TD> by </TD> <br/> <TD> situ zhengmei </TD> <br /> </tr> <br/> </table> <br/> </body> <br/> </ptml> <br/>
Run code
It is also easy to solve IE8's mental retardation bug, that is, to explicitly set inhert.
Table, TR, TD, Th {border-collapse: collapse; Border: 1px solid #000 ;}table {text-align: Right ;}td, Th {width: 100px ;} th {text-align: Inherit ;}
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 8"> <br/> <style type = "text/CSS"> <br/> table, tr, TD, Th {<br/> border-collapse: collapse; <br/> border: 1px solid #000; <br/>}< br/> table {<br/> text-align: Right; <br/>}< br/> TD, Th {<br/> width: 100px; <br/>}< br/> Th {<br/> text-align: Inherit; <br/>}< br/> </style> <br/> <title> CSS </title> <br/> </pead> <br/> <body> <br/> <Table> <br/> <tr> <br/> <TH> ruby </Th> <br/> <TH> rouvre </Th> <br /> </tr> <br/> <TD> by </TD> <br/> <TD> situ zhengmei </TD> <br /> </tr> <br/> </table> <br/> </body> <br/> </ptml> <br/>
Run code
In addition, some CSS attributes cannot be inherited. The most classic type is the border series. It is calledNon-inherited propertyIf we do not set it, we can only get the default value of the browser. The default value is called initial value in Firefox. The good news is that the default value can be specified in Firefox, so we don't need to reset the style!
The following is a list of non-inherited property:
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 8"> <br/> <style type = "text/CSS"> <br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> function getstyle (El, style) {<br/> If (! + "\ V1") {<br/> style = style. replace (/\-(\ W)/g, function (all, letter) {<br/> return letter. touppercase (); <br/>}); <br/> return el. currentstyle [style]; <br/>}else {<br/> return document. defaultview. getcomputedstyle (El, null ). getpropertyvalue (style) <br/>}< br/> VaR _ = function (ID) {<br/> return document. getelementbyid (ID); <br/>}; <br/> window. onload = function () {<br/> alert (getstyle (_ ("text2"), "background-color ")) <br/>}< br/> </SCRIPT> </P> <p> <title> CSS </title> <br/> </pead> <br/> <body> <br/> <Div id = "text" style = "width: 20em; Height: 140px; Background: #8080c0; padding: 2px; Border: 1px solid red; color: # fff "> parent element <br/> <Div id =" text2 "style =" width: 80%; Height: 4em; color: # b45b3e "> child element </div> <br/> </body> <br/> </ptml> <br/>
Run code
If the background color is set for the parent element without the child element, the browser's default value transparent will be obtained (the W3C side seems to be converted to the RGB format as long as it is a color, the excess A is Alpha)
Http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
Http://elizabethcastro.com/html/extras/cssref.html
Next let's look at auto, which is a vague but length value. Applies to the following attributes:
In measurable attributes of block-level elements (such as width and height), if no value is set, the default value is auto, but it is easily overwritten by the value of the parent element, that is, it is implicitly converted to inhert. Because the inner element does not have a box model, if it is not set, Firefox will return the box to it, which is very unfavorable for Precise Calculation of the width and height of the element. Auto also has symmetry, which we often use in the center layout. In non-measure attributes, for example, overflow, we need to analyze the specific situation.
PS: This is another articleArticlePreparation. Please wait ..............................
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
