Začínáme s CSS
Začínáme s CSSZ minula máme nachystaný jednoduchý XHTML dokument, ale jistě mi dáte za pravdu, že ani po obsahové stránce ani vzhledem není, řečeno slušně, nic moc. To se nyní pokusíme změnit, ale dříve, než začneme pracovat prakticky, ujasníme si opět několik pojmů, bez jejichž pochopení se v tvorbě CSS dále nedostanete. Základní pojmy jsou dva - první, podle kterých dostala tato technologie název je kaskáda a druhým termínem je dědičnost.
Kaskáda
Tento termín je poměrně složitý na vysvětlování a vyžaduje přeci jenom hlubší znalosti samotné technologie CSS. Zjednodušeně řečeno, CSS jsou v podstatě tabulkami stylů. Kupříkladu to, co budeme tvořit, to jest stylový předpis pro vzorový dokument, je tabulka stylů autora. I váš prohlížeč vlastní (nebo se alespoň tváří, že obsahuje) tabulku stylů (tabulka klienta), která obsahuje výchozí hodnoty definic stylů pro jednotlivé elementy (nadpisy, odstavce, odkazy, obrázky atd).
I uživatel (tedy návštěvník webu) může mít k dispozici svou vlastní tabulku stylů (tabulka uživatele), kterou může používat kupříkladu proto, že je zrakově postižený a jím vytvořený a definovaný styl takzvaně "přebije" to, co nadefinoval autor webu, tedy vy (ale jenom za určitých okolností, což se dozvíte později).
A v tom vlastně tkví princip kaskády - kaskáda každé tabulce stylů přiřadí takzvanou váhu, čímž prostě dá najevo, který stylový předpis má prohlížeč použít. Nejvyšší váhu (tedy přednost) má styl spáchaný autorem webu, druhým vzadu je styl uživatelský a posledním v kaskádě je styl klienta (neboli prohlížeče). Pro přehlednost uvedu pořadí ještě jednou podle nejvyšší váhy:
1. definice stylů autora webu, tj. váš stylový předpis
2. definice stylů uživatele, který si může vytvořit styl vlastní
3. tabulka klienta neboli výchozí definice stylů prohlížeče (to je vlastně to, co vidíte v základním XHTML dokumentu bez připojených stylů).
Pro příkaz !important platí jiná pravidla. ale k tomu se ještě dostaneme.
Dalším odborným termínem, který vám v souvislosti s CSS musí přejít do krve je specifičnost. Co to vlastně je? Norma praví, že vždy má přednost výraz specifičtější (upřesňující, více konkrétní) před výrazem obecným. Nejlépe to pochopíte na příkladu.
Mějme ve stylu pro nějaký odstavec definován černý rámeček:
p {
border: 1px solid black;
}
p.red {
border: 10px solid red;
}
Tímto zápisem říkáme prohlížeči, že má kolem odstavce vyrobit jednopixelový černý rámeček a první definice tak bude platná pro všechny odstavce na celém webu. Jeden odstavec bychom ale chtěli mít označen širším rámečkem červeným a přidáním třídy red nastavení upřesníme. Pro všechny normální odstavce tedy platí, že budou orámovány černou barvou, pro všechny odstavce, kterým přiřadíme třídu (class) red, vyrobíme širší rámeček červenou barvou. Udělali jsme tedy to, co je základem specifičnosti - upřesnili jsme nastavení a tato upřesňující definice má přednost před definicí první - obecnou (s třídami neboli class se ještě budeme setkávat).
Poznámka: Specifičnost hraje velkou roli i v tom, jakým způsobem svůj stylový předpis k dokumentu připojíme. Protože tímto tématem se budeme zabývat později, tak jen stručně. Nejvyšší specifičnost, a tedy přednost, mají styly připojené přímo k elementu v XHTML kódu, (kupříkladu tento zápis - <p style="border: 1px solid black">odstavec</p>). Další v pořadí jsou styly definované v hlavičce XHTML dokumentu a poslední na řadě jsou styly připojované externě (metodou link nebo @import). Jak se co dělá a proč se dozvíme při praktické výstavbě jednoduché webové stránky.
A ještě kousek teorie - ve stylovém předpisu záleží také na pořadí jednotlivých definic. Jinak řečeno - pokud budeme definovat stejnému prvku (třeba odstavec) černý rámeček a v následující definici uvedeme pro stejný prvek, že bychom chtěli rámeček raději červený, použije se vždy definice poslední.
Představme si opět jednoduchý zápis:
p {
border: 1px solid black;
border: 1px solid red;
}
Protože oba zápisy definují pro totožný odstavec stejnou vlastnost, použije se ta poslední v pořadí a rámečky kolem všech odstavců budou červené. Stejným principem můžeme provést jenom jednoduchou úpravu třeba takto:
p {
border: 1px solid black;
border-left: 10px solid red;
}
Podívejte se na ukázku.
Vidíme, že pro všechny odstavce jsme nastavili černý rámeček. Pro levý okraj jsme ale provedli změnu a ten bude pěkně široký a červený. Jinými slovy - opět se použije zápis uvedený jako poslední, ale tentokrát jsme změnili jenom část zamýšlené definice. Na specifičnost a pořadí definic si musíte dávat dobrý pozor, protože tam vám pak můžou vznikat zajímavé chyby, jejichž nalezení vás stojí zbytečnou spoustu času. Dalším kouskem skládačky CSS, který dělá začátečníkům problémy je:
Dědičnost
Dědičnost je mocným nástrojem pro tvorbu stránek pomocí CSS a její pochopení je naprosto nezbytné pro vaši další práci.
Poznámka: Protože jsme už ve čtvrtém díle a také proto, že podrobné vysvětlení jak specifičnosti tak dědičnosti by šlo nad rámec mého seriálu, odkáži vás tentokráte na prověřenou literaturu, kterou vlastní každý profesionální webdesigner (a nestydí se za to) a tou je kniha CSS - Kaskádové styly od Petra Staníčka alias Pixyho (pixy.cz). Protože obsahuje lidovým jazykem napsaný popis se spoustou ukázek a navíc také podrobnou referenční příručku CSS s jejich vazbou na prohlížeče, musí být pro každého, kdo chce proniknout do tajů CSS, povinnou četbou. Zakoupit ji lze kupříkladu na Intervalu za příjemných 177 korun českých.
Zpět k dědičnosti. Ačkoliv teorie zní složitě, jedná se o věc velmi jednoduchou. Specifikace CSS z dílny konsorcia W3.org jednoznačně stanovuje, které vlastnosti se v rámci definic dědí. Nejlépe to asi vysvětlím na příkladu a vy si zatím zapamatujte termín rodič a potomek. O co tedy jde?
<html>
<head>
<title>nazev stranky</title>
</head>
<body>
<h1>Název webu</h1>
<h2>Název stránky</h2>
<p>odstavec
</body>
</html>
Element title umístěný povinně v hlavičce dokumentu je potomkem rodiče head. Podobně elementy umístěné v těle dokumentu body (tedy h1, h2, p) jsou jeho potomky a v rámci CSS se některé vlastnosti definované pro body takzvaně zdědí a vy tedy nemusíte tytéž definice znovu uvádět. Kupříkladu barvu písma, která je dědičná, můžeme nastavit pro celý dokument takto:
body {
color: red;
}
Na celém webu tak bude písmo vždy červené a všechny ostatní elementy (tedy nadpisy, odstavce, seznamy a tak dále) tuto barvu písma zdědí. Takže již není nutné kupříkladu pro odstavec p, který je také potomkem body uvádět totéž:
p{
color: red;
}
Protože jednotlivé elementy se mohou do sebe vnořovat (prakticky si to zkusíme až při tvorbě layoutu), je třeba si dávat na zděděné vlastnosti dobrý pozor.
Mějme tento jednoduchý styl:
body {
color: red;
}
div {
color: black;
}
A jednoduchou XHTML stránku:
<html>
<head>
<title>Titul</title>
</head>
<body>
<h3>Nadpis</h3>
<p>odstavec</p>
<div>
<h3>Nadpis</h3>
<p>odstavec</p>
</div>
</body>
</html>
Nadpis h3 a p jsou potomky elementu body a proto budou vykresleny červenou barvou písma. Naproti tomu nadpis h3 a odstavec p umístěné v elementu div jsou jeho přímými potomky, a protože jsme v souladu se zásadami specifičnosti změnili definici, budou všechny texty v elementech uvnitř div vykresleny černou barvou písma. Vidíme tedy, že elementy mimo div zdědily barvu písma definou pro element body. Naopak elementy umístěné v bloku div zdědili barvu písma definovanou pro něj definovanou. Viz následující příklad. Vypadá to komplikovaně, ale věřím, že časem si tyto zásady osvojíte a přejdou vám do krve. Nic složitého v tom opravdu nehledejte.
Velmi pěkné a jednoduché vysvětlení principu kaskády a dědičnosti naleznete zde
Věřím, že jako základ pro pochopení tento kousek teorie stačil a vše si osvětlíme až na praktickém příkladu, na kterém začneme od příštího dílu pracovat.
Příště: Připravujeme prakticky první layout, blokové a řádkové elementy
Autor: Plaváček
2024 ©