7. diel - Základné CSS selektory a vlastnosti

V minulej lekcii, Úvod do CSS (kaskádových štýlov) , sme si ukázali, na čo CSS slúžia a ako vyzerá stránka, ktorá ho používa. Dnes si v CSS tutoriálu podrobne popíšeme, ako sa cez CSS štýlom webové stránky.

Stylovať samozrejme budeme náš rozpracovaný web. Otvoríme si PSPad a vytvorme v ňom nový súbor, ako typ súboru vyberme Cascading Style Sheet.

CSS je rovnako ako HTML iba textový súbor.

Selektory

CSS je založené na tzv. Selektor. Ako už z názvu vyplýva, selektory umožňujú označiť (select = označiť) prvky na stránke podľa určitých kritérií a potom tieto prvky ostylovat. CSS dokument nemá na rozdiel od HTML žiadnu hlavičku a okrem selektorov doň už nie je potreba písať čokoľvek navyše.

Typový selektor

Úplne najjednoduchšie je tzv. Typový selektor, ktorý na stránke jednoducho vyberie všetky elementy daného typu. Ak budeme chcieť napr. Označiť všetky nadpisy h1 na stránke, kód bude vyzerať nasledovne:

h1 {
}

Štýlom teda elementy určitého typu, tu h1. Za selektorom nasleduje blok zo zložených zátvoriek, do ktorého sa píšu vlastnosti, podľa ktorých sa majú elementy stylovať.

Text-align

Uveďme si prvé CSS vlastnosť, bude jej text-align. Vlastnosti vkladáme do zložených zátvoriek selektora. Za menom vlastnosti nasleduje dvojbodka a jej hodnota, potom nasleduje bodkočiarka. Skúsme si text v nadpisoch h1 na stránke vycentrovať. CSS kód by vyzeral takto:

h1 {
    text-align: center;
}

Hneď si to vyskúšame na našej HTML stránke. Do nového CSS súboru vložte kód vyššie a uložte ho ako styl.css do zložky s vašou stránkou.

Teraz musíme stránku na tento CSS štýl napojiť. Otvoríme si index.html a do hlavičky (

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

Teraz sa bude táto stránka stylovať podľa toho, čo napíšeme do CSS. Mali by ste dostať takýto výsledok:

Nadpis prvej úrovne má vycentrovaný text. Ak by sme chceli to isté aj pre nadpis druhej úrovne, nemusíme kód znova opisovať, stačí len pripísať selektor aj na nadpis h2. Selektory oddeľujeme čiarkou:

h1, h2 {
 text-align: center;
}

výsledok:

Už teda vieme centrovať text. Centrovanie samozrejme nefunguje len pre nadpisy, ale úplne rovnako funguje pre odseky, bunky tabuľky a ďalšie elementy. Väčšina CSS vlastností nie je viazaná na konkrétny typ elementu.

Do vlastnosti text-align môžeme uviesť tieto hodnoty:

• left - Zarovná text naľavo.
• right - Zarovná text napravo.
• centier - Zarovná text na stred.
• justify - Zarovná text do bloku.

Posledný hodnotu justify je vhodné používať iba v prípade, že je element s textom dostatočne široký (aspoň okolo 800px), inak dochádza k vzniku neúhledných medzier, ktorým sa hovorí v typografii rieky. V tlači sa toto rieši rozdeľovaním slov, prehliadač za nás slová v texte bohužiaľ jednoducho nerozdelí.

Color

Ukážme si, akým spôsobom by sme zmenili farbu textu. Slúži na to CSS vlastnosť color. Hodnotu farby môžeme zadať niekoľkými spôsobmi.

Prvým spôsobom je použitie farebné konštanty. Máme ich k dispozícii 16, sú to: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white a yellow. Bohužiaľ sa jedná o farby veľmi škaredé a okrem čiernej a bielej je nemá zmysel používať. CSS ponúka mnoho ďalších farebných konštánt (mien farieb), ktoré však bohužiaľ nie sú validné a preto by sa nemali používať.

Častejším spôsobom je zadať farbu ako RGB. Určite viete, že v počítači má každá farba 3 zložky: červenú, zelenú a modrú. Zadaním týchto 3 zložiek namiešame úplne ľubovoľnú farbu.

Povedzme, že budeme chcieť zadať modrú farbu. Prvou možnosťou je použiť konštantu "blue":

color: blue;

Môžete si skúsiť nastavenie farby pridať medzi vlastnosti v jazde v nadpisy h1 a h2. Štýl bude teraz vyzerať takto:

h1, h2 {
    text-align: center;
    color: blue;
}

Ak je vlastnosťou v selektora viac, jednoducho je píšeme na samostatné riadky. Štýl si uložte a obnovte stránku, mali by ste vidieť niečo podobné:

Pretože často budeme chcieť iný odtieň, než je oných škaredých 16 predvolených farieb, ukážme si zadanie tej istej modrej cez funkciu RGB:

color: rgb(0, 0, 255);

Prvá nula označuje, že červená zložka má hodnotu 0, druhá, že zelená zložka má hodnotu 0, posledný, že modrá zložka má maximálnu hodnotu. Tou je 255.

Celý zápis možno ešte zjednodušiť pomocou šestnástkové sústavy. Modrú farbu by sme zapísali takto:

color: #0000FF;

Zápis farby v šestnástkovej sústave začína mriežkou, ďalej nasleduje dvojica čísel pre každú zo zložiek RGB (2 pre červenú, 2 pre zelenú a 2 pre modrú). Maximálna hodnota je tu FF. Môžete si vyskúšať, že obaja zápisy vám nadpis zafarbia na tú istú farbu, ako pôvodné konštanta blue.

Najpoužívanejší je posledný typ zápisu, teda ten cez šestnástkovom sústavu, pretože je najkratšia. Hoci hodnota je zle čitateľná pre ľudí, každý lepší grafický editor (napr. Gimp alebo Photoshop) vám u farby ukáže jej HTML zápis. Pre výber farieb môžete použiť aj náš online nástroj Colorpicker, kde jednoducho vyberiete farbu a aplikácia vám vypíše jej HTML notáciu.

Poďme našim nadpisom nastaviť taký odtieň modrej, aby stránka nevyzerala ako papagáj.

h1, h2 {
    text-align: center;
    color: #0a294b;
}

Je to taká tmavo modrá, ale stále nie čierna, vyzerá celkom príjemne:

To je pre dnešok všetko. V budúcej lekcii, Triedne selektor a štýlovanie textu v CSS , budeme sa stylovaním pokračovať a ešte dlho s ním neprestaneme Kód k dnešnej lekcii je opäť k stiahnutiu v prílohe.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.