CSS – 1. lekce
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

CSS – 1. lekceCSS – 1. lekce

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

CSS – 1. lekce

Google       zatím neprovedena       23. 5. 2005       24 585×

Co to je CSS? Proč je lepší je používat? ..

Reklama
Reklama

1.1 - Co je to CSS?

CSS, nebo-li Cascading Style Sheets, česky „kaskádové styly“, vzniklo kolem roku 1997. K čemu CSS slouží si teď rozebereme. Dejme tomu, že děláte HTML stránku, na které máte normální text a několik (např. 12) nadpisů h1. Chcete, aby se nadpisy zobrazily modrou barvou a fontem Verdana. Budete muset u každého nadpisu samostatně definovat font a barvu. Není to trochu nemotorné? Přiznejme si, že to minimálně hodně zdržuje a výsledný kód nevypadá zrovna nejlépe. Díky CSS jen nadefinujete, že všechny nadpisy h1 se mají zobrazit modře a fontem Verdana. A je to na jeden řádek!

Toto je nejjednodušší forma CSS. Později se dozvíte, jaké různé fígle se s CSS dají udělat a také se naučíte, jak CSS zapsat do externího souboru, což je to nejefektivnější řešení. Jen na okraj se ještě zmíním, že na světě je už i návrh CSS 2, o něco víc „hi-tech CSS“ :), ale v IE to prý moc nefunguje. Ono se taky není moc čemu divit, že?;)

1.2 - Jak se dá CSS deklarovat?

CSS se dá uvařit na několik způsobů. Konkrétně na tři.

Za prvé, můžete ho umístit hned k prvku, který chcete formátovat. To atributem style=“.....“. Tato varianta je hodně nešikovná a moc se nepoužívá.

Za druhé, dá se umístit do hlavičky celého kódu. Říká se tomu stylopis, angl. „stylesheet“. Tato varianta je už lepší a používá se tak, že se jednotlivé atributy vkládají mezi tágy <style> a </style>.

A do třetice všeho dobrého - je použití externího souboru (např. whizzzkey.css). Na samotné strance je jen odkaz (tág <link>). Tahle možnost je prakticky stejná, jako možnost druhá, rozdíl je v tom, že je externí a tím pádem může mít efekt na více stránek!

1.3 - Deklarace prakticky

1.3.a - Zápis přímý - dejte ho hned k textu, který chcete formátovat. Ukážeme si to u odstavce:

<p style="color: green">Cely tento odstavec bude zeleny.</p>

Pomoci stejného zápisu píšu nyní modrou. Ale jen tento odstavec.

1.3.b - Stylesheet - dáme ho pěkně do hlavičky celého dokumentu:

<style> p   {color: green} </style>

A všechny odstavce budou zelené.

1.3.c - Externí CSS soubor - Této variantě se budeme věnovat, až váš skill v CSS trochu stoupne, a doufám, že to bude brzy.

1.4 - Na závěr malý úkol

Vaším úkolem v první lekci je poslat mi zdroják, ve kterém jste aplikovali první dva způsoby používání CSS. Tak se snažte, budeme známkovat!

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
Autor se věnuje technologiím XHTML, CSS a JavaScriptu. Mezi další záliby patří 2D a 3D grafika.

Nové články

Reklama
Reklama
Obrázek ke článku Jak fungoval internet ve vlaku během Train Hackathonu Kiwi.com?

Jak fungoval internet ve vlaku během Train Hackathonu Kiwi.com?

“Hackathon bez internetu?” posmívala se v komentářích pod pozvánkami na loňský #kiwicomtrainhack IT komunita napříč weby i sociálními sítěmi. Poznámky se zdály oprávněné, internetové připojení v českých vlacích má různou kvalitu a pořádat hackathon, na kterém je kvalitní internetové připojení základním požadavkem na organizátory, se zdálo být troufalé.

Obrázek ke článku Díky machine learningu SODAT pomáhá firmám rozpoznat riziko včas

Díky machine learningu SODAT pomáhá firmám rozpoznat riziko včas

Na trhu je novinka pro bezpečnostní monitoring a analýzu. Společnost SODAT totiž uvádí novou verzi produktu SODAT Analytics. Ten je určen pro monitoring a rychlou analýzu chování uživatelů na firemních počítačích. Upozornit dokáže na rizika i anomálie v chování a posílit tak bezpečnost a ochranu dat, a to ve spojení s dalšími moduly, jako je například SODAT Protection.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý