Tutorial CSS - Class si Id

Tutoriale CSS si HTML, tutoriale editare si instalare site-uri in CSS si HTML!
Avatar utilizator
DarkArms
Membru
Mesaje: 3107
Localitate: Reșița, România
Nick server: cleks
Contact:

Tutorial CSS - Class si Id

Mesaj de DarkArms » Sâm Apr 16, 2016 11:48 am

CSS - Class si Id

Pentru a stabili in CSS o clasa de elemente cu aceleasi proprietati vom folosii atributul class sau id.
CSS - Atributul class

Clasele de elemnte in CSS pot fi stabilite pentru un singur tag HTML sau pentru orice alt tag care are la atributul class valoarea stabilita anterior. Desi suna putin cam complicat este chiar simplu. Sa ne uitam la urmatorul exemplu care stabileste oclasa in CSS.

Cod: Selectaţi tot

p.center {text-align:center}
p.right {text-align:right}
Cu aceasta bucata de cod CSS am stabilit doua clase de paragrafuri, unul centrat si altul aliniat la dreapta. Acum le vom aplica in HTML.

Cod: Selectaţi tot

<p class="center">Paragraf centrat.</p>
<p class="right">Paragraf aliniat la dreapta.</p>
In cazul in care vrem sa folosim aceasi clasa pentru mai multe elemente vom elimina tagul <p> din numele clasei. Sa zicem ca vrem sa centram mai multe elemente. De exemplu un div, un titlu, un paragraf si o imagine. Putem folosi aceasi clasa.

Cod: Selectaţi tot

.center {text-align:center}
Ar trebuii mentionat ca numele clasei ".center", este un nume generic si nu are nimic de-a face cu actiunea asupra unui tag. Se putea numi la fel de bine si ".clatitecugem".

Cod: Selectaţi tot

.clatitecugem {text-align:center}

Cod: Selectaţi tot

<div class="clatitecugem">
	<h1 class="clatitecugem">Un titlu centrat</h1>
	<p class="clatitecugem">Clatitele cu gem sunt foarte bune. Ingredientele principale sunt: lapte, oua, zahar si faina. (Tot acest paragraf va fi centrat in mijlocul div-ului).</p>
</div>
Cu toate acestea, va sfatuiesc sa folositi nume descriptive si intuitive. Sunt mult mai simple si servesc mai bine la intelegerea ulterioara a codului CSS

Nota: Inceperea numelui cu un numar NU este recomandata. Clasele denumite gen: ".165464" sau ".6ceva" sunt interpretate doar de IE
CSS - Id

Id-ul se foloseste la fel ca si class. De fapt singura diferenta intre class si id este sintaxa de definire. Vom folosi un diez (#) in loc de punct pentru a defini id-ul in CSS

Cod: Selectaţi tot

#center {
	text-align:center;
	color:blue;
	font-family:"sans serif"
}
Diferente Id/Class

Desi atat #id cat si .class se pot folosi pentru a da stil unu element html. In practica, se foloseste in acest scop doar atributul class. Atributul id este folosit in general in javascript, pentru a localiza un element html si executa actiuni asupra lui.

Pe de alta parte atributul id trebuie sa fie unic in pagina. Asta inseamna ca nu poate exista un alt element html cu acelasi id. Prezenta mai multor elemente cu acelasi id, poate genera errori javascript si un cop html invalid.

Înapoi la “Tutoriale CSS si HTML”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 2 vizitatori