    Stiluri
    ~~~~~~~

  Stilurile sunt un mecanism prin care elementele unui html pot fi formatate in amanunt, astfel incit
sa arate toate intr-un anumit fel.
  De exemplu, scrisul standard sa nu mai fie cu Times New Roman de dimensiune 12.

  Definirea lor se poate face fie prin tag-ul 
<style> ... </style>

fie prin optziunea style="..."
fie prin nishte fishiere speciale, cu extensia css
(css = cascading style sheets)


de exemplu, formatarea stilului implicit al unui paragraf se face prin:

<style>
p {font-size:20pt; color:#ff0055; text-indent:1cm;
   background:yellow; font-family:cursive; font-style:italic;
   font-weight:bold; text-decoration:underline }
</style>

-> !!! definita in <HEAD>

ex: apl01.html


   Structura generala a unui document html este sub forma de "cutie" (box):
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


       +------------------------------------------------------------+
       |      Margine (margin)                                      |
       |                                                            |
       |    +-----------------------------------------------+       |
       |    |      Bordura (border)                         |       |
       |    |                                               |       |
       |    |    +-----------------------------------+      |       |
       |    |    |    Tzesatura (padding)            |      |       |
       |    |    |                                   |      |       |
       |    |    |   +--------------------------+    |      |       |
       |    |    |   |   Contzinut              |    |      |       |
       |    |    |   |                          |    |      |       |
       |    |    |   +--------------------------+    |      |       |
       |    |    |                                   |      |       |
       |    |    +-----------------------------------+      |       |
       |    |                                               |       |
       |    +-----------------------------------------------+       |
       |                                                            |
       +------------------------------------------------------------+


 * margin -> distantza dintre cutie shi celelalte elemente
 * border -> chenar
 * padding -> poate fi dimensionata dar NU poate fi facuta vizibila printr-o culoare distincta
 * contzinutul: text shi/sau imagine

Ex: apl02.html

-> redefinirea stilului implicit pt. h1:

h1 {border:solid 10pt red;
    background-color:green;
    padding: 1cm 0.7cm 0.3cm 0.1cm;   -> dimensiunile sunt pentru sus-dreapta-jos-stinga
    text-align:left;width=3cm}
================
  Atribute pentru fonturi:

* font-style:    normal sau italic
* font-variant:   normal sau small-caps
* font-weight:    normal sau bold
* font-size: marimea (in pt: points sau cm: centimetri)
* font: grupeaza atributele de mai sus; daca il folosim putem renuntza la ele.
    ex: font: italic bold 15pt
* font-family: numele fontului
    pt. ca numele fontului e posibil sa NU existe pe calc. celui care browse-uieshte pagina,
    e recomandabil ca dupa numele fontului sa apara shi o familie (trecuta cu virgula)
    dintre:
      serif, sans-serif, cursive, monospace

Ex: 
P {font-size:20pt; font-family: comic, serif;}

======================================
  Atribute de culoare
  ~~~~~~~~~~~~~~~~~~~


a) color:
     se poate da: fie prin numele culorii
                  fie prin RGB(r,g,b) -> cu r,g,b in baza 10 (0..255)
                  fie prin #rrggbb  -> cu rr,gg,bb in baza 16
b) background-image: -> locatzie imagine
c) background-color
d) background-repeat -> stabileshte daca imaginea sa se repete.
    posibile valori:
          repeat, no-repeat, repeat-x -> repetare doar pe orizontala
                             repeat-y -> repetare doar pe verticala
e) background-attachment: fixed  -> defileaza doar contzinutul paginii NU shi background-ul
                          scroll -> (e implicit) defileaza shi background-ul

f) background-position -> pozitzia in raport cu  fereastra:
       ex: background-position: 30% 30%  -> background-ul e pozitzionat incepind de la 30% din pagina