Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 7 - Základní CSS selektory a vlastnosti

V minulé lekci, Úvod do CSS (kaskádových stylů), jsme si ukázali, k čemu CSS slouží a jak vypadá stránka, která jej používá.

Dnes si v CSS tutoriálu podrobně popíšeme, jak se přes CSS stylují webové stránky.

Stylovat samozřejmě budeme náš rozpracovaný web. Otevřeme si VS Code a vytvoříme v něm nový soubor, jako typ souboru vybereme Cascading Style Sheet (CSS):

CSS je stejně jako HTML pouze textový soubor.

Selektory

CSS je založeno na tzv. selektorech. Jak již z názvu vyplývá, selektory umožňují označit (select - označit) prvky na stránce podle určitých kritérií a potom tyto prvky ostylovat. CSS dokument nemá na rozdíl od HTML žádnou hlavičku a kromě selektorů do něj již není potřeba psát cokoli navíc.

Typový selektor

Úplně nejjednodušší je tzv. typový selektor, který na stránce jednoduše vybere všechny elementy daného typu. Budeme-li chtít např. označit všechny nadpisy h1 na stránce, kód bude vypadat následovně:

h1 {
}

Stylujeme tedy elementy určitého typu, zde h1. Za selektorem následuje blok ze složených závorek, do kterého se píší vlastnosti, podle kterých se mají elementy stylovat.

text-align

Uveďme si první CSS vlastnost, bude jí text-align. Tato vlastnost znamená v překladu zarovnání textu, přesnější je však zarovnání obsahu (můžeme jí zarovnat i např. obrázky). Vlastnosti vkládáme do složených závorek selektoru. Za jménem vlastnosti následuje dvojtečka a její hodnota, poté následuje středník. Zkusme si text v nadpisech h1 na stránce vycentrovat. CSS kód by vypadal takto:

h1 {
    text-align: center;
}

Hned si to vyzkoušíme na naší HTML stránce. Do nového CSS souboru vložíme kód výše a uložíme si jej jako styl.css do složky s naší HTML stránkou.

Nyní musíme HTML stránku na tento CSS styl napojit. Otevřeme si index.html a do hlavičky (<head>) přidáme následující řádek:

<link rel="stylesheet" href="styl.css" type="text/css" />
  • <link /> je nepárový tag k určení vztahu mezi dvěma dokumenty. Nejčastěji se používá právě pro připojení CSS dokumentu, nebo k přidání ikony k naší stránce (přidání ikony si ukážeme později).
  • rel je atribut, který definuje vztah (relationship) mezi HTML dokumentem a připojeným dokumentem, kde stylesheet je v překladu všeříkající "šablona stylů".
  • href je zkratka pro hypertextový odkaz (Hypertext REFerence), do které vkládáme cestu k připojovanému souboru.
  • type určuje typ dokumentu, který připojujeme. Zde říká, že obsah připojovaného dokumentu je typu CSS.

Nyní se bude tato stránka stylovat podle toho, co napíšeme do CSS. Měli bychom vidět takovýto výsledek:

Moje první webová stránka
index.html
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Nadpis první úrovně má vycentrovaný text. Pokud bychom chtěli to samé i pro nadpis druhé úrovně, nemusíme kód znovu opisovat, stačí jen připsat selektor i pro nadpis h2. Jednotlivé selektory oddělujeme čárkou:

h1, h2 {
    text-align: center;
}

Takový zápis je ekvivalentní tomuto zápisu:

h1 {
    text-align: center;
}

h2 {
    text-align: center;
}

Jak ale můžeme vidět, tento druhý zápis je poněkud objemný a především v něm dochází k duplicitě kódu, čemuž se obecně snažíme vyhýbat, pokud je to možné. Proto ve chvíli, kdy chceme skupině elementů nastavit totožné vlastnosti, raději upřednostníme první způsob a zkombinujeme více selektorů v jeden.

Výsledek:

Moje první webová stránka
index.html

Již tedy umíme centrovat text. Centrování samozřejmě nefunguje jen pro nadpisy, ale úplně stejně funguje pro odstavce, buňky tabulky a další elementy. Většina CSS vlastností není vázána na konkrétní typ elementu.

Hodnoty vlastnosti text-align

Do vlastnosti text-align můžeme uvést tyto hodnoty:

  • left - Zarovná text nalevo.
  • right - Zarovná text napravo.
  • center - Zarovná text na střed.
  • justify - Zarovná text do bloku.

Poslední hodnotu justify je vhodné používat pouze v případě, že je element s textem dostatečně široký (alespoň kolem 800px), jinak dochází ke vzniku neúhledných mezer, kterým se říká v typografii řeky. V tisku se toto řeší rozdělováním slov, prohlížeč bohužel za nás slova v textu jednoduše nerozdělí.

color

Ukažme si, jakým způsobem bychom změnili barvu textu. Slouží k tomu CSS vlastnost color. Hodnotu barvy můžeme zadat několika způsoby.

Prvním způsobem je použití barevné konstanty. Máme jich k dispozici 16, jsou to: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white a yellow. Bohužel se jedná o barvy velmi ošklivé a kromě černé a bílé je nemá smysl používat. CSS nabízí mnoho dalších barevných konstant (jmen barev), které však bohužel nejsou validní a proto by se neměly používat.

Častějším způsobem je zadat barvu jako RGB (Red, Green, Blue). Určitě víte, že v počítači má každá barva 3 složky: červenou, zelenou a modrou. Zadáním těchto 3 složek namícháme naprosto libovolnou barvu.

Řekněme, že budeme chtít zadat modrou barvu. První možností je použít konstantu blue:

color: blue;

Můžeme si zkusit nastavení barvy přidat mezi vlastnosti v selektoru pro nadpisy h1 a h2. Styl bude nyní vypadat takto:

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

Pokud je vlastností v selektoru více, jednoduše je píšeme na samostatné řádky. Styl si uložme a obnovme stránku, měli byste vidět něco podobného:

Moje první webová stránka
index.html

Protože často budeme chtít jiný odstín, než je oněch ošklivých 16 výchozích barev, ukážeme si zadání té samé modré přes funkci RGB:

color: rgb(0, 0, 255);

První nula označuje, že červená složka má hodnotu 0, druhá, že zelená složka má hodnotu 0, poslední, že modrá složka má maximální hodnotu. Tou je 255.

Celý zápis lze ještě zjednodušit pomocí šestnáctkové soustavy. Modrou barvu bychom zapsali takto:

color: #0000FF;

Zápis barvy v šestnáctkové soustavě začíná mřížkou, dále následuje dvojice čísel pro každou ze složek RGB (2 pro červenou, 2 pro zelenou a 2 pro modrou). Maximální hodnota je zde FF. Můžeme si vyzkoušet, že oba zápisy vám nadpis obarví na tu samou barvu, jako původní konstanta blue.

Nejpoužívanější je poslední typ zápisu, tedy ten přes šestnáctkovou soustavu, protože je nejkratší. Ačkoli hodnota je špatně čitelná pro lidi, každý lepší grafický editor (např. Gimp nebo Photoshop) vám u barvy ukáže její HTML zápis. Pro výběr barev můžete použít i náš online nástroj Colorpicker, kde jednoduše vyberete barvu a aplikace vám vypíše její HTML notaci.

Pojďme našim nadpisům nastavit takový odstín modré, aby stránka nevypadala jako papoušek:

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

Je to taková tmavě modrá, ale stále ne černá, vypadá docela příjemně:

Moje první webová stránka
index.html

To je pro dnešek vše. Kód k dnešní lekci je opět ke stažení v příloze.

V příští lekci, Třídní selektor a stylování textu v CSS, si ukážeme základy stylování textu :)


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 2921x (2.13 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Úvod do CSS (kaskádových stylů)
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Třídní selektor a stylování textu v CSS
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
494 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (87)

Avatar
Robin Štafl
Člen
Avatar
Robin Štafl:23.11.2021 15:39

Poslední hodnotu justify je vhodné používat pouze v případě, že je element s textem dostatečně široký (alespoň kolem 800px).
Prosim o prakticke vysvětlení. Co se mysli "elementem"? Dekuji

 
Odpovědět
23.11.2021 15:39
Avatar
Werner Yuyong:25. února 23:38

Dobry clanek. Diky.

 
Odpovědět
25. února 23:38
Avatar
Nat Owen
Člen
Avatar
Nat Owen:8. května 14:50

Mám jeden problémek.. nevím zda je to možné, ale měla jsem to i uHTML.. nevypisují se tagy, musím ručně.. každou závorku, každé lomítko atd.. a nyní nevím jak udělat tuto jinou závorku

 
Odpovědět
8. května 14:50
Avatar
Nat Owen
Člen
Avatar
Nat Owen:8. května 15:14

také by mě zajímalo co to vše znamená.. zůstává to stále stejné. tak mi stačí se to tupě naučit :) a nebo se to bue měnit?
rel="stylesheet"
type="text/css"

 
Odpovědět
8. května 15:14
Avatar
Ondřej Raška:16. června 12:11

Nevím, zdy bych zápis v šestnáckové soustavě, kterému skoro nikdo nebude rozumět považoval za zjednodušení oproti rgb zápisu pomocí poměru barev, který pochopí skoro každý. Je to zápis pomocí menšího počtu znaků. A potřebuji k němu externí utilitu, kterou jsem předtím nepotřeboval, což mi taky nepřijde zjednodušující.

Poslední věc je, že VSC umožňuje si barvu namíchat pomocí palety. Pokud to dříve nešlo a tato možnost přišla s nějakým updatem, bylo by dobré updatovat i lekci.

Díky za lekci.

 
Odpovědět
16. června 12:11
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Nina Kubačková:2. července 14:01

Kdo píše na české klávesnici, složené závorky jsou levý Alt +B "{" a levý Alt + N "}".
Jak zmiňuje Ondřej, Visual Code Studio nabízí barevné spektrum přímo v kódu. Viz obrázek.

 
Odpovědět
2. července 14:01
Avatar
Luboš Štancl:24. července 22:13

Jsou lidé, kterým se nezbrazovaly požadované kaskádové styly CSS ve Visual Studio Code v "Live Preview: Show preview" consoli. Nezobrazovaly ani styly, ani obrázky. Viz dotazv diskuzi pod kapitolou. Chtělo by do textu vložit popis, že v takovém případě je potřeba ve Visual Studio Code otevřít pracovní prostor v kořenovém adresáři "..\První web". Za předpokladu, že styl.css a obrazky\avatar.jpg jsou podadresáři kořenového adresáře "..\První web".

Odpovědět
24. července 22:13
The first rule of programming: If it works, don't touch it.
Avatar
Luboš Štancl:24. července 22:20

Ahoj,
jsou lidé, kterým se nezbrazovaly požadované kaskádové styly CSS ve Visual Studio Code v "Live Preview: Show preview" náhledu (consoli). Viz dotazv v diskuzi výše. Pokud se nezobrazují ani styly, ani obrázky, je je potřeba ve Visual Studio Code otevřít pracovní prostor v kořenovém adresáři - v našem případě v "..\První web". Za předpokladu, že styl.css a obrazky\avatar.jpg a další obrázky ... jsou podadresáři kořenového adresáře "..\První web". Pak už se správně zobrazují jak obrázky, tak kaskádové styly CSS.
Aby se ve Visual Studio Code zobrazoval náhled "Live Preview: Show preview", je potřeba si nainstalovat rozšíření (Extension) "Live Preview". Doporučuji, urychluje to práci.
Luboš

Odpovědět
24. července 22:20
The first rule of programming: If it works, don't touch it.
Avatar
Luboš Štancl:24. července 22:22

Omlouvám se za duplicitu nahoře, neuvědomil jsem si, že komentář z "Hodnocení" se také zobrazuje v diskuzi.

Odpovědět
24. července 22:22
The first rule of programming: If it works, don't touch it.
Avatar
Luboš Štancl:24. července 23:21

Ahoj,
když jsem si stáhl řešení k této lekci 7, tak v něm je podadresář ".vscode" a v něm soubor "settings.json" a v něm je zápis:


{
    "liveserver.set­tings.port": 5501
}


Co tento atribut nastavuje parametrrem port:5501 ?
(co se děje na tomto portu 5501 v liveserveru ?)
Kde si ověřím, že i v mém případě port mám být 5501 a ne př. port 5500 (našel jsem zmínku na internetu) ?
Nemohlo by i toto být zmíněno v textu výkladu lekce 7?
Vztahuje se k rozšíření Visual Studio Code nazvaném Live Preview ?
Hledal jsem i v tutoriálu "Lekce 1 - Visual Studio - Úvod do vývojového prostředí (itnetwork.cz)
" zde ( https://www.itnetwork.cz/…-studio-uvod ), ale buď jsem přehlédl anebo to ani tam není.
Předem si dovoluji poděkovat za odpověď.
Luboš

Odpovědět
24. července 23:21
The first rule of programming: If it works, don't touch it.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 97. Zobrazit vše