Technologie pro publikování na webu 1 Kaskádové styly (CSS) Technologie pro publikování na webu 1 Ing. Jiří Štěpánek

Forma a obsah Webovou stránku lze rozdělit na dvě části Forma Obsah Visuální ztvárnění stránky Tvorba formy vyžaduje kreativní práci (rozvržení, grafika, formátování, barvy a styly písem…) Obsah Tvořen samotnými daty (text odstavce, data v tabulce) Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Forma a obsah Hlavní účel webové stránky je prezentovat informace Volba formy závisí především na Typu stránek Rozsahu prezentovaných informací Zvolených vývojových technologiích Požadavcích klienta Moderních trendech Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Forma a obsah V moderním pojetí tvorby webu se forma a obsah nemísí v jednom kódu <font color="red" face="Arial">Varování</font> V tomto případě je barva písma i použitý font definován jako atribut elementu font. Tento způsob znemožňuje znovupoužitelnost. Pokud bude třeba změnit barvu či písmo (v tomto případě) varovných hlášení, bude nutné to provést na všech místech v kódu. V moderním pojetí webů jsou forma a obsah odděleny Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Layout Pod pojmem layout rozumíme visuální rozvržení stránky. Tvorba layoutu je oddělená od práce programátora Layout lze chápat jako jakousi šablonu stránek tvořenou elementy jazyka XHTML, kaskádovými styly, obrázky či doplňky Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Tabulkový layout Celá stránka je chápána jako tabulka s případnými vnořenými tabulkami Výhody Snadno pochopitelné Funkční i při výpadku stylů, kompatibilní v různých prohlížečích Nevýhody Nepřehledný kód Změna vzhledu musí být realizována napříč celým kódem stránky, neúměrně velký zásah do kódu při relativně banální změně vzhledu Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Layout založený na CSS Stránka je chápána jako skupina oblastí a elementů, vzhled(forma) je definován v samostatném souboru Výhody Snadná udržitelnost kódu Oddělení formy od obsahu Variabilita, efektivita, přizpůsobivost Nevýhody Složitější pro pochopení V různých prohlížečích může být různě interpretováno – nutnost kontrolovat výstup a případné nesrovnalosti ladit. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Kaskádové styly (CSS) Visuální formátování elementů XHTML stránky definované zpravidla v samostatném souboru Tento koncept umožňuje a podporuje Znovupoužitelnost definovaných stylů Oddělení formy od obsahu Jednoduchou záměnou souboru stylů změnit vzhled elementů nebo i celé stránky Cílit formátování pro konkrétní média (obrazovka, tiskárna, PDA…) Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Využití CSS – doplňkové formátování Základem bývá tabulkový layout, CSS pouze obohacují základní formátování. Inline stylování za pomoci atributu style Výsledný kód je nepřehledný, těžko spravovatelný, není zde žádná znovupoužitelnost, výsledná stránka může být často nevalidní Malé nároky na znalosti, kompatibilita mezi prohlížeči Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Využití CSS – formátování elementů CSS jsou využity k formátování veškerých XHTML elementů, kromě layoutu – ten je realizován většinou tabulkou Výsledný kód je přehlednější než v prvním případě, definice formátu elementu je na jednom místě, proto změna formátu elementů vyžaduje jen malou změnu kódu Nelze měnit rozložení stránky Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Využití CSS – kompletní formátování CSS definuje vzhled elementů i rozvržení stránky jako takové Definice stylů jsou uloženy zpravidla v jiném souboru Vyžaduje pokročilou znalost XHTML a CSS Jednoduchá změna vzhledu Čistota kódu Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Využití CSS ve stránce Inline stylování elementu Žádná znovupoužitelnost, platí pro všechna média Deklarace stylu v tagu <style> Styly jsou znovupoužitelné, je možno rozlišovat média Deklarece stylů v externím souboru Nejčistčí způsob, nemísí se XHTML a deklarace stylů, ext. soubor lze nalinkovat do jiné stránky. <p style="color:black; font-weight:bold;">Text</p> <style type="text/css" media="screen"> p {color: black; font-family: Tahoma;} </style> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Deklarace stylů - pravidlo Příklad ilustruje stylování odstavce Selektor p { font-family: Verdana; font-size: 12px; color: red; } Seznam definic Selektor může být buď název elementu, nebo název třídy, nebo název id elementu – viz typy vazeb. Seznam definic je uzavřen do složených závorek, jednotlivé definice jsou zapisovány ve tvaru vlastnost: hodnota; Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Typy selektorů – vazby na elementy Vazba přes název elementu XHTML: CSS: Vazba přes třídu Vazba přes id <p>text</p> p {font-family: Verdana;} <p class="mujodstavec">text</p> .mujodstavec {font-family: Verdana;} <p id="mujjedinecnyodstavec">text</p> #mujjedinecnyodstavec {font-family: Verdana;} Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Jednotky v CSS Čísla Jednotky velikosti Procenta Barva Celá čísla bez i se znaménkem (14;-5;+9) Reálná čísla (0.5) Jednotky velikosti em – relativní jednotka – velikost „M“ právě používaného písma ex – stejné jako em, ale „x“ (bráno jako ½ em) px – pixel cm – centimetr in – palec Procenta Rel. jednotka, s i bez znaménka (25%; -5%; 50,5%) Barva Klíčovými slovy (black, blue, silver, red…) číselně rgb(80, 50,255), rgb(10%,20%,30%). Číselný rozsah je 0-255 V hexadecimálním tvaru (#RRGGBB) - #0000FF (čistá modrá) Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Shrnutí Webovou stránku lze vnímat ze dvou hledisek – formy a obsahu. Forma je tvořena rozložením stránky, barvami, použitím různých druhů písem, nadpisy… Obsahem jsou data, která jsou na stránce prezentována. Forma a obsah by se neměly nikdy mísit dohromady v jednom kódu. Řešení přináší použití kaskádových stylů. V ideálním případě jsou styly definované v externím souboru a jednotlivé elementy XHTML se na tyto styly odkazují. Vzniká tak prostor pro znovupoužitelnost již jednou definovaného formátování. Je možné využít dědičnosti (vnořený element přebírá formátování předka). Takový postup vytváření webových stránek vede k čistému kódu, ve kterém je možné upravovat formu na jednom místě, bez nutnosti zásahu do XHTML kódu (pokud nejde o zásadní změny layoutu). Kaskádové styly lze s XHTML provázat 3 způsoby – přes název elementu, přes třídu a přes identifikátor (id) elementu. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Příští přednáška Více o selektorech Pseudotřídy Formátování textu Okraje Pozicování Technologie pro publikování na webu 1, Ing. Jiří Štěpánek