CSS教材
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,167
On Slideshare
1,167
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS
  • 2. 1. Eric A. Meyer YUI RESET CSS To reduce browser inconsistencies( http:// meyerweb.com/eric/thoughts/2007/04/18/ reset-reasoning/ ) some browsers indent unordered and ordered lists with left margins(IE8), whereas others use left padding(Chrome) make that default look more consistent across browsers
  • 3. 1 (cont’d) * { margin: 0; padding: 0 }
  • 4. 2. HTML CSS HTML -> CSS -> ( )
  • 5. 3. HTML tag style ( ) HTML
  • 6. 4. CSS selector CSS 2.1 selector CSS CSS (ericsk)
  • 7. 4. selector (cont’d) Pattern Meaning Described in section * { padding:0px } * Universal selector class HTML E.warning Class selectors class (In HTML, the same as DIV[class~="warning"].) id #id #id E#myid ID selectors E Type selectors EF Descendant selectors E>F Child selectors E:first-child Matches element E when E is the first child of its parent. The :first-child pseudo-class Matches element E if E is the source anchor of a hyperlink of which the E:link E:visited target is not yet visited (:link) or already visited (:visited). The link pseudo-classes E:active E:hover E:focus Matches E during certain user actions. The dynamic pseudo-classes Matches element of type E if it is in (human) language c (the document E:lang(c) language specifies how language is determined). The :lang() pseudo-class E+F Adjacent selectors E~F Adjacent selectors E[foo] (whatever the value). Attribute selectors E[foo="warning"] Attribute selectors E[foo~="warning"] Attribute selectors E[lang|="en"] - Attribute selectors
  • 8. 4. (cont’d) child selector -> ≥IE 7 adjacent sibling -> ≥IE 7 pseudo-class -> http://www.quirksmode.org/ css/contents.html
  • 9. 6. CSS Box Model
  • 10. 5. document compatibility mode ? document.compatMode IE -> Quirks Mode, Standards Mode Quirks Mode -> document.compatMode=BackCompat Standards Mode-> document.compatMode=CSS1Compat
  • 11. 5. (cont’d) Internet Explorer Box Model Bug Inline Vertical Alignment aligned images to the bottom border aligned to the baseline
  • 12. 7. sans-serif, serif, monospace sans-serif( ) Verdana, Arial Black, Arial, Geneva serif( ) Times, Times New Roman monospace( ) Courier, Courier New, Andale Mono
  • 13. 7. (cont’d) serif sans serif serif sans serif sans serif serif serif word sans serif sans serif serif http://blog.bs2.to/post/EdwardLee/3401
  • 14. 8. px: pixel pt: point point cm, mm, in pc: 1pc == 12pt em: %:
  • 15. 8. (cont’d) 10px, 16px, 12pt, 15mm, etc. 50%, 120%, 1em, 1.5em YUI Font 13px => 100% (YUI ) em px / 13 = em (non IE)
  • 16. 9. (bonus) CSS3 #RRGGBB: 16-bit RGB ( 0~f ) eg. #00ff99 #RGB: 8-bit RGB ( 0~f ) eg. #0f9 rgb(r, g, b): rgb ( 0~255 ) eg. rgb(100,255,150) color:red CSS3: HSL(hue-saturation-lightness) rgba(r, g, b, a) alpha
  • 17. 10. CSS (inheritance)
  • 18. 11. !important (bonus) overwrite inline style? !important -> IE6
  • 19. 11. overwrite inline style? span[style]{ color: inherit !important; font-size: inherit !important; }
  • 20. 12. position position: static | absolute | relative | fixed static CSS absolute left top relative left top fixed absolute absolute fixed absolute block
  • 21. 13. float float: left | right | none; float block (float flow) HTML
  • 22. 13. (cont’d)
  • 23. 14. display visibility visibility=visible | hidden display: none/inline/block/list-item/run-in/compact/ marker; visibility:hidden Property disaply:none Property Render
  • 24. 15. CSS sprites background-position http://www.google.com/ if(document.images)new Image().src='/ images/nav_logo7.png' : Server
  • 25. 16. Image replacement SEO Fahrner Image Replacement (FIR)
  • 26. 17. HTML <link> CSS media document
  • 27. 18. Firefox + firebug( ) Chrome(or Safari) + devtools( ) computed style
  • 28. 19. (bonus) * _ # IE Sucks!!!
  • 29. 20. (bonus) CSS3 feature Rounded Corners border-radius: 10px; Border Image border-top-image border-right-image blahblah~ Multi Column column-count: 3;
  • 30. 20. (cont’d) Multiple backgrounds New Attribute selectors
  • 31. W3C Schools Google Doctype SitePoint CSS Reference QuirksMode http://blog.ericsk.org/ References