5  CSS1

              .            ,  CSS1.
5.1   .

          ,   :
     : N | NW | NE
     : [ <length> | thick | thin ]{1,4}
     : [<family-name> , ]* <family-name>
     : <url>? <color> [ / <color> ]?
     : <url> || <color>

  "<" and ">"    .     <length> (), <percentage> (, ), <url>, <number> ()  <color> ();     6.    (,  <font-family>  <border-style>)     .*

   - ,    ,   .  "" (/)   (,)    .

 -  ,   ,       .   (A|B)    (-);     .   (A||B)    (-) -     ,    .  ([]) - .   ,  -,   ,  -. , "a b | c || d e "  "[ a b ] | [ c || [ d e ]]".

 ,            :
 (*) ,   ,        .
 (+) ,   ,        .
  (?) ,   ,      (optional).
     ({A,B}) ,   ,              .
5.2  

            .  ,         ,  ,     ,     . ,       'italic',      ,  Oblique, Slanted, Incline, Cursive  Kursiv.  ,          .

CSS1    : "" ('font-family'), "" ('font-style'), "" ('font-variant'),   "" ('font-weight'), "" ('font-size'), "" 'font'.
5.2.1  .

       ,         .      ,      ,   UA (,             ).

1. UA     CSS1     UA . UA     ,         .       ,    .

2.           , UA   ,    .     , UA   "" ('font-family')     .      ,      ,    .        UA,      .

3.  ,    . 2     ,         ,  . 2    .

4.     ,        ,  . 2      ,   . .       .

5.     .2     ,   ,   UA  ,    . 2,    ,        .

(           CSS1   ).

    (2)  :

1. "" ('font-style')    . "" ('italic')      ,       UA    CSS  'italic' (),  'oblique'.        ,  ""  .

2.   "". ""  ,    " " ('small-caps'); " "  (1) ,   'small-caps', (2) ,        (3) ,      .             .

3. ""        . (.  "  ").

4. ""  ('font-size')     ,  UA. (        ,            20%.)  , ,    ""  ,     "",  ,    ,  .
5.2.2    ('font-family').
: [[<family-name> | <generic-family>],]* [<family-name> |
<generic-family>]
 :  UA
 :  
: 
 : .

       /     .      CSS1,        :
  BODY { font-family: gill, helvetica, sans-serif }

    :
<family-name>
    (   - "gill"  "helvetica").
<generic-family>
        .   :
'serif' (. Times)
'sans-serif' (. Helvetica)
'cursive' (. Zapf-Chancery)
'fantasy' (. Western)
'monospace' (. Courier)

            .

 ,  ,    :
  BODY { font-family: "new century schoolbook", serif }

  <BODY STYLE="font-family: 'My own font', fantasy">

  ,                     .
5.2.3    ('font-style')
: normal | italic | oblique
 : normal
 :  
: 
 : .

 "" ('font-style')     (    "roman"  "upright"),     .

 "" ('normal')   ,      ('normal')    UA,     ""  ,   'oblique'.   "" ('italic')  ,   'italic' , ,   ,   'oblique'.

,   "" ('oblique')    UA,          .

,     ,  Oblique, Slanted  Incline,      UA  "". ,     ,  Italic, Cursive  Kursiv,    "".
  H1, H2, H3 { font-style: italic }
  H1 EM { font-style: normal }

    ,   H1,    .
5.2.4    ('font-variant').
: normal | small-caps
 : normal
 :  
: 
 : .

      -  " ".        ,        .     "" ('font-variant' ).

 'normal'      , 'small-caps' -   .  CSS1  (  ),           .   ,         .

     H3      " ",      .
  H3 { font-variant: small-caps }
  EM { font-style: oblique }

      , ,    ,   ,      .. CSS1      .

 CSS1:        ,    'text-transform'   . (.: CSS1 core: insofar as this  causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply)
5.2.5    ('font-weight')
: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
 : normal
 :  
: 
 : .

 " "      .     100  900,     ,        ,   .   'normal'   400,  'bold' - 700.  ,   'normal'  'bold',     ,        9 .
  P { font-weight: normal }   /* 400 */
  H1 { font-weight: 700 }     /* bold */

 'bolder'  'lighter'         :
  STRONG { font-weight: bolder }

     ,     .

 ( )      ,    ,   . ,      .      -      .         :  , ,        ,      (Regular),  (Roman),  (Book),  (Medium),  (Semi-  DemiBold),  (Bold),   Black,     ""    .      ,  ""  CSS1       400,      .        ,  Book, Regular, Roman, Normal, Medium, , , , .

                 ,    .              :
          ( ,   Open Type),      .
    Medium,       ,   Book, Regular, Roman  Normal,   Medium    500.
,   Bold,    700.
      9 ,    .   500  ,     400.         - 600, 700, 800, 900 -        ,   ,    -   .         - 300, 200, 100, -        ,   ,    -   .

     .       "Example1"     : Regular, Medium, Bold, Heavy.           "Example2": Book, Medium, Bold, Heavy, Black, ExtraBlack.    ,      "Example2 ExtraBlack"    - .
           
"Example1 Regular"    400    100, 200, 300
"Example1 Medium"    500
"Example1 Bold"    700    600
"Example1 Heavy"    800    900

 
 
 
"Example2 Book"    400    100, 200, 300
"Example2 Medium"    500
"Example2 Bold"    700    600
"Example2 Heavy"    800
"Example2 Black"    900
"Example2 ExtraBlack"    (none)

   ,    'bolder'  'lighter'       ,     ,       ,    ,   'bolder'       'lighter'      UA   .  ,    'bolder'  'lighter'  .
 'bolder'     ,    ,  .    ,        (   ),       900,       900.
   'lighter',    :   ,    ,    ,         ,    .

   ,     ""    ;  ,       ,        .   ,   UA         .      ,        ,       .
5.2.6    ('font-size').
: <absolute-size> | <relative-size> | <length> | <percentage>
 : medium
 :  
: 
 :     
<absolute-size>
   (<absolute-size>)     ,    UA.   : [ xx-small | x-small | small | medium | large | x-large | xx-large ].       1,5:  'medium' -  10,  'large' -  15.        .  , UA         .       .
<relative-size>
  (<relative-size>) ,          .   - [ larger | smaller ]. ,      'medium',   'larger'      'large'.           ,  UA          . UA     ,        .

             ,       

   .

   ,   'em'  'ex'      .   " "         .

,           .  ,    VR        .

:
  P { font-size: 12pt; }
  BLOCKQUOTE { font-size: larger }
  EM { font-size: 150% }
  EM { font-size: 1.5em }

    1.5,     .
5.2.7     ('font')
: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ /
<line-height> ]? <font-family>
 :     
 :  
: 
 :   <font-size>  <line-height>

 ""      'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' and 'font-family'        .            ,   .

        .  .          ,       .
  P { font: 12pt/14pt sans-serif }
  P { font: 80% sans-serif }
  P { font: x-large/110% "new century schoolbook", serif }
  P { font: bold italic large Palatino, serif }
  P { font: normal small-caps 120%/120% fantasy }

    ,     (80%),      .     ,   ,      .

    ,       ,        'normal'.         'bold',   'italic',       'normal'.

     " " ('small-caps'),  (120%   ),   (120%   ),   ('fantasy'). ,  'normal'     : ""  "".
5.3  "" (color)  "" (background).

    (     )     (.. ,    ).      ()  .      ,      ,        .

 "",  , .  ""  ,        , ..           'transparent' ().
5.3.1   ('color')
: <color>
 :  UA
 :  
: 
 : .

       (     ).     ,  ,  :
  EM { color: red }              /* natural language */
  EM { color: rgb(255,0,0) }     /* RGB range 0-255   */

.  6.3.     .
5.3.2    ('background-color').
: <color> | transparent
 : transparent
 :  
: 
 : .

     .
  H1 { background-color: #F00 }
5.3.3    ('background-image').
: <url> | none
 : 
 :  
: 
 : .

     .      ,     ,       .   ,     .
  BODY { background-image: url(marble.gif) }
  P { background-image: none }
5.3.4     ('background-repeat').
: repeat | repeat-x | repeat-y | no-repeat
 : repeat
 :  
: 
 : .

   ,   "  " ,      .

 'repeat' ,      ,     .  'repeat-x' ('repeat-y')        () ,          .   'no-repeat'   .
  BODY {
    background: red url(pendant.gif);
    background-repeat: repeat-y;
  }

          .
5.3.5    ('background-attachment').
: scroll | fixed
 : scroll
 :  
: 
 : .

   ,   "" ('background-attachment') ,          .
  BODY {
    background: red url(pendant.gif);
    background-repeat: repeat-y;
    background-attachment: fixed;
  }

 CSS1: UA   'fixed'  'scroll'.    ,     'fixed'      HTML  BODY, ..          ,  'fixed'. (. .7).
5.3.6    ('background-position')
: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left |
center | right]
 : 0% 0%
 :    
: 
 :      

    ,   " "    .

   '0% 0%',          ,    (..   ,   ,   ).    '100% 100%',          .    '14% 84%',   14%   84%       14%   84% .

   '2cm 2cm',         2    2      .

        ,     ,      50%.    ,     -  .       , , '50% 2cm'.   .

          ,         .         :
'top left'  'left top'  '0% 0%'.
'top', 'top center'  'center top'  '50% 0%'.
'right top'  'top right'  '100% 0%'.
'left', 'left center'  'center left'  '0% 50%'.
'center'  'center center'  '50% 50%'.
'right', 'right center'  'center right'  '100% 50%'.
'bottom left'  'left bottom'  '0% 100%'.
'bottom', 'bottom center'  'center bottom'  '50% 100%'.
'bottom right'  'right bottom'  '100% 100%'.

:
  BODY { background: url(banner.jpeg) right top }    /* 100%   0% */
  BODY { background: url(banner.jpeg) top center }   /*  50%   0% */
  BODY { background: url(banner.jpeg) center }       /*  50%  50% */
  BODY { background: url(banner.jpeg) bottom }       /*  50% 100% */

      (.  "  "),    ,   .  :
  BODY {
    background-image: url(logo.png);
    background-attachment: fixed;
    background-position: 100% 100%;
  }

         .
5.3.7      ('background')

: <background-color> || <background-image> || <background-repeat> ||
<background-attachment> || <background-position>
 :     
 :  
: 
 :   <background-position>

 "" ('background') -         (.. , , ,   )     .

    ""        .

  BODY { background: red }
  P { background: url(chess.png) gray 50% repeat fixed }

 ""       .          ,       .         .
5.4  
5.4.1   ('word-spacing')
: normal | <length>
 : normal
 :  
: 
 : .

            .     ,         ,   . UA      .           (    "" ('align')).
  H1 { word-spacing: 0.4em }

      H1    "" ('1em')(0,4em?), (   - . .).

 CSS1: UA     ""  'normal' (.  7.)
5.4.2   ('letter-spacing')
: normal | <length>
 : normal
 :  
: 
 : .

            .     ,         ,   . UA      .          (    "" ('align')).
  BLOCKQUOTE { letter-spacing: 0.1em }

     BLOCKQUOTE'   '0.1em'.

   'normal', UA       .   ,   ""       :
  BLOCKQUOTE { letter-spacing: 0 }
  BLOCKQUOTE { letter-spacing: 0cm }

        , UA    .

 CSS1: UA       'normal'. (.  7.)
5.4.3    ('text-decoration')
: none | [ underline || overline || line-through || blink ]
 : none
 :  
:     
 : .

       .      (.,  'IMG'  HTML),      (. '<EM></EM>'),     .  'blink'   .

(),    ,       "".

   ,     . ,    ,     .      ,       .
  A:link, A:visited, A:active { text-decoration: underline }

          (..   'A'   'HREF').

UA     'blink',       .
5.4.4     ('vertical-align').
: baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <percentage>
 : baseline
 :  
: 
 :     " " ('line-height')  

     .     ,     :
'baseline'
   (  ,     ),    
'middle'
    ( )   "    ('x-height')  "
'sub'
  
'super'
  
'text-top'
       
'text-bottom'
       

        ,     :
'top'
       
'bottom'
       .

   'top'  'bottom'    ,         .

      " " ('line-height')  .     ( ,   )        .   . ,   '-100%'    ,     ,      .      ,    - , ,    .

,     CSS        <length>.
5.4.5    ('text-transform')
: capitalize | uppercase | lowercase | none
 : none
 :  
: 
 : .
'capitalize'
     
'uppercase'
    
'lowercase'
    
'none'
  .

          . .      [4] .
  H1 { text-transform: uppercase }

     'H1'    .

 CSS1: UA     (..     'none'),  ,       Latin-1     ,          Unicode [8].
5.4.6    ('text-align')
: left | right | center | justify
 :  UA
 :  
: 
 : .

       .   UA      .

:
  DIV.center { text-align: center }

   ,      'DIV'  'CLASS=center'    .  ,      ,   .  UA      ('justify'),     -     ,  ,    .

 CSS: UA            ,           -      .
5.4.7    ('text-indent')
: <length> | <percentage>
 : 0
 :  
: 
 :    .

         .       ,   ,   .      ,      (. 'BR'  HTML).

:

  P { text-indent: 3em }
5.4.8    ('line-height').
: normal | <number> | <length> | <percentage>
 : normal
 :  
: 
 :     .

        .

    ,      ,    .     -   :    ,    ,    ,         .

   .

         :
  DIV { line-height: 1.2; font-size: 10pt }     /* number */
  DIV { line-height: 1.2em; font-size: 10pt }   /* length */
  DIV { line-height: 120%; font-size: 10pt }    /* percentage */

 'normal'  ""       . ,  UA    'normal'      1,0....1,2.

.  4.7. ,  ,   " "     .
5.5  .

 ""  ,    ,  . .   (.4),       "".

    .   'margin'       ,         .

  ,        (.   ).   'padding'      ,         .

    .      ,      ,   .

 "" ('width')  "" ('height')    ,  "" ('float')  "" ('clear')    .
5.5.1    ('margin-top').
: <length> | <percentage> | auto
 : 0
 :  
: 
 :      .

     :
  H1 { margin-top: 2em }

  ,    ,   .
5.5.2    ('margin-right').
: <length> | <percentage> | auto
 : 0
 :  
: 
 :      

     :
  H1 { margin-right: 12.3% }

  ,    ,   .
5.5.3    ('margin-bottom').
: <length> | <percentage> | auto
 : 0
 :  
: 
 :      

     :
  H1 { margin-bottom: 3px }

  ,    ,   .
5.5.4    ('margin-left')
: <length> | <percentage> | auto
 : 0
 :  
: 
 : refer to  's width

     :
  H1 { margin-left: 2em }

  ,    ,   .
5.5.5    "" ('margin').
: [ <length> | <percentage> | auto ]{1,4}
 :     
 :  
: 
 :      

  ""      , ,         .

          , ,    .     ,     ,     ,        .

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

      :
  BODY {
    margin-top: 1em;
    margin-right: 2em;
    margin-bottom: 3em;
    margin-left: 2em;        /* copied from opposite side (right) */
  }

  ,    ,   .
5.5.6    ('padding-top').
: <length> | <percentage>
 : 0
 :  
: 
 :      

      .
  BLOCKQUOTE { padding-top: 0.3em }

     .
5.5.7    ('padding-right').
: <length> | <percentage>
 : 0
 :  
: 
 :      

      .
  BLOCKQUOTE { padding-right: 10px }

     .
5.5.8    ('padding-bottom').
: <length> | <percentage>
 : 0
 :  
: 
 :      

      .
  BLOCKQUOTE { padding-bottom: 2em }

     .
5.5.9    ('padding-left').
: <length> | <percentage>
 : 0
 :  
: 
 :      

      ..
  BLOCKQUOTE { padding-left: 20% }

     .
5.5.10    " " ('padding').
: [ <length> | <percentage> ]{1,4}
 : 0
 :  
: 
 :      

 ""      , ,         .

    ,     , ,    .      ,     ,    ,        .

      "" ('background'):
  H1 {
    background: white;
    padding: 1em 2em;
  }

       '1em' (  )     '2em' (  ).  'em'     : 1em    .

     .
5.5.11     ('border-top-width').

: thin | medium | thick | <length>
 : 'medium'
 : all 
: 
 : .

      . ,   ,   UA,     : 'thin' ,  'medium',   ,  'thick'.

 ,     ,     :
  H1 { border: solid thick red }
  P  { border: solid thick blue }

     'H1'  'P'         .    ,    'em':
  H1 { border: solid 0.5em }

     .
5.5.12    ('border-right-width').
: thin | medium | thick | <length>
 : 'medium'
 :  
: 
 : .

      .      ('border-top-width').
5.5.13    ('border-bottom-width')
: thin | medium | thick | <length>
 : 'medium'
 :  
: 
 : .

      .      ('border-top-width').
5.5.14     'border-left-width'
: thin | medium | thick | <length>
 : 'medium'
 :  
: 
 : .

      .       ('border-top-width').
5.5.15    " " ('border-width')
: thin | medium | thick | <length>
 : 'medium'
 :  
: 
 : .

      , ,          .

       ,   :
 :       
 :         ,    -  
 :       ,     ,    
 :   , ,    .

         ,    :
  H1 { border-width: thin }                   /* thin thin thin thin */
  H1 { border-width: thin thick }             /* thin thick thin thick */
  H1 { border-width: thin thick medium }      /* thin thick medium thin */
  H1 { border-width: thin thick medium none } /* thin thick medium none */

     .
5.5.16    ('border-color').
: <color>{1,4}
 :   'color'
 :  
: 
 : .

 " " ('border-color')     . " "       ,          .

      ,      ""  :
  P {
    color: black;
    background: white;
    border: solid;
  }

        .
5.5.17    ('border-style')
: none | dotted | dashed | solid | double | groove | ridge | inset |
outset
 : none
 :  
: 
 : .

 " "     .           ,      .
  #xy34 { border-style: solid dotted }

       ,   - .

       - 'none',   ,      ,    .

   :
none
   (    )
dotted
 -     
dashed
 -     
solid
 -  
double
 -     .           .
groove
 ,      "".
ridge
 ,      "".
inset
  ,      "".
outset
  ,      "".

 CSS: UA   'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset'  'outset'    ('solid').
5.5.18    " " ('border-top')
: <border-top-width> || <border-style> || <color>
 :     
 :  
: 
 : .

      ,       .

  H1 { border-bottom: thick solid red }

    ,       H1.      :
  H1 { border-bottom: thick solid }

              ""  .

 ,      "  ",    " "     .
5.5.19    " " ('border-right')
: <border-right-width> || <border-style> || <color>
 :     
 :  
: 
 : .

      ,       .     " ".
5.5.20    " " ('border-bottom')
: <border-bottom-width> || <border-style> || <color>
 :     
 :  
: 
 : .

      ,       .     " ".
5.5.21    " " 'border-left'
: <border-left-width> || <border-style> || <color>
 :     
 :  
: 
 : .

      ,       .     " ".
5.5.22    " " 'border'
: <border-width> || <border-style> || <color>
 :     
 :  
: 
 : .

      ,         .        :
  P { border: solid red }
  P {
    border-top: solid red;
    border-right: solid red;
    border-bottom: solid red;
    border-left: solid red
  }

     ""  "",    ""       .   ,          .

      ,      ,       .   :
  BLOCKQUOTE {
    border-color: red;
    border-left: double
    color: black;
  }

        ,       - .     ,      " ".          " ",   ,    "". ,   ""    " ",   .

 ,     " "    ,    -  .
5.5.23   "" ('width')
: <length> | <percentage> | auto
 : auto
 :    
: 
 :      

       ,   -  ,   .  ,      .         ,    ""   'auto'.

:
  IMG.icon { width: 100px }

   ""  ""     'auto',   ,    .

    ""  .

.     4,     ,   .
5.5.24   "" 'height'
: <length> | auto
 : auto
 :    
: 
 : .

       ,   -  ,   .  ,      .         ,    ""   'auto'.

:
  IMG.icon { height: 100px }

   ""  ""     'auto',   ,    .

     ,      , ,   .

   ""  .

 CSS1: UA    "" (..    'auto'),     .
5.5.25   "" ('float')
: left | right | none
 : none
 :  
: 
 : .

   'none',   ,     .   'left' ('right'),    (),       ()  .   'left' ('right'),      (  ,   "" - 'display' - ). .    4.1.4.
  IMG.icon {
    float: left;
    margin-left: 0;
  }

     IMG,   icon,       .

         ,       .
5.5.26   "" ('clear')
: none | left | right | both
 : none
 :  
: 
 : 

  ,         .  ,      ,     .     ""   'left',             .    'none',       . :
  H1 { clear: left }
5.6  - 

     , ,      .

   ,      (.. ,    "" ('display')   'list-item').         ,     ,    .        ,    "" ('display')   'list-item'.  
5.6.1   "" ('display')

: block | inline | list-item | none
 : block
 :  
: 
 : .

  ,      ( ,   ..)   .

   'block'  ""   .           CSS.     'H1'  'P'    "".  'list-item'     'block',    ,     .  HTML      'LI'.

   'inline'  ""         ,    .       .   - ,       ,      .  ,       ('inline') ,          .

 'none'   ,      .
  P { display: block }
  EM { display: inline }
  LI { display: list-item }
  IMG { display: none }

    .

   "" ('display')   'block',  UA     HTML         HTML    [2].

 CSS1: UA    ""      . (.  7).
5.6.2   ('white-space')
: normal | pre | nowrap
 : normal
:  
: 
 : .

  ,      :   'normal'  ,  'pre'    PRE  HTML,    'nowrap'       BR:
  PRE { white-space: pre }
  P   { white-space: normal }

   ""   'normal',  UA         HTML          HTML [2].

 CSS1: UA    ""      ,       . (.  7).
5.6.3     ('list-style-type')
: disc | circle | square | decimal | lower-roman | upper-roman |
lower-alpha | upper-alpha | none
 : disc
 :    'list-item'   'display'
: 
 : .

       ,   "  " ('list-style-image')   'none', ,  ,   URL,    .
  OL { list-style-type: decimal }       /* 1 2 3 4 5 etc. */
  OL { list-style-type: lower-alpha }   /* a b c d e etc. */
  OL { list-style-type: lower-roman }   /* i ii iii iv v etc. */
5.6.4     ('list-style-image').
: <url> | none
 : none
 :    'list-item'   'display'
: 
 : .

   ,        .        ,    "  ".
  UL { list-style-image: url(http://png.com/ellipse.png) }
5.6.5     'list-style-position'
: inside | outside
 : outside
 :    'list-item'   'display'
: 
 : .

  "  " ,        .   .   4.1.3.
5.6.6    "" ('list-style')
: <keyword> || <position> || <url>
 :     
 :    'list-item'   'display'
: 
 : .

       : "  ", "  "  "  "     .
  UL { list-style: upper-roman inside }
  UL UL { list-style: circle outside }
  LI.square { list-style: square }

    ""   'LI'    .  :
  <STYLE TYPE="text/css">
    OL.alpha LI  { list-style: lower-alpha }
    UL LI        { list-style: disc }
  </STYLE>
  <BODY>
    <OL CLASS=alpha>
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>

   (    )        ,         'LI'          .  ,       ""    :
  OL.alpha  { list-style: lower-alpha }
  UL        { list-style: disc }

    ""    'LI'   'OL'  'UL'.

 URL      :
  UL { list-style: url(http://png.com/ellipse.png) disc }

    'disc'      .