Vytváření dobře upravených webů na dnešním webu vyžaduje hluboké porozumění Kaskádové styly. Aplikujte na svůj dokument HTML řadu stylů CSS a informujte tak vzhled své webové stránky.
Atributy třídy a ID
Návrháři někdy musí použít pouze styl nějaký prvků v dokumentu, ale ne všechny instance tohoto prvku. K dosažení těchto požadovaných stylů použijte třída a ID Atributy HTML. Tyto atributy jsou globální atributy použitelné téměř pro všechny Značka HTML—So ať už ve svém dokumentu upravujete divize, odstavce, odkazy, seznamy nebo jakoukoli jinou část HTML, můžete se při plnění tohoto úkolu obrátit na atributy třídy a ID!
Výběr tříd
Selektor třídy nastaví několik stylů na stejný prvek nebo značku v dokumentu. Chcete-li například jako upozornění vyvolat určité části textu v jiné barvě, přiřaďte odstavcům takové třídy:
p {barva: # 0000ff; }
p.alert {color: # ff0000; }
Tyto styly by nastavily barvuVšechno odstavce do modra (# 0000ff), ale jakýkoli odstavec s atributem třídy výstraha místo toho by stylizovaný červeně (# ff0000). Důvodem je, že atribut třídy má vyšší specificitu než první pravidlo CSS, které používá pouze selektor značek. Při práci s
CSS, konkrétnější pravidlo přepíše méně konkrétní. V tomto příkladu tedy obecnější pravidlo nastavuje barvu všech odstavců, ale druhé, konkrétnější pravidlo než přepíše toto nastavení pouze v některých odstavcích.Zde je způsob, jak by to mohlo být použito v některých značkách HTML:
Tento odstavec by byl zobrazen modře, což je pro stránku výchozí.
Tento odstavec by byl také modrý.
A tento odstavec by se zobrazil červeně, protože atribut třídy by přepsal standardní modrou barvu ze stylu selektoru prvků.
V tomto příkladu styl upozornění by se vztahovalo pouze na odstavcové prvky, které to používají výstraha třída. Chcete-li tuto třídu použít v několika prvcích HTML, odeberte prvek HTML od začátku volání stylu, například takto:
.alert {background-color: # ff0000;}
Tato třída je nyní k dispozici všem prvkům, které ji potřebují. Jakýkoli kousek vašeho HTML, který má hodnotu atributu třídy výstraha nyní získá tento styl. V níže uvedeném HTML máme odstavec i nadpis úrovně dva, které používají výstraha třída. Oba zobrazují červenou barvu pozadí:
Tento odstavec bude psán červeně.
Na webových stránkách se dnes atributy třídy často používají u většiny prvků, protože s nimi je snazší pracovat z hlediska specifičnosti než ID. Najdete nejaktuálnější stránky HTML, které mají být vyplněny atributy třídy, z nichž některé se v dokumentu často opakují a jiné se mohou zobrazit pouze jednou.
ID selektory
ID volič pojmenuje konkrétní styl, aniž by jej přidružil k tagu nebo jinému Prvek HTML.
Předpokládejme rozdělení ve vašem značení HTML, které obsahuje informace o události. Mohli byste dát tomuto rozdělení Atribut ID z událost, a poté toto rozdělení ohraničte černým okrajem širokým 1 pixel:
#event {border: 1px solid # 000; }
Výzva s ID selektory je, že je nelze opakovat v dokumentu HTML. Musí být jedinečné (stejné ID můžete použít na několika stránkách vašeho webu, ale pouze jednou v každém jednotlivém dokumentu HTML). Takže pro tři události, které všechny potřebují toto ohraničení, musíte identifikovat atributy ID událost1, událost2, a událost3 a styl každého z nich. Bylo by proto mnohem jednodušší použít výše uvedený atribut třídy událost a upravovat je najednou.
Komplikace atributů ID
Další výzvou atributů ID je, že mají vyšší specificitu než atributy třídy. Chcete-li přepsat dříve zavedený styl, může to být obtížné, pokud jste příliš spoléhali na ID. Mnoho vývojářů webu se přestěhovalo z pomocí ID ve svém označení, i když mají v úmyslu použít tuto hodnotu 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 do hry vstupují atributy ID, je situace, kdy chcete vytvořit stránku, která má kotvící odkazy na stránce. Zvažte například web ve stylu paralaxy, který obsahuje veškerý obsah na jedné stránce s odkazy, které „přeskakují“ na různé části této stránky. Atributy ID a textové odkazy používají tyto kotevní odkazy. Přidejte hodnotu tohoto atributu, před kterou je # symbol, na href atribut odkazu, jako je tento:
Toto je odkaz
Po kliknutí nebo dotyku tento odkaz přeskočí na část stránky, která má tento atribut ID. Pokud tuto hodnotu ID nepoužívá žádný prvek na stránce, odkaz by nic neudělal.
Chcete-li na stránce vytvořit propojení na stránce, bude vyžadováno použití atributů ID, ale stále se můžete obrátit na třídy pro obecné účely stylů CSS. Takto designéři dnes označují stránky - co nejvíce používají selektory tříd a na ID se obrátí, pouze když potřebují, aby atribut fungoval nejen jako háček CSS, ale také jako odkaz na stránce.