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

CSS – 1. lekceCSS – 1. lekce

 

CSS – 1. lekce

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

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

Obrázek ke článku Seznamte se s open source platformou NopCommerce – 1. díl

Seznamte se s open source platformou NopCommerce – 1. díl

Hledáte e-commerce řešení, které si dokážete přizpůsobit podle vašich požadavků? Chcete čistý a srozumitelný kód, se kterým bude radost pracovat? Prozkoumejte s námi možnosti open source projektu NopCommerce. Seriál programování pod NopCommerce Vám pomůže překonat první kroky nejistoty a úspěšně zvládnout vývoj pod platformou NopCommerce.

Reklama
Reklama
Obrázek ke článku Facebook spouští službu Marketplace V ČR

Facebook spouští službu Marketplace V ČR

Společná platforma Marketplace usnadní lidem na Facebooku vyhledávání, nákup a prodej použitého zboží na lokální úrovni. Bude tak přímou konkurencí pro weby a aplikace se stejným zaměřením jako je například Letgo, Bazoš, Aukro, Sbazar a další.

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