Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

CSS教材 CSS教材 Presentation Transcript

  • CSS
  • 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
  • 1 (cont’d) * { margin: 0; padding: 0 }
  • 2. HTML CSS HTML -> CSS -> ( )
  • 3. HTML tag style ( ) HTML
  • 4. CSS selector CSS 2.1 selector CSS CSS (ericsk)
  • 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
  • 4. (cont’d) child selector -> ≥IE 7 adjacent sibling -> ≥IE 7 pseudo-class -> http://www.quirksmode.org/ css/contents.html
  • 6. CSS Box Model
  • 5. document compatibility mode ? document.compatMode IE -> Quirks Mode, Standards Mode Quirks Mode -> document.compatMode=BackCompat Standards Mode-> document.compatMode=CSS1Compat
  • 5. (cont’d) Internet Explorer Box Model Bug Inline Vertical Alignment aligned images to the bottom border aligned to the baseline
  • 7. sans-serif, serif, monospace sans-serif( ) Verdana, Arial Black, Arial, Geneva serif( ) Times, Times New Roman monospace( ) Courier, Courier New, Andale Mono
  • 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
  • 8. px: pixel pt: point point cm, mm, in pc: 1pc == 12pt em: %:
  • 8. (cont’d) 10px, 16px, 12pt, 15mm, etc. 50%, 120%, 1em, 1.5em YUI Font 13px => 100% (YUI ) em px / 13 = em (non IE)
  • 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
  • 10. CSS (inheritance)
  • 11. !important (bonus) overwrite inline style? !important -> IE6
  • 11. overwrite inline style? span[style]{ color: inherit !important; font-size: inherit !important; }
  • 12. position position: static | absolute | relative | fixed static CSS absolute left top relative left top fixed absolute absolute fixed absolute block
  • 13. float float: left | right | none; float block (float flow) HTML
  • 13. (cont’d)
  • 14. display visibility visibility=visible | hidden display: none/inline/block/list-item/run-in/compact/ marker; visibility:hidden Property disaply:none Property Render
  • 15. CSS sprites background-position http://www.google.com/ if(document.images)new Image().src='/ images/nav_logo7.png' : Server
  • 16. Image replacement SEO Fahrner Image Replacement (FIR)
  • 17. HTML <link> CSS media document
  • 18. Firefox + firebug( ) Chrome(or Safari) + devtools( ) computed style
  • 19. (bonus) * _ # IE Sucks!!!
  • 20. (bonus) CSS3 feature Rounded Corners border-radius: 10px; Border Image border-top-image border-right-image blahblah~ Multi Column column-count: 3;
  • 20. (cont’d) Multiple backgrounds New Attribute selectors
  • W3C Schools Google Doctype SitePoint CSS Reference QuirksMode http://blog.ericsk.org/ References