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

CSS – 1. lekceCSS – 1. lekce

 

CSS – 1. lekce

Google       zatím neprovedena       23. 5. 2005       23 449×

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 RAD Studio a Windows Store

RAD Studio a Windows Store

RAD Studio je první vývojové prostředí se zabudovanou podporou balení aplikací typu Win32 a Win64 pro jejich umístění a šíření prostřednictvím Windows 10 Store.

Reklama
Reklama
Obrázek ke článku Testujte na 2 400+ Android a iOS zařízení

Testujte na 2 400+ Android a iOS zařízení

V dnešní době, kdy většina softwaru pro mobilní aplikace je tvořena a distribuována průběžně, mnohdy do celého světa je třeba zajistit také průběžnou automatizaci testování mobilního softwaru. V případě mobilních aplikací pro Android a iOS začíná být problém, jak testovat na obrovském množství kombinací HW variant, rozměrů, edic operačních systémů různých výrobců v různých částech světa na reálných zařízení. Simulátory a emulátory nejsou většinou to pravé. Pokud již testuji, jak si udělat vlastní beta distribuci opravdovým reálným testerům napříč platformami?

Obrázek ke článku Funkcie main vo Windows API

Funkcie main vo Windows API

V tretej časti seriálu o Windows API budeme hovoriť o funkčných prototypoch main. Funkčný prototyp je tvorený názvom funkcie a typom signatúry, pričom sa vynecháva telo funkcie. 

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý