Tworzenie dobrze zaprojektowanych stron internetowych w dzisiejszej sieci wymaga głębokiego zrozumienia understanding Kaskadowe arkusze stylów. Zastosuj serię stylów CSS do swojego dokumentu HTML, aby określić wygląd i sposób działania Twojej strony internetowej.
Atrybuty klasy i identyfikatora
Projektanci czasami muszą zastosować styl tylko na trochę elementów w dokumencie, ale nie wszystkich wystąpień tego elementu. Aby osiągnąć te pożądane style, użyj klasa i ID Atrybuty HTML. Te atrybuty są atrybutami globalnymi, które mają zastosowanie do prawie każdego Znacznik HTML— więc niezależnie od tego, czy stylizujesz podziały, akapity, łącza, listy, czy jakikolwiek inny fragment kodu HTML w swoim dokumencie, możesz skorzystać z atrybutów klasy i identyfikatora, aby pomóc ci wykonać to zadanie!
Selektory klas
Selektor klasy ustawia kilka stylów dla tego samego elementu lub znacznika w dokumencie. Na przykład, aby wywołać określone sekcje tekstu w innym kolorze jako ostrzeżenie, przypisz akapity do takich klas:
p { kolor: #0000ff; }
p.alert { kolor: #ff0000; }
Te style określiłyby kolorwszystko akapity na niebieski (#0000ff), ale każdy akapit z atrybutem klasy alarm zamiast tego byłby stylizowany na czerwono (#ff0000). Dzieje się tak, ponieważ atrybut class ma większą szczegółowość niż pierwsza reguła CSS, która używa tylko selektora tagów. Podczas pracy z CSS, bardziej szczegółowa reguła zastąpi mniej szczegółową. Tak więc w tym przykładzie bardziej ogólna zasada określa kolor wszystkich akapitów, ale druga, bardziej szczegółowa zasada zastępuje to ustawienie tylko w niektórych akapitach.
Oto jak można to wykorzystać w niektórych znacznikach HTML:
Ten akapit byłby wyświetlany na niebiesko, co jest domyślne dla strony.
Ten akapit byłby również zaznaczony na niebiesko.
A ten akapit byłby wyświetlany na czerwono, ponieważ atrybut class nadpisałby standardowy niebieski kolor ze stylu selektora elementów.
W tym przykładzie styl p.alert ma zastosowanie tylko do elementów akapitu, które używają tego alarm klasa. Aby użyć tej klasy w kilku elementach HTML, usuń element HTML z początku wywołania stylu, tak jak poniżej:
.alert {kolor-tła: #ff0000;}
Ta klasa jest teraz dostępna dla każdego elementu, który jej potrzebuje. Dowolny fragment kodu HTML, który ma wartość atrybutu klasy alarm otrzyma teraz ten styl. W poniższym kodzie HTML mamy zarówno akapit, jak i nagłówek drugiego poziomu, które używają znaku alarm klasa. Oba wyświetlają kolor tła w kolorze czerwonym:
Ten akapit byłby napisany na czerwono.
W dzisiejszych witrynach internetowych atrybuty klas są często używane w większości elementów, ponieważ łatwiej jest z nimi pracować z punktu widzenia specyfiki niż identyfikatory. Większość aktualnych stron HTML będzie wypełniona atrybutami klas, z których niektóre są często powtarzane w dokumencie, a inne mogą pojawić się tylko raz.
Selektory ID
Dowód osobisty selektor nazywa określony styl bez kojarzenia go z tagiem lub innym element HTML.
Załóżmy podział w znaczniku HTML, który zawiera informacje o zdarzeniu. Możesz nadać temu podziałowi Atrybut identyfikatora z zdarzenie, a następnie obrysuj ten podział czarną ramką o szerokości 1 piksela:
#zdarzenie { obramowanie: 1px stałe #000; }
Wyzwanie z Selektory ID jest to, że nie mogą się powtarzać w dokumencie HTML. Muszą być niepowtarzalne (możesz użyć tego samego identyfikatora na kilku stronach witryny, ale tylko raz w każdym dokumencie HTML). Tak więc dla trzech zdarzeń, które wymagają tej granicy, musisz zidentyfikować atrybuty ID z wydarzenie1, wydarzenie2, i wydarzenie3 i stylizuj każdy z nich. Dużo łatwiej byłoby zatem użyć wspomnianego wcześniej atrybutu klasy zdarzenie i stylizuj je wszystkie na raz.
Komplikacje atrybutów ID
Kolejnym wyzwaniem związanym z atrybutami ID jest to, że mają one większą szczegółowość niż atrybuty klas. Aby zastąpić wcześniej ustalony styl, może to być trudne, jeśli zbyt mocno polegasz na identyfikatorach. Wielu twórców stron internetowych odeszło od używając identyfikatorów w swoich znacznikach, nawet jeśli zamierzają użyć tej wartości tylko raz, a zamiast tego zwrócili się do mniej szczegółowych atrybutów klas dla prawie wszystkich style.
Jedynym obszarem, w którym w grę wchodzą atrybuty identyfikatora, jest utworzenie strony z linkami zakotwiczonymi na stronie. Rozważmy na przykład witrynę w stylu paralaksy, która zawiera całą zawartość na jednej stronie z linkami, które „przeskakują” do różnych części tej strony. Atrybuty ID i linki tekstowe używają tych linków kotwicznych. Dodaj wartość tego atrybutu poprzedzoną znakiem # symbol, do href atrybut linku, taki jak ten:
To jest link
Po kliknięciu lub dotknięciu ten link przeskakuje do części strony, która ma ten atrybut ID. Jeśli żaden element na stronie nie używa tego identyfikatora, link nic nie zrobi.
Aby utworzyć link na stronie w witrynie, wymagane będzie użycie atrybutów ID, ale nadal możesz skorzystać z klas do ogólnych celów stylizacji CSS. W ten sposób projektanci dzisiaj oznaczają strony — używają selektorów klas tak często, jak to możliwe, i zwracają się do identyfikatorów tylko wtedy, gdy potrzebują atrybutu, aby działał nie tylko jako zaczep dla CSS, ale także jako link na stronie.