Forma si Culoare prin CSS

Principalul motiv care a dus la aparitia CSS (Cascading Style Sheet) a fost lipsa de flexibilitate pe care o avea formatul HTML, care a inglobat atat datele cat si forma lor de prezentare. Aceasta tendinta a dus la greseli de proiectare a site-urilor, care au costat mult pe programatori, deoarece nimanui nu-i place sa schimbe culoarea unui chenar pe website-ul sau, daca trebuie sa modifice 30 de tabele in 10 pagini, care au setate border color.

Asadar, a luat nastere CSS, care doreste sa desparta pentru totdeauna datele de nivelul de prezentare. HTML va fi folosit strict pentru informatie, iar CSS va fi folosit strict pentru aspectul paginii. Avantajele sunt enorme: se poate modifica un singur fisier, si tot site-ul se va schimba, ceea ce a introdus si ideea "temelor" si "stilurilor" de culori interschimbabile. Practic, exista site-uri pe care nu le mai recunosti odata ce si-au schimbat CSS-ul in cel mai simplu mod posibil.

Dar nu tot ce e CSS e si... evident! Exista foarte multe tricks pentru a face o pagina sa arate ca pagina de start a portalului dvs. favorit, iar un designer trebuie sa aiba mai presus de "ochiul sau artistic", si imaginatia de a realiza ceea ce-si doreste. Dar sa vedem la ce anume e bun CSS si ce poate sa faca!

Pe scurt, este un document format text in care sunt date reguli de afisare pentru elementele ce ar putea sa apara intr-un HTML. Exista anumite proprietati modificabile:

* Background
* Text
* Font
* Border
* Outline
* Margin
* Padding
* List
* Table

Totul se schimba printr-o sintaxa foarte simpla: selector {proprietate: valoare;}. Pot fi mai multe proprietati schimbate pentru acelasi selector. Selectorul este in general dat prin 3 forme: o clasa intreaga de elemente HTML, cum ar fi in exemplul de mai jos, care pune culoare de fond rosie la toate paragrafele:

p {
background-color: rgb(255,0,0);
}

O alta modalitate de a preciza o culoare este prin numele ei: red! sau prin valoarea hexa: #FF0000

A doua metoda de selectare este a unei anumite subclase a unor elemente HTML, pe care o folosim ca sa aliniem textul, de exemplu:

p.right {
text-align: right;
}

(in HTML)

Text aliniat la dreapta

A treia modalitate de a specifica un selector este printr-un id care apartine unui element unic, ca sa-l diferentiem de restul:

p#trei {
font: italic small-caps bold 12px arial
}

(in HTML)

unic

Bineinteles, selectorii se pot grupa, definind pentru toti un contur albastru.

p,a,td {
border-style: solid double; border-color: rgb(0,0,255)
}

Cea din urma modalitate este de a defini o clasa generala, care poate fi pusa la orice alt element, fara diferente.

.red {
color: red
}

(in HTML)

unic

cal

Acestea sunt doar cateva din lucrurile interesante care se pot face in CSS, precum meniuri! Nu uitati sa verificati documentatia pentru mai multe informatii.

Referinte:

* http://www.w3schools.com/css/default.asp
* http://www.freecsstemplates.org/
* http://www.csstutorial.net/