WEBVTT

00:00:00.342 --> 00:00:03.899
Wracamy do strony o pączkach
i ryzyku z nimi związanym.

00:00:03.899 --> 00:00:08.150
Podoba mi się klasa „ostrzeżenie”
(ang. warning) dodana do „p” i „strong”.

00:00:08.150 --> 00:00:12.673
To ostrzeżenie ma się wyróżniać
jeszcze bardziej.

00:00:12.673 --> 00:00:16.889
Ma szarą krawędź,
od reguły klasy „fact”.

00:00:16.889 --> 00:00:20.922
Lepiej wyglądałoby z grubym,
pomarańczowym obramowaniem.

00:00:20.922 --> 00:00:25.802
Spróbujmy to dodać
do reguły „ostrzeżenie”.

00:00:25.802 --> 00:00:29.581
Krawędź, 5 pikseli,
gładka, pomarańczowa.

00:00:29.675 --> 00:00:34.198
Świetnie. Ale dotyczy też
znaczników „strong”,

00:00:34.219 --> 00:00:37.319
a to nie wygląda dobrze
obok tego tekstu.

00:00:37.319 --> 00:00:39.982
Ma być tylko w akapicie
„ostrzeżenie”.

00:00:39.982 --> 00:00:43.744
A nie w tekście
śródliniowym, jak ten.

00:00:43.744 --> 00:00:46.511
Jak zrobić bardziej
konkretną regułę CSS?

00:00:46.511 --> 00:00:50.532
Można zrobić nową klasę:
„akapit-ostrzeżenie”.

00:00:50.532 --> 00:00:55.152
I przenieść właściwości.
Tego nie zrobimy.

00:00:55.152 --> 00:01:01.220
Każemy przeglądarce dawać krawędzie
tylko akapitom z ostrzeżeniem.

00:01:01.220 --> 00:01:04.575
Ale nie innym znacznikom w tej klasie.

00:01:04.575 --> 00:01:09.121
Najpierw zapiszmy
szukany element „p”,

00:01:09.121 --> 00:01:14.170
potem kropkę i nazwę klasy:
„ostrzeżenie”.

00:01:14.170 --> 00:01:18.673
Przeglądarka wyszuka wszystkie
znaczniki „p” z klasy „ostrzeżenie”

00:01:18.673 --> 00:01:21.385
i wewnątrz damy właściwości.

00:01:21.385 --> 00:01:26.453
Wklejmy właściwość krawędzi...

00:01:26.453 --> 00:01:34.321
I już! Mamy krawędź tylko przy fakcie,
a nie przy znaczniku „strong”.

00:01:34.321 --> 00:01:37.595
Można tak robić z dowolną
kombinacją elementów i nazw klas,

00:01:37.595 --> 00:01:42.603
gdy chcemy, by przeglądarka nadała
styl tylko znacznikom mającym klasę.

00:01:42.603 --> 00:01:45.233
Pamiętajcie o kolejności:

00:01:45.233 --> 00:01:50.707
nazwa znacznika, kropka
i nazwa klasy.

00:01:50.707 --> 00:01:56.453
Jeśli między nazwą a kropką
znajdzie się spacja, nic z tego.

00:01:56.453 --> 00:01:59.940
Bo spacja w CSS ma inne znaczenie.

00:01:59.940 --> 00:02:02.795
Przeglądarka zinterpretuje
tę regułę inaczej.

00:02:02.795 --> 00:02:06.884
Oglądajcie dalej. W nastepnej części
będzie więcej o specjalnej spacji!