Na tej stronie, używając języka CSS,
zmieniamy styl nagłówków „h2” i akapitów.
Wszystkie nagłówki są zielone, a akapity - fioletowe.
A gdybyśmy chcieli wybrać tylko pierwszy „h2”
lub zmienić styl tylko w drugim akapicie?
Musimy jakoś powiedzieć przeglądarce,
które elementy wybieramy,
by nie zmieniała stylu we wszystkich, jak teraz.
Jeden sposób - to wybór po ID.
Nadajemy znacznikowi niepowtarzalny ID
i informujemy CSS:
„Chcę zastosować te style tylko do elementu z tym ID,
do żadnych innych".
Najpierw trzeba zmodyfikować HTML,
by dodać atrybuty ID do wybranych znaczników.
Zacznijmy od drugiego akapitu.
Aby dodać atrybut ID, umieszczamy kursor
w pierwszym znaczniku „p”, zaraz po „p”,
później spacja i wpisujemy: id = ""
Atrybutowi ID trzeba nadać wartość.
Jakie ma być ID?
Opisowe i niepowtarzalne.
Nic innego na stronie nie może mieć takiego ID.
Skoro to piosenka o królikach, napiszę rabbits-song („kroliki-piosenka”).
W ID nie można wpisywać spacji. Słowa rozdziela się
za pomocą dywizów i podkreślników.
Ja lubię dywizy.
Akapit już można zidentyfikować.
Dodajmy regułę CSS, która go znajdzie.
Wróćmy do znacznika „style”, by zacząć drugi etap.
Dodamy nowy wiersz, po ostatniej regule.
Pamiętajcie, pierwsza część reguły CSS to selektor.
Mówi przeglądarce, co wybrać.
Poprzednio używaliśmy selektorów „h2” oraz „p”,
by wybrać wszystkie znaczniki „h2” i „p” na stronie.
Aby selektor wybierał tylko elementy
z konkretnym ID,
zaczniemy od kratki.
Mówi to przeglądarce, że dalej jest ID.
Teraz wpisujemy ID: „rabbits-song”.
Reszta reguły pozostaje taka sama.
Otwieramy i zamykamy klamry,
dodajemy właściwość, np. kolor tła
I już! Udało się!
Tylko akapit z piosenką ma żółte tło.
Pierwszy się nie zmienił.
Teraz zmieńmy pierwszy nagłówek „h2”.
Pamiętacie pierwszy krok?
Tak, trzeba zmienić HTML,
dodając atrybut „id”.
Kursor do znacznika początkowego,
spacja, wpisujemy: id=""
a potem niepowtarzalne, opisowe ID.
Niech będzie: „rabbits-info-heading”.
Teraz krok drugi. W znaczniku „style”
dodajemy nowy wiersz z kratką,
potem nasze ID, czyli „rabbits-info-heading”
i właściwości w klamrach.
Kolor tła: fiolet.
Nie udało się. Wiecie, dlaczego?
Czy napisałam tak samo?
rabbits-info-Heading, rabbits-info-heading...
Wyglądają tak samo.
Mogłabym porównać literę po literze,
aby znaleźć błąd,
wolę jednak wybrać ID z HTML,
skopiować je i wkleić. Żeby było identyczne.
I… Udało się!
Nagłówek „h2” ma tło. Zauważyliście błąd?
Może. Tu było małe „h”. A tutaj wielkie „H”.
Przeglądarka nie uznała ich za to samo.
Musi być małe „h”, jak w ID w HTML.
Bo w ID liczy się wielkość liter.
Wszędzie musi być ten sam zapis.
Ja w ID używam samych małych liter,
żeby się nie zastanawiać nad wielkością.
Na koniec ostrzeżenie:
ID muszą być niepowtarzalne.
Gdy dwa znaczniki na stronie mają takie samo ID,
przeglądarka może zmienić oba albo tylko jeden.
Nie zdawajcie się na przypadek.
Niepowtarzalne, opisowe ID!