WEBVTT

00:00:00.326 --> 00:00:02.079
Spójrzmy na naszą stronę.

00:00:02.284 --> 00:00:04.540
Ma nagłówki,

00:00:04.540 --> 00:00:07.580
akapit z opisem królików

00:00:07.580 --> 00:00:10.588
oraz kilka innych akapitów

00:00:10.588 --> 00:00:13.416
z tekstem mojej ulubionej
piosenki o królikach.

00:00:13.543 --> 00:00:17.554
Zmieniliśmy styl pierwszego
akapitu za pomocą ID.

00:00:17.857 --> 00:00:21.016
Skoro jest kilka akapitów
ze słowami,

00:00:21.016 --> 00:00:24.083
niech wszystkie mają żółte tło.

00:00:24.613 --> 00:00:27.692
Jak to uzyskać, wykorzystując
to, co już wiemy?

00:00:28.221 --> 00:00:30.374
Najpierw nauczyliśmy się

00:00:30.374 --> 00:00:33.002
wybierania wszystkich znaczników
danego typu,

00:00:33.002 --> 00:00:34.659
np. jak z selektorem „p”.

00:00:34.886 --> 00:00:39.120
Zmieniał się kolor wszystkich
akapitów, nie tylko z piosenką.

00:00:39.226 --> 00:00:41.290
Potrzebujemy
czegoś konkretniejszego.

00:00:41.507 --> 00:00:44.898
Nauczyliśmy się wybierać
znaczniki z określonym ID,

00:00:44.898 --> 00:00:48.140
np. z ID „kroliki-piosenka”.

00:00:48.368 --> 00:00:50.920
Ale wybraliśmy
tylko pierwszy akapit.

00:00:51.120 --> 00:00:53.725
Nie dodamy tego ID
do innych akapitów:

00:00:53.725 --> 00:00:57.657
nie wolno przypisywać jednego
ID różnym znacznikom.

00:00:57.867 --> 00:01:00.202
Gdybyśmy chcieli wybrać
inne akapity,

00:01:00.202 --> 00:01:02.881
musielibyśmy dać każdemu
nowe ID

00:01:02.881 --> 00:01:05.717
(np. „tekst-piosenki2” 
i „tekst-piosenki3"),

00:01:05.717 --> 00:01:07.358
bo każde ID jest inne.

00:01:07.358 --> 00:01:09.808
I trzeba by do każdego
dodać reguły.

00:01:09.808 --> 00:01:12.398
Dalibyśmy radę,
ale ile przy tym pracy!

00:01:12.398 --> 00:01:14.691
Dodając nowy wers do piosenki,

00:01:14.691 --> 00:01:17.279
musielibyśmy dodawać
nowe ID do HTML,

00:01:17.279 --> 00:01:19.018
i jeszcze jedno do reguł CSS.

00:01:19.018 --> 00:01:22.830
Dodawanie setek wierszy
byłoby wyczerpujące!

00:01:22.980 --> 00:01:24.315
Wiecie, co?

00:01:24.492 --> 00:01:27.383
Jest lepszy sposób. Klasy.

00:01:27.599 --> 00:01:29.009
Klasa to sposób

00:01:29.009 --> 00:01:32.067
przypisania elementu do grupy.

00:01:32.162 --> 00:01:35.150
Można przypisać ich tyle,
ile się chce.

00:01:35.352 --> 00:01:39.928
Aby dodać klasę, zaczynamy
od atrybutu, jak przy ID.

00:01:40.362 --> 00:01:44.705
Skasuję to ID,
bo mam wpisać nowe.

00:01:44.705 --> 00:01:47.915
Kursor jest w znaczniku
początkowym „p”.

00:01:47.915 --> 00:01:51.675
Dodaję spację i piszę: 
class = ""

00:01:53.183 --> 00:01:55.333
Teraz potrzebujemy nazwy.

00:01:55.333 --> 00:01:56.792
Ładnej, opisowej.

00:01:56.927 --> 00:01:59.294
Powiedzmy „teksty-piosenek”.

00:01:59.658 --> 00:02:01.449
Wpisałam.

00:02:01.665 --> 00:02:04.335
Co jeszcze powinno
należeć do tej klasy?

00:02:04.416 --> 00:02:06.420
Cała reszta akapitów z tekstami.

00:02:06.510 --> 00:02:09.154
Zejdźmy niżej

00:02:09.154 --> 00:02:12.777
i dodajmy atrybut
każdej z klas akapitu:

00:02:13.061 --> 00:02:14.540
„teksty-piosenek”.

00:02:14.836 --> 00:02:18.003
Świetnie. Już możemy
dodać regułę CSS.

00:02:18.217 --> 00:02:20.539
Wracamy do znacznika
„style”

00:02:20.539 --> 00:02:24.574
i kasuję selektor ID,
który wpisaliśmy wcześniej,

00:02:24.574 --> 00:02:25.772
bo teraz będzie inny.

00:02:26.157 --> 00:02:28.594
Musimy przygotować selektor klasy.

00:02:28.931 --> 00:02:34.039
W tym celu użyjemy kropki.

00:02:34.426 --> 00:02:39.027
Za nią napiszemy nazwę
klasy: teksty-piosenek.

00:02:39.027 --> 00:02:46.415
I dalej jak zwykle: klamry,
właściwość, dwukropek, wartość.

00:02:46.633 --> 00:02:47.575
I już!

00:02:47.821 --> 00:02:51.007
Wszystkie teksty
są na żółtym tle.

00:02:51.343 --> 00:02:55.143
A gdybyśmy napisali duże „S”?

00:02:55.240 --> 00:02:56.398
Nic z tego.

00:02:56.491 --> 00:02:58.950
Przy klasach także
liczy się wielkość.

00:02:58.966 --> 00:03:01.771
To ważne, czy litery są
wielkie czy małe.

00:03:01.771 --> 00:03:03.558
Jak przy ID.

00:03:04.323 --> 00:03:08.295
A gdybyśmy zamiast kropki
użyli kratki?

00:03:08.542 --> 00:03:09.666
Nie działa.

00:03:09.774 --> 00:03:13.085
Przeglądarka uznaje
„teksty-piosenek” za ID,

00:03:13.085 --> 00:03:16.411
a nie mogąc znaleźć
atrybutu ID,

00:03:16.411 --> 00:03:17.584
rezygnuje.

00:03:18.102 --> 00:03:24.512
Co będzie, jeśli w nazwach
znajdą się spacje?

00:03:25.248 --> 00:03:27.477
Też niedobrze.

00:03:27.477 --> 00:03:29.997
W nazwach klas nie wolno
ich używać.

00:03:30.192 --> 00:03:31.649
Jak się dowiecie,

00:03:31.649 --> 00:03:34.972
w CSS spacja oznacza
coś bardzo konkretnego.

00:03:35.868 --> 00:03:38.776
Poprawmy to.

00:03:39.523 --> 00:03:41.110
Jeszcze raz.

00:03:41.110 --> 00:03:43.387
Chcąc dodać klasę,

00:03:43.387 --> 00:03:45.589
wymyślamy nazwę

00:03:45.589 --> 00:03:49.000
i wpisujemy ją do atrybutu
klasy w HTML.

00:03:49.248 --> 00:03:51.317
Piszemy regułę stylu,

00:03:51.317 --> 00:03:54.691
zaczynając od kropki
i nazwy klasy.

00:03:55.216 --> 00:03:58.428
Teraz wasz CSS ma klasę!