3

kurs

css

Lekcja 2: Klasa i identyfikator selektora

css

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 bedzie mieć globalnie ustawiony styl.


Ten akapit bedzie mieć odrębny styl.


Ten akapit bedzie 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ć odrębny 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.

comments powered by Disqus

Do góry