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 mnoho spôsobov, ako použiť tieto spomínané štýly v dokumente, ale často chcete použiť len štýl niektorí prvkov v dokumente, ale nie 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é je možné použiť na takmer každú značku HTML. To znamená, že bez ohľadu na to, či ste vo svojom dokumente štýlové rozdelenia, 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!
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 nastavili farbu všetko odstavce na modrú (# 0000ff), ale akýkoľvek odsek s atribútom triedy "upozornenia" by namiesto toho bol štýl v č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é, presnejšie pravidlo, ako to prepíše toto nastavenie len v niektorých odsekoch. 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 upozornení. Ak chcete používať túto triedu vo viacerých prvkoch HTML, stačí jednoducho odstrániť prvok HTML od začiatku štýlu hovoru (stačí, ak ponecháte periódu ( .) na mieste), takto: .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.
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. 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, pred ktorým je 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žíva 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. Takto označujeme stránky dnes - v čo najväčšej možnej miere používame výbery tried a iba keď sa obrátime na identifikačné čísla, keď potrebujeme, aby atribút slúžil nielen ako hák pre CSS, ale aj ako odkaz na stránke.A toto h2 by tiež bolo červené.
Výbery ID
Komplikácie atribútov ID
