< Return to Video

CSS Selecting by class

  • 0:00 - 0:02
    Spójrzmy na naszą stronę.
  • 0:02 - 0:05
    Ma nagłówki,
  • 0:05 - 0:08
    akapit z opisem królików
  • 0:08 - 0:11
    oraz kilka innych akapitów
  • 0:11 - 0:13
    z tekstem mojej ulubionej
    piosenki o królikach.
  • 0:14 - 0:18
    Zmieniliśmy styl pierwszego
    akapitu za pomocą ID.
  • 0:18 - 0:21
    Skoro jest kilka akapitów
    ze słowami,
  • 0:21 - 0:24
    niech wszystkie mają żółte tło.
  • 0:25 - 0:28
    Jak to uzyskać, wykorzystując
    to, co już wiemy?
  • 0:28 - 0:30
    Najpierw nauczyliśmy się
  • 0:30 - 0:33
    wybierania wszystkich znaczników
    danego typu,
  • 0:33 - 0:35
    np. jak z selektorem „p”.
  • 0:35 - 0:39
    Zmieniał się kolor wszystkich
    akapitów, nie tylko z piosenką.
  • 0:39 - 0:41
    Potrzebujemy
    czegoś konkretniejszego.
  • 0:42 - 0:45
    Nauczyliśmy się wybierać
    znaczniki z określonym ID,
  • 0:45 - 0:48
    np. z ID „kroliki-piosenka”.
  • 0:48 - 0:51
    Ale wybraliśmy
    tylko pierwszy akapit.
  • 0:51 - 0:54
    Nie dodamy tego ID
    do innych akapitów:
  • 0:54 - 0:58
    nie wolno przypisywać jednego
    ID różnym znacznikom.
  • 0:58 - 1:00
    Gdybyśmy chcieli wybrać
    inne akapity,
  • 1:00 - 1:03
    musielibyśmy dać każdemu
    nowe ID
  • 1:03 - 1:06
    (np. „tekst-piosenki2”
    i „tekst-piosenki3"),
  • 1:06 - 1:07
    bo każde ID jest inne.
  • 1:07 - 1:10
    I trzeba by do każdego
    dodać reguły.
  • 1:10 - 1:12
    Dalibyśmy radę,
    ale ile przy tym pracy!
  • 1:12 - 1:15
    Dodając nowy wers do piosenki,
  • 1:15 - 1:17
    musielibyśmy dodawać
    nowe ID do HTML,
  • 1:17 - 1:19
    i jeszcze jedno do reguł CSS.
  • 1:19 - 1:23
    Dodawanie setek wierszy
    byłoby wyczerpujące!
  • 1:23 - 1:24
    Wiecie, co?
  • 1:24 - 1:27
    Jest lepszy sposób. Klasy.
  • 1:28 - 1:29
    Klasa to sposób
  • 1:29 - 1:32
    przypisania elementu do grupy.
  • 1:32 - 1:35
    Można przypisać ich tyle,
    ile się chce.
  • 1:35 - 1:40
    Aby dodać klasę, zaczynamy
    od atrybutu, jak przy ID.
  • 1:40 - 1:45
    Skasuję to ID,
    bo mam wpisać nowe.
  • 1:45 - 1:48
    Kursor jest w znaczniku
    początkowym „p”.
  • 1:48 - 1:52
    Dodaję spację i piszę:
    class = ""
  • 1:53 - 1:55
    Teraz potrzebujemy nazwy.
  • 1:55 - 1:57
    Ładnej, opisowej.
  • 1:57 - 1:59
    Powiedzmy „teksty-piosenek”.
  • 2:00 - 2:01
    Wpisałam.
  • 2:02 - 2:04
    Co jeszcze powinno
    należeć do tej klasy?
  • 2:04 - 2:06
    Cała reszta akapitów z tekstami.
  • 2:07 - 2:09
    Zejdźmy niżej
  • 2:09 - 2:13
    i dodajmy atrybut
    każdej z klas akapitu:
  • 2:13 - 2:15
    „teksty-piosenek”.
  • 2:15 - 2:18
    Świetnie. Już możemy
    dodać regułę CSS.
  • 2:18 - 2:21
    Wracamy do znacznika
    „style”
  • 2:21 - 2:25
    i kasuję selektor ID,
    który wpisaliśmy wcześniej,
  • 2:25 - 2:26
    bo teraz będzie inny.
  • 2:26 - 2:29
    Musimy przygotować selektor klasy.
  • 2:29 - 2:34
    W tym celu użyjemy kropki.
  • 2:34 - 2:39
    Za nią napiszemy nazwę
    klasy: teksty-piosenek.
  • 2:39 - 2:46
    I dalej jak zwykle: klamry,
    właściwość, dwukropek, wartość.
  • 2:47 - 2:48
    I już!
  • 2:48 - 2:51
    Wszystkie teksty
    są na żółtym tle.
  • 2:51 - 2:55
    A gdybyśmy napisali duże „S”?
  • 2:55 - 2:56
    Nic z tego.
  • 2:56 - 2:59
    Przy klasach także
    liczy się wielkość.
  • 2:59 - 3:02
    To ważne, czy litery są
    wielkie czy małe.
  • 3:02 - 3:04
    Jak przy ID.
  • 3:04 - 3:08
    A gdybyśmy zamiast kropki
    użyli kratki?
  • 3:09 - 3:10
    Nie działa.
  • 3:10 - 3:13
    Przeglądarka uznaje
    „teksty-piosenek” za ID,
  • 3:13 - 3:16
    a nie mogąc znaleźć
    atrybutu ID,
  • 3:16 - 3:18
    rezygnuje.
  • 3:18 - 3:25
    Co będzie, jeśli w nazwach
    znajdą się spacje?
  • 3:25 - 3:27
    Też niedobrze.
  • 3:27 - 3:30
    W nazwach klas nie wolno
    ich używać.
  • 3:30 - 3:32
    Jak się dowiecie,
  • 3:32 - 3:35
    w CSS spacja oznacza
    coś bardzo konkretnego.
  • 3:36 - 3:39
    Poprawmy to.
  • 3:40 - 3:41
    Jeszcze raz.
  • 3:41 - 3:43
    Chcąc dodać klasę,
  • 3:43 - 3:46
    wymyślamy nazwę
  • 3:46 - 3:49
    i wpisujemy ją do atrybutu
    klasy w HTML.
  • 3:49 - 3:51
    Piszemy regułę stylu,
  • 3:51 - 3:55
    zaczynając od kropki
    i nazwy klasy.
  • 3:55 - 3:58
    Teraz wasz CSS ma klasę!
Title:
CSS Selecting by class
Video Language:
English
Duration:
04:00
Lech Mankiewicz edited Polish subtitles for CSS Selecting by class

Polish subtitles

Revisions