Můj pracovní webík

... aneb HTML a CSS pro starší a nechápavé ...

ZÁKLADY

Styly určují pravidla

Pravidlo nejprve uvádí, pro jaké prvky stránek má platit, následně se do složených závorek zapíše předpis stylu.

Seznam pravidel tvoří tabulku stylů.

Pravidla se uvádějí za sebou. Pro přehlednost je vhodné psát každé na samostatný řádek.

Hodit se mohou i komentáře zapsané následovně

/* komentář */

Vlastnosti popisují podobu prezentace prvku a rozdělují se do několika skupin.

Každá vlastnost má jednoznačný název a má určeny povolené hodnoty i svou výchozí hodnotu.

Výchozí hodnota se použije, pokud vlastnost sami nedefinujeme. Není nutné jmenovitě popisovat všechny vlastnosti všech prvků, stačí změnit jen ty, které se mají lišit od výchozí hodnoty.

V definici přiřazujeme vlastnosti hodnotu pomocí zápisu

{vlastnost: hodnota;}

V pravidle můžeme uvést více definic najednou. Jednotlivé definice oddělujeme středníkem. Pokud tvoří hodnotu více slov s mezerami, dáváme toto sousloví do uvozovek.

Prvky, pro které má definice platit, popisují selektory. Je jich velké množství, pro začátek postačí 3 nejjednodušší.

1. název prvku

např. p, body, h1

2. prvek dané třídy neboli class

zapisuje se s tečkou za jménem prvku

např. h1.nadpis, p.poznamka

3. prvek s daným pojmenováním

každý prvek na stránce můžeme pojmenovat pomocí atributu id

např. <div id="zahlavi">

na stránce se nesmí vyskytovat dva prvky se stejným id

selektor se jménem prvku se označuje #

např. #zahlavi

S těmito (a mnoha dalšími) selektory vytváříme pravidla, jimiž přiřazujeme definice všem prvkům, které vyhovují použitému selektoru. Pravidlo se zapisuje ve tvaru

selektor{definice}

Pravidla se uvádějí za sebou, oddělují se středníkem. Pro větší přehlednost je vhodné psát každé na samostatný řádek. Použít můžeme i komentář

např. p{font-size: 12px; line-height:150%; /* odstavec */}

 

Pokud prvek nemá nějakou vlastnost definovánu, použije se její výchozí hodnota.

Nejsou však jen naše tabulky stylů, ale i další, pro nás skryté. Např. každý prohlížeč má povinně svou tabulku stylů - pomocí ní formátuje prvky, kterým jsme žádný styl neurčili (např. že nadpis <h1> má být 2x větší než základní písmo stránky).

Některé vlastnosti CSS jsou dědičné, což znamená, že nejsou-li nikde definovány, převezmou hodnotu svého nadřazeného prvku (tedy prvku, uvnitř nějž leží). Např. typ písma můžeme definovat jen pro značku <body> (v níž je umístěn celý obsah stránek) a stejnou hodnotu pak použijí všechny prvky na stránce. Teprve když některému z nich nadefinujeme vlastnosti jinak, použije on i jeho potomci (prvky umístěné uvnitř něj) novou hodnotu. Platí zde pravidlo bližší košile než kabát.

Dědičné však nejsou všechny vlastnosti. Obecně se dá říci, že vesměs jsou dědičné vlastnosti textu a ostatní vlastnosti obvykle dědičné nejsou.

Prvky mohou mít stejnou vlastnost definovanou současně na více místech. Výběr té správné hodnoty zajišťuje kaskáda CSS.

Platí především zásada, že přednost mají vždy přesnější, konkrétnější pravidla.

Nejvyšší prioritu mají styly definované přímo ve značkách prvků atributem style.