CSS authoritative Guide--Notes

Source: Internet
Author: User

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).

1 <Div>2     <P>Helooo</P>3     <ul>4         <Li>111</Li>5         <Li><Strong>222</Strong></Li>6     </ul>7     <P>8         <em>333</em>9     </P>Ten </Div>

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.

CSS authoritative Guide--Notes

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.