Začíname

03.04.2011 17:10

Najskôr si opäť pomocou šablóny vytvorte dokument s názvom zaciname-s-css.html. Umiestnený môže byť v priečinku, v ktorom máte aj doteraz vytvorené dokumenty.

Aby sme mohli jednotlivé príklady hneď precvičovať, ukážeme si najskôr, ako vytvoriť a pripojiť daný štýl k dokumentu.

V zásade máme dve možnosti:

  • pripojenie štýlu z externého súboru s príponou css
  • definovanie štýlu priamo v danom dokumente

Pripojenie štýlu z externého súboru

V editore PSPad si vytvoríme nový štýl. Podobne ako pri vytváraní XHTML dokumentov využijeme šablónu. V ponuke Súbor - Nový zvolíme Podľa šablón šablónu CSS default.

Štýl následne uložíme do vytvoreného priečinku styles pod názvom style.css.

V editore PSPad otvoríme dokument zaciname-s-css.html a medzi tagy <head> </head> vložíme nasledovný kód:

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

Parameter href opäť udáva cestu k nášmu súboru CSS.

Definovanie štýlu priamo v dokumente

V editore PSPad vytvoríme dokument zaciname-s-css-2.html a medzi tagy <head> </head> vložíme nasledovný kód:

<style type="text/css"> <!-- //--> </style>

Do priestoru medzi <!-- //--> budeme definovať štýly.

My sa budeme zaoberať definovaním štýlu v externom dokumente.

Ako definovať štýl?

Štýl je zložený z pravidiel pre jednotlivé objekty, ktoré majú byť formátované. Každé z pravidiel má dve časti:

  • selektor - názov objektu, pre ktorý má dané pravidlo platiť
  • deklarácia - čo má platiť, teda vlastnosť a jej hodnota

Jednoduchý príklad

V dokumente zaciname-s-css.html vytvorme krátky text aj s nadpisom 1. úrovne. Napr.:

<h1>Nadpis</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at quam lacus, nec consequat ligula. Mauris non neque mi. Nunc molestie iaculis molestie. Nam dapibus justo vitae turpis gravida eleifend. Nullam vel justo non sem molestie gravida. In gravida lobortis nunc, ac interdum elit consequat nec. Vestibulum non leo felis. Mauris massa sapien, placerat vitae sagittis eget, suscipit non orci. Morbi id est ac justo ultricies tincidunt nec non lorem. Phasellus non augue risus, eu dictum nulla. </p>

Teraz si zadefinujeme štýl pre nadpis 1. úrovne. Nasledovný kód umiestnite do súboru style.css.

h1 {color:red;}

Otvorte súbor zaciname-s-css.html v internetovom prehliadači. Čo sledujeme?

Ak ste všetko vykonali správne, farba nadpisu bude červená.

Prečo pužívať CSS?

Možno táto otázka napadla aj vám. Ak ste pozorne čítali článok Čo je CSS, tak odpoveď poznáte. Ak nie, prečítajte si ho ešte raz.

V dalšom článku sa dozviete, s akými jednotkami veľkostí sa stretneme.

—————

Späť

Novinky

Vytvorme jednoduchý web - HTML&CSS

05.04.2011 05:45
V rubrike HTML & CSS sa oboznámite so základmi tvorby webových stránok, pričom budeme využívať jazyk XHTML a...

—————

Spustili sme webovú prezentáciu o tvorbe webu

01.04.2011 10:25
Webová stránka o tvorbe webových stránok. Znie to krkolomne, pravda? Aj ja si to myslím, ale keď som začínal s tvorbou...

—————

Všetky články

—————