Třídy a ID nápovědy Rozšíření vašeho CSS
Budování webových stránek na dnešním webu vyžaduje hluboké porozumění CSS (kaskádové styly). Jedná se o pokyny, které dáte webové stránce, abyste zjistili, jak bude rozložení v okně prohlížeče. Aplikujete do dokumentu HTML řadu "stylů", které vytvoří vzhled a vzhled vaší webové stránky.
Existuje mnoho způsobů, jak tyto styly použít v dokumentu, ale často chcete použít styl pouze na některé prvky dokumentu, ale ne všechny instance daného prvku.
Můžete také vytvořit styl, který můžete použít v několika dokumentech v dokumentu, aniž byste museli opakovat pravidlo stylu pro každou jednotlivou instanci. Chcete-li dosáhnout těchto požadovaných stylů, použijete atributy třídy a ID HTML. Tyto atributy jsou globální atributy, které lze aplikovat na téměř všechny tagy HTML . To znamená, že pokud jste ve vašem dokumentu rozdělili stylingové oddělení, odstavce, odkazy, seznamy nebo některé z ostatních částí kódu HTML, můžete se obrátit na atributy třídy a ID vám pomůže splnit tento úkol!
Výběr tříd
Volič tříd umožňuje v dokumentu nastavit více stylů na stejný prvek nebo značku. Můžete například chtít, aby určité části textu byly vyzvány v jiné barvě než zbytek textu v dokumentu. Tyto zvýrazněné oddíly mohou být "upozorněním", které nastavujete na stránce. Můžete zadat odstavce s následujícími třídami:
p {barva: # 0000ff; }}
p.alert {barva: # ff0000; }}
Tyto styly by nastavily barvu všech odstavců na modrou (# 0000ff), ale libovolný odstavec s atributem třídy "alert" by místo toho byl podle stylu v červené (# ff0000). Je tomu tak proto, že atribut třídy má vyšší specifičnost než první pravidlo CSS, které používá pouze volič značek.
Když pracujete s CSS, přesněji specifikované pravidlo vynechá méně specifické pravidlo. Takže v tomto příkladu obecnější pravidlo nastavuje barvu všech odstavců, ale druhé, přesnější pravidlo než přepíše toto nastavení pouze na některé odstavce.
Zde je návod, jak by to mohlo být použito v některých značkách HTML:
Tento odstavec by se zobrazoval modře, což je výchozí stránka.
Tento odstavec by byl také modrý.
A tento odstavec by byl zobrazen červeně, protože atribut třídy přepisoval standardní modrou barvu z stylingu voličů prvků.
V tomto příkladu by se styl "p.alert" vztahoval pouze na prvky odstavce, které používají tuto "výstražnou" třídu. Pokud byste chtěli tuto třídu používat v několika prvcích HTML, stačí jednoduše odstranit element HTML od začátku (volání nezapomeňte na místo.), například:
.alert {barva pozadí: # ff0000;}
Tato třída je nyní dostupná libovolnému prvku, který ji potřebuje. Každá část vašeho HTML, která má hodnotu atributu třídy "upozornění", získá tento styl. V níže uvedeném kódu HTML máme odstavce a úroveň nadpisu 2, které používají třídu "výstrahy". Obě tyto by měly barvu pozadí červené na základě CSS, které jsme právě ukázali.
Tento odstavec bude napsán červeně.
A tato h2 by byla také červená.
Na dnešních webových stránkách se atributy třídy často používají na většině prvků, protože je s nimi jednodušší pracovat z hlediska specifičnosti, které jsou ID. Najdete zde nejaktuálnější stránky HTML, které mají být vyplněny atributy třídy, z nichž některé jsou opakovaně opakovány v dokumentu a další, které se mohou objevit pouze jednou.
Výběr ID
Volič ID vám umožňuje zadat název konkrétnímu stylu, aniž byste jej přidružili k tagu nebo jinému prvku HTML . Řekněme, že jste rozdělení značky HTML obsahovalo informace o události.
Tuto divizi můžete dát ID atributu "události", a pokud byste chtěli načrtnout toto rozdělení s 1-pixelovým širokým černým ohraničením, napište ID kód, jako je tato:
#event {okraj: 1px solid # 000; }}
Výzvou s volicemi ID je to, že je nelze opakovat v dokumentu HTML. Musí být jedinečné (můžete použít stejný identifikátor na více stránkách vašeho webu, ale pouze jednou v každém dokumentu HTML). Takže pokud byste měli 3 události, které by všechny tyto hranice potřebovaly, musíte jim dát ID atributy "event1", "event2" a "event3". Bylo by proto mnohem snazší použít výše zmíněný atribut třídy "událost" a všechny je najednou stylovat.
Další výzvou s ID atributy je, že mají vyšší specifičnost než atributy třídy. To znamená, že pokud potřebujete mít CSS, který přepsá předtím vytvořený styl, může to být obtížné, pokud jste se příliš spoléhali na ID. Z tohoto důvodu se mnoho webových vývojářů odklonilo od používání identifikátorů ID v jejich značkování, i kdyby chtěli tuto hodnotu použít pouze jednou, a místo toho se obrátili na méně specifické atributy třídy pro téměř všechny styly.
Jednou z oblastí, kde se objevují atributy ID, je vytvoření stránky, která má odkazy na stránce kotvy. Například pokud máte web ve stylu paralaxy, který obsahuje veškerý obsah na jedné stránce s odkazy, které "přeskočí" na různé části této stránky. To se provádí pomocí atributů ID a textových odkazů, které používají tyto kotevní odkazy.
Jednoduše byste přidali hodnotu tohoto atributu, kterému předchází znak #, atributu href odkazu, například:
Toto je odkaz
Po kliknutí nebo dotyku se tento odkaz přeskočí na část stránky, která má tento atribut ID. Pokud žádný prvek na stránce nepoužil tuto hodnotu ID, odkaz by nic neudělal.
Nezapomeňte, že chcete-li vytvářet propojení na stránce v síti, bude vyžadováno použití atributů ID, ale stále se můžete obrátit na třídy pro obecné účely stylingu CSS. Takhle dnes označuji stránky - používám třídicí selektory co nejvíce a pouze se obrátit na ID, když potřebuji atribut, aby se choval nejen jako hák pro CSS, ale také jako odkaz na stránce.
Původní článek Jennifer Krynin. Editoval Jeremy Girard dne 8/9/17