Tutorial HTML
CSS (Cascading Style Sheets)
Pe lângă HTML-ul propriu-zis, noile unelte recunoscute de browser-ele din ultima generaţie sunt CSS (Cascading Style Sheets), JavaScript şi DOM (Document Object Model).
Noţiunea de stil este, pentru un document HTML, asemănătoare cu formatarea documentului, spre exemplu, pentru un document Word. Exisă o mulţime de atribute prin care se pot stabili font-urile, caracteristicile de aliniere a textului, forma elementului, culorile de fond şi ale literelor, marginile, poziţia elementelor, etc.
Pentru a putea gestiona cât mai eficient stilurile, a fost pus la dispoziţia programatorilor de pagini web un limbaj prin care se poate realiza acest lucru. Acest limbaj este cunoscut sub numele de CSS.
Legătura dintre HTML şi CSS se realizează prin intermediul tag-ului <style>...</style> care trebuie aşezat între <head> şi </head>.
În cadrul tag-ului <style> vom stabili modul în care dorim să arate elementele paginii. Fiecare element al HTML-ului pe care l-am studiat este identificat, în cadrul CSS-ului de tag-ul care îl gestionează. Spre exemplu, identificatorul CSS pentru paragrafe este "p", pentru table este "table", pentru imagini este "img", ş.a.m.d.
Folosind aceşti identificatori în cadrul unui <style>...</style>, putem face ca toate elementele de acelaşi fel din cadrul unui document să arate la fel. Astfel suntem scutiţi de a scrie o grămadă de cod care s-ar repeta în cazul fiecărui element de acelaşi fel.
De exemplu, dacă dorim ca, în cadrul paginii noastre, absolut toate paragrafele să fie scrise cu fontul Comic Sans MS, caractere de 14, culoare albastră, pe fond galben, în loc de a scrie aceşti parametri la fiecare paragraf din document, este suficient să definim următorul <style>:
Exemplu_1
| Codul html | Rezultatul |
|
<html> <head> <title>Exemplu css </title> <style> p{ background:yellow; color:blue; font-family:"Comic Sans MS"; font-size:14pt; } hr { text-align:left; width:50%; height:5px; color:red; } </style> </head> <body bgcolor="#cococo"> Iata un paragraf formatat asa conform descrierii de mai sus <hr>Acesta este un text care nu se afla in paragraf <hr> Acest text este din nou in cadrul unui paragraf </body></html> |
Clik aici |
De remarcat faptul că ambele paragrafe, şi de asemenea ambele linii orizontale "hr" din cadrul lui body nu conţin nici un fel de referinţă de formatare. Cu toate acestea, definirile lui "p"şi ale lui "hr" în cadrul lui style au „predefinit” modul în care vor arăta toate paragrafele respectiv toate liniile orizontale ale documentului.
Sintaxa definiţiei este de felul următor:
Se începe cu identificatorul elementului dorit a fi formatat (în cazul nostru p– tag-ul pentru paragraf, respectiv hr) între acolade trecându-se specificatorii de format (aceştia ţin de limbajul CSS) doriţi a fi modificaţi. În cazul de faţă, avem de-a face cu:
- background = culoarea de fundal;
- color = culoarea scrisului;
- font-familiy = numele font-ului;
- font-size = dimensiunea caracterelor;
- text-align = alinierea în cadrul unui text;
- width = lăţimea;
- height = înălţimea
O altă formă de utilizarea a CSS-ului constă în definirea stilurilor cu ajutorul unor identificatori proprii, care se pot aplica ulterior unui anumit paragraf. În acest caz, în cadrul unui style putem defini proprii identificatori, precedându-i de caracterul #.
Aplicarea ulterioară a lor asupra unui element, se face specificând un nou atribut, şi anume id=”identificator” unde identificator este cel propriu, definit în cadrul lui <style> (cel precedat de #)
Exemplu dacă inserăm în codul de mai sus secvenţa următoare (tot în cadrul lui <style>)
#alt_paragraf { color:green; font-weight:bold; }
iar înainte de </body> mai inserăm următorul paragraf:
<p id="alt_paragraf">Acesta este un paragraf personalizat</p>
Exemplu_2
| Codul html | Rezultatul |
|
<html> <head> <title>Exemplu css </title> <style> p{ background:yellow; color:blue; font-family:"Comic Sans MS"; font-size:14pt; } hr { text-align:left; width:50%; height:5px; color:red; } #alt_paragraf { color:green; font-weight:bold; } </style> </head> <body bgcolor="#cococo"> Iata un paragraf formatat asa conform descrierii de mai sus <hr>Acesta este un text care nu se afla in paragraf <hr> Acest text este din nou in cadrul unui paragraf <p id="alt_paragraf">Acesta este un paragraf personalizat </p></body> </html> |
Clik aici |
Observaţie!
Au fost aplicaţi doar cei doi specificatori de format definiţi în noul stil, şi anume culoarea fontului şi faptul că scrisul este bold. Celelalte caracteristici (font-ul şi culoarea galbenă de fundal) au rămas cele definite tot în <style>, în cadrul lui <p>.
În loc de a defini stilurile în cadrul antetului (head), aşa cum am arătat mai sus, ele pot fi scrise separat, într-un fişier text cu extensia .css, exact în aceeaşi manieră în care le-am fi scris între cele două tag-uri prezentate,<style>...</style>.
Includerea efectivă a acestui fişier în cadrul HTML-ului se face tot în secţiunea <head>, prin intermediul următorului tag:
<link rel="stylesheet" type="text/css" href="fisier_stil.css">
Exemplu_3
Conţinutul fişierului css:
|
table { border-width:2px; border-style:ridge; border-collapse:collapse; } td{ border-style:ridge; border-width:2px; padding:5px; } th { border-style:ridge; border-width:2px; background:#7fffff; padding:5px; } tr { background:#ffff7f; } #tr1 { background:#00ff00; } |
După cum se observă, am definit în cadrul său formatele implicite pentru un tabel, rândurile şi celulele sale (table, tr, td, th) precum şi un identificator propriu, #tr1.
Iată şi fişierul HTML care va folosi acest .css:
| Codul html | Rezultatul .css | Rezultatul .html |
|
<html> <head> <title>Exemplu css </title> <link rel="stylesheet" type="text/css" href="exemplu3_1css.css"> </head> <body bgcolor="#cococo"> <table> <hr> <tr><th>Numar<th>Nume <tr><td>1<td>Ion <tr><td>2<td>Pop <tr><td>3<td>Marian <tr id="tr1"><td>4<td>Ivan </table> </body> </html> |
Clik aici | Clik aici |
Observaţie!
Rezultatul.css din tabel arată HTML-ul, datorită includerii conţinutului fişier CSS, iar rezultatul.html arătă acelaşi HTML, fără a specifica nici un fel de format în CSS.