Cvičení – styl html pomocí šablon stylů CSS

10 min

Šablony stylů CSS umožňují určit, jak má stránka vypadat. Základní myšlenkou je definovat, jaký styl by měl být pro prvky, které používáte na stránkách HTML. Zatímco prvky HTML definují váš obsah, styly CSS definují, jak tento obsah vypadá.

Můžete například použít zaoblené rohy nebo dát přechodové pozadí prvku, nebo můžete pomocí šablon stylů CSS určit, jak hypertextové odkazy vypadají a reagují při interakci s nimi. Můžete také provádět sofistikovaná rozložení stránek a animační efekty.

Styly můžete použít na konkrétní prvky, všechny prvky určitého typu nebo použít třídy pro styl mnoha různých prvků.

V tomto cvičení použijete styly CSS na prvky stránky HTML a přidáte kód CSS pro definování světlých a tmavých motivů. Pak zkontrolujete výsledky v vývojářských nástrojích prohlížeče.

Externí šablony stylů CSS

V předchozí lekci o HTML jste propojili externí soubor CSS z HTML.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

Jednou z výhod externích šablon stylů CSS je, že více stránek HTML může odkazovat na stejný soubor CSS. Pokud provedete změnu šablon stylů CSS, styly se aktualizují pro každou stránku. Když pro obsah stránky použijete soubor HTML, soubor CSS pro stylování a javascriptový soubor pro interakci, označuje se jako oddělení obav.

Jak je popsáno výše, můžete také psát CSS přímo ve formátu HTML, který se nazývá interní CSS. I pro základní web existuje tolik pravidel CSS, že html stránka může být nepotřebná rychle. S více než jednou stránkou by se stejné šablony stylů CSS často opakovaly a obtížně se spravovaly.

Pravidla šablon stylů CSS

Pravidla css jsou způsob použití stylů u elementů HTML. Pravidla CSS mají selektor, který slouží k vyjádření elementu (nebo elementů), na který mají být použity styly.

V editoru main.css Visual Studio Code otevřete soubor a zadejte následující:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Tento fragment kódu obsahuje dvě pravidla. Každé pravidlo má:

Selektor. body a ul jsou selektory dvou pravidel a slouží k výběru prvků, na které styly se vztahují.
Levá složená závorka ({).
Seznam deklarací stylu, které určují, jak mají vybrané prvky vypadat.
Pravá složená závorka (}).

Například selektor vybere ul element HTML na stránce, <ul> aby na ni použil styly. Deklarace je font-family: helveticaa určuje, co má být styl. Název vlastnosti je font-familya hodnota je helvetica.

Jak vidíte dále, můžete definovat vlastní názvy prvků.

Voliče

Selektory ID a tříd umožňují použít styly u názvů vlastních atributů v HTML. ID použijete k vytvoření stylu jednoho prvku, zatímco třídy používají styl více prvků.

Zkopírujte následující kód a přidejte ho do souboru CSS. Vložte ho ul za pravou složenou složenou závorku pro selektor, který jste přidali dříve.
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
Předchozí kód obsahuje tři pravidla CSS, s posledními dvěma pravidly, která používají vlastní atributy k výběru prvků: .list a #msg.
- .list je selektor tříd. Každý element HTML obsahující class sadu atributů získá list styly, které jsou definovány v rámci tohoto selektoru.
- #msg je selektor ID. Element HTML, který má nastavený atribut id , získá msg styly, které jsou definovány v rámci tohoto selektoru.
Názvy používané pro selektory můžou být libovolné, pokud odpovídají tomu, co jste definovali v HTML.
Uložte si práci tak , že ve Windows vyberete Control+S nebo Command+S v macOS.

Zobrazit v prohlížeči

Pokud chcete zobrazit náhled pomocí editoru Visual Studio Code, klikněte pravým tlačítkem myši na index.html soubor v Průzkumníku a pak vyberte Otevřít ve výchozím prohlížeči.

Důležité

I když jste soubor právě upravovali main.css , abyste mohli zobrazit náhled změn, měli byste soubor vybrat index.html .

Webová stránka se otevře ve výchozím prohlížeči.

Jsou styly písem, které jste očekávali? Je zajímavé, jak jsou styly použité na <body> element zděděné <h1> . Nic jsme nedefinovali <h1>, ale přesto získalo písmo, které bylo definováno na <body>. Tento mechanismus dědičnosti od nadřazených prvků po jejich potomky je jedním z klíčových aspektů šablon stylů CSS. Prvky <li> však mají jiné písmo. Styl prvků <li> přepíše sadu stylů, <body> protože <li> prvek je potomkem elementu <ul> , pro který jste definovali styl.

Když v editoru Visual Studio Code použijete možnost Otevřít ve výchozím prohlížeči , otevře se pokaždé v prohlížeči nová karta. Abyste se vyhnuli otevření nové karty, můžete kartu, která už obsahuje váš web, znovu načíst.

Pokud chcete kartu znovu načíst, stiskněte klávesu F5, což je klávesová zkratka pro aktualizaci, nebo stiskněte kombinaci kláves Ctrl+R ve Windows nebo Linuxu a Command+R na Macu.

Přidání světlého motivu

V dalším kroku přidejte podporu barevného motivu pro váš web. Začněte definováním světlého barevného motivu pomocí šestnáctkových barevných kódů.

Do souboru CSS (main.css) přidejte na konec souboru následující kód.
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
V tomto příkladu #000000 určuje černou barvu písma a #00FF00 určuje zelenou barvu pozadí.
V souboru HTML (index.html) aktualizujte <body> prvek názvem light-themetřídy . Teď selektor tříd pro světlý motiv použije styly správně.
```
<body class="light-theme">
```

Zobrazit v prohlížeči

Pokud chcete zobrazit náhled pomocí editoru Visual Studio Code, klikněte pravým tlačítkem myši index.htmla pak vyberte Otevřít ve výchozím prohlížeči nebo znovu načtěte předchozí kartu stisknutím klávesy F5.

Všimněte si, že se zobrazí světlý motiv pomocí zeleného pozadí.

Zobrazení použité šablony stylů CSS

V zobrazení prohlížeče otevřete Vývojářské nástroje.

Klikněte pravým tlačítkem myši na stránku a vyberte Zkontrolovat nebo vyberte klávesovou zkratku F12 nebo Ctrl+Shift+I.
Vyberte kartu Prvky a vyberte kartu Styly na kartě Prvky (ve výchozím nastavení by už měla být vybraná).
Najeďte myší na různé prvky HTML a při výběru několika prvků si všimněte, jak vývojářské nástroje zobrazují, které styly se na ně použijí na kartě Styly .
<body> Vyberte prvek. Poznamenejte si light-theme použité.
Vyberte neuspořádaný prvek seznamu <ul> . Všimněte si vlastního stylu font-family: helvetica;, který přepíše styl prvku <body> .

Další informace o zobrazení stylů CSS v vývojářských nástrojích najdete v článku Začínáme se zobrazením a změnou šablon stylů CSS .

Přidání tmavého motivu

Pro tmavý motiv nastavíte infrastrukturu při přípravě na další lekci, ve které povolíte přepínání motivu na webové stránce.

Pokud chcete do šablon stylů CSS přidat podporu tmavého motivu, postupujte následovně.

V souboru CSS (main.css) přidejte některé konstanty do kořenového adresáře stránky na začátku souboru.
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
Selektor :root představuje <html> prvek na stránce HTML. Pro tento druh úkolu je osvědčeným postupem definovat sadu globálních proměnných CSS v pravidle CSS pomocí selektoru :root . V tomto příkladu jste definovali tři barevné proměnné. Tyto proměnné teď můžete použít v jiných pravidlech CSS.
Na konci souboru CSS nahraďte light-theme pravidlo následujícím kódem, který ho aktualizuje a přidá dark-theme selektor.
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
V předchozím kódu jste definovali dvě nové proměnné bg a fontColor, které určují pozadí a barvu písma. Tyto proměnné používají var klíčové slovo k nastavení jejich hodnot vlastností na proměnné dříve zadané ve voliči :root .
V dalším kroku v souboru CSS nahraďte aktuální body selektor následujícím kódem.
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
V tomto příkladu body použijete selektor k nastavení background a vlastností a color vzhledem k tomu, že prvky, které jsou viditelné na webové stránce, jsou všechny uvnitř elementu <body> , dědí barvy nastavené na <body>.
V souboru CSS odeberte pravidla s #msg a ul selektory tak, aby také dědily stejné písmo z <body>.

Nezapomeňte soubor uložit tak , že vyberete Control+S nebo Command+S.

Váš soubor CSS (main.css) by teď měl vypadat jako v tomto příkladu:

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

Pokud chcete zobrazit tmavý motiv, otevřete soubor index.html a ručně upravte výchozí motiv v atributu <body> třídy na tmavý motiv (dark-theme). Uložte soubor a znovu načtěte stránku v prohlížeči.
<body> Upravte atribut třídy tak, aby se výchozí motiv přepnul zpět na světlý motiv.

V další lekci použijete JavaScript k zajištění interaktivity a podpoře přepínání motivů.

Přidání motivu pomocí GitHub Copilotu

Pomocí GitHub Copilotu v integrovaném vývojovém prostředí můžete vygenerovat šablony stylů CSS a přidat nový motiv. Můžete přizpůsobit výzvu k zadání vlastností pro definování stylů pro elementy HTML podle vašich požadavků.

Následující text ukazuje příklad ukázkového příkazu pro Copilot Chat:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

GitHub Copilot využívá technologii AI, takže jsou možná překvapení a chyby. Další informace najdete v nejčastějších dotazech ke copilotu.

Přečtěte si další informace o GitHub Copilotu v editoru Visual Studio Code.

Váš názor

Byla tato stránka užitečná?