Úvod do CSS kaskádových štýlov

Dominik Šelmeci 27.01.2016

Tento článok je pokračovaním článku Základy HTML v kocke.

Čo je CSS a načo slúži

CSS je skratka pre Cascading Style Sheets, čo voľne môžeme preložiť ako kaskádové štýly. Ako názov sám napovedá, CSS nám slúži na zmenu vzhľadu jednotlivých HTML značiek. Samotné HTML značky, majú na začiatku predvolené CSS štýly dané prehliadačom. 

CSS štýl konkrétneho elementu si môžeme prezrieť v developerskom panely na pravej strane. Postup je nasledovný:

Spôsoby vkladania CSS do stránky

Oddelený (externý) súbor CSS

Je doporučený, lebo takto máte pekne samostatne oddelený HTML kód a súbor štýlov. Vytvorte si v rovnakom priečinku, ako máte CSS súbor napr. style.css. ".css" označuje, že ide o súbor CSS štýlov. Následne napíšete do hlavičky <head></head>:

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

 

Vnútorne napísané CSS

Tento typ vkladania sme si ukázali v článku Poďme spolu tvoriť web. Kdekoľvek do head stačí pridať nasledovné značenie:

<style>
	body {
		color: green;
	}
	/* ...ďalšie štýly... */
</style>

 

Inline štýly

Sú CSS štýly, ktoré priamo píšeme do HTML značky. Napríklad:

<p style="color:red; font-weight:bold;">Tento text sa zobrazí červený a tučný.</p>
<div style="width:300px; height:150px; background: #65A6F7;">Som modrá kocka s rozmermi 100x50 px</div>

Tento text sa zobrazí červený a tučný.

Som modrá kocka s rozmermi 300x150 px

 

Odkiaľ sa aplikuje CSS (pôsobisko)

CSS sa začne aplikovať vždy od miesta definície. V prípade inline štýlov sa aplikuje na samotnú značku a na všetky značky, ktoré obsahuje. 

<p class="red-color">Tento text nebude červený</p>
<style>
	.red-color {
		color: red;
	}
</style>
<p class="red-color">Tento už áno :).</p>

Tento text nebude červený

Tento už áno :).

 

Pravidlá CSS

Označenie HTML značky

Základné značenie je:

nazov_znacky { /* pravidlá (deklarácie) */ }

CSS pravidlá sú páry "názov: hodnota", základná syntax vyzerá nasledovne:

nazov_znacky {
      nazov_atributu_1: hodnota_1;
      nazov_atributu_2: hodnota_2;
}

 

Rodič => nasledovník

Častokrát chceme upraviť napríklad iba položky v menu, vtedy píšeme postupnosť značení oddelených medzerou (od najvyššieho rodiča po najnižšieho potomka):

<style>
	/* 	označ modrou iba tie odkazy, ktoré sa nachádzajú v značke nav 
		Dôležité: <a> nemusí byť priamym potomkom! */
	nav a {
		color: blue;
	}
</style>
<nav>
	<a href="#">Odkaz 1</a>
	<a href="#">Odkaz 2</a>
	<a href="#">Odkaz 3</a>
</nav>
<nav>
	<div>
		<a href="#">Aj tento odkaz bude modrý</a>
	</div>
</nav>

 

Triedy

Ľubovoľnej HTML značke môžeme priradiť jednu alebo viacero tried. Trieda je označenie, ktoré môžeme použiť pri definícií CSS štýlu. Trieda je atribút HTML značky. Príklad:

<style>
	.lubovolny_nazov_triedy { /* pravidlá (deklarácie) */ }
</style>
<p class="lubovolny_nazov_triedy"></p>
<a class="lubovolny_nazov_triedy"></a>

 

ID

Je atribút HTML značky, ktorý sa môže nachádzať iba na jednej jedinej HTML značke.

<style>
	#unikatny_nazov { /* pravidlá (deklarácie) */ }
</style>
<p id="unikatny_nazov"></p>

 

Prepísanie predchádzajúcich štýlov

Ako som na začiatku uviedol, štýly sa začínajú uplatňovať od miesta, kde sú deklarované. Príklad:

<style>
	.super_farba_pozadia { background: lightblue; }
</style>
<p class="super_farba_pozadia">Tento text má svetlo modré pozadie.</p>
<style>
	.super_farba_pozadia { background: lightgreen; }
</style>
<p class="super_farba_pozadia">Tento text má svetlo zelené pozadie.</p>

Triede 'super_farba_pozadia' sme prepísali atribút background (pozadie).

 

Hodnotenie štýlov

Už sme zistili, že štýly sa môžu prepisovať. V CSS štýloch existuje hierarchia, čo sa skôr uplatní a čo prebije iný štýl. Základ je nasledovný (prvý prebije všetky ostatné deklarácie):

inline štýl  >  id  >  class  >  HTML značka

 

Štýlovanie textu

Na príklade si ukážeme, čo všetko sa dá nastaviť na písme:

<style>
	.moj_styl_pisma {
		/* typ písma */
		font-family: "Trebuchet MS", Helvetica, sans-serif;

		/* veľkosť písma */
		font-size: 18px;

		/* hrúbka písma normal/bold/bolder */
		font-weight: bold;

		/* kurzíva normal/italic */
		font-style: italic;

		/* dekorácia s pomocou čiary underline/line-through/none */
		text-decoration: underline;

		/* farba písma, môže byť názov, alebo hexadecimálny kód */
		color: blue;

		/* zarovnanie textu left/right/center */
		text-align: center;
	}
</style>
<p class="moj_styl_pisma">Toto je náš upravený text s CSS vlastnosťami.</p>

Toto je náš upravený text s CSS vlastnosťami.

Ak by ste chceli použiť iný typ písma, tak sú doporučené tzv. bezpečné typy. Tie budú fungovať dobre na každom počítači alebo mobilnom zariadení. Ak chcete použiť iné písmo, ozdobné, alebo vlastné, musíte ho do HTML stránky vložiť. Môžete si zvoliť z typov písmien napríklad na stránke Google Fonts. Príkladne sme si to ukázali v článku Poďme spolu tvoriť web.

 

Okraje značky - Box model

Keď chceme pridať nejakému elementu priestor/odsadenie zľava, sprava, zvrchu alebo zospodu, používame na to okraje. Najlepšie tomu môžeme porozumieť na obrázku (nazýva sa aj box model):

Obsah (width, height)

Najvnútornejšie sa nachádza náš obsah, napríklad text v bloku. Tomuto bloku môžeme určiť šírku a výšku. Pre jednoduché znázornenie budem používať inline štýly. 

<div style="width: 300px; height: 150px; background: lightblue;">
	Text nachádzajúci sa v bloku veľkosti 300 x 150 px.
</div>
Text nachádzajúci sa v bloku veľkosti 300 x 150 px.

Použil som označenie px - pixely, ale môžeme použiť aj iné napríklad %.

Vnútorný okraj

Vnútorný okraj rozširuje veľkosť samotnej značky.

 <div style="width: 300px; height: 150px; padding: 15px; background: lightblue;">Text nachádzajúci sa v bloku veľkosti 300 x 150 px.</div>
Text nachádzajúci sa v bloku veľkosti 300 x 150 px s vnútorným okrajom 15 px.

 

Vonkajší okraj

Vonkajší okraj používame ak chceme posunúť nejaké elementy od seba.

<div style="width: 300px; height: 150px; padding: 15px; margin:20px; background: lightblue;">Text nachádzajúci sa v bloku veľkosti 300 x 150 px s vnútorným okrajom 15px a vonkajším 20px.</div>
<div style="width: 300px; height: 150px; padding: 15px; margin:20px; background: lightblue;">Rovnaký blok ako predchádzajúci.</div>
Text nachádzajúci sa v bloku veľkosti 300 x 150 px s vnútorným okrajom 15px a vonkajším 20px.
Rovnaký blok ako predchádzajúci.

Zámerne som ukázal dva bloky po sebe s rovnakým okrajom. Niekto by si mohol myslieť, že oba bloky by mali byť od seba 40 px. Vonakšie okraje sa nespočítavajú. 

Orámovanie

Orámovanie má nasledovnú syntax:
border: [hrúbka čiary] [typ čiary] [farba čiary];

<div style="width: 300px; height: 150px; padding: 15px; margin:20px; background: lightblue; border: 2px solid red;">Text nachádzajúci sa v bloku veľkosti 300 x 150 px.</div>
Text nachádzajúci sa v bloku veľkosti 300 x 150 px s červeným orámovaním s veľkosťou 2px.

Pravidlá písania pre margin a padding

Vonkajší a vnútorný okraj môžeme zadať viacerými spôsobmi. Ak zadávame veľkosti iba v jednom riadku máme nasledovné možnosti:

  • margin (padding): [veľkosť]; - šírka, výška, vrch aj spodok budú mať rovnakú veľkosť
  • margin (padding): [veľkosť_1] [veľkosť_2]; - 1 vrchný/spodný, 2 ľavý/pravý okraj
  • margin (padding): [veľkosť_1] [veľkosť_2] [veľkosť_3]; - 1 vrchný, 2 ľavý/pravý, 3 spodný okraj
  • margin (padding): [veľkosť_1] [veľkosť_2] [veľkosť_3] [veľkosť_4]; - 1 vrchný, 2 pravý, 3 spodný, 4 ľavý okraj

Môžeme zadávať veľkosti aj konkrétnej strany v jednom riadku (platí rovnako pre padding):

  • margin-top: 5px;
  • margin-bottom: 5px;
  • margin-left: 5px;
  • margin-right: 5px;

Bonus - zmena prvku po prejdení myšou

Ukážem vám ešte jeden malý bonus. Ak chcete zmeniť nejaký prvok po prejdení myšou, môžete na to použiť tzv. pseudo triedu. Pseudo trieda je označenie v CSS, ktoré má nasledovnú syntax: moja_znacka:pseudo_trieda { /* deklarácie */ }. Pre zvýraznenie napríklad tlačítka použijeme pseudo triedu :hover.

<style>
	.zvyraznenie_tlacitka {
		display: inline-block;
		padding: 5px 10px;
		background: lightblue;
		border: 2px solid blue;
	}
	.zvyraznenie_tlacitka:hover {
		background: blue;
		border-color: darkblue;
		color: white;
	}
</style>
<div class="zvyraznenie_tlacitka">Moje tlačidlo</div>
Moje tlačidlo