CSS = Cascading style sheet = Kaskádové styly
Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Dnes máme dva různé způsoby jak fomátovat:
Kaskádové styly tedy vlastně slouží k formátování obsahu HTML.
Formátováním máme na mysli třeba barvu a velikost písma, pozadí,
zarovnání, formátování nadpisu atd.
Zápis kaskádových stylů
Máme hned několik možností jak zapisovat CSS do HTML. Je na vás, který si vyberete. Mě osobně příjde nejlepší zápis stylopisem do hlavičky, protože je nejpřehlednější a snadno se upravuje.
Přímý zápis
HTML tagům se přímo zapisují styly.
<div style="width: 200px; align: center">Formátovaný blok</div>Tento blok bude mít šířku 200px a bude zarovnaný na střed.
Stylopisem
CSS se zapisuje do hlavičky HTML dokumentu mezi tagy
<style></style>
<html>
<head>
<title>Jméno webu</title>
<style>
div {width: 200px; align: center}
</style>
</head>
<body>
Obsah webu
</body>
</html>Následně budou všechny bloky mít šířku 200px a budou zarovnané na střed.
Externím stylopisem
Styly se zapisují do nového souboru, který si pojmenujem třeba
style.css.
div {width: 200px; align: center}V hlavičce HTML dokumentu ještě musíme odkázat na stylopis.
<link rel="stylesheet" type="text/css" href="style.css">Opět všehny bloky budou mít šířku 200px a budou zarovnané na střed.
Vlastní styly
V HTML existuje jenom málo podporovaných tagů, například nadpisy, seznamy, nebo definice. Tyto tagy se dají pomocí CSS přizpůsobit k obrazu svém (třeba jako blok v příkladech nahoře). Aby si tvůrce webu mohl opravdu dělat „co chce“, existuje v CSS možnost vytvoření vlastních stylů.
Je několik možností jak zapisovat vlastní styly:
Na ukázku si vytvoříme třídu „modrepismo“.
.modrepismo {color: blue}V HTML dokumentu určíme, že text patří do třídy „modrepismo“, zápis vypadá takhle:
<span class="modrepismo">modré písmo</span>A v prohlížeči se zobrazí krásně modré písmo.
Hodnocení tutoriálu: 1.3 (hodnotilo 96 uživatelů)