1
00:00:00,809 --> 00:00:05,432
Z pączków przerzućmy się na marchewkę,
jeden z najzdrowszych produktów.

2
00:00:05,432 --> 00:00:07,901
I przysmak królików.

3
00:00:07,901 --> 00:00:10,534
Wiecie, że marchewki
są nie tylko pomarańczowe?

4
00:00:10,534 --> 00:00:13,535
Dawniej były fioletowe.
Wciąż takie istnieją.

5
00:00:13,535 --> 00:00:19,541
Mamy tu stronę z listą kolorów
i zdaniem o fioletowych początkach.

6
00:00:19,541 --> 00:00:25,267
Zastosowaliśmy klasy, by przedstawić
nazwy w odpowiednich kolorach.

7
00:00:25,267 --> 00:00:31,905
Podoba mi się to w liście, ale nie wiem,
jak fiolet sprawdzi się w tekście.

8
00:00:31,905 --> 00:00:36,215
Zrezygnuję z kolorowego tła
i wybiorę subtelniejsze odcienie.

9
00:00:36,215 --> 00:00:43,778
Jak powiedzieć przeglądarce, by fiolet
tutaj wyglądał inaczej niż tutaj?

10
00:00:43,778 --> 00:00:49,300
Nie nazwą klasy, bo jest taka sama.
Trzeba by wprowadzić nową.

11
00:00:49,300 --> 00:00:52,919
Znacznik też jest ten sam: „strong”.

12
00:00:52,919 --> 00:00:58,013
Nie użyjemy selektora typu
„element plus nazwa klasy”.

13
00:00:58,013 --> 00:01:00,663
Czy jest tu jakaś inna różnica?

14
00:01:00,663 --> 00:01:06,376
To jest „strong” wewnątrz „li”,

15
00:01:06,376 --> 00:01:10,985
a ten „strong” siedzi w „p”.

16
00:01:10,985 --> 00:01:15,583
Różnica tkwi
w znacznikach-rodzicach. Powyżej.

17
00:01:15,583 --> 00:01:21,102
Skorzystamy z tego, by zrobić regułę CSS
z użyciem tzw. selektorów potomnych.

18
00:01:21,102 --> 00:01:25,216
To sposób wyboru elementów
na podstawie pozycji w dokumencie.

19
00:01:25,216 --> 00:01:30,624
Żeby wybrać tylko fioletowy
„strong” w akapicie,

20
00:01:30,624 --> 00:01:35,776
napiszemy „p”, a potem spację
(jest bardzo ważna!)

21
00:01:35,776 --> 00:01:40,381
i nazwę klasy: „.purple”.

22
00:01:40,381 --> 00:01:46,112
Dodamy właściwości,
które złagodzą kolorystykę.

23
00:01:46,112 --> 00:01:50,311
Kolor tła - przezroczyste.
To anuluje poprzednie ustawienia.

24
00:01:50,311 --> 00:01:58,802
Dobrze: zmieniliśmy ten fiolet, nie
zmieniając reszty fioletowego tekstu.

25
00:01:58,802 --> 00:02:02,879
Zawsze, gdy użyjemy klasy „fiolet”
w takim akapicie,

26
00:02:02,879 --> 00:02:05,324
pojawi się styl zastosowany później.

27
00:02:05,324 --> 00:02:09,588
Pomajstrujmy jeszcze
przy naszym dokumencie.

28
00:02:09,588 --> 00:02:15,728
Chcemy nadać jakiś styl
tylko znacznikom „strong” w „li”.

29
00:02:15,728 --> 00:02:23,143
Najpierw znacznik-rodzic: „li”,
potem spacja i „strong”.

30
00:02:23,143 --> 00:02:28,066
Zmienimy interlinię,
porozsuwamy tekst bardziej.

31
00:02:28,066 --> 00:02:34,073
Ładnie. Jeśli chcemy, możemy nawet
dodać „ul” przed „li”,

32
00:02:34,073 --> 00:02:38,525
aby mieć pewność, że nie zadziała
na „strong” w „ol” wewnątrz „li”.

33
00:02:38,525 --> 00:02:43,807
Aby używać selektorów potomnych, musicie
dobrze poznać strukturę dokumentu:

34
00:02:43,807 --> 00:02:46,102
które znaczniki
znajdują się w których.

35
00:02:46,102 --> 00:02:49,512
Jeśli robicie wcięcia, będzie łatwo,

36
00:02:49,512 --> 00:02:52,508
bo wcięcia odzwierciedlają
hierarchię znaczników.

37
00:02:52,508 --> 00:02:56,955
Mamy „ul”, wewnątrz jest „li”,

38
00:02:56,955 --> 00:02:59,341
a jeszcze głębiej: „strong”.

39
00:02:59,341 --> 00:03:02,926
Jeśli nie dbaliście o wcięcia,
poprawcie to,

40
00:03:02,926 --> 00:03:07,024
żeby było wam łatwiej
zrozumieć strukturę strony

41
00:03:07,024 --> 00:03:10,609
i na tej podstawie
zastosować selektory CSS.

42
00:03:10,609 --> 00:03:13,598
Można używać
bardzo różnych selektorów.

43
00:03:13,598 --> 00:03:19,021
Np. aby wyszukiwać dany typ znacznika
w elemencie o pewnym ID,

44
00:03:19,021 --> 00:03:22,463
albo dane ID w elementach
należących do pewnej klasy.

45
00:03:22,463 --> 00:03:25,333
Każda kombinacja,
której potrzebujecie.

46
00:03:25,333 --> 00:03:32,230
Pamiętajcie: po zmianie struktury strony
mogą nie działać stare reguły CSS.

47
00:03:32,230 --> 00:03:37,185
Stosujcie je rozważnie,
myśląc o przyszłości.

48
00:03:37,185 --> 00:03:41,300
Aby uniezależnić się od struktury
strony, używajcie klas.

49
00:03:41,300 --> 00:03:45,612
Wróćmy do reguł, które określiłam.
Przemyślmy je.

50
00:03:45,612 --> 00:03:51,383
Pierwsza nadaje styl wszystkim
fioletowym elementom w akapitach.

51
00:03:51,383 --> 00:03:57,589
Czy nowe akapity z fioletowymi
elementami też mają mieć tę właściwość?

52
00:03:57,589 --> 00:04:02,371
Tak, bo myślę, że zawsze
będzie wyglądało to dobrze.

53
00:04:02,371 --> 00:04:04,401
Potrzebuję precyzyjniejszej reguły?

54
00:04:04,401 --> 00:04:11,186
Gdyby akapity zawsze należały do elementu
z klasy „article", mogłabym to dodać.

55
00:04:11,186 --> 00:04:14,249
Na razie precyzyjniej się nie da.

56
00:04:14,249 --> 00:04:21,178
Druga reguła daje elementom „strong”
w listach określoną interlinię.

57
00:04:21,178 --> 00:04:26,039
Czy te elementy w „li”
zawsze mają być tak luźno?

58
00:04:26,039 --> 00:04:30,978
Może nie. Ta reguła
chyba jest zbyt ogólna.

59
00:04:30,978 --> 00:04:36,778
Nie jestem pewna,
więc dodam klasę do tego „ul”

60
00:04:36,778 --> 00:04:42,032
i zmienię to w „ul.spacey”,

61
00:04:42,032 --> 00:04:44,652
żeby ograniczyć zasięg reguły.

62
00:04:44,652 --> 00:04:49,840
Rozwijając swoją stronę, będę mogła
uogólniać lub precyzować reguły.

63
00:04:49,840 --> 00:04:53,619
Zyskaliście kolejne narzędzie w CSS!

64
00:04:53,619 --> 00:04:57,879
Poćwiczcie, by móc używać go,
gdy będzie to potrzebne!