4  

CSS1     ,         . (,   'display'   'none',        .           ,   .
    _______________________________________
   |                                       |
   |            ()        |
   |   _________________________________   |
   |  |                                 |  |
   |  |                            |  |
   |  |   ___________________________   |  |
   |  |  |                           |  |  |
   |  |  |                     |  |  |
   |  |  |   _____________________   |  |  |
   |  |  |  |                     |  |  |  |
   |  |  |  |           |  |  |  |
   |  |  |  |_____________________|  |  |  |
   |  |  |___________________________|  |  |
   |  |_________________________________|  |
   |_______________________________________|

            |       |

   |                             |

 ,          : (5.5.1-5.5.5)  ; (5.5.6-5.5.10)  ; (5.5.11-5.5.22)  .

     ,     (   . 5.3.2-5.3.7).        .   ,       .

      (   )    ,   .

         :    .
4.1  

   'display',   'block'  'list-item'    .  (floating)  ( ..    'float' ,  'none')   .

  ,       'UL'   .       . ,   ""    -    CSS1,          .
    <STYLE TYPE="text/css">
      UL {
        background: red;
        margin: A B C D;
        padding: E F G H;
      }
      LI {
        color: white;
        background: blue;
        margin: a b c d;
        padding: e f g h;
      }
    </STYLE>
    ..
    <UL>
      <LI>1  
      <LI>2  
    </UL>
    _______________________________________________________
  |                                                       |
  |    A            UL                   |
  |    _______________________________________________    |
  | D |                                               | B |
  |   |    E          UL                 |   |
  |   |    _______________________________________    |   |
  |   | H |                                       | F |   |
  |   |   |    a    LI           |   |   |
  |   |   |                |   |   |
  |   |   |    _______________________________    |   |   |
  |   |   | d |                               | b |   |   |
  |   |   |   |    e LI   (blue)   |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h  1          f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |     max(a, c)                         |   |   | <- . max
  |   |   |    _______________________________    |   |   |
  |   |   |   |                               |   |   |   |
  |   |   | d |    e LI   (blue)   |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h 2           f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |   c      LI  ,        |   |   |
  |   |   |                |   |   |
  |   |   |_______________________________________|   |   |
  |   |                                               |   |
  |   |    G                                          |   |
  |   |_______________________________________________|   |
  |                                                       |
  |   C                                                   |
  |_______________________________________________________|

  ,      . ,    ,      "",          .

      ,       .

      :
                               --------------- <-- 
                                
                               ---------------
                                 
                               ---------------
                                 
                               +-------------+ <-- 
    |        |        |        |             |         |         |         |
    |   |   |   |             |   |   |   |
    |-|---|--|---|---|----|--|
    |        |        |        |             |         |         |         |
                               +-------------+ <-- 
    ^                          ^             ^                             ^
   |  .  |  .  |   
                                 
                               ---------------
                                  
                               ---------------
                                 
                               --------------- <-- 

   -    ,   ,   .    -     ,   .  - .  -       ,   ;       ,      .  -     ,   .  -    ,  ,   ;       ,      .  -     ,    ( ).

  -   , ..       .  -   , . .     .
4.1.1  

           .       (..  ,     )      .                .        'LI'         'LI'      'LI'. ,    'UL'    'LI' ( "")    ,  'UL'    'LI'   .

   ,           .    ,        .
4.1.2  

         : 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right'  'margin-right'.        .

 , ""    'auto'.     ,  ,  UA  "" ,          .   ,   'auto'  ""     .

        'auto': " ", "",  " ".     'auto'  ""     ,         auto'.

""   - ,  UA (      ,      ).  ""   (         'auto'       ),      -.

     " ", ""  " "   'auto', UA    ,          .

        'auto',      " ".

           'auto',    - "",   (" ", / " ")    ,  ""  , ,          .

  ,   " "   " "    'auto',     .       .

  'auto'               ,    ,        .

    ,    .
4.1.3 -

   'display',   'list-item' (""),   ,   .     " " ('list-style').        " ":
  <STYLE TYPE="text/css">
    UL         { list-style: outside }
    UL.compact { list-style: inside }
  </STYLE>

  <UL>
    <LI>    
    <LI>    
  </UL>

  <UL CLASS=COMPACT>
    <LI>    
    <LI>    
  </UL>

      :
  *   
     

  *   
     

  *  
    

  *  
    

    ,       .
4.1.4  

   "" ('float'),            ,   ,   . ,    'left'   ""   ,        ,     .       . ,       ,         .

        (.  4.1.   ):

1.                .     .

2.                (   HTML)  ,           .     .

3.                 ,   .     .

4.          .

5.               .

6.           (.  4.4)  ,        HTML.

7.       .

8.        ,  -   .          .
  <STYLE TYPE="text/css">
    IMG { float: left }
    BODY, P, IMG { margin: 2em }
  </STYLE>

  <BODY>
    <P>
      <IMG SRC=img.gif>
       ,  ...
  </BODY>

      :
   ________________________________________
  |
  |          max( BODY,  P)
  |          ______________________________
  |    |    |              ,
  |   |   | IMG   , 
  |   |   |    _____     
  |   |   |   |     |    
  |   |   |   | IMG |     
  |   |   |   |     |   , 
  |   |   |   |_____|    
  | a  |   |             , 
  |    |    |              .
  | B  | P  |              ,
  | O  |    |   
  | D  |    |  
  | Y  |    | .

 ,    'P'    'IMG'.

  ,       ,     :
      :          ;
        .
4.2  

,    ,   .         .   :
  <P> <EM></EM>  <STRONG></STRONG>.</P>

 'P' -  ,     'EM'  'STRONG' - .    'P' ,       ,        :
     .

      ,       :
  <P> <EM> </EM>  .</P>

     :
   
    .

    , ,     ,          :

            -------------
   |
            -------------
  -----
   |  .
  -----

(     -   ASCII. .       4.4.)
4.3  

  -  ,  ,   .   'IMG'  ,    'SRC'.         .    ""('width')  'auto',        .   ,  'auto'     ,     ,       (       ).      "" ('height').

     ,   .
4.4  

    " " ('line-height'), ,  ,      .     ,       .  ,   12 ,

  " "   '14pt', ..    2 , 1   1  .         ,    .

    (font size)  " "   (leading).     (half-leading).        .

         " " (..        ),           .             .  ,          ,         " " ('vertical-align').          .

   ,  - ,               .  ,    " "       ,       .

 , (. )      ,     (   ,   )      ,        .

  ,         " ",     ,     ,         " ".          , ,  .

   ,           .   " "     ,       .     ,   ,        (.       ),     .
4.5 

        UA,   .          ,          :
    ?
     ,     ?

      : "      ",  CSS1      UA.    ,  UA      ,        CSS1.

  HTML     :   'BODY'     .    , CSS1       :

      'HTML'   'transparent',    ,       ,    'BODY'.          'transparent',     .

   :
  <HTML STYLE="background: url(http://style.com/marble.png)">
  <BODY STYLE="background: red">

  ,    marble.png.   'BODY' (      )  .

         , ,       'BODY'.
4.6  'BR'

    CSS1      'BR'.   HTML  'BR'      . ,    .   CSS      ,      CSS1,       'BR'