Cvičení – selektory

Dokončeno

V předchozím cvičení jste aplikovali styl u prvků, jako jsou html a h1. Často musíte být trochu užší při aplikaci stylu.

V tomto cvičení nastavíte styl pro oddíly a odkazy na sociální média a zkušenosti na stránce.

Použití stylu na třídy a ID

Začnete nastavením stylu pro sekce sociálních médií a zážitků.

1. Vraťte se do okna vscode.dev, které jste použili v předchozím cvičení.

2. Uvnitř index.htmlsi všimněte section prvku s ID sociálních médií na řádku 10; aplikujete styl na tuto sekci a nastavíte barvu na modrou.

3. Na konec style.css přidejte následující šablony stylů CSS a nastavte barvu prvku sociálních médií :

   #social-media {
       color: blue;
   }
   

4. Stránka se aktualizuje a obsah v části sociálních médií se změní na modrou.

5. Uvnitř index.htmlsi všimněte dvou sekcí na řádcích 28 a 32 se zkušenostmi třídy; Na tyto části aplikujete styl a písmo změníte kurzívou.

6. Na konec style.css přidejte následující šablony stylů CSS a upravte písmo prvků pomocí třídy prostředí :

   .experience {
       font-style: italic;
   }
   

7. Stránka se aktualizuje a nastaví písmo v prostředí na kurzívu.

Použití pseudo-tříd k nastavení stylu odkazu

Mnoho webových vývojářů mění barvu a styl hypertextových odkazů na stránce. Barvu odkazů nastavíte na zelenou barvu a odkazy se zvýrazní, když nad nimi uživatel umístí kurzor.

1. Na konci style.css přidejte následující šablony stylů CSS, abyste nastavili odkazy tak, aby vždy byly zelené:

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. Stránka se aktualizuje tak, aby se odkazy zobrazovaly jako zelené.

3. Na konec style.css přidejte následující šablony stylů CSS, abyste zvýraznili odkazy, když na nich najedete myší:

   a:hover {
       background-color: yellow;
   }
   

4. Najeďte myší na odkazy na stránce a všimněte si, že jsou odkazy zvýrazněné.

Přehled

Následující snímek obrazovky ukazuje výsledky použité šablony stylů CSS. Použili jste třídy, ID a pseudo-třídy k použití stylů na konkrétní prvky a logické skupiny prvků.