Your SlideShare is downloading. ×
0
CSS
1. Eric A. Meyer        YUI
 RESET CSS

To reduce browser inconsistencies( http://
meyerweb.com/eric/thoughts/2007/04/18/
...
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
                        (...
4.                             selector                                                   (cont’d)
        Pattern        ...
4.                             (cont’d)
child selector -> ≥IE 7

adjacent sibling -> ≥IE 7

pseudo-class -> http://www.qui...
6.   CSS Box Model
5.         document compatibility mode ?


     document.compatMode

     IE -> Quirks Mode, Standards Mode

     Quirks M...
5. (cont’d)
    Internet Explorer Box Model Bug




    Inline Vertical Alignment




aligned images to the bottom border ...
7.                            sans-serif, serif,
monospace


  sans-serif(            )

        Verdana, Arial Black, Ari...
7. (cont’d)
serif     sans serif
  serif                                                     sans
  serif                 ...
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

...
9.
      (bonus) CSS3
#RRGGBB: 16-bit      RGB     ( 0~f ) eg. #00ff99

#RGB: 8-bit RGB      ( 0~f ) eg. #0f9

rgb(r, g, b...
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
abs...
13. float



  float: left | right | none;

                   float
  block                   (float
            flow)

      ...
13. (cont’d)
14. display           visibility

visibility=visible | hidden

display: none/inline/block/list-item/run-in/compact/
marker...
15.          CSS sprites

  background-position

  http://www.google.com/

  if(document.images)new Image().src='/
  image...
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: 10p...
20. (cont’d)

Multiple backgrounds

New Attribute selectors
W3C Schools
     Google Doctype
SitePoint CSS Reference
      QuirksMode
  http://blog.ericsk.org/




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

CSS教材

863

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
863
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "CSS教材"

  1. 1. CSS
  2. 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. 3. 1 (cont’d) * { margin: 0; padding: 0 }
  4. 4. 2. HTML CSS HTML -> CSS -> ( )
  5. 5. 3. HTML tag style ( ) HTML
  6. 6. 4. CSS selector CSS 2.1 selector CSS CSS (ericsk)
  7. 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. 8. 4. (cont’d) child selector -> ≥IE 7 adjacent sibling -> ≥IE 7 pseudo-class -> http://www.quirksmode.org/ css/contents.html
  9. 9. 6. CSS Box Model
  10. 10. 5. document compatibility mode ? document.compatMode IE -> Quirks Mode, Standards Mode Quirks Mode -> document.compatMode=BackCompat Standards Mode-> document.compatMode=CSS1Compat
  11. 11. 5. (cont’d) Internet Explorer Box Model Bug Inline Vertical Alignment aligned images to the bottom border aligned to the baseline
  12. 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. 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. 14. 8. px: pixel pt: point point cm, mm, in pc: 1pc == 12pt em: %:
  15. 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. 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. 17. 10. CSS (inheritance)
  18. 18. 11. !important (bonus) overwrite inline style? !important -> IE6
  19. 19. 11. overwrite inline style? span[style]{ color: inherit !important; font-size: inherit !important; }
  20. 20. 12. position position: static | absolute | relative | fixed static CSS absolute left top relative left top fixed absolute absolute fixed absolute block
  21. 21. 13. float float: left | right | none; float block (float flow) HTML
  22. 22. 13. (cont’d)
  23. 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. 24. 15. CSS sprites background-position http://www.google.com/ if(document.images)new Image().src='/ images/nav_logo7.png' : Server
  25. 25. 16. Image replacement SEO Fahrner Image Replacement (FIR)
  26. 26. 17. HTML <link> CSS media document
  27. 27. 18. Firefox + firebug( ) Chrome(or Safari) + devtools( ) computed style
  28. 28. 19. (bonus) * _ # IE Sucks!!!
  29. 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. 30. 20. (cont’d) Multiple backgrounds New Attribute selectors
  31. 31. W3C Schools Google Doctype SitePoint CSS Reference QuirksMode http://blog.ericsk.org/ References
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×