Tworzenie stron internetowych w dzisiejszym Internecie wymaga dogłębnego zrozumienia CSS (Cascading Style Sheets). Są to instrukcje, które podajesz stronie internetowej, aby określić, w jaki sposób będzie ona układana w oknie przeglądarki. Stosujesz serię "stylów" do dokumentu HTML, który tworzy wygląd Twojej strony internetowej.
Istnieje wiele sposobów zastosowania wyżej wymienionych stylów w dokumencie, ale często chcesz używać tylko stylu trochę elementów w dokumencie, ale nie wszystkie wystąpienia tego elementu. Możesz również utworzyć styl, który można zastosować do kilku elementów w dokumencie, bez konieczności powtarzania reguły stylu dla poszczególnych instancji. Aby osiągnąć te pożądane style, użyjesz atrybutów HTML klasy i ID. Te atrybuty są atrybutami globalnymi, które można zastosować do prawie każdego tagu HTML. Oznacza to, że niezależnie od tego, czy stylizujesz podziały, akapity, linki, listy czy inne fragmenty kodu HTML w dokumencie, możesz skorzystać z atrybutów klas i identyfikatorów, aby pomóc Ci w wykonaniu tego zadania!
Selektory klas
Selektor klas umożliwia ustawienie wielu stylów tego samego elementu lub znacznika w dokumencie. Na przykład możesz chcieć, aby określone sekcje twojego tekstu były wywoływane w innym kolorze niż reszta tekstu w dokumencie. Te wyróżnione sekcje mogą być "alertem" ustawianym na stronie. Możesz przypisać swoje akapity z klasami takimi jak to:
p {color: # 0000ff; } p.alert {color: # ff0000; } Te style ustawiłyby kolor wszystko akapity do niebieskiego (# 0000ff), ale każdy akapit z atrybutem klasy "alert" będzie zamiast tego oznaczony kolorem czerwonym (# ff0000). Dzieje się tak, ponieważ atrybut klasy ma wyższą specyfikację niż pierwsza reguła CSS, która używa tylko selektora znaczników. Podczas pracy z CSS bardziej szczegółowa reguła zastąpi mniej konkretną. W tym przykładzie bardziej ogólna reguła ustawia kolor wszystkich akapitów, ale drugą, bardziej szczegółową regułę niż przesłonięcia, które ustawiają się tylko w niektórych akapitach. Oto, jak można to wykorzystać w niektórych znacznikach HTML: Ten akapit będzie wyświetlany na niebiesko, który jest domyślny dla strony.
Ten akapit będzie również niebieski.
Ten akapit będzie wyświetlany na czerwono, ponieważ atrybut klasy nadpisze standardowy niebieski kolor z stylu selektora elementów.
W tym przykładzie styl "p.alert" miałby zastosowanie tylko do elementów akapitu, które używają tej klasy "alertu". Jeśli chcesz użyć tej klasy w wielu elementach HTML, po prostu usuniesz element HTML z początku wywołania stylu (pamiętaj o pozostawieniu okresu ( .) w miejscu), na przykład: .alert {background-color: # ff0000;} Ta klasa jest teraz dostępna dla każdego elementu, który jej potrzebuje. Każdy element kodu HTML, który ma wartość atrybutu klasy "alert", teraz uzyska ten styl. W poniższym kodzie HTML mamy zarówno akapit, jak i nagłówek poziomu 2, które używają klasy "alert". Oba te miałyby kolor tła w kolorze czerwonym w oparciu o CSS, który właśnie pokazaliśmy.
Ten akapit zostanie napisany na czerwono.
W dzisiejszych witrynach internetowych atrybuty klas są często używane na większości elementów, ponieważ są łatwiejsze w pracy z perspektywy specyfiki, jaką są identyfikatory. Znajdziesz najbardziej aktualne strony HTML, które zostaną wypełnione atrybutami klasy, z których niektóre są powtarzane wiele razy w dokumencie i inne, które mogą pojawić się tylko raz. Selektor identyfikatorów umożliwia nadanie nazwy określonemu stylowi bez kojarzenia go z tagiem lub innym elementem HTML. Załóżmy, że masz podział w znacznikach HTML, który zawiera informacje o zdarzeniu. Możesz nadać temu działowi atrybut ID "zdarzenia", a jeśli chciałbyś nakreślić ten podział szeroką czarną obwódką o szerokości 1 piksela, napisz taki kod identyfikacyjny: #event {border: 1px solid # 000; } Wyzwaniem dla selektorów ID jest to, że nie można ich powtórzyć w dokumencie HTML. Muszą być unikatowe (możesz użyć tego samego identyfikatora na wielu stronach witryny, ale tylko raz w każdym dokumencie HTML). Jeśli więc masz 3 zdarzenia, które wszystkie wymagają tej granicy, musisz podać im atrybuty identyfikatora "event1", "event2" i "event3" i nadać im styl. Byłoby zatem o wiele łatwiej używać wyżej wspomnianego atrybutu klasy "zdarzenia" i stylizować je wszystkie naraz. Kolejnym wyzwaniem z atrybutami ID jest to, że mają one wyższą specyfikę niż atrybuty klas. Oznacza to, że jeśli potrzebujesz CSS, który przesłania wcześniej ustalony styl, może to być trudne, jeśli polegałeś zbyt mocno na identyfikatorach. Z tego powodu wielu twórców stron internetowych zrezygnowało z używania identyfikatorów w swoich znacznikach, nawet jeśli zamierzają użyć tej wartości tylko raz, a zamiast tego obrócili się do mniej specyficznych atrybutów klas dla niemal wszystkich stylów. Jedynym obszarem, w którym pojawiają się atrybuty ID, jest utworzenie strony z linkami zakotwiczonymi na stronie. Na przykład, jeśli masz witrynę w stylu paralaksy, która zawiera całą treść na jednej stronie z linkami, które "przeskakują" do różnych części tej strony. Odbywa się to za pomocą atrybutów ID i linków tekstowych, które używają tych linków kotwiczących. Wystarczy dodać wartość tego atrybutu, poprzedzoną symbolem "#", do atrybutu "href" linku, na przykład: To jest link Po kliknięciu lub dotknięciu ten link przeskoczy do części strony, która ma ten atrybut ID.Jeśli żaden element na stronie nie używa tej wartości identyfikatora, link nie spowoduje niczego. Pamiętaj, że jeśli chcesz utworzyć linkowanie na stronie w witrynie, wymagane będzie użycie atrybutów ID, ale nadal możesz korzystać z klas do ogólnych celów CSS. Oto, jak dziś zaznaczamy strony - używamy selektorów klas tak bardzo, jak to możliwe i zwracamy się tylko do identyfikatorów, gdy potrzebujemy, aby atrybut działał nie tylko jako haczyk dla CSS, ale także jako link na stronie.I ten h2 będzie również czerwony.
Selektory identyfikatorów
Komplikacje atrybutów ID
