CSS Selecting by class

Spójrzmy na naszą stronę.

Ma nagłówki,

akapit z opisem królików

oraz kilka innych akapitów

z tekstem mojej ulubionej
piosenki o królikach.

Zmieniliśmy styl pierwszego
akapitu za pomocą ID.

Skoro jest kilka akapitów
ze słowami,

niech wszystkie mają żółte tło.

Jak to uzyskać, wykorzystując
to, co już wiemy?

Najpierw nauczyliśmy się

wybierania wszystkich znaczników
danego typu,

np. jak z selektorem „p”.

Zmieniał się kolor wszystkich
akapitów, nie tylko z piosenką.

Potrzebujemy
czegoś konkretniejszego.

Nauczyliśmy się wybierać
znaczniki z określonym ID,

np. z ID „kroliki-piosenka”.

Ale wybraliśmy
tylko pierwszy akapit.

Nie dodamy tego ID
do innych akapitów:

nie wolno przypisywać jednego
ID różnym znacznikom.

Gdybyśmy chcieli wybrać
inne akapity,

musielibyśmy dać każdemu
nowe ID

(np. „tekst-piosenki2”
i „tekst-piosenki3"),

bo każde ID jest inne.

I trzeba by do każdego
dodać reguły.

Dalibyśmy radę,
ale ile przy tym pracy!

Dodając nowy wers do piosenki,

musielibyśmy dodawać
nowe ID do HTML,

i jeszcze jedno do reguł CSS.

Dodawanie setek wierszy
byłoby wyczerpujące!

Wiecie, co?

Jest lepszy sposób. Klasy.

Klasa to sposób

przypisania elementu do grupy.

Można przypisać ich tyle,
ile się chce.

Aby dodać klasę, zaczynamy
od atrybutu, jak przy ID.

Skasuję to ID,
bo mam wpisać nowe.

Kursor jest w znaczniku
początkowym „p”.

Dodaję spację i piszę:
class = ""

Teraz potrzebujemy nazwy.

Ładnej, opisowej.

Powiedzmy „teksty-piosenek”.

Wpisałam.

Co jeszcze powinno
należeć do tej klasy?

Cała reszta akapitów z tekstami.

Zejdźmy niżej

i dodajmy atrybut
każdej z klas akapitu:

„teksty-piosenek”.

Świetnie. Już możemy
dodać regułę CSS.

Wracamy do znacznika
„style”

i kasuję selektor ID,
który wpisaliśmy wcześniej,

bo teraz będzie inny.

Musimy przygotować selektor klasy.

W tym celu użyjemy kropki.

Za nią napiszemy nazwę
klasy: teksty-piosenek.

I dalej jak zwykle: klamry,
właściwość, dwukropek, wartość.

I już!

Wszystkie teksty
są na żółtym tle.

A gdybyśmy napisali duże „S”?

Nic z tego.

Przy klasach także
liczy się wielkość.

To ważne, czy litery są
wielkie czy małe.

Jak przy ID.

A gdybyśmy zamiast kropki
użyli kratki?

Nie działa.

Przeglądarka uznaje
„teksty-piosenek” za ID,

a nie mogąc znaleźć
atrybutu ID,

rezygnuje.

Co będzie, jeśli w nazwach
znajdą się spacje?

Też niedobrze.

W nazwach klas nie wolno
ich używać.

Jak się dowiecie,

w CSS spacja oznacza
coś bardzo konkretnego.

Poprawmy to.

Jeszcze raz.

Chcąc dodać klasę,

wymyślamy nazwę

i wpisujemy ją do atrybutu
klasy w HTML.

Piszemy regułę stylu,

zaczynając od kropki
i nazwy klasy.

Teraz wasz CSS ma klasę!