Úvod do CSS

Dizajn zohráva kľúčovú úlohu pri vývoji webových aplikácií. Štýlovanie HTML je nevyhnutné na zvýšenie vizuálnej atraktívnosti a zatraktívnenie dizajnu. Táto potreba viedla k vytvoreniu kaskádových štýlov (CSS), technológie navrhnutej na štýlovanie HTML od roku 1996.

V priebehu rokov sa CSS vyvíjal a rozširoval svoje možnosti do takej miery, že je teraz možné vytvárať interaktívne a komplexné dizajny. Zaujímavým príkladom univerzálnosti CSS je vývoj hier výhradne pomocou CSS a HTML, čo demonštruje robustný potenciál CSS vo vývoji webových stránok.

Nasledujúci článok poskytuje podrobný prehľad CSS, zahŕňa jeho základnú syntax a ponúka návod na jeho začlenenie do vašich projektov.

Príklad hry vyvinutej výhradne v CSS a HTML:

Príklad hry v CSS a HTML na CodePen.

Syntax

Syntax CSS (Cascading Style Sheets) je jednoduchá a navrhnutá tak, aby sa ľahko naučila a používala. Skladá sa zo série pravidiel, z ktorých každé pozostáva z bloku selektora a deklarácie.

Selektor Deklarácia Deklarácia
│ │ │
▼ ▼ ▼
span { font-size: 12pt; color: white; }
▲ ▲ ▲ ▲
│ │ │ │
Vlastnosť Hodnota Vlastnosť Hodnota

Ako bolo vysvetlené vyššie, syntax CSS sa skladá z viacerých prvkov:

• Selektor: Táto časť identifikuje HTML prvky, ktoré chcete štýlovať. Selektory môžu byť jednoduché (cieľujú na prvky podľa názvu značky, triedy alebo ID) alebo zložité (používajú kombinácie selektorov na cielenie prvkov na základe ich atribútov, stavu alebo pozície v dokumente).
• Deklaračný blok: Deklaračný blok obsahuje jednu alebo viac deklarácií oddelených bodkočiarkami. Každá deklarácia obsahuje vlastnosť a hodnotu, oddelené dvojbodkou. Vlastnosť je aspekt prvku, ktorý chcete štýlizovať (napríklad farba, veľkosť písma, ohraničenie atď.), a hodnota špecifikuje požadovaný efekt (napríklad červená, 12px, plná čierna atď.).

Tento prístup umožňuje jasné, organizované a intuitívne pokyny na štýlovanie, vďaka čomu môžu vývojári vytvárať vizuálne atraktívne a štruktúrované webové stránky.

Rozdiel v syntaxi spočíva výlučne v deklarovaní CSS – či už priamo v HTML tagu, vnútri tagu <style> alebo v samostatnom súbore CSS.

CSS v HTML tagu

Keď sa CSS aplikuje priamo v HTML prvku prostredníctvom atribútu style, nie je potrebné definovať selektor, pretože tag sám v sebe špecifikuje cieľ štýlu. Táto metóda inline CSS je exkluzívna pre tag, na ktorom je deklarovaná, a nemá vplyv na žiadne iné HTML prvky.

<p style="color: blue; font-size: 16px;">Tento text odseku je štýlový priamo bez potreby selektora.</p>

CSS v značke <style>

Pri začleňovaní CSS do značky <style> je povinné špecifikovať selektor aj deklaráciu. Táto značka môže byť umiestnená v sekcii <head> alebo <body> HTML dokumentu. V súlade s osvedčenými postupmi sa však odporúča umiestniť ju do sekcie <head>, aby sa štýl odlíšil od obsahu.

<!DOCTYPE html>
<html>
<head>
<!-- Osvedčená prax: Zahrňte značku <style> do sekcie <head> -->
<style>
/* Selektor CSS pre prvky <h1> */
h1 {
color: red;
font-size: 24pt;
}

/* CSS selektor pre prvky <p> */
p {
color: #008000;
}
</style>
</head>
<body>
<h1>Toto je nadpis štýlový pomocou CSS v tagu <style>.</h1>
<p>Tento odsek je štýlový pomocou CSS v tagu <style>.</p>
</body>
</html>

CSS v súbore

Posledná a najčastejšie používaná metóda spočíva v uložení CSS do samostatného súboru a prepojení s dokumentom HTML. Tento prístup oddeľuje štýl od obsahu HTML, čím sa stáva použiteľným v rôznych súboroch HTML alebo šablónach.

Na ilustráciu tohto princípu si predstavte, že máte súbory style.css a index.html. Súbor style.css obsahuje CSS zodpovedné za vizuálne rozloženie našej webovej aplikácie, zatiaľ čo súbor index.html obsahuje samotnú webovú aplikáciu. V tomto prípade by organizácia súborov bola nasledovná:

h1 {
color: red;
font-size: 24pt;
}

p {
color: #008000;
}

Súbor index.html bude vyzerať takto:

<!DOCTYPE html>
<html>
<head>
<!-- Prepojenie externého súboru CSS pre konzistentný štýl na všetkých webových stránkach -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Nadpis štýlový pomocou externého CSS</h1>
<p>Odsek štýlový pomocou externého CSS</p>
</body>
</html>

Každé vyhlásenie štýlu sa riadi osobitným procesom dedičnosti atribútov štýlu, ktoré sú určené jeho pozíciou v hierarchii. V časti venovanej dedičnosti sa dozviete viac o tom, ako tento mechanizmus funguje v rámci CSS.

Selektory

Selektor CSS je vzor používaný na výber prvkov na webovej stránke, ktoré chcete štýlizovať pomocou CSS. Selektory CSS umožňujú webovým vývojárom zamerať sa na prvky HTML na základe ich názvu, id, triedy, atribútov a pozície alebo vzťahu k iným prvkom.

Selektory sú rozdelené do 5 kategórií:

• Jednoduché selektory
• Kombinované selektory
• Selektory pseudotried
• Selektory pseudoelementov
• Selektory atribútov

Jednoduché selektory

Jednoduchý selektor CSS je typ selektora, ktorý sa používa na cielené vyhľadávanie prvkov HTML na základe jednej charakteristiky, ako je ich typ tag, class alebo ID. Tieto selektory sú základom CSS a poskytujú priamy spôsob, ako priamo aplikovať štýly na prvky.

Typy jednoduchých selektorov:

Tento článok sa zameriava na jednoduché selektory, aby pomohol čitateľom pochopiť základné princípy selektorov. Podrobnejšie informácie o iných typoch selektorov nájdete na stránke w3schools.com.

Selektor prvkov

/* Vyberie všetky prvky <p> */
p {
color: blue;
}

<p>Tento odsek bude modrý.</p>

Selektor ID

/* Vyberie prvok s id="name" */
#name {
font-size: 20px;
}

<div id="name">Tento div bude mať veľkosť písma 20px.</div>

Selektor triedy

/* Vyberie všetky prvky s class="header-menu" */
.header-menu {
background-color: yellow;
}

<div class="header-menu">Tento div bude mať žlté pozadie.</div>

Selektor prvku.Trieda

/* Vyberie všetky prvky <p> s triedou="header-menu" */
p.header-menu {
text-align: center;
}

<p class="header-menu">Tento odsek bude zarovnaný na stred.

Univerzálny selektor

/* Vyberie všetky prvky */
* {
margin: 0;
padding: 0;
}

Toto pravidlo CSS vynuluje okraj a vypchávku pre všetky prvky v dokumente HTML, čo je bežná prax pri spúšťaní štýlu, aby sa zabezpečilo konzistentné rozmiestnenie v rôznych prehliadačoch.

Selektor zoskupovania

/* Vyberie všetky prvky <p> a <span> */
p, span {
color: red;
}

<p>Tento odsek bude červený.</p>
<span>Tento span bude tiež červený.</span>

Každý z týchto príkladov ilustruje, ako použiť príslušný jednoduchý selektor CSS na zacielenie a štýlovanie prvkov HTML na základe ich typu, ID, class alebo ich kombinácie a ako aplikovať štýl univerzálne alebo na skupinu prvkov.

Dedičnosť

Dedičnosť v CSS je základný princíp, ktorý riadi, ako sa hodnoty vlastností nadradených prvkov prenášajú na ich podradené prvky. Tento mechanizmus umožňuje, aby určité vlastnosti CSS ovplyvňovali nielen špecifikovaný prvok, ale aj jeho podradené prvky, čím sa zabezpečuje konzistentný vzhľad a správanie súvisiacich prvkov bez explicitného definovania štýlov pre každý z nich.

Ako funguje dedičnosť

• Všeobecný princíp: Nie všetky vlastnosti CSS sa zdedia automaticky. Vlastnosti súvisiace s prezentáciou textu, ako napríklad color, font-family a font-size, sa zdedia, pretože je logické, aby štýl textu bol konzistentný v celej hierarchii obsahu. Iné vlastnosti, najmä tie, ktoré súvisia s modelom rámčeka, ako napríklad margin, border, padding a width, sa nezdedia, pretože zdedenie týchto hodnôt by mohlo viesť k neočakávaným rozloženiam.
• Prepísanie dedičnosti: Dedičnosť je možné prepísať. Ak podradený prvok explicitne špecifikuje hodnotu pre zdedenú vlastnosť, hodnota podradeného prvku má prednosť pred zdedenou hodnotou. Kľúčové slovo inherit môže tiež vynútiť dedičnosť pre vlastnosti, ktoré to prirodzene nerobia.

Dedičnosť a rôzne spôsoby použitia CSS

• Vložené štýly (atribút style): Štýly aplikované priamo na HTML prvok pomocou atribútu style majú najvyššiu špecifickosť, a preto prepisujú zdedené štýly a štýly deklarované v značkách <style> alebo externých súboroch CSS. Vložené štýly sa vzťahujú len na prvok, ku ktorému sú priamo pripojené, a nezdedia sa na podradené prvky, pokiaľ vlastnosť prirodzene nezdedí a žiadna iná deklarácia ju neprepíše.

• Vnútorné štýly (značka <style>): Keď je CSS zahrnuté v značke <style> v dokumente HTML, dedičnosť funguje tak, že štýly sa aplikujú na prvky, ktoré zodpovedajú selektorom špecifikovaným v značke <style>. Podradené prvky zdedia vlastnosť od nadradených prvkov, pokiaľ sa neuplatňuje špecifickejšie pravidlo v značke <style>.

• Externé štýly (prepojené súbory CSS): CSS definované v externých štýloch je prepojené s dokumentmi HTML prostredníctvom prvku <link>. Dedičnosť funguje podobne ako interné štýly – štýly sa aplikujú podľa selektorov, ktoré zodpovedajú konkrétnym prvkom, a podriadené prvky zdedia vlastnosti od svojich nadradených prvkov, pričom platia rovnaké pravidlá špecificity a prepisovania.

Aby sme ilustrovali koncept dedičnosti v CSS, vytvorme príklad, ktorý ukazuje, ako určité vlastnosti, ako napríklad color, font-family a font-size, dedia podradené prvky od svojich nadradených prvkov a ako sa táto dedičnosť dá prepisovať.

Štruktúra HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
/* Interný štýl */
body {
color: darkblue;
font-family: Arial, sans-serif;
}

.override {
color: red;
font-size: 20px;
}
</style>
</head>
<body>

<p>Tento odsek zdedil farbu a rodinu písma od body.</p>

<div>
Tento div tiež zdedil farbu a rodinu písma od body.
<p class="override">Tento odsek prepisuje zdedenú farbu a veľkosť písma.</p>
</div>

</body>
</html>

Externý CSS (style.css)

body {
font-size: 16px;
}

Vysvetlenie

• Značka body bola štýlizovaná pomocou vlastností color, font-family a font-size. Podľa princípov dedičnosti CSS budú tieto štýly zdedené všetkými podradenými prvkami, pokiaľ nie je uvedené inak. To znamená, že pokiaľ na podradený prvok nie je aplikované špecifickejšie pravidlo (buď prostredníctvom iného pravidla CSS, ktoré sa naň priamo vzťahuje, alebo prostredníctvom vloženej štýlu), bude text zobrazený v farbe darkblue, s rodinou písma Arial, sans-serif a veľkosťou písma 16px, ako je nastavené vo vonkajšom štýlovom hárku.

• Značka <p> priamo v body zdedí štýly tela a zobrazí text podľa toho.

• Značka <div> tiež zdedí štýly tela, rovnako ako jej podradený text. Obsahuje však značku <p> s triedou .override, ktorá je explicitne nastavená na farbu red a veľkosť písma 20px. Toto demonštruje prepisovanie dedičnosti: štýly triedy .override majú prednosť pred štýlmi zdedenými z tela, čo ilustruje, ako špecifické pravidlá môžu zmeniť zdedené štýly pre podradené prvky.

Tento príklad zachytáva podstatu dedičnosti CSS a spôsob, akým ju možno využiť a prepisovať vo webovom dizajne na účely efektívneho štýlovania webových stránok.

Špecifickosť

Priorita pravidiel CSS, známa aj ako špecifickosť CSS, určuje, ktoré štýly sa uplatňujú, ak existuje viacero deklarácií štýlu pre ten istý prvok. Táto priorita sa môže líšiť v závislosti od toho, kde je CSS definované: priamo v atribúte style HTML značky, v rámci značky <style> v HTML dokumente alebo vo vonkajšom súbore CSS prepojenom s HTML dokumentom. Priorita funguje od najvyššej po najnižšiu takto:

1. Vložené štýly (atribút style): Štýly aplikované priamo na prvok prostredníctvom jeho atribútu style majú najvyššiu prioritu. Táto metóda štýlovania je špecifická, pretože sa zameriava priamo na jeden prvok a prepisuje všetky ostatné štýly deklarované v značkách <style> alebo externých súboroch CSS pre tento prvok.

2. Vnútorné alebo vložené štýly (značka <style>): Pravidlá CSS definované v značke <style> v hlavičke alebo tele HTML sú ďalšie v poradí špecifickosti. Ak existujú konfliktné štýly pre prvok a žiadny z nich nie je priamo aplikovaný prostredníctvom atribútu style, štýly v značke <style> budú mať prednosť pred štýlmi vo vonkajších súboroch CSS. Poradie pravidiel v dokumente môže tiež ovplyvniť špecifickosť; neskoršie pravidlá prepisujú skoršie, ak majú rovnakú úroveň špecifickosti.

3. Externé štýly (prepojené súbory CSS): Štýly definované vo vonkajších štýloch prepojených s dokumentom HTML majú pri vzniku konfliktov najnižšiu prioritu spomedzi týchto troch metód. Podobne ako pri vnútorných štýloch, ak existuje viacero vonkajších štýlov, záleží na poradí, v akom sú prepojené v dokumente HTML. Štýly v poslednom prepojenom štýle prepisujú štýly v skorších štýloch, ak majú rovnakú úroveň špecifickosti.

Použime jednoduchý príklad na vysvetlenie špecifickosti CSS. Predstavme si HTML stránku s prvkom odseku, ktorému chceme priradiť tri štýly: inline štýl, interný štýl v rámci značky <style> a externý štýl CSS. Naším cieľom je zmeniť farbu textu v odseku.

Štruktúra HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
p {
color: green;
}
</style>
</head>
<body>
<p id="example" class="text-style" style="color: blue;">Toto je odsek.</p>
</body>
</html>

Externý CSS (style.css)

p { 
color: red; 
}

.text-style { 
color: orange; 
}
#example { 
color: purple; 
}

Vysvetlenie špecifickosti CSS

1. Vložené štýly: Atribút style priamo v tagu <p> nastavuje farbu na modrú. Vnútorné štýly majú najvyššiu špecifickosť, takže ak toto pravidlo existuje, pravdepodobne prepisuje ostatné konfliktné štýly.

2. Interný štýl: Vnútri <head> máme značku <style>, ktorá sa tiež pokúša nastaviť farbu odseku, tentoraz na zelenú. Toto pravidlo má strednú úroveň špecifickosti. Je špecifickejšie ako externé štýly, ale menej špecifické ako vnútorné štýly.

3. Externé štýly:

• Externý súbor CSS sa pokúša nastaviť farbu odseku na červenú pomocou selektora typu (p), na oranžovú pomocou selektora triedy (.text-style) a na fialovú pomocou selektora ID (#example).
• Selektor ID má najvyššiu špecifickosť, takže fialová farba zvyčajne predchádza ostatným selektorom v súbore CSS.
• Keďže však deklarácia vložného štýlu priamo na prvku má najvyššiu špecifickosť, prepisuje externé a interné štýly.

Výsledok Napriek rôznym pokusom nastaviť farbu odseku prostredníctvom externých, interných a inline štýlov, inline štýl (color: blue;) prevláda vďaka svojej najvyššej špecificite. Text v odseku bude preto modrý.

Tento príklad ilustruje, ako špecifickosť CSS funguje v praxi. Inline štýly majú najvyššiu špecificitu, nasledujú selektory ID, selektory triedy a selektory typu, v tomto poradí. Nezabudnite, že ak má viacero pravidiel rovnakú špecifickosť, prednosť má to, ktoré bolo v CSS deklarované ako posledné.

Použitie

Základný príklad

Tu je jednoduchý príklad štýlu webového článku, ktorý zahŕňa základné techniky CSS pre čitateľnosť. Táto verzia zjednodušuje CSS, aby sa zameriavala na základné štýly.

Externé CSS (style.css)

body {
font-family: Arial, sans-serif;
margin: 20px;
}

article {
max-width: 600px;
margin: auto;
background-color: #f9f9f9;
padding: 15px;
}

h1 {
color: #333;
}

p {
margin-bottom: 10px;
}

Štruktúra HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Jednoduchý príklad článku CSS</title>
</head>
<body>
<article>
<h1>Nadpis článku</h1>
<p>Tento odsek uvádza tému článku. Je navrhnutý tak, aby zaujal čitateľa a poskytol stručný prehľad nasledujúceho obsahu. </p>
<p>Ďalšie informácie sú uvedené tu, aby sa téma ďalej prehĺbila, ponúkli sa postrehy a rozšíril sa počiatočný prehľad.
</article>
</body>
</html>

Tento základný príklad sa zameriava na kľúčové aspekty štýlu webových článkov, vrátane výberu písma a okrajov. CSS a HTML sú zjednodušené, aby ilustrovali priamy prístup k vytvoreniu esteticky príjemného a prístupného rozloženia článku.

Zložitý príklad

Na základe základných príkladov vytvoríme zložitejší scenár štýlu článku pomocou externého CSS. Tento príklad bude zahŕňať použitie selektorov CSS, pseudotried a mediálnych dotazov na zlepšenie čitateľnosti a vizuálnej atraktívnosti webového článku, čím sa demonštruje sofistikovanejšie použitie CSS.

Externé CSS (style.css)

/* Základné štýly */
body {
font-family: ‚Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 20px;
}

article {
max-width: 800px;
margin: auto;
background-color: #f4f4f4;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h1, h2 {
color: #333;
}

p {
margin: 10px 0;
}

/* Štýly odkazov */
a {
farba: tmavomodrá;
ozdoba textu: žiadna;
}

a:hover {
ozdoba textu: podčiarknutie;
}

/* Štýl navigácie */
nav {
margin-bottom: 20px;
pozadie: #333;
farba: #fff;
padding: 10px;
border-radius: 5px;
}

nav a {
color: #fff;
margin: 0 10px;
}

/* Využitie pseudotried pre interaktívne prvky */
button {
background-color: darkblue;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: navy;
}

/* Mediálna požiadavka pre responzívny dizajn */
@media (max-width: 600px) {
article {
margin: 10px;
padding: 10px;
}

nav {
text-align: center;
}

nav a {
display: block;
margin: 5px 0;
}
}

Štruktúra HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Komplexný príklad CSS</title>
</head>
<body>
<nav>
<a href=""#>Domov</a>
<a href=""#>O nás</a>
<a href=""#>Kontakt</a>
</nav>
<article>
<h1>Hlavný nadpis článku</h1>
<p>Tento odsek slúži ako úvod k článku. Vytvára priestor pre podrobnú diskusiu, ktorá nasleduje.
<h2>Nadpis podsekcie</h2>
<p>Tu sú podrobnejšie informácie, ktoré rozširujú úvod a zaoberajú sa konkrétnymi detailmi.
<button>Kliknite na mňa</button>
<p>Ďalšie informácie nájdete na <a href=""#>tomto odkaze</a>.
</article>
</body>
</html>

V tomto príklade rôzne techniky CSS vylepšujú dizajn webového článku. Základné štýly zlepšujú čitateľnosť, zatiaľ čo efekty pri prechádzaní kurzorom optimalizujú navigáciu a odkazy pre interakciu používateľov. Tlačidlá sú interaktívnejšie vďaka zmene farby pri prechádzaní kurzorom. Mediálny dotaz vylepšuje odozvu na menších obrazovkách a prispôsobuje prvky rozloženia.

Záver

Zhrnutie: Tento úvod do CSS zdôrazňuje jeho zásadnú úlohu pri zlepšovaní vizuálnej atraktívnosti a funkčnosti webových aplikácií. Vývoj CSS rozšíril jeho možnosti a umožnil vytváranie sofistikovaných dizajnov, ako dokazujú hry vyvinuté výlučne pomocou CSS a HTML. Článok sa venoval syntaxe CSS, metódam aplikácie a základným pojmom, ako sú selektory, dedičnosť a špecifickosť.

Na príkladoch demonštroval, ako CSS umožňuje presné ovládanie štýlu, od priameho uplatňovania štýlov v rámci HTML prvkov až po využitie externých štýlových šablón pre konzistentný dizajn na všetkých webových stránkach. Pochopenie týchto princípov je kľúčové pre vývoj esteticky príťažlivých a užívateľsky prívetivých rozhraní. Pre tých, ktorí chcú rozšíriť svoje znalosti CSS, sú online k dispozícii ďalšie zdroje a podrobné návody, napríklad na [w3schools.com] (https://www.w3schools.com/css/default.asp).