The following small series for everyone to bring a must-see CSS authoritative guide notes. Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.
1th chapter CSS and documentation
1, element: replace Element (img input), non-replacement element (most spans).
2,link:rel (representing relationship: stylesheet, candidate style sheet: alternate stylesheet); type (text/css); Media: (All (all representations of media, Screen,print), Title (mates with candidates).
3, @import URL (sheet1.css) needs to be used within a style, before other CSS rules.
4, backward accessibility:<style><!--style--></style>, so that older browsers will ignore the style, the browser can understand the CSS can read the style sheet normally.
5,CSS NOTE:/* */.
2nd Chapter Selector
1, when grouping declarations, be sure to use semicolons at the end of each declaration.
2,p.warming.help {background:red;} matches only the P element of class containing warming and help, and if P contains warming and others, it does not match.
3, in fact, the browser does not check the uniqueness of the ID in HTML, but this can make it more difficult to write the DOM.
4, Property selector: H1[class] {...}
H1[class= '] {...} Exact match
H1[class~= '] {...} Partially matches [class^= '] with what begins [class$= '] with what end [class*= '] contains all elements of what
*[lang|= ' en ' for a particular property selector, the lang attribute is chosen to be equal to EN or all elements beginning with en-.
5, select the child element:h1>strong; Select adjacent sibling element h1+p (H1 and P have a common parent element, and finally select P).
6, Link pseudo-class: Link, Access Links: visited (they are all static), equivalent to <body link= "vlink=" >.
Dynamic pseudo-Class: Focus, mouse pause: hover, active: active. (Dynamic pseudo-class can be used with any element)
Suggested Pseudo-Class order: Link-visited-focus-hover-active.
Select the first child element (: First-child), which is easily misunderstood, is all the first child elements (in the following example, the element as the first child element includes the first p, the first Li and strong, and the EM).
<p> <p>helooo</p> <ul> <li>111</li> <li><strong >222</strong></li> </ul> <p> <em>333</em> </p> </p>
According to the language selection (: lang ()), such as *:lang (FR) {color:red;} This is to turn all French elements into red.
Pseudo-Element selector: First letter: first-letter, user agent dynamic formation of false elements <p:first-letter>;
First line: First-line;
Before and after: Before:after.