Technologie pro publikování na webu 1

Technologie pro publikování na webu 1

Kaskádové styly (CSS)

Ing. Jiří Štěpánek

Forma a obsah

Webovou stránku lze rozdělit na dvě části

Forma 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

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

<font color="red" face="Arial">Varování</font>


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


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


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.


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


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ánkyTechnologie 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


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" />

Deklarace stylů - pravidlo

Příklad ilustruje stylování odstavce


p { font-family: Verdana; font-size: 12px; color: red;}

Selektor

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;

Typy selektorů – vazby na elementy

Vazba přes název elementu XHTML:

CSS:Vazba přes třídu

XHTML:CSS:

Vazba přes id XHTML:

CSS:


<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;}

Jednotky v CSS

Čísla 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á)


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.

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

Documents

Transcript of Technologie pro publikování na webu 1