Triedy a ID pomôcť Rozšíriť svoje CSS
Vytváranie webových stránok na dnešnej webovej stránke vyžaduje hlboké pochopenie CSS (kaskádových štýlov). Toto sú pokyny, ktoré poskytnete webovému serveru, aby ste zistili, ako to bude rozloženie v okne prehliadača. Aplikujete sadu "štýlov" do dokumentu HTML, ktorý vytvorí vzhľad vašej webovej stránky.
Existuje veľa spôsobov, ako použiť tieto spomínané štýly v dokumente, často však chcete použiť štýl len na niektoré prvky dokumentu, ale nie na všetky prípady tohto prvku.
Môžete tiež vytvoriť štýl, ktorý môžete aplikovať na niekoľko prvkov v dokumente bez toho, aby ste museli opakovať pravidlo štýlu pre každú jednotlivú inštanciu. Ak chcete dosiahnuť tieto požadované štýly, použijete atribúty triedy a ID HTML. Tieto atribúty sú globálne atribúty, ktoré sa dajú použiť na takmer každú HTML značku . To znamená, že bez ohľadu na to, či ste vo svojom dokumente rozdeľovali štýl, odseky, odkazy, zoznamy alebo akékoľvek iné časti HTML, môžete sa obrátiť na atribúty triedy a ID vám pomôže splniť túto úlohu!
Výber tried
Volič triedy umožňuje nastaviť viacero štýlov na rovnaký prvok alebo značku v dokumente. Môžete napríklad chcieť, aby určité časti vášho textu boli označené inou farbou ako zvyšok textu v dokumente. Tieto zvýraznené sekcie by mohli byť "upozornením", ktoré nastavujete na stránke. Odseky môžete priradiť k nasledujúcim triedam:
p {farba: # 0000ff; }
p.alert {farba: # ff0000; }
Tieto štýly by mali nastaviť farbu všetkých odsekov na modrú (# 0000ff), ale akýkoľvek odsek s atribútom triedy "upozornenia" by namiesto toho bol podľa štýlu červenej (# ff0000). Je to preto, že atribút triedy má vyššiu špecifickosť ako prvé pravidlo CSS, ktoré používa iba volič značiek.
Pri práci so službou CSS presnejšie pravidlo vynechá menej špecifické pravidlo. Takže v tomto príklade všeobecnejšie pravidlo nastavuje farbu všetkých odsekov, ale druhé, konkrétnejšie pravidlo, než je to, že toto nastavenie má iba niektoré odseky.
Tu je návod, ako by to mohlo byť použité v niektorých HTML značkách:
Tento odsek by sa zobrazoval modrou farbou, ktorá je predvolená pre danú stránku.
Tento odsek by bol tiež modrý.
Tento odsek by bol zobrazený červenou farbou, pretože atribút triedy prepíše štandardnú modrú farbu zo štýlu výberu prvkov.
V tomto príklade by sa štýl "p.alert" vzťahoval iba na prvky odseku, ktoré používajú túto triedu "upozornenia" .Ak chcete používať túto triedu vo viacerých prvkoch HTML, jednoducho odstránite prvok HTML od začiatku štýlový hovor (jednoducho nezabudnite ponechať pero (.)), napríklad:
.alert {background-color: # ff0000;}
Táto trieda je teraz k dispozícii každému prvku, ktorý to potrebuje. Každý štýl vášho HTML, ktorý má hodnotu atribútu triedy "upozornenia", bude mať tento štýl. V nižšie uvedenom jazyku HTML máme paragraf a úroveň nadpisu 2, ktoré používajú triedu upozornení. Obe tieto by mali na pozadí CSS, ktoré sme práve ukázali, farbu červeného pozadia.
Tento odsek by bol napísaný červenou farbou.
A táto h2 by bola tiež červená.
Na dnešných webových stránkach sú atribúty triedy často používané na väčšine prvkov, pretože s nimi je ľahšie pracovať z hľadiska špecifickosti, ktoré idú. Najčastejšie sú stránky HTML, ktoré sa majú vyplniť atribútmi triedy, z ktorých niektoré sú opakovane opakované v dokumente a iné, ktoré sa môžu zobraziť iba raz.
Výbery ID
Volič ID vám umožňuje dať meno konkrétnemu štýlu bez toho, aby ste ho spájali so značkou alebo iným prvkom HTML . Povedzme, že ste rozdelili značku HTML, ktorá obsahuje informácie o udalosti.
Môžete dať tejto divízii ID atribút "udalosti", a potom, ak ste chceli načrtnúť túto divíziu s 1-pixelovým širokou čiernou hranicou, napíšete ID kód takto:
#event {border: 1px solid # 000; }
Výzvou s selektormi ID je to, že ich nemožno opakovať v dokumente HTML. Musia byť jedinečné (môžete použiť rovnaký identifikátor na viacerých stránkach vášho webu, ale iba raz v každom jednotlivom HTML dokumente). Takže ak by ste mali 3 udalosti, ktoré by túto hranicu potrebovali, mali by ste im dať ID atribúty "event1", "event2" a "event3" a štýl každého z nich. Bolo by teda oveľa jednoduchšie použiť vyššie uvedený atribút triedy "udalosti" a štýl ich všetky naraz.
Ďalšou výzvou s atribútmi ID je, že majú vyššiu špecifickosť ako atribúty triedy. To znamená, že ak potrebujete mať CSS, ktorý má prednosť pred predtým stanoveným štýlom, môže to byť ťažké, ak ste sa veľmi spoliehali na ID. Z tohto dôvodu sa mnohí weboví vývojári vzdálili od používania identifikátorov ID v ich značkovaní, a to aj vtedy, ak majú v úmysle túto hodnotu používať iba raz, a namiesto toho sa obrátili na menej špecifické atribúty triedy pre takmer všetky štýly.
Jednou oblasťou, v ktorej sa začnú používať atribúty ID, je vytvorenie stránky, ktorá obsahuje odkazy na kotviace stránky. Napríklad, ak máte webové stránky v štýle paralaxy, ktoré obsahujú celý obsah na jednej stránke s odkazmi, ktoré "skočia" na rôzne časti tejto stránky. Toto sa vykonáva pomocou atribútov ID a textových odkazov, ktoré používajú tieto ukotvené odkazy.
Jednoducho pridajte hodnotu atribútu, ktorému predchádza symbol #, atribútu href odkazu, napríklad:
Toto je odkaz
Po kliknutí alebo dotyku sa tento odkaz preskočí na časť stránky, ktorá má tento atribút ID. Ak žiadny prvok na stránke nepoužil túto hodnotu ID, odkaz by neurobil nič.
Pamätajte si, že ak chcete vytvoriť prepojenie na stránke na webe, bude potrebné použiť atribúty ID, ale stále sa môžete obrátiť na triedy pre všeobecné účely Stylingu CSS. Toto je spôsob, akým dnes označujem stránky - používam triedy selektorov čo najviac a len sa obrátim na ID, keď potrebujem atribút, aby sa správal nielen ako hák pre CSS, ale aj ako odkaz na stránke.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 8/9/17