Sintaxa CSS
In continuare vom aprofunda sintaxa CSS in detaliu, analizind modul in care proprietatile si valorile alcatuiesc declaratii, declaratiile multiple formeaza blocuri de declaratii, iar acestea impreuna cu selectorii alcatuiesc reguli CSS complete. Vom vedea, de asemenea, cum putem adauga comentarii in interiorul fisierelor CSS si cum se gestioneaza spatiile goale(albe).
☞ CSS este un limbaj declarativ ceea ce face ca sintaxa sa fie destul de usor de inteles. In plus, este destul de ingaduitor in ceea ce priveste erorile, in sensul in care, ignora doar acele declaratii pe care nu le intelege(gresite) si nu anuleaza o intreaga regula. Dezavantajul este ca provenienta erorilor este mai greu de identificat.
O regula CSS este constituita din doua blocuri principale:
- Proprietati: identificatori pentru caracteristicile stilistice(font, latime, culoare de fundal), care pot fi modificate.
- Valori: fiecare proprietate are cel putin o valoare, care indica efectiv, modul in care va fi modificata o anumita caracteristica stilistica(font:normal, latime:20px, culoare de fundal: verde).
O proprietate imperecheata cu o valoare constituie o declaratie CSS. Mai multe declaratii CSS formeaza un bloc de declaratii. In sfirsit, blocurile cu declaratii sunt asociate cu selectori pentru a produce reguli CSS(CSS Rulesets sau CSS Rules).
Inainte de a merge mai departe sa ne uitam la exemplul urmator:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Experiment CSS</title>
<link rel="stylesheet" href="style.css">
<head>
<body>
<h1>Reguli CSS</h1>
<p>Acesta este un exemplu</p>
<ul>
<li>Aceasta este</li>
<li>o lista</li>
<ul>
</body>
</html>
Reguli CSS:
h1 {
colour: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
p, li {
text-decoration: underline;
}
🔗 Vedeti rezultatul in editorul mai jos:
Sintaxa in detaliu
Setarea valorilor specifice pentru fiecare proprietate CSS, reprezinta functia de baza a limbajului CSS. Motorul CSS calculeaza ce declaratii se aplica fiecarui element prezent in pagina, pentru a-l stiliza si afisa corespunzator. Proprietatea este separata de valoare prin doua puncte(:).
Exista peste 300 de proprietati CSS diferite si aproape un numar infinit de valori diferite, dar, nu toate perechile de proprietati si valori sunt permise. Fiecare proprietate are o lista specifica de valori permise.
☞ Daca o proprietate este necunoscuta sau daca i se atribuie o valoare nepermisa, declaratia respectiva, este considerata nula si este ignorata in totalitate de motorul CSS al browserului.
Selectori CSS si reguli
Selectorii sunt cei care indica blocurilor de declaratii, la ce elemente ar trebui sa fie aplicate. Acest lucru se realizeaza prin prefixarea fiecarui bloc de declaratii cu un selector, selector care corespunde cu un element sau mai multe elemente din pagina.
Asa cum am precizat deja, selectorul impreuna cu blocul de declaratii constituie o regula CSS.
Uneori selectorii pot deveni foarte complicati. Se poate crea o regula care sa targheteze elemente multiple, prin includerea mai multor selectori separati cu virgula. Am putea selecta orice element care are clasa bau-bau, dar numai daca se afla in interiorul unui element article si doar atunci cind cursorul se afla deasupra elementului. Pare complicat, nu?
Nu va faceti griji, cu rabdare si multa practica, lucrurile vor deveni mult mai clare treptat.
Un element poate fi targhetat de mai multi selectori, motiv pentru care mai multe reguli pot contine aceeasi proprietate. CSS va stabili care regula are prioritate si aceea va fi aplicata. Aceasta reprezinta algoritmul cascadei si vom discuta aceste lucruri in detaliu in capitolul "Cascada si mostenire".
Incercati sa identificati in exemplul urmator, care declaratie se aplica la doua elemente diferite si daca exista reguli care targheteaza acelasi element.
h1 {
color: blue;
background-color: yellow;
}
p, li {
color: red;
}
li {
text-decoration: underline;
}
Alte declaratii CSS
Regulile CSS sunt principalele blocuri de declaratii din foile de stil, dar exista si alte tipuri de blocuri pe care le veti utiliza ocazional.
Regulile care intotdeauna incep cu @ si sunt urmate de un identificator, sunt utilizate pentru a transmite metadate, informatii conditionale sau alte informatii descriptive. Aceste tipuri de reguli au propria sintaxa interna si semantica. Exemplele includ:
- @charset si @import pentru metadate,
- @media si @document, pentru informatii conditionale, imbricate,
- @font-face, pentru informatii descriptive.
Exemple:
@import 'custom.css';
Regula de mai sus importa o fila CSS intr-o alta fila CSS.
@media (min-width: 801px) {
body {
margin: 0 auto;
width: 800px;
}
}
Regula imbricata de mai sus, va fi aplicata doar atunci cind pagina va depasi latimea de 800 pixeli.
Dincolo de sintaxa
Exista citeva reguli de bune practici, pentru a face mai usor de utilizat si intretinut codul CSS.
Spatiul alb
Poate fi adaugat spatiu alb pentru a face mai usor de citit codul CSS si este recomandat ca fiecare declaratie sa fie pe propria linie, asa cum ati vazut deja in exemplele anterioare. La fel ca in HTML, browserul va ignora o mare parte din spatiul alb.
Exemplu de cod fara spatii albe:
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em;}
Zona in care spatiul alb poate crea probleme, este in jurul proprietatilor si valorilor acestora.
Urmatoarele declaratii nu sunt valide:
↘
margin: 0auto;
padding- left: 10px;
↗
Comentariile
La fel ca si in HTML, comentariile sunt utile pentru a va ajuta sa intelegeti ce face codul respectiv, atunci cind revizitati pagina dupa ceva timp, sau pentru colegii cu care lucrati la un proiect. Comentariile sunt utile si pentru a ascunde temporar parti din cod pentru a identifica o eventuala eroare sau in scopul testarii.
/* Exemplu de comentariu in CSS */
Shorthand sau scrierea prescurtata
Unele proprietati precum font, background, padding, border, si margin, permit setarea multor valori ale proprietatii intr-o singura linie, economisind timp si spatiu.
De exemplu aceasta linie,
padding: 10px 20px 10px 20px;
face exact acelasi lucru ca urmatoarele linii:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
Urmatoarea linie,
background: red url(imagine.png) 10px 10px repeat-x fixed;
produce acelasi rezultat ca urmatoarele linii:
background-color: red;
background-image: url(imagine.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
🧠 Quiz - Sintaxa CSS