Budovanie dobre upravených webových stránok na dnešnom webe vyžaduje dôkladné pochopenie Kaskádové štýly. Použite na svoj dokument HTML sériu štýlov CSS, aby ste informovali o vzhľade svojej webovej stránky.
Atribúty triedy a ID
Dizajnéri niekedy musia použiť iba štýl 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álnymi atribútmi použiteľnými takmer pre každého Značka HTML—Takže či už v dokumente upravujete divízie, odseky, odkazy, zoznamy alebo niektorú z ďalších častí kódu HTML, môžete sa pri splnení tejto úlohy obrátiť na atribúty triedy a ID!
Selektory tried
Selektor triedy nastaví niekoľko štýlov na rovnaký prvok alebo značku v dokumente. Ak napríklad chcete ako výstrahu vyvolať určité časti textu inou farbou, priraďte svojim odsekom takéto triedy:
p {farba: # 0000ff; }
p.alert {color: # ff0000; }
Tieto štýly nastavia farbuvšetko odseky do modra (# 0000ff), ale akýkoľvek odsek s atribútom triedy
výstraha by namiesto toho štylizoval do červena (# ff0000). Je to tak preto, lebo atribút triedy má vyššiu špecifickosť ako prvé pravidlo CSS, ktoré používa iba selektor značiek. Pri práci s CSS, konkrétnejšie pravidlo má prednosť pred menej konkrétnym. V tomto príklade teda všeobecnejšie pravidlo nastavuje farbu všetkých odsekov, ale druhé, konkrétnejšie pravidlo, ako prepíše toto nastavenie iba v niektorých odsekoch.Takto by sa to dalo použiť v niektorých značkách HTML:
Tento odsek by bol zobrazený modrou farbou, čo je pre stránku predvolené.
Tento odsek by bol tiež modrý.
A tento odsek by bol zobrazený červenou farbou, pretože atribút triedy by prepísal štandardnú modrú farbu zo štýlu selektora prvkov.
V tomto príklade štýl p.upozornenie by sa vzťahovalo iba na prvky odseku, ktoré to používajú výstraha trieda. Ak chcete túto triedu použiť v niekoľkých prvkoch HTML, odstráňte prvok HTML od začiatku volania štýlu, napríklad takto:
.alert {background-color: # ff0000;}
Táto trieda je teraz k dispozícii všetkým prvkom, ktoré ju potrebujú. Akákoľvek časť vášho HTML, ktorá má hodnotu atribútu triedy výstraha teraz získa tento štýl. V nižšie uvedenom kóde HTML máme odsek aj nadpis úrovne dva, ktoré používajú znak výstraha trieda. Oba majú červenú farbu pozadia:
Tento odsek by bol napísaný červenou farbou.
Na dnešných webových stránkach sa atribúty tried často používajú na väčšine prvkov, pretože z hľadiska špecifickosti sa s nimi ľahšie pracuje ako s ID. Nájdete najaktuálnejšie stránky HTML, ktoré majú byť vyplnené atribútmi triedy, niektoré sa v dokumente často opakujú a iné sa môžu zobraziť iba raz.
ID selektory
ID selektor pomenuje konkrétny štýl bez jeho priradenia k značke alebo inému Prvok HTML.
Vo svojich značkách HTML predpokladajte rozdelenie, ktoré obsahuje informácie o udalosti. Môžete dať tomuto rozdeleniu Atribút ID z udalosť, a potom toto rozdelenie načrtnite čiernym okrajom so šírkou 1 pixel:
#event {border: 1px solid # 000; }
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 viacerých stránkach svojho webu, v každom jednotlivom dokumente HTML však iba raz). Takže pre tri udalosti, ktoré všetky potrebujú toto ohraničenie, musíte identifikovať atribúty ID udalosť1, udalosť2a udalosť3 a každý z nich upravte. Bolo by preto oveľa jednoduchšie použiť vyššie uvedený atribút triedy udalosť a upravte ich všetky naraz.
Komplikácie atribútov ID
Ďalšou výzvou pre atribúty 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é urobiť, ak ste sa príliš spoliehali na ID. Mnoho webových vývojárov sa odsťahovalo z pomocou ID vo svojich značkách, aj keď majú v úmysle použiť túto hodnotu iba raz, a namiesto toho sa takmer u všetkých obrátili na menej špecifické atribúty triedy štýly.
Jednou z oblastí, kde atribúty ID skutočne vstupujú do hry, je oblasť, keď chcete vytvoriť stránku s kotvovými odkazmi na stránke. Zvážte napríklad web 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 ukotvovacie odkazy. Pridajte hodnotu tohto atribútu, pred ktorou je znak # symbol, do href atribút odkazu, napríklad tento:
Toto je odkaz
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 by neurobil nič.
Ak chcete na stránke vytvoriť prepojenie na stránke, bude sa vyžadovať použitie atribútov ID, stále sa však môžete obrátiť na triedy na všeobecné účely štýlov CSS. Takto dnes dizajnéri označujú stránky - čo najviac používajú selektory tried a na ID sa obrátia, až keď potrebujú, aby atribút fungoval nielen ako háčik pre CSS, ale aj ako odkaz na stránke.