Doposud jste se setkali s kaskádovými styly, které upravovali vzhled určitého HTML prvku (selektorem byla HTML značka). Nevýhodou značkového selektoru je, že upravuje veškerý výskyt těchto HTML prvků.
Může však nastat situace, kdy potřebujete nastavit styl pouze některé části (např. pouze některým odstavcům). Řešením může být stylovat každý odstavec přímým CSS stylem, avšak je to zdlouhavé a nepřehledné.
Nejlepším řešením je vytvořit si vlastní pojmenovaný styl a poté pouze odkazovat na tento styl. V CSS se rozlišují dva druhy vlastních stylů. První z nich jsou třídy a druhé jsou identifikátory. Rozdíl mezi nimi je jen v jejich používání. Třídy se mohou na jedné HTML stránce vyskytovat mnohokrát, identifikátory pouze jednou.
Vlastní styly
Třídy
- místo značkového selektoru (např. h1, p, img,...) lze napsat libovolný text pomocí znaků anglické abecedy (bez háčků a čárek) a číslic
- zakázané jsou i mezery a interpunkce (tečky, dvojtečky, vykřičníky, otazníky, středníky, atd.), povoleny jsou podtržítka (_) nebo spojovníky (-)
- důležité je uvést před libovolným textem tečku (tím se odlišuje třída od značkového selektoru)
.muj-styl {color: white; background-color: black}
- aby HTML dokument věděl, který vlastní styl má použít, musíte u vybraného HTML prvku uvést pomocí atributu class název vlastního stylu (pozor, uvádí se bez tečky)
<p class="muj-styl">Text odstavce</p>
Identifikátory
- řídí se stejnými pravidly jako třídy s tím rozdílem, že místo tečky na začátku se uvádí mřížka #
#menu {width: 250px; background-color: blue}
- v HTML dokumentu se poté u příslušného HTML elementu uvede atribut id a název identifikátoru bez křížku
<div id="menu">Hlavní menu</div>
Složené styly
Hromadný zápis
- může nastat situace, kdy potřebujete například nastavit stejný typ písma všem nadpisům do třetí úrovně
- lze to napsat standardně:
h1 {font-family: Verdana, sans serif}
h2 {font-family: Verdana, sans serif}
h3 {font-family: Verdana, sans serif}
- nebo můžete využít hromadný zápis, kdy jednotlivé selektory oddělíte čárkou (je to určitě přehlednější a rychlejší)
h1, h2, h3 {font-family: Verdana, sans-serif}
Kontextový zápis
- kontextový zápis se používá v situacích, kdy chcete stylovat určitý HTML element, který je uvnitř jiného elementu
- to znamená, že veškeré odkazy, které jsou uvnitř nadpis h3 budou ztučněny, ostatních odkazů umístěných mimo nadpis h3 se toto nastavení netýká
- kontextový zápis se velmi často využívá u seznamů nebo tabulek
Pseudotřídy hypertextových odkazů
Pseudotřídy jsou další variantou CSS selektoru, které mají předdefinovanou nějakou funkci. Tuto funkci však nelze měnit.
link
- tato pseudotřída upravuje vzhled dosud nenavštíveného odkazu
- váže se pouze k HTML značce <a>
- to znamené, že veškeré nenavštívené (neprokliknuté) odkazy budou zbareveny červeně
visited
- tato pseudotřída upravuje vzhled již navštíveného odkazu.
- váže se pouze k HTML značce <a>
- to znamené, že veškeré již nenavštívené (prokliknuté) odkazy budou zbareveny zeleně
Dynamické pseudotřídy
hover
- tato pseudotřída se použije pokud uživatel na vybraný element najede kurzorem myši.
- lze ji přiřadit libovolnému HTML prvku (nejen odkazu)
active
- tato pseudotřída se použije pokud uživatel klikne ukazetelem myši nad vybraným elementem.
- lze ji přiřadit libovolnému HTML prvku (nejen odkazu)
h1:active {color: orange}