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

CSS - 2. lekceCSS - 2. lekce

 

CSS - 2. lekce

Google       Google       19. 7. 2005       18 955×

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 Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

Reklama
Reklama
Obrázek ke článku ICT PRO školení zaměřené nejenom na ICT

ICT PRO školení zaměřené nejenom na ICT

Dovolte, abychom se představili. Jsme zaměstnanci společnosti ICT Pro, profesionálové v oblasti poskytování komplexních ICT služeb. Neboli služeb spojených s informačními a komunikačními technologiemi, které dnes - ve 21. století - tvoří  nedílnou součást běžného provozu všech moderních firem.

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 © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý