1. diel - Úvod do CSS 3

Vitajte u prvej lekcie kurzu CSS 3 (C ascading S tyle S heets), v ktorom sa budeme zaoberať problematikou štýlovanie webových stránok, čiže front-endom. Pre začiatok si povieme niečo o samotnom CSS a na čo slúži. Spomenieme tiež históriu a spôsoby prepojenia štýlov k HTML dokumentu. V tomto kurze budeme preberať iba CSS3, ale je očakávaná aj znalosť HTML5. Ak s tvorbou webov ešte len začíname, bude lepšie si najprv prejsť kurz tvorby webových stránok krok za krokom.

CSS

Jednoducho povedané, pomocou CSS sa hovorí aký štýl sa má priradiť k HTML prvkom. Či už je to farba, centrovanie textu na stred, animácie (áno, v CSS môžeme robiť i animácie) alebo pozicovanie samotných prvkov HTML.

Najskôr si ale položíme otázku: Prečo vlastne stylovať web? Podľa rôznych výskumov si návštevník urobí prvý dojem webe už počas 2-3 sekúnd. Posúďte sami, či radi trávite čas na webe, kde sú zladené farby a všetko je prehľadne tam kde má byť, alebo si radšej vyberiete odflaknuty web vytvorený pred 10 rokmi, kde je vidieť, že autor CSS štýlom moc nerozumel. Odpoveď je viac než jasná. Mimochodom, tá horšia varianta nás tu určite nečaká.

Výborný dizajn môže vyzerať napríklad takto:

A ten najhorší web design najväčšieho kalibru môže vyzerať napríklad nasledovne:

Web Rona Oslunda, ktoré patria do múzea web dizajnu.

Môžeme posúdiť sami, čo je tá lepšia varianta:)

Niečo málo z histórie

Než sa pustíme do konkrétnej problematiky štýlovanie, určite stojí za to spoznať, s čím máme vlastne tú česť.

Zo začiatku bola podpora štýlov zo strán prehliadačov katastrofálne, hovoríme tu o CSS1 (tiež známe ako CSS level 1). Tu bola iba hŕstka vlastností, ktoré sa dali upravovať (vlastnosti písma, farby textu a pozadia, spôsoby zobrazenia prvkov). A navyše všetky tieto vlastnosti neboli podporované u prvých verzií prehliadačov ako je Internet Explorer a Netscape.

Potom prišlo odporúčania CSS2 a nástup bol mierne komplikovaný. Na scéne bola kopa nových prehliadačov, ale žiadny z nich nepodporoval z CSS2 všetko. Najlepšie na tom bola Mozzila, ktorá sa snažila dodržiavať štandardy w3.org. S CSS2 prišli aj nové možnosti štýlovanie, napríklad vlastnosti max-height, max-width, min-height, min-width - minimálna a maximálna šírka alebo výška elementu, cursor - kurzor nad elementom ,, position - pozicovanie elementu v riadku, v bloku , absolútne a relatívne.

Následným nástupom CSS3 sa všetko zmenilo. Určite vieme, že stylovaním nezvládneme postaviť celú webovú stránku, ale je to rozhodne dôležitá časť tvorby webových stránok.

Výhody, nevýhody a limity CSS

Všetko na svete má svoje plusy aj mínusy a CSS nie je výnimkou.

Výhody

Jeho hlavnou výhodou je jednoduchšia údržba webovej prezentácie. Ak chceme zmeniť nejaký detail, ako napríklad farbu nadpisu, nemusíme zložito prechádzať HTML kód alebo rôzne HTML šablóny, ale môžeme zmeniť iba jednu vlastnosť v CSS súboru, ktorý je přilinkován ku všetkým stránkam. Vďaka možnosti přilinkování CSS súboru k HTML, sa nám ukazuje ďalšia výhoda a to oddelenie týchto dvoch jazykov. Ďalšou výhodou je cachovanie štýlov. Webový prehliadač si môže súbor so štýlmi uložiť do pamäte cache (dočasná pamäť), čím môže byť dosiahnuté zrýchlenie načítanie stránky. Vlastnosti jednotlivých elementov môžeme tiež dynamicky meniť pomocou JavaScriptu.

Nevýhody

Hlavnou nevýhodou CSS je podpora prehliadačov. Prehliadač nemusí nejaké CSS vlastnosti vôbec podporovať. Prehliadač má tiež defaultne nastavené vlastné štýly pre hlavné prvky webu a náš web tak môže vyzerať na rôznych prehliadačoch trošku inak (môžeme však štýly tzv. Vyresetovať)

Limity

Horizontálne pozíciovanie je jednoduché, naopak vertikálny vyžaduje komplexnejší prístup ( Flexbox alebo grid). Ďalej v samotnom CSS nie sú premenné alebo konštanty, všetky hodnoty musia byť konkrétne vpísané priamo v kóde. Toto obmedzenie rieši preprocesoru ( SASS, LESS a ďalšie ...).

Pripojenie CSS k HTML

Už vieme, čo je to CSS, aké má výhody, nevýhody a limity. Teraz si ukážeme 3 spôsoby ako pripojiť CSS k HTML.

Priame pripojenie

Spôsob priameho pripojenia (tiež známe ako inline štýly) je najmenej používaný, ale to neznamená, že sa vôbec nepoužíva. Osobne som ho párkrát bol nútený použiť. Vždy je lepšie sa tomuto spôsobu vyvarovať kvôli oddelenie štruktúry HTML od štýlov, čím môžeme zvýšiť prehľadnosť kódu. Taktiež sa trošku znižuje rýchlosť načítania webu (cachovanie). Pre inline štýl pridáme atribút style k HTML prvku a vložíme konkrétny štýl:

<h1 style="color: blue;">Učím se na ITnetworku.</h1>

V prehliadači sa nám zobrazí toto:

Z ukážky prehliadača je nám asi jasné, že sme vytvorili nadpis prvej úrovne a pridali sme k nemu atribút style, za ktorým nasleduje rovná sa a úvodzovky, do ktorých sa vloží CSS vlastnosť a jej hodnota, ktorá je potom zakončená bodkočiarkou. V našom prípade vlastnosť color a hodnota blue, ktorá hovorí, že nadpis bude mať modrú farbu. Keď budeme chcieť pridať ďalšia vlastnosť, tak musíme pamätať na bodkočiarku na konci zápisu a iba pripíšeme ďalšia vlastnosť, napr. Budeme chcieť zväčšiť veľkosť písma pomocou font-size na hodnotu 50px:

<h1 style="color: blue; font-size:50px;">Učím se na ITnetworku.</h1>

Zmenšené písmo nadpisu nás v prehliadači asi neprekvapí:

Interné CSS

Druhým spôsobom vloženie CSS je zápisom štýlov do hlavičky v HTML dokumente (medzi prvkami <head> a </head>). Najskôr musíme prehliadači povedať, že sa jedná o kaskádový štýl. To docielime tak, že vložíme štýly medzi tagy <style type="text/css"> a </style>, kde nám atribút type s hodnotou text/css hovorí, že sa jedná o CSS:

<head>
    <style type="text/css">
        h1{ color: blue; font-size:50px; }
    </style>
</head>

<body>
    <h1>Učím se na ITnetworku.</h1>
</body>

Ako môžeme vidieť, výsledok bude vzhľadovo stále rovnaký:

Všetky nadpisy prvej úrovne sú modré a majú veľkosť 50px. Nemusí to byť len nadpisy prvej úrovne. Tie rovnaké vlastnosti môžeme napríklad pridať samozrejme aj ďalším nadpisom. Pre vyskúšanie si pridáme pod nadpis prvej úrovne aj nadpis druhej úrovne h2 a do štýlov ho pripíšeme tiež:

<head>
    <style type="text/css">
        h1, h2{ color: blue; font-size:50px; }
    </style>
</head>

<body>
    <h1>Učím se na ITnetworku</h1>
    <h2>A je to super!</h2>
</body>

V prehliadači sa tento kód vykreslí takto:

Teraz môžeme vidieť, že máme dva nadpisy rôznych úrovní, ktoré sú úplne totožné.

Pripojenie CSS súboru k HTML súboru

Tretím a najpoužívanejším spôsobom je pripojenie externého CSS súboru k HTML pomocou prvku link. Tu je najviac vidieť oddelenie štruktúry HTML od CSS. K tomuto si budeme musieť vytvoriť nový súbor, ktorý bude obsahovať štýly. Pomenujeme si ho klasicky ako style s koncovkou .css a presunieme ho do novo vytvorenej zložky s názvom css/, ktorá je na rovnakej úrovni ako náš HTML dokument. Teraz už môžeme oddeliť CSS od HTML úplne. Kód v súbore style.css bude vyzerať nasledovne:

h1, h2{ color: blue; font-size:50px; }

V hlavičke HTML dokumente musíme tento súbor ešte pripojiť:

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
    <h1>Učím se na ITnetworku</h1>
    <h2>A je to super!</h2>
</body>

Všimnite si, že nikde nepoužívame atribút style, nie je už totiž potrebné.

U odkazu link je niekoľko atribútov, ktoré si teraz vysvetlíme. Začneme krásne zľava a to atribútom rel s hodnotou stylesheet, ktorá prehliadaču povie, že tento CSS dokument určuje vzhľad HTML dokumentu. Atribút type sme si už vysvetlili o pár riadkov vyššie, tak sa ním nebudeme znovu zaťažovať. V href je uvedená cesta k nášmu CSS súboru, v našom prípade musíme ísť v štruktúre zložiek o jednu úroveň nižšie. Keby sme sme potrebovali ísť o úroveň vyššie, tak sa pred cestu pridajú dve bodky takto: href="../css/style.css"

Za zmienku určite stojí aj pripojenie externého CSS súboru z CDN (C loud D elivery N etwork). Jedná sa o pripojenie už napísaných štýlov, ktoré následne môžeme použiť v našom HTML dokumente. Známy je určite Bootstrap. Ak využíva toto CDN viac webových stránok, štýly sa pravdepodobne načítajú z cache a tým sa zvýši rýchlosť načítanie stránok.

Môžeme si všimnúť, že všetky spôsoby pripojenia majú rovnaký výsledok zobrazenia na webe, ale najviac príjemná je určite tretia metóda. Nikto nechce mať v kóde neporiadok.

V ďalšej lekcii, CSS 3 selektory , sa uvedieme do problematiky základných CSS 3 selektorov a ukážeme si aj niektoré pseudo-selektory.