Va prezentam un tutorial introductiv ce face referire la proprietati de baza si valori specifice codului CSS, cod intalnit in constructia celor mai moderne site-uri web. Modelele de stiluri pot fi aplicate aproape oricarei etichete HTML iar ceva mai jos enumeram o parte din cele mai frecvente stiluri intalnite intr-un fisier CSS.
Stiluri CSS
| Atribut | Descriere | Valori |
| background | imagini sau culori de fundal | URL-ul (imaginii) sau culori date prin nume sau valoare RGB |
| Color | culoarea textului | nume sau valoare RGB |
| font-family | tipul fontului | Numele fontului sau al familiei de fonturi |
| font-size | dimensiunea fontului | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| font-style | text cursiv | normal, italic |
| font-weight | grosimea fontului | extra-light, light, demi-light, medium, demi-bold, bold, extra-bold |
| line-height | distanta dintre liniile de baza ale randurilor | data in puncte(pt), inch(in), centimetri(cm), pixeli(px), procent(%) |
| margin-left | distanta fata de marginea din stanga a paginii | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| margin-right | distanta fata de marginea din dreapta a paginii | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| margin-top | distanta fata de textul precedent sau fata de marginea de sus a paginii | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| text-align | alinierea textului | left(stanga), center(centru), right(dreapta), justify |
| text-decoration | evidentierea textului | none(nimic), underline(subliniat), italic(cursiv), line-through(taiat) |
| text-indent | distanta primului rand fata de marginea din stanga | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| border-style | tipul chenarului | none, groove, dotted, dashed, solid, double, ridge, inset, outset |
| border-width | grosimea chenarului | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| border-color | culoarea chenarului | nume sau valoare RGB |
| 72 pt=1 inch = 25,4 mm; un font de dimensiunea 13pt inseamna ca sunt 13 puncte intre partea superioara a literei N sau h si partea inferioara a literei y sau j |
||
Nota!
– Pentru adaugarea unui STYLE intern la un element se foloseste atributul style urmat de proprietati si valori, folosind urmatoarea sintaxa:
<element style=”proprietate:valoare; proprietate:valoare;”></element>
Constructia unui fisier CSS pentru elemente externe
In acest caza proprietatile si valorile pentru diverse stiluri sunt specificate intr-un fisier extern special, de obicei cu extensia „css”.
Exemplu fisier CSS:
color:#0000ff;
text-decoration:none;
font-weight:normal;
font-size:15px;
font-family: Arial;
}
a:visited {
color:#008080;
text-decoration:none;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
a:active {
color:#b54090;
text-decoration:underline;
}
a:hover {
color:#b54090;
text-decoration:underline;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
p {
font-weight: normal;
font-size: 11pt;
line-height: 12pt;
text-indent: 20px;
font-family: Arial;
}
Pentru a adauga acest stil CSS intr-o pagina web inserati codul:
<link href=”fisier.css” rel=”stylesheet” type=”text/css”>
