CSS - stručný přehled

web.edumach.cz

CSS (Cascading Style Sheets) je jazyk používaný k úpravě vzhledu webových stránek – určuje například barvy, písma, rozložení prvků a celkový styl, aby stránka byla vizuálně přitažlivá.

1. Vztah HTML a CSS

Současný moderní web využívá možnosti poslední specifikace jazyků HTML verze 5 a CSS verze 3. V něm se odděluje obsah (sémantika) a vzhled:

Standardizaci HTML i CSS zajišťuje mezinárodní konsorcium W3C (w3.org). Jeho členové společně s veřejností vyvíjejí webové standardy pro World Wide Web. To je důležité proto, aby se ve všech webových prohlížečích zobrazil obsah stejně (zejména vzhled).

Na okraj: Ještě před cca 10 lety bylo téměř nemožné odladit web tak, aby v různých prohlížečích vypadal stejně – "noční můra" pro vývojáře. V současnosti to už naštěstí nehrozí. Ať si zobrazíte web v jakémkoliv prohlížeči, vždy bude vypadat na 99,9 % stejně.

2. 📚 Dokumentace k CSS

3. Kam styly zapsat

Existují tři způsoby, kam styly v kódu zapsat:

Tyto způsoby se dají kombinovat - využít více než jeden způsob. Jejich umístění má navíc vliv na jejich prioritu (o tom dále).

3.1. Externí

Nejčastěji používaný způsob. Definice stylů se vkládají do jiného souboru (má příponu .css). Smyslem tohoto řešení je, že jeden css soubor ovlivní více html stránek - všechny tak mají jednotný vzhled.

Vkládá se nepárovou značkou <link> do hlavičky dokumentu (bloku <head>...</head>):

<link rel="stylesheet" href="styly.css">

3.2. Interní

Definice stylů se o vkládají do hlavičky stránky mezi značky <style>...</style>:

<style>
    h1 {
        color: red; /* cervena barva */
    }
</style>

...

</head>

3.3. Inline

Styl se vkládá přímo ke značce do atributu style="...". Pokud vhodná značka není, lze využít neutrální značky:

<p style="color: red;">červený text</p>
<p>text <span style="color: red;">červený</span> text</p>

Text odstavce v ukázce níže bude červený a zarovnaný na střed:

<style>
p {
    text-align: center;
    color: green;
}
</style>

...

<p style="color: red;">...text odstavce...</p>

Proč se nazývají "kaskádové"?

Jak bylo výše uvedeno, tato tři uvedené způsoby se dají kombinovat. Prohlížeč je pak aplikuje podle jednoduchého klíče: přednost má ten styl, který je k elementu "nejblíž". A to nejen v pořadí inlinový, interní, externí, ale i tím, kde je styl souboru umístěn. Tato vlastnost se využívá pouze, pokud je k tomu nějaký smysluplný důvod.

Dokonce může být víc externích stylů. Pak mají přednost ty, které jsou v kódu níž:

<link rel="stylesheet" href="styly_1.css">
<link rel="stylesheet" href="styly_2.css">

V ukázce to budou styly v souboru styly_2.css. Tento koncept je už trochu "vyšší level", my jej určitě používate nebudeme.

4. Blok deklarace ("stylopis")

Blok deklarace CSS se skládá ze selektoru a bloku deklarací vlastnost: hodnota oddělené dvojtečkou. Každá z deklarací se ukončuje středníkem. Celý blok je uzavřen do složených závorek {}.

🌍 Dokumentace na https://www.w3schools.com/css/default.asp

V bloku deklarace se ignorují všechny konce řádků a i zde platí, že čemu prohlížeč nerozumí, to ignoruje. Je zvykem psát je tak, abychom se v nich vyznali:

selektor {
    vlastnost_1: hodnota; /* komentář */
    vlastnost_2: hodnota_1 hodnota_2;
    ...
}

V současné specifikaci CSS verze 3 existuje skoro 300 vlastností. Z pochopitelných důvodů je nebudeme probírat všechny.

Jako první následují vlastnosti pro barvy a písma.

5. Barvy a písma

5.1. Barvy

V CSS se barvy nastavují těmito dvěma vlastnostmi:

color: <hodnota>;
background-color: <hodnota>;

Barvy patří mezi nejvýraznější prvky webové stránky. Pomáhají vytvořit atmosféru, zvýraznit důležité části a zlepšit čitelnost. V CSS se barvy zapisují několika způsoby:

  1. Pojmenované barvy
    • Jednoduché názvy jako red, blue, green, black, white, gray...
    • Výhoda: snadné použití.
    • Nevýhoda: malý výběr odstínů.
  2. Šestnáctkový (hexadecimální) zápis
    • Každá barva je kombinací červené (R), zelené (G) a modré (B) složky:
    • #RRGGBB, např. #ff0000 (červená), #00ff00 (zelená), #0000ff (modrá).
    • Zkrácená forma je např. #f00 pro #ff0000.
  3. Další zápisy (volitelně)
    • CSS podporuje i formáty rgb(255, 0, 0) nebo hsl(0, 100%, 50%).
  4. Kombinování a množství barev
    • Na webu je vhodné používat jen několik základních barev, např. jednu hlavní a jednu doplňkovou. Příliš mnoho barev působí rušivě.
  5. Kontrast

Vše o barvách včetně teorie, míchání a paletách je tady: https://www.w3schools.com/colors/.

Písma

V CSS se písmo nastavuje touto vlastností:

font-family: Písmo1, Písmo2, Písmo3, Obecný-typ;

Proč jich je v seznamu víc? Prohlížeč se pokusí nastavit první písmo v seznamu. Pokud OS tykové písmo neobsahuje, zkusí druhé. Pokud ani to, zkusí třetí... Na konci seznamu se obvykle uvádí obecné typy písem - serif, sans-serif nebo monospace. Vysvětlení je v tabulce níže.

Písmo určuje charakter webu – může působit moderně, elegantně nebo hravě.

  1. Systémová písma:
    • Každý operační systém má jinou sadu písem (např. Arial, Verdana, Georgia, Times New Roman).
    • Proto není jisté, že se písmo zobrazí u všech uživatelů stejně.
  2. Náhradní písma:
    • V CSS lze určit více písem za sebou, např.:
    • font-family: "Georgia", "Times New Roman", serif;
    • Pokud první písmo chybí, použije se další v pořadí.
  3. Webová písma:
    • Weby mohou načítat písma přímo z internetu z fonts.google.com.
    • To umožňuje používat atraktivní a jednotná písma bez ohledu na zařízení.
    • ⚠️ Ne všechna písma obsahují české znaky.
  4. Doporučení pro začátek:
    • Používej nejvýše 2–3 typy písma na stránce.
    • Dbej na čitelnost, velikost a kontrast mezi písmem a pozadím.

Kromě názvů písem existují i obecné názvy. Každý webový prohlížeč má v sobě nastaveno, jaké písmo má zvolit:

Název Co znamená Písmo
serif patková písma Times New Roman
sans-serif bezpatková písma Arial
monospace písma s pevnou šířkou Courier New

Příklady platí pro OS Windows. Na jiných (macOS, iOS, Android...) se mohou názvy písem lišit.

Kromě typu písma (fontu) jde nastavit i celá řada dalších vlastností - podobně jako v textovém editoru:

Níže je seznam těch, které napak znát musíte - používají se velmi často, ne-li téměř vždy:

6. Okraje

Velmi důležitou, ale často ne zcela pochopenou problematikou je nastavení rozměrů samotných objektů (na obrázku níže pojmenovaný content).

V kooperaci s CSS třídami jsou klíčovýmmi nástroji tvorby vzhledu webových stránek.

Každý element (obsah jakékoliv HTML značky) má okolo sebe v každém ze čtyřech směrů vymezený prostor daný prohlížečem. Například odstavec (p), nadpisy (h1, h2...), obrázek (img), odrážky a číslované seznamy (ul, ol, li), tučný text a kurzíva (b, i), hypertextový odkaz (a)... no prostě všechny.

Toto video názorně vysvětluje využití těchto CSS vlastností.

Vzdálenost jde definovat v 18 různých jednotkách. Běžně si vystačíme s:

6.1. border (okraj) 

border-top: 1px solid red; /*horní strana: šířka styl barva*/
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
border: 1px solid red; /*všechny strany: šířka styl barva*/

6.2. margin (vnější okraj) 

margin-top: 2em;
margin-right: 2em;
margin-bottom: 2em;
margin-left: 2em;
margin: 3em; /*všechny strany*/
margin: 2em 1em 2em 1em; /*top right bottom left*/
margin: 2em 1em; /*2em top a bottom, 1em right a left*/

6.3. padding (vnitřní okraj) 

padding-top: 2em;
padding-right: 2em;
padding-bottom: 2em;
padding-left: 2em;
padding: 3em; /*všechny strany*/
padding: 2em 1em 2em 1em; /*top right bottom left*/
padding: 2em 1em; /*2em top+bottom, 1em left+right*/

Pokud máte v té záplavě hodnot u sdružených vlastností (border:, margin:, padding:) lehce zmatek, pak tady je jednoduché vysvětlení:

T = top, B = bottom, L = left, R = right

6.4. Další efekty 

border-radius (zakulacené rohy)
border-radius: 10px;
box-shadow (stín)
box-shadow: 10px 10px 5px gray;
/* posun v ose x, posun v ose y, šířka stínu, barva stínu */

7. Shrnutí

8. Efekty obrázků

CSS umí na slušné úrovni upravit obrázky. Jde především o různé efekty. Níže jedna ukázka.

🌐 Živá ukázka

V ukázce je tento CSS kód:

img {
    height: 120px;  /* výška obrázku */
    margin: 0px 5px; /* mezera vpravo a vlevo 5px  */
    filter: grayscale(100%); /* stupně šedi */
    transition-duration: 0.5s; /* změny trvají 0,5 sekundy */
    transform:scale(1,1); /* velikost 100 % */
}

img:hover {
    filter: none;
    transition-duration: 0.5s; /* změny trvají 0,5 sekundy */ 
    transform:scale(1.1,1.1);  /* velikost 110 % */
}

Na w3schools.com/tools/ v sekci CSS Visual Tools je 18 vizuálních nástrojů, pomocí kterých nastavíte požadovaný efekt pro vaše webové projekty: