CSS Sintaxa
Un CSS regula-set constă dintr-un selector și un bloc de declarație:
Punctele de selecție în elementul HTML pe care doriți să stil.
Blocul declarație conține una sau mai multe declarații separate prin virgulă.
Fiecare declarație include un nume de proprietate CSS și o valoare, separate prin două puncte.
O declarație CSS întotdeauna se termină cu punct și virgulă, iar blocurile de declarare sunt acolade.
În exemplul următor , toate <p> elemente vor fi centru aliniate, cu o culoare text roșu:
CSS Selectori
Selectoare CSS sunt folosite pentru a "find" (or select) elemente HTML pe baza numelui elementului, id, clasa, atribut, și multe altele.
Selectorul elementului
Selectorul elementului selectează elemente bazate pe numele elementului.
Puteți selecta toate <p> elemente dintr - o pagină ca aceasta (în acest caz, toate <p> elemente vor fi centru-aliniat, cu o culoare roșu de text):
ID-ul Selectorul
ID - ul selectorul utilizează id atribut al unui element HTML pentru a selecta un element specific.
ID-ul unui element trebuie să fie unic într-o pagină, astfel încât selectorul id-ul este folosit pentru a selecta un element unic!
Pentru a selecta un element cu un anumit cod, scrie un hash (#) caracter, urmat de id - ul elementului.
Regula de stil de mai jos va fi aplicat elementului HTML cu id="para1" :
Notă: Un nume de ID - ul nu poate începe cu un număr!
Selectorul de clasă
Selectorul de clasă selectează elemente cu un atribut specific clasei.
Pentru a selecta elemente cu o anumită clasă, scrie o period (.) de period (.) Caracter, urmat de numele clasei.
In exemplul de mai jos, toate elementele HTML cu class="center" va fi roșu și aliniat-centru:
Puteți specifica, de asemenea, că elementele HTML numai specifice ar trebui să fie afectate de o clasă.
In exemplul de mai jos, numai <p> elemente cu class="center" va fi centru aliniat:
Elementele HTML se pot referi, de asemenea, la mai mult de o clasă.
In exemplul de mai jos, <p> elementul va fi stilizat în funcție de class="center" și la class="large" :
Notă: un nume de clasă nu poate începe cu un număr!
gruparea Selectori
Dacă aveți elemente cu aceleași definiții de stil, cum ar fi acest lucru:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Acesta va fi mai bine la grupul selectorii, pentru a minimiza codul.
Pentru selectoare de grup, separați fiecare selector cu virgulă.
In exemplul de mai jos am grupat selectorii din codul de mai sus:
CSS Comentarii
Comentariile sunt folosite pentru a explica acest cod, și poate ajuta atunci când editați codul sursă la o dată ulterioară.
Comentariile sunt ignorate de browsere.
Un comentariu CSS începe cu /* and ends with */ . Comentariile pot întinde, de asemenea, mai multe linii:
Exemplu
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»