Sintaxa CSS

CSS are o sintaxă simplă, şi foloseşte mai multe cuvinte cheie englezeşti pentru a specifica numele diferitelor proprietăţi de stil.

O prezentare de stil (style sheet) constă dintr-o listă de reguli. Fiecare regulă sau set de reguli constă din una sau mai mulţi selectori şi un bloc de declaraţii. Un bloc de declaraţii în acolade constă dintr-o listă de declaraţii separate prin punct şi virgulă. Fiecare declaraţie constă dintr-o proprietate, două puncte (:), o valoare, şi apoi punct şi virgulă (;).^[1]

În CSS, selectorii sunt folosiţi pentru a declara la care elemente se aplică stilul, un fel de expresie de potrivire. Selectorii se pot aplica tuturor elementelor care şin de un tip specific, sau numai acelor elemente care se potrivesc cu un anumit atribut; elementele pot fi potrivite în funcţie de cum sunt plasate relativ la celelalte elemente în codul de marcare, sau de cum sunt aşezate în modelul pbiect document.

În plus faţă de acestea, poate fi folosit un set de pseudo-clase pentru a defini comportări ulterioare. Probabil cel mai cunoscut dintre acestea este :hover, care aplică un stil doar când utilizatorul ‘punctează către’ elementul vizibil, de obicei ţinând mouse-ul deasupra lui. Este anexat unui selector ca în a:hover sau #elementid:hover. Alte pseudo-clase şi pseudo-elemente sunt, de exemplu, :first-line, :visited sau :before. O pseudo-clasă specială este :lang(c), „c”.

O pseudo-clasă selectează elemente întregi, precum :link or :visited, pe când un pseudo-element face o selecţie care poate consta din elemente parţiale, precum :first-line or :first-letter.

Selectorii pot fi combinaţi ţi în alte moduri, în special în CSS 2.1, pentru a obţine o mai mare specificitate şi flexibilitate.^[2]

Un simplu rezumat al sintaxei Selector indicând utilizarea și timpul de introducere.

Model >>> Semnificaţie >>> Primul definit în nivelul CSS
E >>> un element de tip E >>> 1
E:link >>> unui element E fiind ancora sursă a unui hiperlink al cărui target nu este încă vizitat (:link) sau deja vizitat >>> 1
E:active >>> un element E în timpul unor anumite acțiuni ale utilizatorului >>> 1
E::first-line >>> prima linie formatată a unui element E >>> 1
E::first-letter >>> prima literă formatată a unui element E >>> 1
E.warning >>> un element de E a cărui clasă este „warning” (limbajul documentului specifică modul în care este determinată clasa).>>> 1
E#myid >>> un element E cu ID-ul egal cu „myid”. >>> 1
E F >>> un element F descendent al unui element E >>> 1
* >>> Orice element >>> 2
E[foo] >>> un element E cu un „foo” atribut >>> 2
E[foo=”bar”] >>> un element E al cărui „foo” are valoarea atribută exact egală cu „bar” >>> 2
E[foo~=”bar”] >>> un element E a cărei valoare atribută „foo” este o lista de valori separate prin spații albe, dintre care unul este exact egal cu „bar” >>> 2
E[foo|=”en”] >>> un element de E al cărui atribut „foo” are o listă separată prin cratimă de valori, începând (de la stânga), cu „en” >>> 2
E:first-child >>> un element E, primul copil al părintelui său >>> 2
E:lang(ro) >>> un element de tip E în limbaj „ro” (limbajul documentului specifică modul în care este determinată limba) >>> 2
E::before >>> conținut generat înaintea unui element E >>> 2
E::after >>> conținut generat după un element E >>> 2
E > F >>> un element F copil al unui element E >>> 2
E + F >>> un element F imediat precedat de un element E >>> 2
E[foo^=”bar”] >>> un element E a cărui valoare de atribut „foo” începe exact cu șirul de caractere „bar” >>> 3
E[foo$=”bar”] >>> un element E a cărui valoare de atribut „foo” se termină exact cu şirul „bar” >>> 3
E[foo*=”bar”] >>> un element E a cărui valoare de atribut „foo” conține subșirul „bar” >>> 3
E:root >>> un element E, rădăcină a documentului >>> 3
E:nth-child(n) >>> un element E, al n-lea copil al părintelui său >>> 3
E:nth-last-child(n) >>> un element E, al n-lea şi ultimul copil al părintelui său >>> 3
E:nth-a-tip(n) >>> un element E, al n-lea de acest tip >>> 3
E:nth-last-of-tip(n) >>> un element E, al n-lea şi ultimul de acest tip >>> 3
E:last-child >>> un element E, ultimul copil al părintelui său >>> 3
E:first-of-type >>> element E, primul de acest tip >>> 3
E:last-of-type >>> element E, ultimul de acest tip >>> 3
E:only-child >>> un element E, singurul copil al părintelui său >>> 3
E:only-of-type >>> unui element E, singurul de acest tip – 3
E:empty >>> un element E, care nu are copii (inclusiv noduri text) >>> 3
E:target >>> un element de E fiind ținta URI de referinţă >>> 3
E:enabled >>> un element de E activat al interfeţei de utilizator >>> 3
E:disabled >>> un element de E dezactivat al interfeţei de utilizator dezactivat >>> 3
E:checked >>> un element de E verificat al interfeţei de utilizator (de exemplu un radio-buton sau caseta) >>> 3
E:not(s) >>> un element E care nu se potrivește cu selectorul simplu s >>> 3
E ~ F >>> un element F precedat de un element E >>> 3