CSS - úvod, 2.diel

Prvý úvod do CSS. Naučíte sa syntax CSS, veľmi lahký úvod do formátovania textu, určovanie dĺžkových jednotiek a zápis farieb.

V minulom dieli sme si povedali čo to vlastne CSS je a teraz si ukážeme kam CSS máme zapisovať.
Na zápis máme viac možností:
1. priamy zápis do dokumentu HTML

<html>

<head>

<style>

h1 { font-size: 150% }

</style>

</head>

<title>Titulok</title>

<body>

<h1>Nadpis</h1>

</body>

</html>

2. čerpanie CSS s externého súboru

<html>

<head>

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

</head>

<title>Titulok</title>

<body>

<h1>Nadpis</h1>

</body>

</html>

3. priami zápis do elementu

<html>

<head>

</head>

<title>Titulok</title>

<body>

<h1 style="font-size: 150%">Nadpis</h1>

</body>

</html>

Pri 1 spôsobe sa definícia štýlu vzťahuje na celú stránku resp. na všetky nadpisy h1 na stránke. 2. spôsob je rovnaký ako ten 1. len s tým rozdielom, že je uložený v samostatnom súbore s ľubovolným názvom. CSS súbor sa potom zahrnie do stránky pomocou názorného zápisu. Pri 3. spôsobe bude štýl formátovaný len pre daný element. Teraz ste mohli spozorovať výhodu CSS. Nadpis H1 sme jednoducho zmenili a nepotrebovali sme dlhé zápisy ako v HTML.

Základný zápis CSS nieje problém rozoznať od HTML. Je až príliš odlišný ale nieje o nič ťažší. Syntax CSS je trochu odlišná ak používame 3. spôsob. Vtedy nepoužívame zložené zátvorky ale iba to čo by mali obsahovať. Ostatná syntax by mala vyzerať nasledovne:

h1 {

font-size: 150%;

}

Je jedno či zapisujeme štýly "rozhádzane" napr. takto:

h1 { font-size: 150%; }

Všetko bude fungovať, tak ako má. Bodkočiarka na konci nejakej definície bude slúžiť na jej ukončenie. Posledná nieje povinná, čiže by sa nič nestalo, ak by sme predchádzajúcemu príkladu vymazali na konci bodkočiarku. Príklad na zápis bez nej môže vyzerať takto:

h1 {

font-size: 150%;

color: red

}

Zápis bude funkčný, či s bodkočiarkou na konci alebo bez nej.

Trochu základnej praktiky tiež nezaškodí a určite budete radi, ak sa dozviete aj niečo o formátovaní textu cez CSS. Ako prvé je najlepšie určiť v CSS body {}, čiže telo stránky. Uvediem klasický postup zápisu do CSS.

body {

font-family: "Trebuchet MS",arial,sans-serif;

font-size: 100%;

color: red

}

Font-family nám určuje aký typ fontu/písma budeme používať na stránke. Koľko písiem si určíte je na vás. V našom prípade je primárne písmo Trebuchet MS a ak ho systém na ktorom ste obsahuje, tak bude načítané a použité pre vašu stránku. Prvé písmo je zapísané v úvodzovkách preto lebo sa skladá s viac ako jedného slova. Ak by však toto písmo váš systém neobsahoval bude načítané ďalšie písmo a to arial. Ak by ale toto písmo systém tiež nemal bude použité písmo sans-serif. Toto písmo už určite systém mať bude. Je to písmo generické a nieje samé svojho zo svojho druhu. Generické písma by sa mali zapisovať na koniec definície font-family.
Generické písma sú:

serif
sans-serif
monospace
cursive
fantasy

Niekoľko s nich sa na web v podstate ani nepoužíva ale ich použitie možné je. Ďalej sme v body určovali aj veľkosť písma. Najlepšie je ho určovať v percentách, pretože čitatelia stránky môžu mať rôzne rozlíšenia obrazovky. Jednotky dĺžky v CSS nemusia byť ale len v percentách ale možností je veľa. Rozdelenie týchto jednotiek je na absolútne a relatívne. Absolútne sú skutočné napr. 5cm bude vždy len päť bez ohľadu na to či máte rozlíšenie obrazovky 800x600 alebo 1024x768 či iné. Relatívne veľkosti a ich rozmery môžu byť rôzne záleží na tom v akej situácií sa nachádzate resp. ako máte nastavanú napr. veľkosť písma - tak sa zachová niektorý s týchto dĺžkových parametrov(napr. em).
Absolútne určenie dĺžky:

Relatívne určenie dĺžky:

Nakoniec k nám prišli farby. Farby môžeme zapísať 5 spôsobmi a to takto:
1. výber jednej zo 16 farieb(red, yellow, black atď.)
2. miešaním farieb RED, GREEN a BLUE. Tieto možnosti sa vetvia na farby v tvare:
- #(red 2x)(green 2x)(blue 2x) = #ffffff čo znamená biela farba určená v dlhom zápise.
- #(red)(green)(blue) = #fff čo znamená biela farba určená v skrátenom zápise.
- rgb(255,255,255) = bude to tiež biela farba. Tento spôsob je zhodný napr. s grafickými nástrojmi(miešanie farieb).
- rgb(100%,100%,100%); = opäť som uviedol tvar bielej farby. Všetko sa určuje v percentách odtieňu.

Každý zápis farby je opakujem v tvare RGB, čiže nieje čo viac riešiť :-)
Toto boli základné zápisy farieb, textu a syntaxy CSS. V nasledujúcej časti si povieme čo sú to triedy a identifikátory.

Alternatívne verzie:

Autor: PaBi3 · Kategória: Webdesign · Dátum: 15.05.2005 14:55

Komentáre

Zatiaľ tu nie sú žiadne komentáre.