Tvorba web stránok - pre začiatočníkov - CSS

Autor: Anton Šutiak | 12.8.2016 o 11:51 | (upravené 12.8.2016 o 14:28) Karma článku: 1,55 | Prečítané:  182x

CSS alebo teda kaskádové štýly dokumentov sa postarajú o to, aby tvoja web stránka vyzerala tak, ako si predstavuješ. Aby rozloženie stránky bolo tak, ako si želáš. V tomto tutoriály ti vysvetlím základné prvky jazyka CSS.

V HTML môžeš meniť pomocou atribútov niektoré vlastnosti tagov.

Napr. pri tagu h1 môžeš použiť atribút align na zarovnanie:
<h1 align="center">testovacia veta</h1>

Tento atribút podľa štandardu HTML5 už ani neni podporovaný. Síce ti stále pôjde, ale validátor by ti vyhodil chybu. Nemusíš sa teraz tým až tak zaoberať, ale zapamätaj si, že je dobré, držať sa čo najviac štandardov kôli kompatibilite s rôznymi prehliadačmi ako Opera, Firefox, Chrome, IE, Safari,...

Tu nastáva otázka: Keď nemôžem použiť atribút v HTML tak ako to urobiť, aby môj tag bol taký ako si predstavujem?

Odpoveď je: CSS :)

Kedysi web primárne slúžil na zdieľanie informácii medzi vedcami a nie na to, aby bol pekný, vyčačkaný. Lenže dnes sú užívatelia omnoho náročnejší. Zober si to tak, že h1 tag má určitú veľkosť, určité rozloženie písmen(medziznakové medzery), riadkovanie a podobne. Hovorí sa tomu default-né alebo teda predvolené zobrazenie a jediný atribút, ktorý môžeš použiť je spomenutý "align".

Z tohoto vyplýva, že s HTML-kom si navrhneš nejakú šablónu, štruktúru web stránky a CSS-kom tomu dáš "chuť": Farbu, rozloženie, umiestnenie, odsadenie, proste celkový vzhľad.

Otvor si stránku www.jsfiddle.net

Do HTML okna zapíš:
<h1>testovacia veta</h1>

Do CSS okna zapíš:
h1{
 color: red;
}

Potvrď "RUN" tlačidlom a mal by sa ti zobraziť nadpis s červeným písmom.

Vidíš, že syntax(zápis) jazyka CSS je iný ako pri HTML.

Tak ako aj v HTML, tak aj v CSS sa ignorujú medzery a zápis môže byť aj na jednom riadku takto, ale horný príklad je prehľadnejší:

selector - je to čo ideme štýlovať. Je tu viacero spôsobov a postupne si ich prejdeme. Zatiaľ sme štýlovali pomocou názvu tagu (h1). V tomto prípade všetky h1tagy budú červenou farbou.

Do kučeravých zátvoriek sa dáva deklarácia, teda rôzne properties(vlastnosti), potom nasleduje dvojbodka a za ňou value(hodnota property). Ukončenie je bodkočiarkou. Za bodkočiarkou môže následovať ďalšia property. Tie 3 bodky som v obrázku dal kôli tomu, že môžu nasledovať ďalšie a ďalšie properties. Ty ich tam nedávaj, je to len ilustrácia.

Spôsobov štýlovanie v CSS je viac. V prvom príklade sme štýlovali, ako som už povedal, podľa názvu tagu:

h1... }

Ďalší spôsob, ako môžeš štýlovať tagy, je pomocu tzv. class/y(triedy) alebo id-čka(identifikátora).

Do HTML vlož následovný kód:
<p>prvý odstavec</p>
<p id="mojeIdcko1class="cervenaFarba zltePozadie">druhýodstavec</p>
<p id="mojeIdcko2class="cervenaFarba">tretí odstavec</p>

Do CSS vlož následovný kód:
p{
  text-align: center;
  color: white;
  background-color: blue;
}

#mojeIdcko1{
  text-align: right;
}

.cervenaFarba{
  color: red;
}

.zltePozadie{
  background-color: yellow;
}

Výsledkom budú 2 odstavce s rôznymi CSS vlastnosťami:

1. štýlovanie podľa tagu p { ... } spôsobilo, že všetkým tagom p sme nastavili zarovnanie na stred(text-align). Dali sme im bielu farbu písma(color) a farbu pozadia sme dali na modrú(background-color). Toto sa aplikovalo na všetky 3 odstavce.

2. druhému odstavcu sme dali HTML atribúty id aj class. A vidíš, že id má vždy len jednu hodnotu(a musí byť unikátna! teda nemôže byť pri inom tagu rovnaká a preto pri treťom odstavci je hodnota: mojeIdcko2). V class-e, môžu byť aj viaceré hodnoty oddelené medzerou a môžu sa opakovať -> jednu z class(cervenaFarba) sme dali aj tretiemu odstavcu.
V CSS sa štýluje pomocou id-čka tak, že dáš pred názov id-čka mriežku(anglický hash #).
Štýlovanie class-y je zase pomocu bodky(.)
Id-čko má väčiu váhu, teda sa uplania/prepíšu vlastnosti definované štýlovaním za pomoci názvu tagu alebo class-y. Class-a má väčšiu hodnotu ako štýlovanie pomocou názvu tagu, ale nie väčšiu ako pomocou id-čka. Toto príde praxou, keď zistíš, že potrebuješ niečo nastaviť spoločne pre všetky tagy v celom dokumente a iba niektoré vlastnosti pomocou class-y alebo id-čka prepísať u konkrétnych tagov.

3. tretiemu odstavcu sme dali síce unikátne id-čko(mojeIdcko2), ale v CSS sme ho neštýlovali. Totiž, idčkami si môžeš označiť dôležité časti stránky aj bez štýlov. To isté plati aj u class, ale id je práve identifikátor, ktorý by mal identifikovať danú časť stránky. Použili sme na tomto odstavci aj jednu z class (cervenaFarba). Takže vidíš, že si môžeš preddefinovať viaceré classy, ktoré potom môžeš použiť u viacerých tagov spoločne. Id-čka sa väčšinou dávajú k hlavným častiam stránky ako napr.: hlavička, navigačné menu, ľavý blok, hlavná časť stránky, footer/pätička a podobne. Môžeš používať oba ako vidíš v príklade a praxou zistíš neskôr, ktorý spôsob použiť, či štýlovať pomocou id alebo classy alebo názvu tagu pre všetky tagy spoločne.

POZOR CSS JE OPROTI HTML CASE SENSITIVE, ČO ZNAMENÁ, ŽE ZÁLEŽÍ NA VEĽKOSTI PÍSMEN !!! #mojeIdcko1 nie je to iste ako #MOJEIDCKO1

Štýlovať môžeš aj viaceré tagy naraz tak, že ich oddelíš čiarkou:
p, h1, h4{
  text-aligncenter;
}

Môžeš štýlovať naraz tagy spolu s classmi, či id-čkami:
p, .cervenaFarba, #mojeIdcko1{
  text-aligncenter;
}

CSS je o dosť komplikovanejšie ako HTML. HTML je pomerne jednoducho zvládnuteľné, pretože ním vytváraš len štruktúru, ale to ako bude vyzerať táto štruktúra, má na starosti CSS.

Pozri si súpis vlastností na mojej stránke: http://www.akonaweb.sk/css-vlastnosti
Sú tam príklady použitia, aby si vedeľ čo znamenajú.

Keď v HTML vnáraš viaceré tagy do seba a štýluješ vonkajší tag teda predka,rodiča(parent), tak potom sa ti môžu aplikovať vlastnosť aj na vnútorný tag - potomka(child). V CSS existuje tzv. dedičnosť a funguje rovnako ako aj u ľudí. Niektorý tag(child) podedí vlastnosti jeho predka(parent) takto:
<u>
  <strong>prvý odstavec</strong>
</u>

u{
  colorred;
}

V tomto príklade sme nedali červenú farbu písma tagu <strong>, ale dali sme ju rodičovi <u>; a tým pádom <strong> túto vlastnosť podedil.

Kebyže použiješ pri tagu <u> takúto CSS vlastnosť font-weight: normal; tak sa u <strong>neprejaví, pretože <strong> má default-ne: font-weight: bold;
u{
  font-weightnormal;
}

V CSS existujú ďalej tzv. pseudoclassy, podrobnejšie štýlovanie vzhľadom na dedičnosť, ale to sú témy, ktoré vysvetlím neskôr na praktických príkladoch, lebo by ťa mohli odradiť a to nechceme ;). Nezabúdaj na to, že to nie je zložité, je len toho veľa a nedá sa to zvládnuť za jednu hodinu.

Podstatné je, že si to musíš testovať. Musíš si naozaj otvoriť stránku jsfiddle.net a skúšaj si jednotlivé vlastnosti ako sa správajú.

Nie každá CSS vlastnosť ti pôjde u každého tagu. Zober si napr. taký enter/odriadkovanie <br> a išiel by si mu nastavovať napr. farbu textu, keď tam text nie je. Nezhučalo by ti to, ale nič by sa neudialo.

V CSS sú najzložitejšie tieto témy:

  1. Boxing model - vytváranie layout/u stránky - pading, margin, border a centrovanie obsahu
  2. Floating - obtekanie jednotlivých elementov
  3. Pozíciovanie - static, absolute, relative, fixed
  4. Dedičnosť a prepisovanie jednotlivých vlastností vzhľadom na predka a override(prepis) predvolených(defaulných) vlastností html tagov
  5. Responzívny design

Na tieto témy nájdeš články na mojej stránke v sekcií BLOG(tu odporúčam pozrieť články od konca blogu): http://www.akonaweb.sk/blog
A tiež zadarmo video tutoriály, ktoré sú na titulnej stránke: http://www.akonaweb.sk, či vo VIDEO sekcií tu: http://www.akonaweb.sk/videa

HAPPY CODING ;)

Páčil sa Vám tento článok? Pridajte si blogera medzi obľúbených a my Vám pošleme email keď napíše ďalší článok
Pridaj k obľúbeným

Hlavné správy

KOMENTÁRE

S kým sa križuje Robert Kaliňák?

Všade inde by už demisia ministra vnútra bola aj zabudnutá a nástupca dávno v úrade.


Už ste čítali?