3.lekce - význam a zápis stylů
Pro volbu barvy textu, jeho velikosti a dalších vlastností se dříve používal tag
<font>, například:
<FONT SIZE=7 COLOR=red> velký červený text </FONT> , do závorek se k tagu připisovaly parametry (color = barva, size = velikost). Na novějších nebo profesionálnějších stránkách už tento tag nenajdete, v novějších verzích HTML už totiž přestane existovat, dochází k oddělení vlastního obsahu stránky od jeho vlastností. Vlastnosti všech objektů stránky jsou popsány většinou v samostatném souboru takzvaných kaskádových stylů - soubor má příponu css.
Využití stylů má také velké praktické výhody:
- pokud byste měli na stránce třeba pět nadpisů s barvou určenou pomocí tagu font a chtěli barvu změnit, museli byste všechny vyhledat a upravit ji u každého nadpisu, zatímco jedna změna v souboru se styly změní všechny nadpisy najednou
- zdroj stránky bude mít menší velikost (i podstatně), což je rozhodující pro rychlost načítání stránky, bude také přehlednější, čímž se také zjednoduší práce například pro strojové vyhledávače
- soubor se styly může být společný pro více stránek, takže můžete mít všechny stránky rozsáhlejšího webu stejného vzhledu
- dále CSS poskytují pro vzhled prvků stránek i takové možnosti, které bychom v HTML dosáhli třeba jen pomocí scriptů nebo jinou pracnou cestou
- umožňují naformátovat (upravit vzhled) stejný obsah pro různé typy prohlížečů nebo prohlížecích zařízení (PDA, mobily apod.)
- oddělí se od sebe úprava obsahu a vzhledu stránek, obojí můžete upravovat nezávisle na sobě
Na druhou stranu je nevýhodou, že prohlížeče stránek často ještě neumí správně zobrazit některé vlastnosti popsané kaskádovými styly, protože jejich vývoj zaostává za vývojem verzí CSS.
Definovat styly je možno trojím způsobem (první dva způsoby zatím nepoužijeme):
Například, chcete-li obarvit text odstavce (tag <p>) načerveno:
1. Přímo do zdroje k tagu odstavce: <p style="color: red"> Tento odstavec bude červený.</p>
To bychom ale zavrhli uvedené výhody CSS (zdrojový kód se nezmenšil a pokud bychom chtěli barvu změnit, museli bychom odstavec ve zdroji stejně najít), proto se nepoužívá (snad jen výjimečně, pokud právě tento odstavec chcete mít jiný než ostatní).
2. Do hlavičky stránky pomocí tagu style:
<head>
<title>užití stylů</title>
<style>
p {color: red}
</style>
</head>
Všude na stránce by při použití tagu p byl text odstavce červený (dá se ale změnit, nemusí být všude, o tom později). Tahle možnost by mohla vyhovovat, pokud by šlo jen o jednu izolovanou stránku, to je ale také výjimečné.
3. Nejběžnější způsob je zápis stylů do externího souboru s příponou css, na který se odkazuje v hlavičce, například:
<head>
<title>Stránka s externím stylopisem</title>
<link rel="stylesheet" type="text/css" href="pokus.css">
</head>
Samotný soubor pokus.css, který obsahuje definici stylů, lze opět napsat v Poznámkovém bloku, může obsahovat například:
body {color: Maroon; font-size: 15px;}
p {color: red; font-size: 12px; text-align: justify}
h1 {color: green; text-align: center}
Všimněte si zápisu, který je potřeba dodržovat - za tagem jsou vlastnosti ve složených závorkách, za názvem vlastnosti dvojtečka, větší počet vlastností se odděluje středníkem. V ukázce je zatím použita jen barva textu, velikost textu a zarovnání (justify=do bloku), postupně poznáme další vlastnosti, stručný přehled většiny vlastností můžete najít například v kurzu ve složce Yuhů od stejnojmenného autora ( Yuhů - přehled css vlastností ).
Vlastnosti určené pro tag body jsou platné pro text na celé stránce, pokud není text nadpisem (h1) nebo není uzavřen v odstavci (p), tyto tagy mají definované svoje vlatnosti. Pokud by třeba v odstavci nebyl určená barva písma, potom by pro něj platila barva písma z tagu body.
Novější standard CSS2 obsahuje také novou direktivu pro načtení tabulky stylů:
<STYLE type="text/css">
<!-- @import url("moje.css"); -->
</STYLE>
Tento způsob se používá proto, že starší prohlížeče, které špatně zobrazují CSS (verze 1) tuto direktivu neznají, budou ji ignorovat a vůbec CSS nepoužijí, zobrazí jen neformátovaný obsah stránky. Můžete zkoušet obě možnosti zavedení stylů, ale například v IE6 rozdíly vidět nebudou.
Úkoly:
Úkol (3 body)
Pro stránku vtipy.html vytvořte soubor vtipy.css s vlastnostmi (styly) pro body, text odstavce a text nadpisů (měly být u názvů typů vtipů).
| Název školy: | Základní škola, Hradec Králové, M. Horákové 258 |
| Název projektu: | EU peníze školám |
| Číslo projektu: | CZ.1.07/1.4.00/21.2575 |
| Téma: | Tvorba WWW stránek |
| Název: | VY_32_INOVACE_03_10B_tvorba www3 |
| Autor: | Pavel Petr |