Používanie tried štýlov a ID

Triedy a ID rozširujú váš CSS

E+/Getty Images

Vytváranie dobre štylizovaných webových stránok na dnešnom webe si vyžaduje hlboké pochopenie Kaskádové štýly . Použite sériu štýlov CSS na svoj dokument HTML, aby ste informovali o vzhľade svojej webovej stránky.

Trieda a ID atribúty

Dizajnéri niekedy musia použiť štýl iba na niektoré prvkov v dokumente, ale nie všetky inštancie tohto prvku. Na dosiahnutie týchto požadovaných štýlov použite trieda a ID atribúty HTML. Tieto atribúty sú globálne atribúty použiteľné takmer pre každého HTML tag — Či už teda vo svojom dokumente naštylizujete oddiely, odseky, odkazy, zoznamy alebo akékoľvek iné časti HTML, môžete sa obrátiť na atribúty triedy a ID, ktoré vám pomôžu splniť túto úlohu!

Selektory tried

Selektor triedy nastavuje niekoľko štýlov pre rovnaký prvok alebo značku v dokumente. Ak chcete napríklad označiť určité časti textu inou farbou ako upozornenie, priraďte svojim odsekom triedy, ako je táto:

|_+_|

Tieto štýly by nastavili farbu všetky odseky na modrú farbu (#0000ff), ale akýkoľvek odsek s atribútom class upozorniť namiesto toho by boli štylizované červenou farbou (#ff0000). Je to preto, že atribút class má vyššiu špecifickosť ako prvé pravidlo CSS, ktoré používa iba selektor značky. Pri práci s CSS , špecifickejšie pravidlo prepíše menej špecifické. V tomto príklade teda všeobecnejšie pravidlo nastavuje farbu všetkých odsekov, ale druhé, konkrétnejšie pravidlo prepíše toto nastavenie len v niektorých odsekoch.

Tu je návod, ako by sa to dalo použiť v niektorých značkách HTML:

|_+_|

Tento odsek by sa zobrazil modrou farbou, čo je predvolené nastavenie pre stránku.

Tento odsek by bol tiež modrý.

A tento odsek by sa zobrazil červenou farbou, pretože atribút class by prepísal štandardnú modrú farbu zo štýlu selektora prvkov.

V tomto príklade štýl p.upozornenie sa vzťahuje iba na prvky odseku, ktoré to používajú upozorniť trieda. Ak chcete použiť túto triedu vo viacerých prvkoch HTML, odstráňte prvok HTML zo začiatku volania štýlu, takto:

|_+_|

Táto trieda je teraz dostupná pre každý prvok, ktorý ju potrebuje. Akákoľvek časť vášho kódu HTML, ktorá má hodnotu atribútu triedy upozorniť teraz získa tento štýl. V nižšie uvedenom HTML máme odsek aj nadpis druhej úrovne, ktoré používajú upozorniť trieda. Obidve zobrazujú červenú farbu pozadia:

|_+_|

Tento odsek by bol napísaný červenou farbou.

Na webových stránkach sa dnes atribúty triedy často používajú na väčšine prvkov, pretože sa s nimi z hľadiska špecifickosti pracuje ľahšie ako s ID. Nájdete tu najaktuálnejšie stránky HTML, ktoré sa naplnia atribútmi triedy, z ktorých niektoré sa v dokumente často opakujú a iné sa môžu objaviť iba raz.

selektory ID

ID selektor pomenúva konkrétny štýl bez toho, aby ho priradil k tagu alebo inému HTML prvok .

Predpokladajme rozdelenie v značke HTML, ktoré obsahuje informácie o udalosti. Môžete dať tomuto rozdeleniu an atribút ID z udalosť a potom načrtnite toto rozdelenie čiernym okrajom širokým 1 pixel:

|_+_|

Výzva s selektory ID je, že sa nemôžu opakovať v dokumente HTML. Musia byť jedinečné (rovnaké ID môžete použiť na niekoľkých stránkach vašej lokality, ale iba raz v každom jednotlivom dokumente HTML). Takže pre tri udalosti, ktoré všetky potrebujú túto hranicu, musíte identifikovať atribúty ID udalosť1 , udalosť2 , a udalosť3 a upravte každý z nich. Preto by bolo oveľa jednoduchšie použiť vyššie uvedený atribút class of udalosť a upravte ich všetky naraz.

Komplikácie ID atribútov

Ďalšou výzvou s atribútmi ID je, že majú vyššiu špecifickosť ako atribúty triedy. Ak chcete prepísať predtým zavedený štýl, môže to byť ťažké, ak ste sa príliš spoliehali na ID. Mnohí weboví vývojári upustili od používania ID vo svojich značkách, aj keď majú v úmysle použiť túto hodnotu iba raz, a namiesto toho sa obrátili na menej špecifické atribúty triedy pre takmer všetky štýly.

Jednou z oblastí, kde atribúty ID vstupujú do hry, je, keď chcete vytvoriť stránku, ktorá má na stránke kotviace odkazy. Predstavte si napríklad webovú stránku v štýle paralaxy, ktorá obsahuje všetok obsah na jednej stránke s odkazmi, ktoré „preskakujú“ na rôzne časti tejto stránky. Atribúty ID a textové odkazy používajú tieto kotviace odkazy. Pridajte hodnotu tohto atribútu, pred ktorou je znak # symbol, do href atribút odkazu, takto:

|_+_|

Po kliknutí alebo dotyku tento odkaz preskočí na časť stránky, ktorá má tento atribút ID. Ak žiadny prvok na stránke nepoužíva túto hodnotu ID, odkaz nebude robiť nič.

Na vytvorenie prepojenia na stránke na lokalite sa bude vyžadovať použitie atribútov ID, ale stále sa môžete obrátiť na triedy na účely všeobecného štýlu CSS. Takto dnes dizajnéri označujú stránky – čo najviac používajú selektory tried a na ID sa obracajú len vtedy, keď potrebujú, aby atribút fungoval nielen ako háčik pre CSS, ale aj ako odkaz na stránke.