Diferența dintre id și clasă în CSS

principala diferență între id și clasă în CSS este că id este folosit pentru a aplica stilul unui element unic, în timp ce clasa este utilizată pentru a aplica stil pentru mai multe elemente.

Există diverse tehnologii în dezvoltarea web. Limbile principale pentru dezvoltarea site-urilor web sunt HTML, CSS și JavaScript. HTML reprezintă limbajul Hyper Text Markup Language. Ajută la dezvoltarea structurii paginii web. JavaScript vă ajută să faceți din pagina web mai dinamică. CSS reprezintă foi de stil cascadă. Vă ajută să adăugați stiluri și să faceți paginile web mai reprezentative. Regulile CSS se aplică elementelor HTML. De asemenea, selectorii CSS ajută la găsirea elementelor și aplicarea stilului necesar la etichetele HTML. id și clasa sunt două tipuri de selectori.

Domenii cheie acoperite

1. Ce sunt regulile CSS?
     - Definiție, exemplu
2. Ce este id 
     - Definiție, exemplu
3. Ce este clasa
     - Definiție, exemplu
4. Diferența dintre id și clasă
     - Compararea diferențelor cheie

Termeni cheie

Clasa, Regulile CSS, ID-ul

Ce sunt regulile CSS?

CSS constă într-un set de reguli. Browserul poate interpreta aceste reguli și le poate aplica elementelor specificate în document. O regulă de stil CSS este formată din trei secțiuni. Ele sunt selectorul, proprietatea și valoarea. Declarația se referă la combinația dintre proprietate și valoare. Ele apar în interiorul unei perechi de bretele curbate după cum urmează.

selector proprietate: valoare;

Selector - Ajută la identificarea elementului pentru aplicarea stilului

Proprietate - Un atribut. Toate atributele HTML sunt convertite în proprietăți CSS. Câteva exemple sunt culoarea, textul-aliniere, marginea, etc.

Valoare - Valoarea este cea atribuită proprietății. De exemplu, albastrul poate fi atribuit culorii proprietății.

Ce este id

Programatorul poate defini o regulă de stil bazată pe id-ul elementelor. Toate elementele cu același id vor fi aplicate cu stilul definit. Pentru a selecta un element cu un id specific, ar trebui să existe un simbol # (hash) urmat de id-ul elementului.

Să presupunem că fișierul HTML conține o instrucțiune după cum urmează.

Fișierul CSS conține următoarea bucată de cod.

# Header1

            Culoarea albastra;

Când browserul interpretează instrucțiunea HTML, verifică id-ul elementului h1, care este header1 în fișierul CSS. Apoi, se aplică regula CSS definită la elementul h1. Prin urmare, textul Hello World va apărea în culoarea albastră.

Id-ul este unic în cadrul paginii. Prin urmare, selectorul de id este utilizat pentru un element unic.

Ce este clasa

Similar cu id-ul, programatorul poate defini regulile de stil bazate pe clasa elementului. Toate elementele cu aceeași clasă vor fi aplicate cu un stil definit. Pentru a selecta un element cu o anumită clasă, ar trebui să existe a. (perioadă) simbol urmat de numele clasei.

Să presupunem că fișierul HTML conține următoarele instrucțiuni.

Fișierul CSS conține următoarea bucată de cod.

.header1

            Culoarea albastra;

Când browserul interpretează instruciunea HTML, verifică clasa elementului h1, care este header1 în fișierul CSS. Apoi, se aplică regula CSS definită pentru toate elementele h1. Prin urmare, textul Hello World 1 și Hello World 2 va apărea în culoarea albastră.

Este posibil să folosiți aceeași clasă pe mai multe elemente. Prin urmare, selectorul de clasă este utilizat pentru mai multe elemente.

Diferența dintre id și clasă în CSS

Definiție

id este un selector în CSS care modelează elementul cu un id specificat, în timp ce clasa este un selector în CSS care modelează elementele selectate cu o anumită clasă.

Sintaxă

Sintaxa id este #id css declarations; . Sintaxa de clasă este .class css declarations;

folosire

Mai mult, utilizarea id-ului este de a aplica stilul unui element specific. Utilizarea clasei este de a aplica stil pentru mai multe elemente.

Concluzie

Id-ul și clasa sunt doi selectori în CSS care permit aplicarea stilului elementelor HTML. Principala diferență dintre id și clasă în CSS este aceea că id-ul este folosit pentru a aplica stilul unui element unic în timp ce clasa este folosită pentru a aplica stilul la mai multe elemente.

Referinţă:

1. "Sintaxă CSS și selectori". W3Schools Tutoriale web online, Disponibil aici.

Datorită fotografiei:

1. "CSS.3" de Nikotaf - lucrare proprie (CC BY-SA 4.0) prin Wikimedia Commons