Lecția 2
Unități de măsură
În CSS pentru exprimarea dimensiunilor se folosesc diverse unităţi de măsură: px, pt, pc, %, em, ex, in, mm, cm. Importanţă practică au însă doar următoarele:
- px – pixeli (puncte ecran). Exemplu: 14px. Mărimea normală, implicită a fontului paragrafelor (p) este pentru majoritatea browser-elor de 16px.
- em – mărimea normală a fontului paragrafelor. De exemplu 2em înseamnă de două ori
mărimea normală, raportarea făcându-se la mărimea normală a fontului din blocul în care
dimensiunea 2em este folosită. Dacă de exemplu pentru elementul html mărimea este lăsată
cea implicită, 1em (16px), pentru body este impusă de 0.75em (fără scalare ar fi 12px) şi pentru
paragrafe (p) este impusă la 0.875em, mărimea reală în pixeli a fontului paragrafelor va fi
0.75*0.875*16px=10.5px!
Această unitate este scalabilă. Ea permite permite modificarea proporţională a mărimii tuturor fonturilor când cel care priveşte pagina modifică mărimea fontului de bază folosind facilităţile browser-ului (Ctrl + pentru zoom+ respectiv Ctrl – pentru zoom -).
- rem (root em) – permite raportarea mărimilor fonturilor folosite la o singură mărime de font, respectiv cea impusă pentru elementul html. Unitatea este introdusă în CSS3.
- % - procent din mărimea normală. Se poate folosi în loc de em (100% = 1em) dar se utilizează
mai ales la definirea dimensiunilor blocurilor în care este divizată pagina.
Observaţie: Mărimea normală, implicită a textului pentru majoritatea browser-elor este de 16px. Deci 1em = 16px. Evident, dacă nu se realizează o scalare (zoom+ sau -). Gândind în pixeli şi neglijând efectul de moştenire, o variantă de exprimare a mărimii în em a fonturilor ar putea fi:
- h1: 1.25em (20 px);
- h2: 1.125em (18 px)
- h3 1em (16 px)
- textul normal (body, p): 0.875em (14px) sau 0.75em (12 px)
- textul scris mic (subtext, note de picior s.a.) 0.625em (10 px).
Pentru definirea mărimii fontului se foloseşte proprietatea font-size. Exemple:
Culori
În CSS culoarea se exprimă prin codul acesteia exprimat în hexazecimal sau folosind expresia RGB(r, v, a).
Codul hexazecimal va fi precedat de '#'. Codul areformatul #rrggbb, valorile componentelor culorii fiind definite în ordinea roşu (rr), verde (gg) şi albastru (bb). Exemple:
Notă: Folosind codificarea prezentată se pot crea 256x256x256 culori distincte.
Exemplu de stilizare a unui elemnt h1:
Fonturi
Proprietăți:
- font-family. Valorile obişnuite sunt:
- font-family:"Times New Roman", Times, serif
- font-family:Tahoma, Verdana, Arial, sans-serif.
- font-style poate fi normal, italic sau oblique
- font-weight poate fi normal sau bold.