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

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

Reklama
Reklama
Obrázek ke článku Mobilní datový provoz vzroste sedmkrát.

Mobilní datový provoz vzroste sedmkrát.

Už v roce 2021 bude mít více obyvatel zeměkoule mobilní telefon (5,5 miliardy) než bankovní účet (5,4 miliardy), tekoucí vodu (5,3 miliardy) nebo pevnou telefonní linku (2,9 miliardy). Vyplývá to z analytické studie Cisco Visual Networking Index (VNI) Global Mobile Data Traffic Forecast (2016 to 2021). Analytici také předpovídají, že se tento výrazný růst, spolu s rozmachem chytrých telefonů a připojení do internetu věcí promítne i do celkového objemu přenesených mobilních dat. Studie říká, že do roku 2021 vzroste sedminásobně, k čemuž přispěje i zvyšování přenosové rychlosti sítí a nárůst sledování videa na mobilních zařízeních.

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ý