Klasa i identyfikator selektora – selektory CSS są kluczowym elementem w stylizacji stron internetowych. Kiedy projektujemy stronę, chcemy mieć kontrolę nad wyglądem poszczególnych elementów HTML. Klasa i identyfikator to dwa podstawowe typy selektorów, które pozwalają nam precyzyjnie wybierać elementy do stylizacji. W tej lekcji omówię, jak używać klas i identyfikatorów w CSS, aby tworzyć atrakcyjne i funkcjonalne strony internetowe.
Klasa selektora w CSS
Klasa jest to nazwa, którą możemy nadać jednemu lub wielu elementom na stronie. Klasy są użyteczne, gdy chcemy zastosować te same style do różnych elementów.
Definiujemy ją za pomocą atrybutu class. Możemy nadać elementowi więcej niż jedną klasę, oddzielając je spacją.
Aby stylować elementy z określoną klasą, używamy . przed nazwą klasy w selektorze CSS.
selektor.klasa {
cecha: wartość;
}Klasę możemy nadać dla dowolnego znacznika w HTML np. dla nagłówka, akapitu, elementu blokowego – div.
Klasą może być pojedynczy wyraz. W nazwie należy unikać polskich liter oraz znaków zakazanych takich jak kropka czy znak równości.
Przykłady zastosowania klasy
Możemy użyć klasy do stylowania wielu elementów na stronie w ten sam sposób. Na przykład, jeśli chcemy, aby wszystkie paragrafy <p> miały zielony kolor, możemy nadać im klasę zielony-paragraf.
W pliku HTML klasa będzie wyglądać następująco:
<p class="zielony-paragraf">Ten akapit będzie w kolorze zielonym.</p>
<p class="zielony-paragraf">W tym akapicie tekst również będzie w kolorze zielonym.</p>
<p>Ten akapit będzie mieć globalnie ustawiony styl.</p>W dokumencie CSS przygotujemy formatowanie dla znacznika z klasą zielony-paragraf.
.zielony-paragraf {
color: green;
}Ten akapit będzie w kolorze zielonym.
W tym akapicie tekst również będzie w kolorze zielonym.
Ten akapit będzie mieć globalnie ustawiony styl.
Identyfikator selektora w CSS
Identyfikator jest to unikalna nazwa przypisana jednemu konkretnemu elementowi na stronie. Identyfikatory są przydatne, gdy chcemy precyzyjnie stylizować jeden konkretny element.
Definiujemy go za pomocą atrybutu id. Każdy identyfikator na stronie musi być unikalny, czyli może wystąpić w dokumencie tylko raz.
Aby stylować element z określonym identyfikatorem, używamy # przed nazwą identyfikatora w selektorze CSS.
selektor#identyfikator {
cecha: wartość;
}Identyfikator podobnie jak klasę możemy nadać dla dowolnego znacznika w HTML np. dla nagłówka, akapitu, elementu blokowego – div.
Identyfikatorem może być pojedynczy wyraz. W nazwie podobnie jak w przypadku klasy należy unikać polskich liter oraz znaków zakazanych takich jak kropka czy znak równości.
Przykłady zastosowania identyfikatora
Identyfikatory są użyteczne, gdy chcemy jednoznacznie stylizować konkretny element na stronie. Na przykład, możemy mieć akapit z identyfikatorem niebieski-paragraf, który chcemy stylizować jako wyróżniony akapit strony.
W pliku HTML ustawimy identyfikator:
<p>Ten akapit będzie mieć globalnie ustawiony styl.</p>
<p id="niebieski-paragraf">Tekst w tym akapicie będzie w kolorze niebieskim.</p>
<p>Ten akapit będzie mieć globalnie ustawiony styl.</p>W dokumencie CSS przygotujemy formatowanie dla znacznika z identyfikatorem niebieski-paragraf.
p#niebieski-paragraf {
color: blue;
}Ten akapit będzie mieć globalnie ustawiony styl.
Tekst w tym akapicie będzie w kolorze niebieskim.
Ten akapit będzie mieć globalnie ustawiony styl.
Praktyczne przykłady zastosowania klas i identyfikatorów
Klasy i identyfikatory są używane w różnych kontekstach projektowania stron internetowych. Oto kilka przykładów ich praktycznego zastosowania:
Menu nawigacyjne – używanie klasy menu do stylowania wszystkich elementów menu nawigacyjnego.
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>Nagłówek strony – używanie identyfikatora header do stylowania nagłówka strony.
<div id="header">
<h1>Moja Strona</h1>
<p>Witaj na mojej stronie internetowej!</p>
</div>Klasa i identyfikator selektora – podsumowanie
Ta lekcja dostarczyła solidne podstawy w zakresie selektorów klas i identyfikatorów w CSS. Zrozumienie różnic między nimi oraz ich zastosowanie pozwoli Ci efektywnie stylizować strony internetowe. Teraz czas na praktyczne zastosowanie tych umiejętności i eksperymentowanie z projektowaniem stron www za pomocą CSS!