P005 SLUŽBY POČÍTAČOVÝCH SÍTÍ

Obsah

Úvod

Kaskádové styly

Základní rozpor dnešního HTML

Původní idea HTML - kontextové (logické) značkování
HTML dnes - jak graficky stvárnit dokument

Jak z toho ven

Částečné řešení - nastavovat atributy u jednotlivých HTML elementů (barva, font, šířka, ...). Pracné, nepohodlné, možnost chyb, pracný případný update.
(Téměř dokonalé) řešení - kaskádové styly (Cascading StyleSheets - CSS). Styly umožňují definovat způsob zobrazení (druh a velikost písma, barvu, zarovnání apod.) každého elementu na stránce. Styl přitom není přímo součástí textu stránky a tak může být zápis stránky přehlednější a dobře strukturovaný. Navíc styly umožňují definovat jednotný vzhled určitého elementu v celém dokumentu jedním zápisem - nemusíme jej opakovat u každého elementu.

Styly zde byly i před dynamickým HTML, nyní přibývá možnost určení pozice na stránce a filtry (MSIE 4.0).

Základy práce se styly

definice

použití

HTML textu

inline

samostatného

Tedy:

První způsob využívající element LINK připojí k dokumentu styl uložený v separátním souboru.
Styl může být definován i přímo v dokumentu mezi tagy <STYLE> a </STYLE>. Pomocí komentáře jsme definici stylu skryli před staršími prohlížeči, které CSS nepodporují. Soubor má zpravidla extenzi .css, nesmí být interpretován WWW- serverem.
Poslední možností je definice stylu pouze pro jeden konkrétní element. Toho lze dosáhnout použitím atributu STYLE, který můžeme použít u všech elementů.

Příklad stylu:

H1, H2, H3 { font-family: Arial, sans-serif; color: blue }
H1 { text-align: center }

selektor

deklaraci

Všechny deklarace se skládají ze dvou částí -- z vlastnosti (např. text-align) a z její hodnoty (např. center). Selektory i deklarace lze navzájem různě sdružovat.

Selektor nám zajišťuje vazbu na odpovídající HTML element (např. P, TD, HR, A). Jako selektor mohou být použity všechny elementy HTML. Selektory lze vytvářet i kontextové. Např. pravidlo se selektorem H1 EM se použije pouze na text elementu EM, který je uvnitř nadpisu první úrovně. U každého elementu je předepsáno, které vlastnosti u něj lze ve stylech určovat. Přehled vlastností stylů.

Rozšíření stylů o řízení pozice elementů

Jiří Kosek - Dynamické HTML (CW)

Pozicování na stránce
Vizuálním zvýraznění stránky (odkazů)
Animacích
Filtrech

Následující: Tipy a triky
Obsah

Tomáš Pitner tomp@informatics.muni.cz