Docstoc

CSS DHTML AJAX CSS Quick Reference Guides

Document Sample
CSS DHTML AJAX CSS Quick Reference Guides Powered By Docstoc
					CSS Quick
Reference
                                   B
            Chapters 2 through 10 present in detail the CSS
            properties and values and how to use them.
            In this online resource, those properties are
            presented in a more concise format, and
            include their possible values and browser
            compatibility. These tables also include
            information about the applicability of each
            property in the various types of HTML tags.
            Each property is described in terms of what it
            can be used with, whether the property is
            inherited by its child elements, and whether




                                                              CSS Quick Reference
            the property is supported by various browsers
            and operating systems.
            N   Table B.1: CSS Basics (Chapter 2)
            N   Table B.2: Pseudo-classes and pseudo-
                Elements (Chapter 2)
            N   Table B.3: Font Properties (Chapter 3)
            N   Table B.4: Text Properties (Chapter 4)
            N   Table B.5: Color and Background
                Properties (Chapter 5)
            N   Table B.6: Box Properties (Chapter 6)
            N   Table B.7: Visual Formatting Properties
                (Chapter 7)
            N   Table B.8: Visual Effect and UI
                Properties (Chapter 8)
            N   Table B.9: Table Properties (Chapter 9)
            N   Table B.10: Generated Content and List
                Properties (Chapter 10)
                                                         15
                      Online Resource B


                                 Browsers Legend                              Compatibility Legend
                       IE     Internet Explorer                      Y         Mac and Windows
                       FF     Firefox                                          Neither
                       S      Safari                                 M         Mac only
                       O      Opera                                  P         Problems
                       In addition to the browsers listed, remem-    All       Property can be applied to any
                       ber that Firefox is based on the same Gecko             HTML tag
                       rendering engine as all other Mozilla type
                                                                     Block     Property can be applied only to
                       browsers. Therefore, generally speaking,
                                                                               block-level tags
                       Netscape 7, Flock, and Camino will have
                       roughly the same compatibility as             Inline    Property can be applied only to
                       Firefox 1.5.                                            inline tags
                                                                     Boldface indicates the default value for
                                                                     that property
                                                                     Properties marked with a P in the browser
                                                                     columns are partially implemented or
                                                                     buggy in one or both operating systems.
                                                                     I generally recommend avoiding these
                                                                     properties.
CSS Quick Reference




                      16
                                                                                             CSS Quick Reference


Table B.1

CSS Basics
Name                                  IE6                IE7         FF1.5     FF2           O9        S2

<style>                               I                  I           I         I             I         I
<link>                                I                  I           I         I             I         I
.class                                I                  I           I         I             I         I
#ID                                   I                  I           I         I             I         I
@import                               P                  P           I         I             I         I
@media                                P                  P           I         I             I         I
A B                                                      P           I         I             I         I
A>B                                                      P           I         I             I         I
A+B                                                      P           I         I             I         I
[attr]                                                   I           I         I             I         I
Comments                              I                  I           I         I             I         I
!important                            I                  I           I         I             I         I
page-break-before,
page-break-after                      I                  I           I         I             I         I


Table B.2

Pseudo-Classes and Pseudo-Elements
Name                       Va l u e   Applies to   Inherited   IE6       IE7   FF1.5   FF2        O9        S2

:active                    —          Anchor       No          I         I     I       I          I         I




                                                                                                                      CSS Quick Reference
:after                     —          Block        No                          I       I          I
:before                    —          Block        No                          I       I          I
:hover                     —          All          No          P*        I     I       I          I         I
:first-child               —          Block        No                    P     I       I          I         I
:first-letter              —          Block        No          P         P     I       I          I         I
:first-line                —          Block        No          P         P     P       I          P         P
:focus                     —          All          No                          I       I          I         I
:lang()                    —          All          Yes                         I       I          I         I
:link                      —          Anchor       No          I         I     I       I          I         I
:visited                   —          Anchor       No          I         I     I       I          I         I

*Applies only to Anchor tags




                                                                                                                 17
                      Online Resource B


                      Table B.3

                      Font Properties
                      Name                    Va l u e                                       Applies to   Inherited   IE6   IE7   FF1.5 FF2   O9   S2

                      font                    <font-style>                                   All          Yes         I     I     I     I     I    I
                                              <font-variant>                                                          I     I     I     I     I    I
                                              <font-weight>                                                           I     I     I     I     I    I
                                              <font-size>/<lineheight>                                                I     I     I     I     I    I
                      font-family             <family-name>                                  All          Yes         I     I     I     I     I    I
                                              serif                                                                   I     I     I     I     I    I
                                              sans-serif                                                              I     I     I     I     I    I
                                              cursive                                                                 I     I     I     I     I    I
                                              fantasy                                                                 I     I     I     I     I    I
                                              monospace                                                               I     I     I     I     I    I
                                              inherit                                                                             I     I     I    I
                      font-size               <length>                                       All          Yes         I     I     I     I     I    I
                                              <percentage>                                                            I     I     I     I     I    I
                                              smaller                                                                 I     I     I     I     I    I
                                              larger                                                                  I     I     I     I     I    I
                                              xx-small                                                                I     I     I     I     I    I
                                              x-small                                                                 I     I     I     I     I    I
                                              small                                                                   I     I     I     I     I    I
                                              medium                                                                  I     I     I     I     I    I
                                              large                                                                   I     I     I     I     I    I
CSS Quick Reference




                                              x-large                                                                 I     I     I     I     I    I
                                              xx-large                                                                I     I     I     I     I    I
                                              <font-family>                                                           I     I     I     I     I    I
                                              inherit                                                                             I     I     I    I
                      font-style              normal                                         All          Yes         I     I     I     I     I    I
                                              italic                                                                  I     I     I     I     I    I
                                              oblique                                                                 I     I     I     I     I    I
                                              inherit                                                                             I     I     I    I
                      font-variant normal                                                    All          Yes         I     I     I     I     I    I
                                              small-caps                                                              I     I     I     I     I    I
                                              inherit                                                                             I     I     I    I
                      font-weight             normal                                         All          Yes         I     I     I     I     I    I
                                              bold                                                                    I     I     I     I     I    I
                                              bolder                                                                  I     I     I     I     I    I
                                              lighter                                                                 I     I     I     I     I    I
                                              100-900*                                                                I     I     I     I     I    I
                                              inherit                                                                             I     I     I    I

                      *Requires the visitor’s computer to have display-weighted fonts available




                      18
                                                                  CSS Quick Reference


Table B.4

Text Properties
Name              Va l u e        Applies to   Inherited   IE6    IE7   FF1.5 FF2   O9   S2

direction         rtl             All          Yes         I      I     I     I     I    I
                  ltr                                      I      I     I     I     I    I
letter-spacing    normal          All          Yes         I      I     I     I     I    I
                  <length>                                 I      I     I     I     I    I
                  inherit                                               I     I     I    I
line-height       normal          All          Yes         I      I     I     I     I    I
                  <number>                                 I      I     I     I     I    I
                  <length>                                 I      I     I     I     I    I
                  <percentage>                             I      I     I     I     I    I
                  inherit                                               I     I     I    I
                  auto
text-align        left            Block        Yes         I      I     I     I     I    I
                  right                                    I      I     I     I     I    I
                  center                                   I      I     I     I     I    I
                  justify                                  I      I     I     I     I    I
                  inherit                                               I     I     I    I
text-decoration   none            All          No          I      I     I     I     I    I
                  underline                                I      I     I     I     I    I
                  overline                                 I      I     I     I     I    I
                  line-through                             I      I     I     I     I    I
                  blink*                                                I     I     I    I
                  inherit                                               I     I     I    I




                                                                                                   CSS Quick Reference
text-indent       <length>        Block        Yes         I      I     I     I     I    I
                  <percentage>                             I      I     I     I     I    I
                  inherit                                               I     I     I    I
text-transform    none            All          Yes         I      I     I     I     I    I
                  capitalize                               I      I     I     I     I    I
                  uppercase                                I      I     I     I     I    I
                  lowercase                                I      I     I     I     I    I
                  inherit                                               I     I     I    I
unicode-bidi      bidi-override   All          Yes         I      I     I     I     I    I
                  embed                                    I      I     I     I     I    I
                  normal                                   I      I     I     I     I    I
                  inherit                                               I     I     I    I

                                                               table continues on next page




                                                                                              19
                      Online Resource B


                      Table B.4 continued

                      Text Properties
                      Name                          Va l u e                          Applies to              Inherited             IE6   IE7   FF1.5 FF2   O9   S2

                      vertical-align                baseline                          Inline                  No                    I     I     I     I     I    I
                                                    <percentage>                                                                    I     I     I     I     I    I
                                                    sub                                                                             I     I     I     I     I    I
                                                    super                                                                           I     I     I     I     I    I
                                                    top                                                                             I     I     I     I     I    I
                                                    text-top                                                                        I     I     I     I     I    I
                                                    middle                                                                          I     I     I     I     I    I
                                                    bottom                                                                          I     I     I     I     I    I
                                                    text-bottom                                                                     I     I     I     I     I    I
                                                    inherit                                                                                     I     I     I    I
                      white-space                   normal                            Block                   Yes                   I     I     I     I     I    I
                                                    pre                                                                             I     I     I     I     I    I
                                                    nowrap                                                                          I     I     I     I     I    I
                                                    pre-wrap                                                                                    I     I     I    I
                                                    pre-line                                                                                    I
                                                    inherit                                                                                     I     I     I    I
                      word-spacing                  normal                            All                     Yes                   I     I     I     I     I    I
                                                    <length>                                                                        I     I     I     I     I    I
                                                    inherit                                                                                     I     I     I    I

                      *Because it can be highly annoying, many browsers do not support blink, or they allow users to turn it off.
CSS Quick Reference




                      20
                                                                                  CSS Quick Reference


Table B.5

Color and Background Properties
Name                     Va l u e                  Applies to   Inherited   IE6   IE7   FF1.5 FF2   O9   S2
background               <background-color>        All          No          I     I     I     I     I    I
                         <background-image>                                 I     I     I     I     I    I
                         <background-repeat>                                I     I     I     I     I    I
                         <background-attachment>                            I     I     I     I     I    I
                         <background-position>                              P     P     I     I     I    I
                         inherit                                                        I     I     I    I
background- attachment   scroll                    All          No          I     I     I     I     I    I
                         fixed                                              I     I     I     I     I    I
                         inherit                                                        I     I     I    I
background-color         <color>                   All          No          I     I     I     I     I    I
                         transparent                                        I     I     I     I     I    I
                         inherit                                                        I     I     I    I
background-image         none                      All          No          I     I     I     I     I    I
                         url(<url>)                                         I     I     I     I     I    I
                         inherit                                                        I     I     I    I
background- position     <percentage>              Block        No          P     P     I     I     I    I
                         <length>                                           P     P     I     I     I    I
                         top                                                P     P     I     I     I    I
                         center (vertical)                                  P     P     I     I     I    I
                         bottom                                             P     P     I     I     I    I




                                                                                                                   CSS Quick Reference
                         left                                               P     P     I     I     I    I
                         center (horizontal)                                P     P     I     I     I    I
                         right                                              P     P     I     I     I    I
                         inherit                                                        I     I     I    I
background-repeat        repeat                    All          No          I     I     I     I     I    I
                         repeat-x                                           I     I     I     I     I    I
                         repeat-y                                           I     I     I     I     I    I
                         no-repeat                                          I     I     I     I     I    I
                         inherit                                                        I     I     I    I
color                    <color>                   All          Yes         I     I     I     I     I    I
                         inherit                                                        I     I     I    I
                         text-bottom                                        I     I     I     I     I    I




                                                                                                              21
                      Online Resource B


                      Table B.6

                      Box Properties
                      Name                     Va l u e         Applies to   Inherited   IE6    IE7   FF1.5 FF2   O9   S2

                      border                   <border-width>   All          No          I      I     I     I     I    I
                                               <border-style>                            P*     P*    I     I     I    I
                                               <color>                                   I      I     I     I     I    I
                                               inherit                                                I     I     I    I
                      border-color             <color>          All          No          I      I     I     I     I    I
                                               transparent                               P      I     I     I     I    I
                                               inherit                                                I     I     I    I
                      border-style             none             All          No          I      I     I     I     I    I
                                               hidden                                                 I     I     I    I
                                               dotted                                    P*     P*    I     I     I    I
                                               dashed                                    I      I     I     I     I    I
                                               solid                                     I      I     I     I     I    I
                                               double                                    I      I     I     I     I    I
                                               groove                                    I      I     I     I     I    I
                                               ridge                                     I      I     I     I     I    I
                                               inset                                     I      I     I     I     I    I
                                               outset                                    I      I     I     I     I    I
                                               inherit                                                I     I     I    I
                      border-top,
                      -right, -bottom, -left   <border-width>   All          No          I      I     I     I     I    I
CSS Quick Reference




                                               <border-style>                            P*     P*    I     I     I    I
                                               <color>                                   I      I     I     I     I    I
                                               inherit                                                I     I     I    I
                      border-top, -right,
                      -bottom, left-width      medium           All          No          I      I     I     I     I    I
                                               <length>                                  I      I     I     I     I    I
                                               thin                                      I      I     I     I     I    I
                                               thick                                     I      I     I     I     I    I
                                               inherit                                                I     I     I    I
                      border-width             medium           All          No          I      I     I     I     I    I
                                               <length>                                  I      I     I     I     I    I
                                               thin                                      I      I     I     I     I    I
                                               thick                                     I      I     I     I     I    I
                                               inherit                                                I     I     I    I
                      display                  block            All          No          I      I     I     I     I    I
                                               inline                                    I      I     I     I     I    I
                                               inline-table                                                       I
                                               list-item                                 I      I     I     I     I    I
                                               run-in                                                             I
                                               inline-block                                                       I

                                                                                             table continues on next page


                      22
                                                                            CSS Quick Reference


Table B.6 continued

Box Properties
Name                   Va l u e             Applies to   Inherited   IE6   IE7   FF1.5 FF2   O9   S2

                       table                                         I     I     I     I     I    I
                       table-caption                                             I     I     I    I
                       table-cell                                                I     I     I    I
                       table-column                                              P     P     P    P
                       table-column-group                                        P     P     P    P
                       table-footer-group                            P     P     I     I     I    I
                       table-header-group                            P     P     I     I     I    I
                       table-row                                                 I     I     I    I
                       table-row-group                                           I     I     I    I
                       none                                          I     I     I     I     I    I
                       inherit                                                   I     I     I    I
height                 auto                 Block        No          I     I     I     I     I    I
                       <length>                                      I     I     I     I     I    I
                       <percentage>                                  I     I     I     I     I    I
                       inherit                                                   I     I     I    I
margin                 <length>             All          No          I     I     I     I     I    I
                       <percentage>                                  I     I     I     I     I    I
                       auto                                          I     I     I     I     I    I
                       inherit                                                   I     I     I    I
margin-top, -right,




                                                                                                            CSS Quick Reference
-bottom, -left         <length>             All          No          I     I     I     I     I    I
                       <percentage>                                  I     I     I     I     I    I
                       auto                                          I     I     I     I     I    I
                       inherit                                                   I     I     I    I
max-width,
min-width,
max-height,
max-width              <length>             All          No                I     I     I     I    I
                       inherit                                                   I     I     I    I
-moz-border-radius,
-bottomleft,
-bottomright,
-topleft, -topright,   <length>             Block        No                      I     I
                       <percentage>                                              I     I
                       inherit                                                   I     I
padding                <length>             All          No          I     I     I     I     I    I
                       <percentage>                                  I     I     I     I     I    I
                       inherit                                                   I     I     I    I

                                                                         table continues on next page




                                                                                                       23
                      Online Resource B


                      Table B.6 continued

                      Box Properties
                      Name                     Va l u e       Applies to   Inherited   IE6   IE7   FF1.5 FF2   O9   S2

                      padding-top, -right,
                      -bottom, -left           <length>       All          No          I     I     I     I     I    I
                                               <percentage>                            I     I     I     I     I    I
                                               inherit                                             I     I     I    I
                      width                    auto           Block        No          P     I     I     I     I    I
                                               <length>                                P     I     I     I     I    I
                                               <percentage>                            P     I     I     I     I    I
                                               inherit                                             I     I     I    I

                      *Dotted same as dashed
CSS Quick Reference




                      24
                                                                                                     CSS Quick Reference


Table B.7

Visual Formatting Properties
Name                       Va l u e                       Applies to               Inherited   IE6   IE7   FF1.5 FF2   O9   S2

bottom                     auto                           All*                     No          I     I     I     I     I    I
                           <length>                                                            I     I     I     I     I    I
                           <percentage>                                                        I     I     I     I     I    I
                           inherit                                                                         I     I     I    I
clear                      none                           All                      No          I     I     I     I     I    I
                           left                                                                I     I     I     I     I    I
                           right                                                               I     I     I     I     I    I
                           both                                                                I     I     I     I     I    I
                           inherit                                                                         I     I     I    I
float                      none                           All                      No          I     I     I     I     I    I
                           left                                                                I     I     I     I     I    I
                           right                                                               I     I     I     I     I    I
                           inherit                                                                         I     I     I    I
left                       auto                           All*                     No          I     I     I     I     I    I
                           <length>                                                            I     I     I     I     I    I
                           <percentage>                                                        I     I     I     I     I    I
                           inherit                                                                         I     I     I    I
position                   static                         All                      No          I     I     I     I     I    I
                           absolute                                                            I     I     I     I     I    I
                           relative                                                            I     I     I     I     I    I
                           fixed                                                                     I     I     I     I    I




                                                                                                                                      CSS Quick Reference
                           inherit                                                                         I     I     I    I
right                      auto                           All*                     No          I     I     I     I     I    I
                           <length>                                                            I     I     I     I     I    I
                           <percentage>                                                        I     I     I     I     I    I
                           inherit                                                                         I     I     I    I
top                        auto                           All*                     No          I     I     I     I     I    I
                           <length>                                                            I     I     I     I     I    I
                           <percentage>                                                        I     I     I     I     I    I
                           inherit                                                                         I     I     I    I
z-index                    auto                           All                      No          I     I     I     I     I    I
                           number                                                              I     I     I     I     I    I
                           inherit                                                                         I     I     I    I

*The position property for the element must also be set to absolute or relative.




                                                                                                                                 25
                      Online Resource B


                      Table B.8

                      Visual Effect and User Interface Properties
                      Name                        Va l u e            Applies to        Inherited        IE6       IE7   FF1.5   FF2   O9   S2

                      clip                        auto                All*              No               I         I     I       I     I    I
                      rect(<top>
                      <right> <bottom>
                      <left>)*                                                                           I         I     I       I     I    I
                                                  inherit                                                                I       I     I    I
                      cursor                      auto                All               Yes              I         I     I       I     I    I
                                                  crosshair                                              I         I     I       I     I    I
                                                  hand**                                                 I         I
                                                  pointer                                                I         I  I          I     I    I
                                                  move                                                   I         I  I          I     I    I
                                                  n-resize                                               I         I  I          I     I    I
                                                  ne-resize                                              I         I  I          I     I    I
                                                  e-resize                                               I         I  I          I     I    I
                                                  se-resize                                              I         I  I          I     I    I
                                                  s-resize                                               I         I  I          I     I    I
                                                  sw-resize                                              I         I  I          I     I    I
                                                  w-resize                                               I         I  I          I     I    I
                                                  nw-resize                                              I         I  I          I     I    I
                                                  text                                                   I         I  I          I     I    I
                                                  wait                                                   I         I  I          I     I    I
                                                  help                                                   I         I  I          I     I    I
CSS Quick Reference




                      opacity                     <0.0ñ1.0>           All               Yes                ***   **** I          I     I    I
                      overflow                    visible             All               No               I     I      I          I     I    I
                                                  hidden                                                 I     I      I          I     I    I
                                                  scroll                                                 I     I      I          I     I    I
                                                  auto                                                   I     I      I          I     I    I
                                                  inherit                                                             I          I     I    I
                      visibility                  inherit             All               Yes****          I     I      I          I     I    I
                                                  visible                                                I     I      I          I     I    I
                                                  hidden                                                 I     I      I          I     I    I
                                                  collapse                                                            I          I     P    I

                      *Should be rect (<top>,<right>,<bottom>,<left>), but IE does not support use of the comma.
                      **Same as pointer.
                      ***IE supports opacity change using filters. See Chapter 8.
                      ****If visibility is set to inherit.




                      26
                                                                                               CSS Quick Reference


Table B.9

Table Properties
Name                Va l u e                Applies to           Inherited        IE6   IE7   FF1.5 FF2    O9    S21   O7

border-collapse     collapse                table                No               I     I      I     I     I     I
                    separate                                                      I     I      I     I     I     I
                    inherit                                                                    I     I     I     I
border-spacing      <length>                Table                No                            I     I     I     I
                    inherit                                                                    I     I     I     I
caption-side        top                     Table                No                            I     I     I     I
                    left                                                                       I     I     I     I
                    bottom                                                                     I     I     I     I
                    right                                                                      I     I     I     I
                    inherit                                                                    I     I     I     I
empty-cells         show                    Table                No                            I     I     I     I
                    hide                                                                       I     I     I     I
                    inherit                                                                    I     I     I     I


Table B.10

Generated Content and List Properties
Name                Va l u e                        Applies to        Inherited         IE6    IE7   FF1.5 FF2   O9    S2

content             none                            All               No
                    normal                                                                           I     I     I     I




                                                                                                                                 CSS Quick Reference
                    <string>                                                                         I     I     I     I
                    <URL >                                                                           I     I     I     I
                    <counter>                                                                        I     I     I     I
                    attr(<selector>)                                                                 I     I     I     I
                    open-quote                                                                       I     I     I     I
                    close-quote                                                                      I     I     I     I
                    no-open-quote                                                                    I     I     I     I
                    no-close-quote                                                                   I     I     I     I
                    inherit                                                                          I     I     I     I
counter-increment   <num>                           All               No                             I     I     I     I
                    none                                                                             I     I     I     I
                    inherit                                                                          I     I     I     I
counter-reset       < num>                          All               No                             I     I     I     I
                    none                                                                             I     I     I     I
                    inherit                                                                          I     I     I     I
list-style          <list-style-type>               All               Yes               I      I     I     I     I     I
                    <list-style-position>                                               I      I     I     I     I     I
                    <list-style-image>                                                  I      I     I     I     I     I
                    inherit                                                                          I     I     I     I

                                                                                            table continues on next page


                                                                                                                            27
                      Online Resource B


                      Table B.10 continued

                      Generated Content and List Properties
                      Name                   Va l u e               Applies to   Inherited   IE6   IE7   FF1.5 FF2   O9   S2

                      list-style-image       none                   All          Yes         I     I     I     I     I    I
                                             url(<url>)                                      I     I     I     I     I    I
                                             inherit                                                     I     I     I    I
                      list-style-position    outside                All          Yes         I     I     I     I     I    I
                                             inside                                          I     I     I     I     I    I
                                             inherit                                                     I     I     I    I
                      list-style-type        disc                   All          Yes         I     I     I     I     I    I
                                             circle                                          I     I     I     I     I    I
                                             square                                          I     I     I     I     I    I
                                             decimal                                         I     I     I     I     I    I
                                             decimal-leading-zero                                        I     I     I    I
                                             lower-roman                                     I     I     I     I     I    I
                                             upper-roman                                     I     I     I     I     I    I
                                             lower-greek                                                 I     I     I    I
                                             lower-latin                                                 I     I     I    I
                                             upper-latin                                                 I     I     I    I
                                             armenian                                                    I     I     I    I
                                             georgian                                                    I     I     I    I
                                             lower-alpha                                     I     I     I     I     I    I
                                             upper-alpha                                     I     I     I     I     I    I
CSS Quick Reference




                                             none                                            I     I     I     I     I    I
                                             inherit                                                     I     I     I    I
                      quotes                 <string>               All          No                      I     I     I    I
                                             none                                                        I     I     I    I
                                             inherit                                                     I     I     I    I




                      28

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:61
posted:1/20/2011
language:English
pages:14
Description: CSS DHTML AJAX CSS Quick Reference Guides