Klasa vs ID | Wyjaśnione

Elementy są dodawane do pliku HTML, aby utworzyć stronę internetową. Jednak w przypadku manipulacji lub stylizacji wymaganych elementów konieczne jest dostęp do nich najpierw. W odpowiednim celu można dodać identyfikator lub klasę podczas definiowania HTML. Ten identyfikator lub klasa można później użyć do wspomnianych operacji.

Wyniki uczenia się tego postu to:

• Co to jest atrybut klasowy?
• Jak dodać atrybuty klas do elementów HTML?
• Jak stylizować atrybut klasy z CSS?
• Jak używać atrybutu klasy z wieloma nazwami?
• Jaki jest atrybut id?
• Jak stylizować atrybut identyfikatora?
• Różnica między atrybutami klasy i id

Co to jest atrybut klasowy?

W HTML „The”klasa”Atrybut jest określony za pomocą elementów. Atrybut klasy może zidentyfikować jedną lub więcej nazw klas dla elementu HTML. Ponadto tę samą nazwę klasy można przypisać do różnych elementów HTML. W rezultacie te nazwy klas są dostępne przez kod CSS i JavaScript w celu zastosowania różnych funkcji.

Jak dodać atrybut klasy do elementów HTML?

Najpierw dodaj/utwórz element DIV z nazwą klasy „główny”W pliku HTML. Dodać

I

tagi zawierające niektóre treści w tym elemencie. Ponadto oba te tagi mają ten sam atrybut klasy „tekst”:

Witamy w Linuxhint!

Najlepsza strona internetowa samouczka

Kod wspomniany powyżej dokona dwóch działów na stronie internetowej. Aby je odróżnić, zastosujmy niektóre właściwości CSS.

Jak stylizować atrybut klasy z CSS?

Poniższa sekcja pokazuje właściwości stylizacji zastosowane do powyższych klas.

Podaj wybór klasy

„„.„Symbol w CSS, zanim każda nazwa klasy jest znana jako„Selektor klas". Nazwa klasy, której następuje ten symbol służy do dostępu do klasy.

Styl Main Div

.główny
szerokość: 500px;
Wysokość: 300px;
granica: 7px solid #379237;
Margines: 15px Auto;
kolor tła: #A0E66B;

Element div o nazwie klasy „główny”Jest stylizowany z właściwościami opisanymi poniżej:

• "szerokość„Właściwość ustawia szerokość elementu.
• "wysokość„Właściwość ustawia wysokość elementu.
• "granica„Właściwość służy do ustawienia granicy z wartością określającą szerokość granicy, typ i kolor granicy.
• "margines”Właściwość ustawia/dostosowuje przestrzenie wokół Div.
• "kolor tła„Właściwość jest wykorzystywana do ustawienia koloru tła elementu.

Można zauważyć, że Div z nazwą klasy „główny”Jest skutecznie stylizowany. „„klasa„Tekst nie jest jeszcze stylizowany:

Klasa tekstowa w stylu

.tekst
Text-Align: Center;
Rozmiar czcionki: 40px;
kolor fioletowy;

Tekst klasowy

I

Tagi są stylizowane przez podanie powyższego kodu. Opis powyższego kodu jest wymieniony poniżej:

• "tekst-align”Właściwość ustawia wyrównanie tekstu elementu.
• "rozmiar czcionki”Właściwość ustawia rozmiar czcionki elementu.
• "kolor„Właściwość jest wykorzystywana do zastosowania koloru do tekstu elementu.

Teraz elementy związane z obiema klasami zostały pomyślnie zaprojektowane:

Jak używać atrybutu klasy z wieloma nazwami?

Załóżmy, że chcemy dodać dwa akapity. Jeden z kolorem pomarańczowym, a drugi z prostą czernią. Oba muszą mieć te same właściwości stylizacji, z wyjątkiem koloru.

Aby to zrobić, w pliku HTML najpierw utwórz element DIV o nazwie klasy „główny". Następnie wewnątrz tego div dodaj dwa

Tagi z atrybutami klasowymi. Pierwszy

Tag jest powiązany z obiema klasami. Inny

Tag jest przypisany do klasy „tekst" tylko:

„Sukces jest najlepszy, gdy jest udostępniony”

Cytaty sukcesu

Stylowy tekst klasowy

.tekst
Text-Align: Center;
Rozmiar czcionki: 40px;
Font-Weight: Bold;
Wyściółka: 20px;

„„tekst„Klasa jest stylizowana z właściwościami opisanymi poniżej:

• "tekst-align„Własność o wartości”Centrum”Ustawia wyrównanie tekstu w środku.
• "rozmiar czcionki„Właściwość jest wykorzystywana do określenia rozmiaru czcionki elementu.
• "grubość czcionki”Z wartością„pogrubiony”Będzie odważny tekst.
• "Wyściółka„Właściwość jest wykorzystywana do określenia przestrzeni u góry treści elementu.

Style Class Para

.para
Kolor: #DC5F00;

Nazwa drugiej klasy otrzymuje tylko kolor właściwości w stylu z wartością #DC5F00.

Zobaczmy, jaki jest wynik powyższego kodu HTML:

Można zauważyć, że właściwości określone w klasie tekstowej są stosowane do obu elementów. Ale ponieważ przypisaliśmy również klasę para do pierwszego elementu P, pierwsza koloru zmieniła się.

Co to jest atrybut id?

„„ID”Atrybut musi być unikalny dla każdego elementu w całym elemencie HTML. Ten atrybut jest wykorzystywany przez CSS i JavaScript do wykonywania różnych działań. Nie możemy używać wielu nazw identyfikatorów dla elementu.

Html

W pliku HTML dodaj dwa

tagi z tekstem. Pierwszy

Tag jest nazwany id jako „pkt”:

Witamy w Linuxhint!

Najlepsza strona internetowa samouczka

Jak stylizować atrybut identyfikatora?

Poniższa sekcja pokazuje właściwości stylizacji zastosowane do powyższego atrybutu identyfikatora.

Selektor identyfikatora

W HTML „The”#„Znak jest również znany jako„Selektor identyfikatora". Nazwa identyfikatora, a następnie ten symbol służy do dostępu do elementu z tym identyfikatorem.

Styl para id

#Para
Text-Align: Center;
Rozmiar czcionki: 40px;
kolor fioletowy;

Element o nazwie „pkt”Jest stylizowany z właściwościami opisanymi poniżej:

• "tekst-align„Właściwość sprawia, że ​​centrum tekstowe jest wyrównane.
• "rozmiar czcionki”Właściwość dostosowuje rozmiar tekstu.
• "kolor„Właściwość zmienia kolor tekstu fioletowego.

Wyjście

Klasa vs id

Oto lista kluczowych różnic między atrybutami klasy i identyfikatorów:

atrybut id	atrybut klasy
Atrybut ID musi być unikalny dla każdego elementu w HTML.	Jedną klasę można zastosować do więcej niż jednego elementu HTML.
Jeden atrybut ID może być przymocowany do jednego elementu.	Możemy powiązać wiele selektorów klas z elementem.
W CSS, aby zastosować style do identyfikatora, „#„Używany jest symbol, a następnie nazwa identyfikatora.	W CSS, aby stylizować klasę, której używamy „.”Następnie nazwa klasy, aby uzyskać dostęp do określonej klasy.
Składnia: #ID // deklaracje CSS	Składnia: .klasa // deklaracje CSS

Porównaliśmy różnice między atrybutami klasy i id.

Wniosek

W HTML atrybut klasy może zawierać wiele nazw klas. Atrybut identyfikatora nie może zawierać wielu nazwisk. Musi być wyjątkowy w całym dokumencie HTML. Jednak oba atrybuty są wykorzystywane do dostępu do odpowiednich elementów HTML (S) HTML. Ten blog wyjaśnił różnicę między atrybutami ID i klasami z przykładami.