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

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 NEWTON Media prohledá 200  milionů mediálních zpráv během sekund díky Cisco UCS

NEWTON Media prohledá 200 milionů mediálních zpráv během sekund díky Cisco UCS

Česká společnost NEWTON Media provozuje největší archiv mediálních zpráv ve střední a východní Evropě. Mezi její zákazníky patří například ministerstva, evropské instituce nebo komerční firmy z nejrůznějších oborů. NEWTON Media rozesílá svým zákazníkům každý den monitoring médií podle nastavených klíčových slov a nabízí online službu, kde lze vyhledat mediální výstupy v plném znění od roku 1996.

Reklama
Reklama
Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

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ý