5. Kód CSS

Doufám, že po kapitole o HTML jste neztratili zájem o tvorbu webových stránek. Nyní se totiž podíváme na to, jak se pracuje s CSS, takže budete konečně moci oživit své stránky líbivým vzhledem.

Připomeňme si syntax CSS:

selektor {
  vlastnost: hodnota;
  druhá vlastnost: hodnota; 
}

Za pomocí selektorů vybíráme element/y stránky, kterým chceme upravit vzhled. Například budeme chtít, aby odstavce byly psány modrou barvou, a tučně:

p {
  color: blue;
  font-weight: bold;
}

Tímto způsobem nastavíme modrou barvu textu a tučné písmo pro všechny odstavce na stránce. Z tohoto příkladu lze snadno vyvodit, že pomocí CSS můžeme zvolit prvky se stejným tagem. Ale to není jediná cesta. Pojďme se seznámit s několika základními typy CSS selektorů.

Základní selektory

Elementy na stránce můžeme vybírat různými způsoby. V této části se podíváme na základní a nejpoužívanější CSS selektory:

  • název tagu (tagname)
  • třída (.classname)
  • ID prvku (#idname)
  • atribut ([attr=value])

Použití selektoru na základě tagu jsme si právě ukázali. Jak fungují ostatní, na to se podíváme nyní.

ID elementu

CSS nám umožňuje vybrat na základě ID prvku. Do css souboru toto zapisujeme pomocí mřížky (hash) a id elementu.

<div id="obsah"></div>

#obsah {
  color: green
}

V různých zdrojích můžete vidět, že stylování dle id se nedoporučuje. Jak si jistě umíte představit, v praxi je to jiné. Takže k tomu přistupujme takto: lze to, ale používat jen když je to nutné.

Atributy

Prvek můžeme také vybrat na základě libovolného atributu. Toto stylování se však používá primárně pro rozlišení prvků, ne pro základní výběr. Vezměme si dva inputy

<input type="text" name="krestni" />
<input type="checkbox" name="souhlas" />

Řekněme, že chceme ohraničit textové inputy modrou barvou. V CSS toho docílíme takto:

input[type="text"] {
  border: 1px solid blue;
 }

Díky atributu [type="text"] se náš CSS kód bude týkat jen textových inputů.

Class

Atribut class sám o sobě nemá pro element žádný význam. Používá se tedy primárně pro stylování prvků - dává jim identifikátor. Jistě si řeknete, že by se dalo stylovat třeba jen pomocí názvu tagů - elementů. To v čem je výhoda třídy je, že můžete tutéž třídu použít pro různé prvky:

<body>
  <h1 class="myGreenClass">Titulek stránky</h1>

  <p class="myGreenClass">Paragraf s textem. Obsahuje třídu myGreenClass pro stylování.</p>
  <p>Jiný text</p>

  <form name="myForm">
    <label for="name">Jméno:</label>
    <input id="name" type="text" class="myGreenClass">
  </form>
</body>

Nyní pomocí CSS najdeme každý prvek s třídou myGreenClass a dáme mu zelenou barvu:

.myGreenClass {
  color:green;
}

myGreenClass

Základní vlastnosti CSS a jejich hodnoty

CSS umožňuje přiřadit HTML prvkům celou řadu různých vlastností: barvu textu, pozadí, použití písma, stínování, stíny, definování pozice, a další. V této části se podíváme na to nejzákladnější.

Barva textu (color)

Jak již název napovídá, barva textu nám umožňuje měnit barvu, jakou se text na stránce vykreslí. Základní barvy je možné napsat anglickým názvem, ale v praxi se nejvíce používám hexadecimální zápis, začínající hashem. Tento kód je možné najít ve všech grafických editorech, ale třeba také ve wordu.

Další možnosti uvádění barvy je ve formátu RGB (červená, zelená, modrá), HSL(odstín, sytost, jas), nebo dokonce RGBA či HSLA, kdy A znamená alfa kanál, tedy průhlednost, a uvádí se jako čtvrtý parametr. Pro zjištění kódu barev existují také online nástroje, které nabízejí i barevná schémata. HTMLColorCodes.com a AdobeColorCC jsou jen dva z mnoha.

p {
  color: #426BEA; /* světle modrá pastelová */
  color:rgb(66, 107, 234); /* to samé pomocí RGB */
  color:hsl(225, 72, 59); /* to samé pomocí HSL */
}

Test modré pastelové barvy.

Info

Jako hodnotu barvy je také možné použít transparent, který značí že je barva průhledná.


Barva pozadí (background-color)

Barva pozadí funguje stejným způsobem, jako barva textu:

p {
  color: #426BEA; /* světle modrá pastelová */
  background-color: #cecece; /* odstín šedivé */
}

Test modré pastelové barvy a pozadí

Info

Pozadí je také možné specifikovat vlastností background:, kdy je pak možné zadat krom barvy i obrázek, pozici-X, pozici-Y a opakování.
Výsledný kód by pak byl background: #cecece url('images/backgroundImage.png') 50% 50% no-repeat;


Ohraničení (border)

Za ohraničení odpovídá vlastnost border, ke které lze připsat tloušťku, typ čáry (pevná, přerušovaná, tečkovaná...) a barvu. Při zápisu do jednoho řádku by mělo být zachováno toto pořadí, tedy: tloušťka, typ, barva:

div {border: 2px solid #426BEA;}

Dostupné typy čáry jsou: solid (pevná), dashed (přerušovaná), dotted (tečkovaná) a double (dvojtá).

Stejně jako lze background-color zapsat jen pomocí background, tak je i border jen spojeným prvkem pro border-width (tloušťka), border-style (typ) a border-color (barva):

div {
  border-width: 2px;
  border-style: solid;
  border-color: #426BEA;
}

Ve většině případů se používá zápis složený. Ale pokud chci měnit pouze jednu hodnotu, je vhodné použít přímo konkrétní vlastnost, neboť není potřeba hledat hodnoty těch ostatních dvou.

Zarovnání textu (text-align)

Tak, jako umožňuje zarovnávat text Word, tak i na webových stránkách je možné zarovnat text:

  • do prava (text-align: right;)
  • do leva (text-align: left;)
  • na střed (text-align: center;)
  • do bloku (text-align: justify;) - tento styl se na webu používá velmi zřídka. V knize se sice dobře čte, ale na monitoru může být matoucí.

Tloušťka textu (font-weight)

Tato vlastnost je velmi užitečná v případě, že si volíte vlastní text - k tomu se dostaneme v pozdější kapitole. Zjistíte, že řez může mít různé tloušťky. CSS zde pracuje s dvěma variantami hodnot. Jedno jsou číselné hodnoty 100, 300, 500, 700, 900 a k nim ekvivalentní textové hodnoty light, lighter, normal, bold, extrabold. Je důležité si uvědomit, že námi zvolené písmo však nemusí mít všechny tyto řezy. Ve většině případů se používají jen 100, 500, 700, resp. light, normal a bold.

p {
  font-weight: bold;
  text-align: center;
  border: 2px solid #f14b5c;
  color: #f14b5c;
  background-color: #FFE7EC;
}

Velikost písma (font-size)

Texty můžeme mít různých velikostí písmen. Nadpis by měl být větší než text v odstavci a podobně. Existuje několik jednotek: px (pixely), rem, em a % (procenta). Zaměřme se nyní na pixely, ostatní se nám brzy vysvětlí.

p {
  font-size: 36px;
  text-align:center;
}

Test velikosti písma


Styl písma (font-style)

Styl písma nám umožňuje zobrazit text kurzívou. Jediné dvě hodnoty, které může nabývat jsou italic a normal.

p {
  font-style: italic;
}

Typ písma (font-family)

Tak jako si volíme písmo pro dokumenty psané ve Wordu, stejným způsobem můžeme vybrat typ písma i pro naše webové stránky. Jaký font je pro stránku vhodný záleží na grafickém cítění. Obecně však platí, že patkové písmou slouží k tisku, bezpatkové pro čtení na monitoru. Jakým způsobem tedy zapíšeme požadavek na písmo:

body {
  font-family: Arial;
}

Může se však stát, že prohlížeč naše písmo nebude znát (písmo není na počítači nainstalováno). Proto zápis font-family umožňuje zadat více hodnot oddělených čárkou. Zápis pak vypadá takto:

body {
  font-family: Arial, Helvetica, sans-serif;
}

Arial a Helvetica jsou názvy fontů. sans-serif je zástupný název, ke kterému může mít každý prohlížeč přiřazen vlastní font. Těchto zástupných názvů je pět a obecně platí:

hodnota obecné jméno fontu
serif patkové písmo, nejčastěji Times New Roman
sans-serif patkové písmo, nejčastěji Arial
cursive psací písmo
fantasy divoké, volně psané písmo
monospace jako psací stroj

Pokud písmo obsahuje ve svém názvu mezery, zapisujeme jej do uvozovek.

body {
  font-family: "Times New Roman", serif;
}
Úkol: Změna stylů pomocí DevTools

Jak jsme si ukázali ve druhé kapitole, prohlížeče obsahují různé vývojářské nástroje (DevTools). Pomocí těchto nástojů se dá interaktivně měnit vzhled, nebo html struktura otevřené stránky.

Otevřete si libovolnou webovou stránku v prohlížeči Chrome a otevřete si vývojářské nástroje (F12). Zkuste nyní změnit typ písma, barvu nadpisu, nebo strukturu stránky. Toto cvičení vám názorně ukáže, jakým způsobem se v závislosti na css kódu mění vzhled.

Zápis

U stylů máme tři možnosti zápisu:

  • In-Line zápis do elementu pomocí atributu style
  • Zápis do hlavičky stránky, obalený elementem <style>
  • Zápis do samostatného souboru.

Zápis do hlavičky

Začneme zápisem do hlavičky stránky a řekneme si, proč jej nepoužívat. Nejlépe nejprve ukážeme kód stránky:

<html>
<head>
  <title>Testovací stránka</title>
  <style>
    p {
      color: red;
    }
    .myClass {
      color: navy;
    }
  </style>
</head>
<body>
  <p>Text o tučňácích.</p>
  <p class="myClass">Jiný text o žirafách.</p>
  <p>Text o <span class="myClass">medvědech</span>.</p>
</body>
</html>

Výsledek:

Text o tučňácích.

Jiný text o žirafách.

Text o medvědech.

Jak je vidět, tento zápis funguje v pořádku. Proč tedy není vhodný? Protože webová stránka není - většinou - tvořena jedním souborem, ale mnoha. Pokud bychom měli CSS kód v hlavičce stránky, museli bychom jej mít v hlavičce každé stránky. Jakákoli úprava by pak byla velice složitá, a orientace v souboru náročná.

In-Line zápis

Zápis pomocí atributu style přímo do prvku:

<p style="color:red;">Text o tučňácích.</p>
<p style="color:navy;">Jiný text o žirafách.</p>
<p style="color:red;">Text o <span style="color:navy;">medvědech</span>.</p>

Výsledek:

Text o tučňácích.

Jiný text o žirafách.

Text o medvědech.

Proč je tento zápis špatný? Je zde několik důvodů. Prvním je přehlednost. Začínáme míchat vzhled s obsahem a to je, jak jsme si již řekli, špatně. Druhým důvodem je pak správa takového kódu. Když se rozhodnu, že chci místo červené použít zelenou, musím udělat úpravu na více místech.

Přesto se in-line zápis někdy používá. Proč?

Zápis do samotného souboru

Již jsme došli ke zjištění, že je to nejjednodušší a nejpoužívanější forma zápisu. Důvodů je mnoho. Zmíním zde však ty hlavní. Pokud je soubor se styly oddělen, jsou stránky pro editaci přehlednější. Je možná jednodušší editace, a umožňuje to, aby styly pocházeli z více zdrojů.

K takovému zápisu je potřeba HTML stránce říct, že se má po nějakém souboru se stylem podívat. To provedem jednoduchým zápisem do hlavičky dokumentu:

<link rel="stylesheet" href="zde napíšete cestu k souboru .css">

Ve výsledku pak tedy začátek HTML souboru vypadá takto:

<!DOCTYPE html>
<html lang="cs-CZ">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Kurz HTML a CSS pro začátečníky.">
    <title>Geek Girls Carrots Ostrava – Kurz HTML & CSS pro začátečníky</title>

    <link rel="stylesheet" href="/styles/default.css">
  </head>
  <body>
Úkol: Životopis
  1. Vytvořte si novou slozku nazvanou ukol-zivotopis a do ní složky styles a images.
  2. Do rootové - základní složky tohoto úkolu si zkopírujte, nebo vytvořte nový soubor index.html, do složky styles prázdný soubor default.css a do složky images si vložte dva obrázky.
  3. Nyní zkuste stránku naplnit textem o vás tak, jako byste psali životopis (klidně smyšlený). Dejte prvkům různé třídy a upravte vzhled prvků pomocí stylů.

A tím se posuneme do další kapitoly, kde si vysvětlíme více.

results matching ""

    No results matching ""