Return to Video

Combing CSS class and element selectors

  • 0:00 - 0:04
    Wracamy do strony o pączkach
    i ryzyku z nimi związanym.
  • 0:04 - 0:08
    Podoba mi się klasa „ostrzeżenie”
    (ang. warning) dodana do „p” i „strong”.
  • 0:08 - 0:13
    To ostrzeżenie ma się wyróżniać
    jeszcze bardziej.
  • 0:13 - 0:17
    Ma szarą krawędź,
    od reguły klasy „fact”.
  • 0:17 - 0:21
    Lepiej wyglądałoby z grubym,
    pomarańczowym obramowaniem.
  • 0:21 - 0:26
    Spróbujmy to dodać
    do reguły „ostrzeżenie”.
  • 0:26 - 0:30
    Krawędź, 5 pikseli,
    gładka, pomarańczowa.
  • 0:30 - 0:34
    Świetnie. Ale dotyczy też
    znaczników „strong”,
  • 0:34 - 0:37
    a to nie wygląda dobrze
    obok tego tekstu.
  • 0:37 - 0:40
    Ma być tylko w akapicie
    „ostrzeżenie”.
  • 0:40 - 0:44
    A nie w tekście
    śródliniowym, jak ten.
  • 0:44 - 0:47
    Jak zrobić bardziej
    konkretną regułę CSS?
  • 0:47 - 0:51
    Można zrobić nową klasę:
    „akapit-ostrzeżenie”.
  • 0:51 - 0:55
    I przenieść właściwości.
    Tego nie zrobimy.
  • 0:55 - 1:01
    Każemy przeglądarce dawać krawędzie
    tylko akapitom z ostrzeżeniem.
  • 1:01 - 1:05
    Ale nie innym znacznikom w tej klasie.
  • 1:05 - 1:09
    Najpierw zapiszmy
    szukany element „p”,
  • 1:09 - 1:14
    potem kropkę i nazwę klasy:
    „ostrzeżenie”.
  • 1:14 - 1:19
    Przeglądarka wyszuka wszystkie
    znaczniki „p” z klasy „ostrzeżenie”
  • 1:19 - 1:21
    i wewnątrz damy właściwości.
  • 1:21 - 1:26
    Wklejmy właściwość krawędzi...
  • 1:26 - 1:34
    I już! Mamy krawędź tylko przy fakcie,
    a nie przy znaczniku „strong”.
  • 1:34 - 1:38
    Można tak robić z dowolną
    kombinacją elementów i nazw klas,
  • 1:38 - 1:43
    gdy chcemy, by przeglądarka nadała
    styl tylko znacznikom mającym klasę.
  • 1:43 - 1:45
    Pamiętajcie o kolejności:
  • 1:45 - 1:51
    nazwa znacznika, kropka
    i nazwa klasy.
  • 1:51 - 1:56
    Jeśli między nazwą a kropką
    znajdzie się spacja, nic z tego.
  • 1:56 - 2:00
    Bo spacja w CSS ma inne znaczenie.
  • 2:00 - 2:03
    Przeglądarka zinterpretuje
    tę regułę inaczej.
  • 2:03 - 2:07
    Oglądajcie dalej. W nastepnej części
    będzie więcej o specjalnej spacji!
Title:
Combing CSS class and element selectors
Description:

{'type': u'plain'}

more » « less
Video Language:
English
Duration:
02:08

Polish subtitles

Revisions