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

h3 a {font-weight: bold}

• 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>

a:link {color: red}

• 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>

a:visited {color: green}

• 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)

h1:hover {color: yellow}

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}

Úkol

• Ve složce WWW si vytvořte složku 14.
• Ze složky 13 si zkopírujte všechny potřebné soubory.
• Soubor priroda.html upravte podle následujícího postupu:
  • každý obrázek a jeho popis v odstavci "obalte" novým oddílem <DIV>,
  • tomuto oddílu nastavte vlastní třídu s názvem "na-stred".
• Soubor mesta.html upravte podle následujícího postupu:
  • všem odstavcům, které obsahují zdroj s URL odkazem nastavte vlastní třídu s názvem "doprava".
• Soubor style.css upravte takto:
  • přidejte komentář "CV14",
  • pro vlastní třídu "na-stred" nastavte vlastnost zarovnání na střed,
  • pomocí kontextového zápisu nastavte odstavcům uvnitř vlastní třídy "na-střed" zarovnání na střed a velikost písma na 10 bodů (pt),
  • pro vlastní třídu "doprava" nastavte vlastnost zarovnání k pravému okraji,
  • všechny odkazy nastavte tak, aby po najetí ukazatelem myši změnily barvu textu na červenou (barvu zapište RGB kódem).
• Zkontrolujte na případné chyby a uložte.