Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie CSS: selectors and the box model
Ähnlich wie CSS: selectors and the box model (20)
Mehr von Idan Gazit
CSS: selectors and the box model
- 1. CSS— a crash course in — selectors the box model Idan Gazit - @idangazit pyweb-il #20 / 25th Oct 2010
- 2. Selectors The Box Model Precompilers - next time
- 3. SELECTORS
- 4. h1 { color: red; font-size: 32px;} selector declaration block
- 5. h1 { color: red; font-size: 32px;} declaration selector declaration block
- 6. h1 { color: red; font-size: 32px;} declaration selector declaration block property value
- 7. h1 { color: red; font-size: 32px;} selector declaration block
- 8. IN THE BEGINNING, THERE WAS THE DOM
- 9. <!DOCTYPE HTML> <html> <head> <title>Show off the DOM!</title> </head> <body> <div id="content"> <p> Picture yourself on a boat in a river, with tangerine trees and marmalade skies. </p> </div> </body> </html>
- 17. p.large p of class “large” SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS p type #nav any element with id “nav” .intro.large multiple classes IE6
- 18. div > p child SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div p descendant h1 + p adjacent sibling IE6 IE6 *universal
- 19. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div ~ p general later sibling CSS 3 IE6
- 20. img[alt=“foo”] <img alt=“foo” … > SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS img[alt] <img alt=“…anything…” … > img[alt~=“foo”] <img alt=“blah foo bar” … > img[alt|=“foo”] <img alt=“blah-foo-bar” … > IE6 IE6 IE6 IE6
- 21. img[alt^=“foo”] <img alt=“foobar” … > SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS img[alt$=“foo”] <img alt=“barfoo” … > img[alt*=“foo”] <img alt=“barfoobar” … > IE6 IE6 IE6 CSS 3
- 22. PSEUDO-CLASSES :first-child :link :visited :hover :active :focus :lang(foo) SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS IE6 - links only IE7 - links only IE8 IE8 - still not 100%
- 24. FOREVER ALONE :first-of-type :last-of-type, :only-of-type :last-child, :only-child :not :empty :nth-child(…), :nth-of-type(…) :nth-last-child(), :nth-last-of-type() :target SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS FF3 None of this works in IE < 9. CSS 3 FF3 opera
- 25. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div>p:first-of-type <div> <h1>no</h1> <p>yes!</p> <p>no</p> </div> CSS 3None of this works in IE < 9.
- 26. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS li:only-child <ul> <li>no</li> <li>no</li> <li>no</li> </ul> <ul> <li>yes!</li> </ul> CSS 3None of this works in IE < 9.
- 27. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div.special *:not(ul) <div class= “special”> <h1>yes</h1> <p>yes</p> <ul>… no …</ul> </div> CSS 3None of this works in IE < 9.
- 28. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS :nth-child(formula) An+B: “Every A’th element starting from B” 3n: 0, 3, 6, 9… 3n+1: 1, 4, 7, 10… even (== 2n+1) odd (== 2n) CSS 3None of this works in IE < 9.
- 29. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS p:target p:target { color: red; } <nav> … <a href=“#about”>About Us</a> </nav> … <p id=“about”> About us blah blah blah </p> CSS 3None of this works in IE < 9.
- 31. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS li.optional:before li.optional:before { font-color: red; content: “optional - ” } <h1>Bring for hike:</h1> <ul> <li>hat</li> <li>water</li> <li class=“optional”>camera</li> </ul> Bring for hike: • hat • water • optional - camera IE8
- 32. SPECIFICITY style=“…” attribute in an element IDs attributes, classes, pseudo-classes elements, pseudo-elements Later rules of same specificity trump earlier rules http://www.w3.org/TR/CSS2/cascade.html#specificity
- 34. THE BOX MODEL
- 35. WTF? Doesn’t work the way you expect.
- 38. HOW BIG AM I? div { width: 400px; height: 500px; padding: 10px; border: 1px solid black; margin: 20px; }
- 39. HOW BIG AM I? width: 400px +10 +10 +1 +1 = 422px height: 500px +10 +10 +1 +1 = 522px padding left + right border left + right padding top + bottom border top + bottom
- 40. Math size + padding + border = actual size
- 41. More Math width: auto; containing block width - margin - border - padding = calculated width.
- 42. Margin Collapsing Yes, there are more surprises.
- 43. POP QUIZ <div id=“first”>…</div> <div id=“second”>…</div> #first { margin-bottom: 30px; } #second { margin-top: 20px; }
- 45. Thank you! @idangazit db.tt/D7TAX6X — or — www.slideshare.net/idangazit/css-selectors-and-the-box-model