1
00:00:00,326 --> 00:00:02,079
Spójrzmy na naszą stronę.

2
00:00:02,284 --> 00:00:04,540
Ma nagłówki,

3
00:00:04,540 --> 00:00:07,580
akapit z opisem królików

4
00:00:07,580 --> 00:00:10,588
oraz kilka innych akapitów

5
00:00:10,588 --> 00:00:13,416
z tekstem mojej ulubionej
piosenki o królikach.

6
00:00:13,543 --> 00:00:17,554
Zmieniliśmy styl pierwszego
akapitu za pomocą ID.

7
00:00:17,857 --> 00:00:21,016
Skoro jest kilka akapitów
ze słowami,

8
00:00:21,016 --> 00:00:24,083
niech wszystkie mają żółte tło.

9
00:00:24,613 --> 00:00:27,692
Jak to uzyskać, wykorzystując
to, co już wiemy?

10
00:00:28,221 --> 00:00:30,374
Najpierw nauczyliśmy się

11
00:00:30,374 --> 00:00:33,002
wybierania wszystkich znaczników
danego typu,

12
00:00:33,002 --> 00:00:34,659
np. jak z selektorem „p”.

13
00:00:34,886 --> 00:00:39,120
Zmieniał się kolor wszystkich
akapitów, nie tylko z piosenką.

14
00:00:39,226 --> 00:00:41,290
Potrzebujemy
czegoś konkretniejszego.

15
00:00:41,507 --> 00:00:44,898
Nauczyliśmy się wybierać
znaczniki z określonym ID,

16
00:00:44,898 --> 00:00:48,140
np. z ID „kroliki-piosenka”.

17
00:00:48,368 --> 00:00:50,920
Ale wybraliśmy
tylko pierwszy akapit.

18
00:00:51,120 --> 00:00:53,725
Nie dodamy tego ID
do innych akapitów:

19
00:00:53,725 --> 00:00:57,657
nie wolno przypisywać jednego
ID różnym znacznikom.

20
00:00:57,867 --> 00:01:00,202
Gdybyśmy chcieli wybrać
inne akapity,

21
00:01:00,202 --> 00:01:02,881
musielibyśmy dać każdemu
nowe ID

22
00:01:02,881 --> 00:01:05,717
(np. „tekst-piosenki2” 
i „tekst-piosenki3"),

23
00:01:05,717 --> 00:01:07,358
bo każde ID jest inne.

24
00:01:07,358 --> 00:01:09,808
I trzeba by do każdego
dodać reguły.

25
00:01:09,808 --> 00:01:12,398
Dalibyśmy radę,
ale ile przy tym pracy!

26
00:01:12,398 --> 00:01:14,691
Dodając nowy wers do piosenki,

27
00:01:14,691 --> 00:01:17,279
musielibyśmy dodawać
nowe ID do HTML,

28
00:01:17,279 --> 00:01:19,018
i jeszcze jedno do reguł CSS.

29
00:01:19,018 --> 00:01:22,830
Dodawanie setek wierszy
byłoby wyczerpujące!

30
00:01:22,980 --> 00:01:24,315
Wiecie, co?

31
00:01:24,492 --> 00:01:27,383
Jest lepszy sposób. Klasy.

32
00:01:27,599 --> 00:01:29,009
Klasa to sposób

33
00:01:29,009 --> 00:01:32,067
przypisania elementu do grupy.

34
00:01:32,162 --> 00:01:35,150
Można przypisać ich tyle,
ile się chce.

35
00:01:35,352 --> 00:01:39,928
Aby dodać klasę, zaczynamy
od atrybutu, jak przy ID.

36
00:01:40,362 --> 00:01:44,705
Skasuję to ID,
bo mam wpisać nowe.

37
00:01:44,705 --> 00:01:47,915
Kursor jest w znaczniku
początkowym „p”.

38
00:01:47,915 --> 00:01:51,675
Dodaję spację i piszę: 
class = ""

39
00:01:53,183 --> 00:01:55,333
Teraz potrzebujemy nazwy.

40
00:01:55,333 --> 00:01:56,792
Ładnej, opisowej.

41
00:01:56,927 --> 00:01:59,294
Powiedzmy „teksty-piosenek”.

42
00:01:59,658 --> 00:02:01,449
Wpisałam.

43
00:02:01,665 --> 00:02:04,335
Co jeszcze powinno
należeć do tej klasy?

44
00:02:04,416 --> 00:02:06,420
Cała reszta akapitów z tekstami.

45
00:02:06,510 --> 00:02:09,154
Zejdźmy niżej

46
00:02:09,154 --> 00:02:12,777
i dodajmy atrybut
każdej z klas akapitu:

47
00:02:13,061 --> 00:02:14,540
„teksty-piosenek”.

48
00:02:14,836 --> 00:02:18,003
Świetnie. Już możemy
dodać regułę CSS.

49
00:02:18,217 --> 00:02:20,539
Wracamy do znacznika
„style”

50
00:02:20,539 --> 00:02:24,574
i kasuję selektor ID,
który wpisaliśmy wcześniej,

51
00:02:24,574 --> 00:02:25,772
bo teraz będzie inny.

52
00:02:26,157 --> 00:02:28,594
Musimy przygotować selektor klasy.

53
00:02:28,931 --> 00:02:34,039
W tym celu użyjemy kropki.

54
00:02:34,426 --> 00:02:39,027
Za nią napiszemy nazwę
klasy: teksty-piosenek.

55
00:02:39,027 --> 00:02:46,415
I dalej jak zwykle: klamry,
właściwość, dwukropek, wartość.

56
00:02:46,633 --> 00:02:47,575
I już!

57
00:02:47,821 --> 00:02:51,007
Wszystkie teksty
są na żółtym tle.

58
00:02:51,343 --> 00:02:55,143
A gdybyśmy napisali duże „S”?

59
00:02:55,240 --> 00:02:56,398
Nic z tego.

60
00:02:56,491 --> 00:02:58,950
Przy klasach także
liczy się wielkość.

61
00:02:58,966 --> 00:03:01,771
To ważne, czy litery są
wielkie czy małe.

62
00:03:01,771 --> 00:03:03,558
Jak przy ID.

63
00:03:04,323 --> 00:03:08,295
A gdybyśmy zamiast kropki
użyli kratki?

64
00:03:08,542 --> 00:03:09,666
Nie działa.

65
00:03:09,774 --> 00:03:13,085
Przeglądarka uznaje
„teksty-piosenek” za ID,

66
00:03:13,085 --> 00:03:16,411
a nie mogąc znaleźć
atrybutu ID,

67
00:03:16,411 --> 00:03:17,584
rezygnuje.

68
00:03:18,102 --> 00:03:24,512
Co będzie, jeśli w nazwach
znajdą się spacje?

69
00:03:25,248 --> 00:03:27,477
Też niedobrze.

70
00:03:27,477 --> 00:03:29,997
W nazwach klas nie wolno
ich używać.

71
00:03:30,192 --> 00:03:31,649
Jak się dowiecie,

72
00:03:31,649 --> 00:03:34,972
w CSS spacja oznacza
coś bardzo konkretnego.

73
00:03:35,868 --> 00:03:38,776
Poprawmy to.

74
00:03:39,523 --> 00:03:41,110
Jeszcze raz.

75
00:03:41,110 --> 00:03:43,387
Chcąc dodać klasę,

76
00:03:43,387 --> 00:03:45,589
wymyślamy nazwę

77
00:03:45,589 --> 00:03:49,000
i wpisujemy ją do atrybutu
klasy w HTML.

78
00:03:49,248 --> 00:03:51,317
Piszemy regułę stylu,

79
00:03:51,317 --> 00:03:54,691
zaczynając od kropki
i nazwy klasy.

80
00:03:55,216 --> 00:03:58,428
Teraz wasz CSS ma klasę!