Fundamentele CSS3: Selectorii
Introducere în stiluri
Orice document HTML, indiferent câte elemente conține, va fi în esență "mort" fără utilizarea stilurilor. Stilurile, sau mai bine spus, foile de stil în cascadă (Cascading Style Sheets) sau pur și simplu CSS, definesc prezentarea documentului, aspectul său exterior. Să examinăm pe scurt aplicarea stilurilor în contextul HTML5.
Stilul în CSS reprezintă o regulă care îi spune browserului web cum să formateze un element. Formatarea poate include setarea culorii de fundal a elementului, setarea culorii și tipului de font și așa mai departe.
Definirea stilului constă din două părți: selectorul, care indică elementul, și blocul de declarație a stilului - un set de comenzi care stabilesc regulile de formatare. De exemplu:
div{
background-color: red;
width: 100px;
height: 60px;
}În acest caz, selectorul este div. Acest selector indică faptul că acest stil va fi aplicat tuturor elementelor div.
După selector, între acolade, se află blocul de declarație a stilului. Între acoladele de deschidere și închidere sunt definite comenzi care indică cum să se formateze elementul.
Fiecare comandă constă dintr-o proprietate și o valoare. Astfel, în expresia următoare:
background-color: red;background-color reprezintă proprietatea, iar red - valoarea. Proprietatea definește un stil specific. Există multe proprietăți CSS. De exemplu, background-color definește culoarea de fundal. După două puncte vine valoarea pentru această proprietate. De exemplu, comanda menționată mai sus stabilește pentru proprietatea background-color valoarea red, adică roșu.
După fiecare comandă se pune punct și virgulă, care separă această comandă de alte comenzi.
Seturile de astfel de stiluri sunt adesea numite foi de stil sau CSS (Cascading Style Sheets sau foi de stil în cascadă). Există diferite moduri de a defini stilurile.
Atributul style
Primul mod constă în încorporarea stilurilor direct în element cu ajutorul atributului style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stiluri</title>
</head>
<body>
<h2 style="color: blue;">Stiluri</h2>
<div style="width: 100px; height: 100px; background-color: red;"></div>
</body>
</html>
Aici sunt definite două elemente - un titlu h2 și un bloc div. La titlu este definită culoarea textului albastru cu ajutorul proprietății color. La blocul div sunt definite proprietățile de lățime (width), înălțime (height), precum și culoarea de fundal (background-color).
Al doilea mod constă în utilizarea elementului style în documentul HTML. Acest element informează browserul că datele din interior sunt cod CSS, nu HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stiluri</title>
<style>
h2{
color: blue;
}
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<h2>Stiluri</h2>
<div></div>
</body>
</html>Rezultatul în acest caz va fi absolut același ca în cazul precedent.
Adesea, elementul style este definit în interiorul elementului head, dar poate fi folosit și în alte părți ale documentului HTML. Elementul style conține seturi de stiluri. La fiecare stil se specifică mai întâi selectorul, după care, în acolade, sunt trecute aceleași definiții ale proprietăților CSS și valorile lor, care au fost utilizate în exemplul anterior.
A doua metodă face codul HTML mai curat prin extragerea stilurilor în elementul style. Există însă și o a treia metodă, care implică scoaterea stilurilor într-un fișier extern.
Vom crea în aceeași mapă cu pagina HTML un fișier text, pe care îl vom redenumi în styles.css și vom defini în el următorul conținut:
h2{
color: blue;
}
div{
width: 100px;
height: 100px;
background-color: red;
}Acestea sunt aceleași stiluri care au fost definite în interiorul elementului style. Vom modifica și codul paginii HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stiluri</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h2>Stiluri</h2>
<div></div>
</body>
</html>Aici nu mai există elementul style, dar există elementul link, care conectează fișierul creat anterior styles.css: `<link rel="stylesheet" type="text/css" href="styles.css"/>`
Astfel, definind stilurile într-un fișier extern, facem codul HTML mai curat, separând structura paginii de stilizarea acesteia. Această abordare facilitează modificarea stilurilor, spre deosebire de cazul în care ar fi definite direct în elemente sau în elementul style, și este preferată în HTML5.
Utilizarea stilurilor în fișiere externe reduce și încărcătura pe serverul web prin mecanismul de caching. Browserul web poate să stocheze în cache fișierul CSS și să îl extragă din cache la accesările ulterioare ale paginii web.
De asemenea, este posibilă situația în care toate aceste metode se combină, iar pentru un singur element unele proprietăți CSS sunt definite direct pe element, alte proprietăți sunt definite în interiorul elementului style, iar altele sunt în fișierul extern conectat. De exemplu:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<style>
div{
width: 200px;
}
</style>
</head>
<body>
<div style="width: 120px;"></div>
</body>
</html>Și în fișierul styles.css este definit următorul stil:
div{
width: 50px;
height: 50px;
background-color: red;
}În acest caz, pentru elementul div sunt definite proprietăți de width în trei locuri diferite, fiecare cu o valoare diferită. Care valoare va fi aplicată elementului în cele din urmă? Aici intervine sistemul de priorități:
- Dacă un element are stiluri inline, acestea au prioritatea cea mai mare, deci în exemplul de mai sus lățimea finală va fi de 120 de pixeli
- Apoi, urmează stilurile definite în elementul style
- Stilurile definite în fișierele externe sunt considerate cu prioritatea cea mai mică
Atributul html și stilul css
Multe elemente HTML permit setarea stilurilor de afișare prin atribute. De exemplu, la anumite elemente putem aplica atributele width și height pentru a stabili lățimea și înălțimea elementului, respectiv. Cu toate acestea, acest mod de abordare ar trebui evitat și, în locul atributelor încorporate, ar trebui utilizate stilurile CSS.
Este important să înțelegem clar că marcajul HTML ar trebui să ofere doar structura documentului HTML, în timp ce întregul său aspect exterior și stilizarea ar trebui determinate de stilurile CSS.
Validarea codului CSS
În procesul de scriere a stilurilor CSS, pot apărea întrebări legate de corectitudinea și acuratețea definirii stilurilor. În aceste cazuri, putem folosi validatorul CSS, care este disponibil la adresa http://jigsaw.w3.org/css-validator/.