Tutorial CSS - Class si Id



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 o clasa in CSS.

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.

<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.

.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".

.clatitecugem {text-align:center}

<div class="clatitecugem">
<h1 class="clatitecugem">Un titlu centrat</h1>
<p class="clatitecugem">Clatitele cu gem sunt foarte bune, ele se fac de cate ori are chef nevasta-mea. Ma duc sa o intreb daca vrea (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

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

Tutorialul CSS anterior
Tutorialul CSS urmator



Comentarii


   True Soft

Diferenta dintre class si id este in primul rand ca un id se foloseste atunci cand ai un singur element pe pagina (ex div id="menu"). Sintaxa de definire este diferita doar pentru a se deosebi intre ele.
27-Apr-2010 - 01:45


   catalin

Corect @True Soft, id-ul este unic in pagina si identifica un singur element.
01-Jun-2010 - 02:50


   x-ghost

"CLASS"-ul este folosit pentru a nu fi nevoit sa repeti acelas cod, de n-spe ori sau sa scrii n-spe valori "id" in fisierul css
02-Sep-2010 - 20:56


   DaviD

Intrebare: Daca am
<html>
<body>
<h1 class="clasa"> text pe care il vreau verde in css </h1>
<h2 class="clasa"> text pe care il vreau rosu in css </h2>


Cum fac acest lucru in css ?

Va rog un mail pe d******@yahoo.com
03-Sep-2010 - 18:34


   DaviD

pui in fisierul css asa :

h3 {color: green; } - "green" - il poti inlocuii cu orice culoare vrei ( rgb, hex sau nume )

Si in fisierul html cand afisezi <h3>text</h3> - textul va aparea verde.
19-Sep-2010 - 01:03

1    


Trimite un comentariu!

Nume *
E-mail *
Vreau sa fiu anuntat de urmatoarele mesaje la acest articol
Comentariu *

Security image