Page 101 - DCAP408_WEB_PROGRAMMING
P. 101

Unit 4: Cascading Style Sheets




                  content:  “Chapter  “  counter  (chapter)  “.  “;                             Notes
                  counter-increment:  chapter;    /*  Add  1  to  chapter  */
                  counter-reset:  section;            /*  Set  section  to  0  */
          }
          H2:before  {
                  content:  counter  (chapter)  “.”  counter  (section)  “  “;
                  counter-increment:  section;
          }
          H1  {counter-reset:  section  -1}
          H1  {counter-reset:  imagenum  99}
          OL  {counter-reset:  item}
          LI  {display:  block}
          LI:before  {content:  counter  (item)  “.  “;  counter-increment:  item}

          4.4.6 Margin Properties

          In CSS, the fundamental visual rendering model places all components of the document tree in
          physical and virtual rectangular boxes, each having a specific height and width. An element’s
          rendering  box consists primarily  of  an element’s  content at  the  center  (text,  images,  etc.)
          Surrounding the element’s content (moving outward in rectangular layers/strips) are optional
          padding, surrounded by any optional border effects, surrounded in turn by any optional margin
          values that may be specified.

          The margin properties allow the author to specify how much space will be inserted between
          other exterior elements and the current element border. Negative values may be used with
          margin properties to create overlapping content.

          Each side of the margin dimensions (top, right, bottom and left) can be addressed and controlled,
          independently using separate properties, or a convenient shorthand notation may be used that
          controls multiple sides at once.
                                             MARGIN
                                   margin-top
                                   margin-right
               margin
                                   margin-bottom
                                   margin-left
                                   auto
               margin-bottom       length
                                   %
                                   auto
               margin-left         length
                                   %
                                   auto
               margin-right        length
                                   %
                                   auto
               margin-top          length
                                   %


                 Example:
          BODY  {margin:  2em}  /*  all  margins  set  to  2em  */
          BODY  {margin:  1em  2em}  /*  top  &  bottom  =  1em,  right  &  left  =  2em  */



                                           LOVELY PROFESSIONAL UNIVERSITY                                   95
   96   97   98   99   100   101   102   103   104   105   106