simple-webdesign.com

Scurt tutorial CSS – Selectori si declaratii

Acum doua (2) saptamani mi-am zis ca nu trebuie sa treaca nicio zi in care sa nu scriu cate un post. Au trecut 2 saptamani si nu am reusit sa scriu chiar nimic. Rusinica!!! Nu-i bai insa, ca recuperez acum cu un scurt tutorial despre stiluri (selectori si declaratii). Dar pentru aceasta, sa luam ca exemplu codul de mai jos:
<style type="text/css">
<!-- b {color: red;}
</style>
In exemplul de mai sus “b” este un selector, iar paranteza contine o declaratie. Asadar, in cadrul codului CSS deosebim:
- selectorul, care apare in fata parantezei precizeaza ce elemente vor fi afectate de declaratie.
- declaratia este cea care stabileste cum vor fi afisate in browser acele elemente ale paginii ce intra in categoria definita de selector. In exemplul de mai sus, orice text ingrosat va fi afisat cu rosu.
Declaratia e alcatuita din doua parti:
1. Proprietatea, care apare inaintea celor doua puncte si
2. Valoarea, care e precizata dupa cele doua puncte. In exemplul de mai sus, proprietatea este “color”, iar valoarea este “red”. Desigur, aceasta proprietate poate lua si alte valori, cum ar fi black, silver, white, #FF00FF, etc. Alte proprietati sunt: text-decoration, font-weight, position etc. In CSS, pot fi setate peste 50 de proprietati.

Codul CSS incepe in general cu “<–” si se termina cu “–>” (comentarii) in scopul evitarii unei greseli ca afisarea codului CSS in browser, alaturi de textul destinat vizitatorilor. Totusi, browserele din ziua de azi nu comit aceasta greseala, ceea ce inseamna ca ne putem dispensa, fara riscuri, de comentarii. Din acelasi motiv, vom putea scrie scrie <style> si nu <style type=”text/css” >.
<style>
b { color:red;
text-decoration: underline;}
i { color:blue;
text-decoration: line-through;}
</style>
Bine ai venit in pagina <strong>mea</strong>!
<i>Sper sa-ti placa!</i>
Se vede in codul de mai sus ca exista doi selectori, b si i. Prin secventa de cod:
b { color: red:
text-decoration: underline;}
se stabileste colorarea in rosu si sublinierea oricarui text din cuprins intre <b> si </b>, iar prin:
i { color: blue:
text-decoration: line-through;}
se stabileste colorarea in albastru si taierea cu o linie orizontala a caracterelor cuprinse intre <i> si </i>, asa cum se vede si mai jos (efectul stilurilor aplicate):

Bine ai venit in pagina mea ! Sper sa-ti placa !

In acelasi mod, se poate defini o declaratie pentru mai multi selectori. Sa zicem ca vrei ca atat cuvintele bolduite b, cat si cele italice i sa apara cu rosu si atunci reduci totul la:
<style>
b,i {color: red; }
</style>
Selectorii pot sa fie de mai multe tipuri:
- electori de tip care coincid cu numele unui tip de element (ca in exemplele de mai sus)
- selectori de atribut: CLASS si ID.
Dar despre diferentele dintre acestia din urma voi incerca sa vorbesc in post-ul urmator.