Zdroj: http://www.mojezaliby.cz/web-stranky/tvorba-webu-css  •  Vydáno: 6.3.2012 22:32  •  Autor: Antonio

Tvorba webu - CSS

Tvorba webu - CSSTento článek tematicky navazuje na jeden z předcházejících věnovaný statickým webovým stránkám, vychází z ukázky v něm a dále ji rozvíjí o použití kaskádových stylů - CSS

V tomto článku tedy budeme pracovat s touto nenastylovanou stránkou. Hned na úvod se mi nelíbí, že je zarovnaná úplně vpravo a to zvláště na širokoúhlých monitorech působí nepříjemně. Dále bych chtěl obsahovou část nějak oddělit od okolí, aby se zlepšila přehlednost. Stylovat je možné přímo v html souboru. Mnohem přehlednější a správnější, je však mít zvláštní soubor s kaskádovými styly - CSS.

Jak začít?

Předně musím v html souboru uvést cestu k souboru se stylem. Do hlavičky (nacházející se mezi tagy head) přidám následující:

<link href="style.css" type="text/css" rel="stylesheet" >

V tomto případě se tedy style.css nachází ve stejném adresáři. Soubor style.css mohu napsat třeba v poznámkovém bloku. Bude obsahovat úpravu tagu body - nastavení žlutého pozadí. A nový identifikátor #obsah.

img

Tagu body jsem tedy nastavil background s příslušným číslem barvy. Identifikátoru #obsah (do kterého jsem také obsah v html souboru obalil) jsem nastavil šířku, zarovnání na střed okna prohlížeče, bílé pozadí, vnitřní okraj (padding) aby obsah uvnitř nebyl hned u okraje a nakonec šedý 1px okraj. A zde tedy opět výsledná ukázka.