Kategorie
Kurs CSS

Klasa i identyfikator selektora

Rozbudowując stronę internetową, dodajemy kolejne znaczniki. Czasami zachodzi potrzeba nadania jednemu ze znaczników odrębnego stylu.

Klasa selektora

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.

<p>Ten akapit bedzie mieć globalnie ustawiony styl.</p>
<p class="styl">Ten akapit bedzie mieć odrębny styl.</p>
<p>Ten akapit bedzie mieć globalnie ustawiony styl.</p>

W dokumencie CSS przygotujemy formatowanie dla znacznika z klasą styl.

p.styl { color: green; }

Przykład

Ten akapit będzie mieć globalnie ustawiony styl.

Ten akapit będzie mieć odrębny styl.

Ten akapit będzie mieć globalnie ustawiony styl.

Nadawanie znacznikom klasy ułatwia pracę w sytuacji, gdy w dokumencie mamy kilka elementów, dla których wygląd będzie wspólny.

Identyfikator selektora

selektor.klasa { 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 należy unikać polskich liter oraz znaków zakazanych takich jak kropka czy znak równości.

<p id="styl1">Ten akapit będzie mieć odrębny styl.</p>
<p id="styl2">Ten akapit będzie mieć odrębny styl.</p>
<p>Ten akapit będzie mieć globalnie ustawiony styl.</p>

W dokumencie CSS przygotujemy formatowanie dla znacznika z identyfikatorami styl1 oraz styl2.

p#styl1 { color: orange; }
p#styl2 { color: green; }

Przykład

Ten akapit będzie mieć globalnie ustawiony styl.

Ten akapit będzie mieć odrębny styl.

Ten akapit będzie mieć globalnie ustawiony styl.

W odróżnieniu od klasy identyfikator może wystąpić w dokumencie tylko raz.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *