CSS styly - úvod

Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem

Formátování HTML

Každý text má obsah a formu. Když mluvím o formátu (formě) webových stránek, myslím tím třeba barvu a velikost písma, pozadí, zarovnání atd., prostě všechno, co nepatří do obsahu. To je formátování.

Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Proto dnes existují dva odlišné způsoby, jak v HTML třeba obarvit písmo nebo ztučnit text.

1. Starší způsob používá přímo HTML tagy. (Například kurzíva se dělá pomocí tagů <i> a </i>: <i>kurzíva</i>). Pomocí tagů se některé věci nedají udělat.
2. Novější způsob -- CSS styly -- používá tag <style> a obecný atribut "style", kterému se přiřazuje nějaká definice. Je to složitější, ale užitečnější a všeobecné. Dají se s tím dělat různé fígle, které budu popisovat níže.

Mimochodem, co je CSS?

CSS vzniklo někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových stránek. Ta zkratka znamená Cascading Style Sheets, česky "kaskádové styly". Kaskádové, protože se na sebe mohou vrstvit definice stylu, ale platí jenom ta poslední. To teď není důležité.

Už je na světě návrh CSS 2, vylepšené a složitější formy stylů, které ale v nejrozšířenějším prohlížeči Internet Exploreru moc nefungují.

Zařízení bez podpory CSS

CSS nepodporují některá obskurní zařízení. I v nich ale jde text přečíst. CSS nepodporují velmi staré prohlížeče (Explorer 2 a Navigator 3), které se však už nikde nevyskytují, některé staré mobilní telefony a textové prohlížeče (lynx, links). V takových se text nezformátuje, ale zůstává čitelný.

Kdy používat CSS

V roce 2015 se dá říct, že už se celý web formátuje pomocí CSS. Ze starého HTML formátování zůstalo tak maximálně ztučnění a kurziva. Proto je dobré se v CSS orientovat, jestliže chcete dělat webové stránky. V první řadě je ale potřeba vědět, jak funguje HTML. Pokud HTML ani trochu neznáte, není dobré začínat s CSS. Kdy se vyplatí CSS studovat:

• chcete mít stránky hezky a moderně zformátované. Barvy, zarovnání, rozvržené sloupce atd.
• často píšete texty určené pro Internet a nechcete ztrácet čas složitým formátováním,
• zabýváte se skriptováním, zejména Javascriptem
• spravujete (či zatím jen plánujete) větší web s mnoha stránkami, které by měly vypadat podobně,
• nebo prostě nechcete být mimo mísu, když se mluví o formátování stránek.

Jinak se asi podrobné studium CSS nevyplatí.

Nástin možností CSS

Opravdu jenom nástin. (Kdyžtak vizte kompletní přehled.) Tak co třeba CSS dovedou:

• Nastavit libovolnou a přesnou velikost písma, prokládání, kapitálky
• Udělat odsazení prvního řádku odstavce, zvětšit řádkování
• Zrušit nebo zvětšit prázdný prostor po odstavci
• Automaticky formátovat nadpisy (například je všechny udělat zelené)
• Zvýrazňovat odkazy po přejetí myší
• Udělat automaticky grafické odrážky
• Určité části textu zneviditelnit, zprůhlednit nebo nezobrazit
• Předefinovat grafický význam běžných tagů (například všechno, co je kurzívou, udělat i tučně)
• Nastavit pozadí čehokoliv, stránky, tabulky ale třeba i odstavce; pozadí se nemusí opakovat a může mít přesnou pozici!
• Umístit nějaký objekt (třeba kus textu) kamkoliv do stránky, může se to i překrývat
• Přidat k čemukoli rolovací lišty, oříznout to, orámovat, nastavit okraje
• V kombinaci se skripty je dnes CSS nejmocnější zbraň pro "rozhýbání" stránek.
• Hlavní význam CSS spočívá v tom, že fungují hodně automaticky, přečemž se vzhled celého webu deklaruje jedním souborem.

Jak přicházejí nové prohlížeče, dá se dělat ještě mnoho úžasnějších věcí.

Trojí použití CSS

Styl se může nadeklarovat třemi způsoby, níže uvádím příklady. Stačí, když se pro začátek naučíte naučíte jeden ze tří způsobů:

1. Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". Tomu říkám přímý styl. Je to nešikovné, ale občas se to používá.
2. Pomocí "stylopisu" (angl. "stylesheet") v hlavičce stránky. Stylopis je jakýsi seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například že nadpisy mají být zelené. Do stránky se stylopis píše mezi tagy <style> a </style>.
3. Použitím externího stylopisu -- to je soubor *.css, na který se stránka odkazuje tagem <link>. V souboru je umístěný stylopis. Hlavní výhoda je v tom, že na jeden takový soubor se dá nalinkovat mnoho stránek, takže pak všechny vypadají podobně.

Samozřejmě stačí ovládnout jenom jeden způsob. Já nejčastěji používám externí css soubor.

Příklady

Chci udělat odstavec červeným písmem pomocí CSS. Jak už jsem popsal, jde to třemi způsoby:

Přímý zápis

Do zdroje se napíše tato deklarace odstavce:

<p style="color: red">Tento odstavec bude červený.</p>

Vysvětlení: <p> je značka vymezující odstavec; z anglického paragraph. Atribut "style" je obecný atribut použitelný u každého prvku. Color znamená barva a red je červená.

Stylopisem

Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy <style></style>:

<style>
p    {color: red}
</style>

a do těla stránky se mohou psát odstavce:

<p>Tento odstavec bude červený. </p>
<p>Tento mimochodem také, protože červené budou všechny.</p>

To, jak zařídit, aby nebyly červené všechny, ale jenom některé odstavce, se dá pomocí "tříd" a "identifikátorů", o tom později.

Externím CSS souborem

Vytvoří se soubor, který se pojmenuje třeba styly.css. V něm bude pouze tento text:

p    {color: red}

Do hlavičky html dokumentu, který chci stylem ovlivnit, musím napsat odkaz na tento soubor:

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

V těle dokumentu pak budou opět všechny odstavce červené. K dispozici je i podrobnější příklad.

Syntaxe

CSS nejsou součástí HTML, a tak se zapisují zcela jiným způsobem, jak už jste si možná všimli. Pokud vám tabulka přijde příliš teoretická, všimněte si pouze příkladů ve spodní části.

Přímý styl:	<tag style="zápis vlastností">stylovaný element</tag>
Ve stylopisu:	<style> tag {zápis vlastností} 2.tag {zápis vlastností} </style>
Zápis vlastností zjednodušeně:	vlastnost: hodnota; 2.vlastnost: 2.hodnota
Zápis vlastností obecně:	vlastnost: hodnota [, hodnota2] [; další zápis vlastností]

Příklady:

Příklad přímého stylu	<p style="color: red;">text červeného odstavce</p>
Příklad stylopisu	<style>  p {color: red} body {background-color: yellow;} </style>
Příklad jednoduchého zápisu vlastností	color: red
a složitějšího zápisu vlastností	font-family: Arial, Arial CE, sans-serif; color: red;

Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a čárky. Pokud si některé znaménko popletete, nebude to pravděpodobně fungovat. Příklad správného zápisu:

h2 {color: green; background-color: yellow}

Mezery a konce řádků příliš velkou roli nehrají, mohou se přidávat a vypouštět. Velikost písmen nehraje roli. K dispozici je seznam vlastností a jejich hodnot.

Hodnoty, které prohlížeč nezná, ignoruje.

Komentáře ve stylopisech se dělají podobně jako v Javě mezi znaky /* a */. Dvě lomítka nefungují.

Příklad s nadpisem

Deklarovat formát nadpisů přímým stylem je hloupost (to není usnadnění, ale ztížení práce). Ale ve stylopisu nebo v externím css souboru se to dá udělat docela snadno. 

<style>
h1    {color: green;}
h2    {color: blue;}
</style>

Potom v celém dokumentu budou nadpisy první úrovně zelené a nadpisy druhé úrovně modré. To ovšem pouze za předpokladu, že při psaní textu byly použity tagy <h1> a <h2>. Jinými slovy, stylopisy se dají efektivně použít pouze u dobře strukturovaných textů. Pokud vás nezajímá teorie strukturování textů, přečtěte si, jak se CSS používá prakticky.

 

 

Další: strukturování textů

Vizte též

• praktické použití CSS
• přehled hodnot CSS
• vlastní styly,
• grafické filtry,
• CSS pozicování,
• zdokonalení odkazů,
• délkové jednotky v CSS