Website XXL

Tutoriale CSS – Sintaxa

Tutoriale CSS – Sintaxa


O sintaxa CSS este compusa din 3 parti
selector proprietate: valoare

Selector = este elementul html care doriti sa-l stilizati
Proprietate = Proprietatea selectorului ( border, color, margin padding etc.) Un selector poate avea multiple proprietati iar fiecare proprietate valori independente.
Valoare = Valoarea unei proprietati

Proprietatea este separata de valoare prin semnul ” : ” (doua puncte). Toate proprietatile impreuna cu valorile lor apartinand aceluiasi selector sunt cuprinse intre acolade “{}“.

Multiplele valori din aceasi proprietate sunt separate prin virgula “,” si daca o valoare contine mai mult de un cuvant, acestea se cuprind intre ghilimele ” “.

Exemplu:

body background: #eeeeee; font-family: “Trebuchet MS“, Verdana, Arial, serif;

Trebuchet MS este cuprins intre ghilimele ” “



Mostenirea

Atunci cand plasezi un element in interiorul altuia, elementul plasat va mosteni proprietatile elementului in care a fost plasat. Asta doar daca nu se atribuie aceleasi proprietati insa cu valori diferite fiecarui element. De exemplu, un font specificat pentru corp (body) va fi folosit in toata pagina, indiferent de elementul unde este folosit, doar daca nu specificati un font diferit pentru elementul respectiv.

body font-family: Verdana, serif;

In acest caz, tot textul din fisierul HTML va folosi fontul Verdana. Daca doresti sa folosesti un alt font pentru un element anume (de exemplu pentru paragraf sau pentru H1), va trebui sa definesti acest lucru, cum este in exemplul de ma jos:

h1 font-family: Georgia, sans-serif;
p font-family: Tahoma, serif;

Acum toate tagurile vor folosi fontul Georgia si toate paragrafele vor folosi Tahoma, lasand totusi restul textului (din alte taguri) neschimbat, folosind in continuare Verdana. Exista insa si cazuri cand elementele plasate in interiorul altor elemente, nu mostenesc proprietatile acestora din urma. De exemplu, daca marginea pentru corp este setata la valoarea de 20 pixeli, celelalte elemente din pagina nu vor avea si ele marginea setata la 20 de pixeli.

body margin: 20px;


Combinarea selectorilor
Puteti combina elementele unui selector astfel:

h1, h2, h3, h4, h5, h6 color: #009900; font-family: Georgia, sans-serif;

Dupa cum observati in codul de mai sus, am grupat toate elementele de tip header intr-un singur selector. Ele sunt separate de virgule. Rezultatul acestui stil este acela ca toate tagurile header vor fi de culoare verde cu font Georgia. Daca un utilizator nu are instalat pe sistem primul font (Georgia), atunci se va folosi in mod automat urmatorul font si anume sans-serif.

Tagurile de comentarii

Comentariile, ca si in cazul programarii in alte limbaje, sunt foarte folositoare, si te pot ajuta sa identifici repede un anume element sau rolul pe care acel element il are. Puteti folosi comentariile si in fisierele .css, dupa cum se exemplifica in continuare:

/* Acesta este un comentariu si nu va fi interpretat de browsere */

Observati ca la inceputul comentariului avem un slash “/” urmat de un asterisc “*”, dupa care urmeaza comentariul respectiv, iar la inchiderea lui ordinea este inversa. Primul este asteriscul urmat de slash.

Sursa

Leave a Reply