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

CSS - 2. lekceCSS - 2. lekce

 

CSS - 2. lekce

Google       Google       19. 7. 2005       19 445×

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 JIC otevírá největší digitální dílnu pro veřejnost v České republice

JIC otevírá největší digitální dílnu pro veřejnost v České republice

JIC otevírá první nonstop veřejně dostupnou digitální dílnu světového formátu s vybavením za 3 miliony korun. Dílnu může využívat po registraci kdokoliv. V  prostorách vzniknou prototypy produktů místních startupů, projekty kutilů a studentů i umělecká díla. Cílem dílny je zpřístupnit veřejnosti drahé přístroje a přitáhnout více podnikavých lidí k technickým oborům.

Reklama
Reklama
Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

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ý