Black Friday Black Friday
Black Friday výprodej! Až 80 % extra bodů zdarma! Více informací zde

Lekce 7 - Základní CSS selektory a vlastnosti

HTML a CSS Statický web Základní CSS selektory a vlastnosti American English version English version

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 PSPad a vytvořme v něm nový soubor, jako typ souboru vyberme Cascading Style Sheet.

Vytvoření nového CSS souboru v PSPadu

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. 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žte kód výše a uložte jej jako styl.css do složky s vaší stránkou.

Nyní musíme 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" />

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

Zarovnání nadpisu pomocí CSS na střed

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 na nadpis h2. Selektory oddělujeme čárkou:

h1, h2 {
 text-align: center;
}

Výsledek:

Zarovnání nadpisu pomocí CSS

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.

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č za nás slova v textu bohužel 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. 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ůžete 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žte a obnovte stránku, měli byste vidět něco podobného:

Obarvení nadpisů pomocí CSS

Protože často budeme chtít jiný odstín, než je oněch ošklivých 16 výchozích barev, ukažme 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ůžete 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ě:

Obarvení nadpisů pomocí CSS

To je pro dnešek vše. V příští lekci, Třídní selektor a stylování textu v CSS, budeme se stylováním pokračovat a ještě dlouho s ním nepřestaneme :) Kód k dnešní lekci je opět ke stažení v příloze.


 

Stáhnout

Staženo 2131x (112.89 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
65 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Aktivity (5)

 

 

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

Avatar
ITspecialist
Člen
Avatar
ITspecialist:19. dubna 22:19

Zdarec, používám IntelliJ IDEA. A mám jeden drobný problém. Ač jsem pročítal různé stránky a zkoušel různá řešení, stále nevím, jak zajistit, aby mi šla napsat levá složená závorka.

Nemá s tím někdo zkušenosti? Rád si od někoho znalého věci nechám poradit.

Díky, itnetwork je skvělý web se skvělou komunitou!

 
Odpovědět 19. dubna 22:19
Avatar
IT Man
Redaktor
Avatar
Odpovídá na ITspecialist
IT Man:19. dubna 22:29

Ahoj, kdybys použil vyhledávání, bylo by to rychlejší. Každopádně se to už tady řešilo:
https://www.itnetwork.cz/…17022e8eaf65

Odpovědět 19. dubna 22:29
Cokoliv a kdokoliv může jednou uspět.
Avatar
ITspecialist
Člen
Avatar
ITspecialist:19. dubna 22:39

Moc díky, šťoural jsem se s tím a snažil jsem se na to přijít hodně dlouho. :-)

 
Odpovědět 19. dubna 22:39
Avatar
Filip Vondricka:25. července 0:16

tak i pres tenhle clanek me to proste nejde, takhle jsem to zkousel:

<!DOCTYPE html>

<html lang="cs-cz">

<head>
<meta charset="ANSI"/>
</head> h1, h2 {
text-align: center;
color: blue;
}
<h1>Muj první web </h2>
<p>Nabizím individualni treningy fitness </p>
<h2>O mně </h2>
<p>Pracuju jako fitness trener v malem fitness v Malešicích.</p>

<img src="obrazky/a­vatar.png" width="200" height="200" alt="ksicht" \>
<p>Věnuji se fitness již 8 rokem i cvicění klientů.</p>
<h3>Kontakt </h3>
<p>Sunny Land Malešice 38 </p>
<p> Praha 10, Malešice </p>
<h3>Cena </h3>
<p> <u> 500Kč</u> jedna lekce, specialní balíček 10 lekcí za 3000Kč </p>
<p>tento svuj web sestavuji podle itnetwork.</p>

 
Odpovědět 25. července 0:16
Avatar
Filip Vondricka:25. července 0:39

uz to mam , nevite nekdo jak to zapsat kdyz chci kazdy nadpis jinou barvou

 
Odpovědět 25. července 0:39
Avatar
Odpovídá na Filip Vondricka
Michal Šmahel:25. července 11:08

Ahoj, je to jednoduché. Každému nadpisu přiřadíš nějakou třídu, k níž poté nastavíš příslušnou barvu.

Odpovědět 25. července 11:08
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
hricov.martin:31. července 14:04

Zdravím chcel by som sa opýtať ako nastavím aby text na obrazovke bol priamo v strede nie len hore v strede je to možné?

 
Odpovědět 31. července 14:04
Avatar
Filip Němec
Člen
Avatar
Odpovídá na hricov.martin
Filip Němec:31. července 14:48

Ahoj, pokud máš danou výšku elementu, tak to vypočítáš.

width: 100px;
height: 100px; //vezmeš polovinu
font-size: 16px; //plus velikost textu
padding-top: 34px;
Editováno 31. července 14:48
 
Odpovědět 31. července 14:48
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na hricov.martin
Honza Bittner:31. července 14:55

Nejjednodušší je použít Flexbox, případně CSS grid (ale ten má potíže s IE 11).

Řešení s flexboxem: https://jsfiddle.net/1fqgx6ta/2/

Odpovědět  +2 31. července 14:55
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
hricov.martin:1. srpna 12:44

A tlačidlo ako vytvorím ,ktoré po kliknutí sa mi zmení web stánka?

 
Odpovědět 1. srpna 12:44
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 72. Zobrazit vše