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

CSS - 2. lekceCSS - 2. 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 - 2. lekce

Google       Google       19. 7. 2005       20 595×

2.1 - Malá rozcvička
2.2 - Úvod do TopStyle a definice externího CSS souboru
2.3 - Domácí úkol

Reklama
Reklama

2.1 - Malá rozcvička

Takže konečně mám funkční monitor, ME v baseballe skončilo, a tak vás čeká 2. lekce z CSS.

Dnes začneme trochu složitějším zápisem. Budeme chtít, aby všechny nadpisy h1 byly vapsány fontem Verdana, velikostí 28px a modrou barvou. Tím ovšem nekončíme. Dalším kritériem bude červená barva a font Arial u textu v odstavcích. Zápis bude vypadat následovně:


<style>
p {color: red; font-family: Arial CE}
h1 {color: blue; font-family: Verdana; font-size: 28px}
</style>

A výsledek? Pokud jste postupovali správně, měl by se zobrazit takhle:

Toto je nadpis h1

Tento text je červený s fontem Arial CE.

Pozorně si ještě jednou prohlédněte syntaxi při více parametrech - {color: blue; font-family: Verdana ; font-size: 12px}

Teď máme konečně úplné základy za sebou. Bylo by dobré znát všechny možnosti formátování pomocí CSS a asi nejlepším řešením je program TopStyle. Já v současnosti používám verzi TopStyle Lite 3.10. Můžete si také objednat verzi Pro, ale Lite vám bude zatím bohatě stačit. Celý program můžete stahovat na adrese www.bradsoft.com.

2.2 - Úvod do TopStyle a definice externího CSS souboru

Tak, teď se rychle naučíme základy s programem TopStyle. Ukážeme si to na tvorbě jednoduchého externího CSS dokumentu, čímž si zároveň vysvětlíme, jak se zapisuje externí CSS a zabijeme tak dvě mouchy jednou ranou.

1. - Spustíme program TopStyle (překvapivě).

2. - Z nástrojové lišty zvolíme tlačítko pro nový dokument.

3. - Opět z lišty zvolíme tlačitko New Selector.

4. - Otevře se následující okno.

Z políčka HTML Element vybereme prvek, který chceme formátovat a potvrdíme OK. Můžete si všimnout, že atributy v externím CSS souboru nejsou ohraničeny tagem <style> nebo podobně, takže neudělejte chybu.

5. - Na pravé straně obrázku je tzv. Style inspector, kde vybíráme jednotlivé atributy pro formátovaný prvek. Úplně dole se zobrazuje Preview vašeho stylopisu.

Celý soubor uložíme např. jako mujstyl.css a na závěr do hlavičky dokumentu jen napíšeme řádek:


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

Nebo druhou variantou (nefunguje v Netscape 4 a např. já ji vůbec nepoužívám):


<style type="text/css"> @import url('mujstyl.css'); </style>

Je to ďábelsky jednoduché a praktické, protože na tento soubor jen odkážete všechny stránky svého webu a nemusíte styly pořád vypisovat jako otroci do každé stránky zvlášť.

2.3 - Domácí úkol

Domácí úkol bude dnes docela delší, ale na druhou stranu prověří vaše znalosti a nádherně si CSS procvičíte. Máte za úkol napsat zdroják souboru CSS, kde

  • všechny nadpisy <h1> budou mít tmavě zelenou barvu (přesný odstín si zvolte sami, jen dodržte tu zelenou :) a velikost 24px
  • text v normálním odstavci <p> bude mít font Verdana, velikost 11px a fialovou barvu
  • všechny odkazy <a> budou bez podtržítka (pokud nevíte, pište si o nápovědu na můj mail), velikosti 18px a modré barvy

×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.

Tagy:
css
2 názory  —  2 nové  
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 Virtuální zrcadla změní způsob nakupování v e-shopech

Virtuální zrcadla změní způsob nakupování v e-shopech

Díky pluginu Virtooal.com získávají zákazníci e-shopů možnost si vyzkoušet produkty ve virtuálním světě. E-shopy, které si plugin nainstalují, výrazně snižují množství vráceného zboží, dělají nákupy zábavnějšími, a tím budují lepší vztahy se svými zákazníky. V současnosti lze Virtooal.com využít zejména pro kosmetiku, brýle a šperky, do budoucna půjde také o módu.

Reklama
Reklama
Obrázek ke článku Kariérní postup & vyšší plat: Titul MBA ve sféře IT

Kariérní postup & vyšší plat: Titul MBA ve sféře IT

Působíte jako specialista v oblasti IT a aspirujete na povýšení, příp. řídící pozici? Pak se jistě potýkáte nejen s vysokými nároky (potenciálních) zaměstnavatelů, ale i se silnou konkurencí ze strany ostatních uchazečů. Pokud chcete zvýšit své šance na kariérní posun a lepší plat, měli byste vedle technických dovedností ovládat i ty manažerské. Pomoci vám v tomto ohledu může studium MBA se specializací na management IT.

Obrázek ke článku Tisková konference Hackers Congress Paralelni Polis 2018

Tisková konference Hackers Congress Paralelni Polis 2018

Již pátý ročník akce globálního významu Hackers Congress Paralelni Polis 2018 se letos odehraje 5. – 7. října, a to znovu v prostorech Paralelní Polis a přilehlého divadla La Fabrika na Praze 7. Na kongres se opět sjedou světoví odborníci, kteří svým zaměřením kopírují čtyři základní pilíře akce. Jsou jimi Svoboda a kryptoanarchie, Decentralizovaná ekonomika a kryptoměny, Politické umění a hacking a také Věda a technologie

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