4. ID-uri si clase

Vei vedea stiluri definite in doua feluri:

.stil1 {

comanda 1;

comanda2;

}

 

sau

 

#stil2 {

comanda 3;

comanda 4;

}

 

Te intrebi de ce inaintea unor stiluri se pune punct „.” si inaintea altora se pune diez „#” ?

.stil1 si #stil2 sunt selectori.

# (diez) marcheaza faptul ca este un selector de tip ID. Selectorii ID (ex. #stil1, #butoane etc.) trebuie sa fie folositi o singura data intr-o pagina HTML. Daca ai 2 pagini HTML, poti folosi selectorul #stil1 in fiecare, dar doar odata per pagina. Practic, daca site-ul tau are 2 pagini poti folosi selectorul ID #stil1 de maxim doua ori.

. (punct) marcheaza faptul ca este un selector de tip clasa. Selectorii clase (ex. .stil2, .meniuri etc.) pot fi folositi de oricate ori pe o pagina. In general vei lucra cu selectori clase.

Deci:

# = id

. = clasa

Daca o clasa si un ID au acelasi nume atunci ID-ul va avea prioritate.

Vei mai gasi si stiluri definite fara punct si fara diez. De exemplu:

 

p {

comanda 1

comanda 2

}

Se aplica etichetelor (tag) HTML. <p> in HTML este eticheta care creeaza un paragraf. Daca dorim sa facem in CSS setari pentru toate paragrafele atunci vom scrie codul de mai sus.

<img> este eticheta HTML pentru imagine. Daca dorim sa aplicam un anumit efect de still CSS tuturor imaginilor vom scrie:

img {

setari CSS pe care dorim sa le aplicam

}

 

Inainte sa terminam pe ziua de azi vom mai face un ultim lucru. Iti spuneam ca suntem la teoria introductiva, dar de maine fiecare element il vei si testa. Poate te-ai intrebat unde anume vei testa / exersa fiecare element pe care il vom parcurge.

Intra pe www.cssdesk.com

Site-ul arata ca in imaginea de mai jos.

css1

In fereastra alba din stanga-sus introduci cod HTML. In fereastra alba din stanga-jos introduci cod CSS. In partea albastra vezi LIVE rezultatul.

In sectiunea pentru HTML scrie:

<br><p class=”stil1″>
Invat CSS 🙂
</p>

In sectiunea pentru CSS scrie:

.stil1 {
color: #ffffff;
font-size: 40px;
}

<p class=”stil1″> inseamna ca aplicam clasa stil1 elementului p. De aceea in zona CSS creem o clasa (cu punct) numita stil1.

Rezultatul va arata ca in imagine:

css2

Nu doar citi. Deschide browser-ul si chiar scrie textul. Vei invata mult mai repede si iti vor ramane in minte mult mai multe informatii. Ai inceput acest curs ca sa inveti CSS. Nu doar citi. Invata!

Continuam maine 🙂

SEE ALL Add a note
YOU
Add your Comment