43646
TWS-CSS
CSS a tvorba „stylesheet“ v programe Adobe Dreamweaver.
CSS znamená (Cascading Style Sheets) – kaskádové štýly - jazyk pre formátovanie elementov HTML.
Je to mechanizmus na vizuálne formátovanie internetových dokumentov, ktoré sú písané v jazykoch HTML, XHTML, či XML.
Vytvorenie pravidla štýlu: potrebujeme dve časti, selektor a deklaráciu/ie štýlu.
Napr.: h1 – selektor
{ - zahájenie deklarácie štýlu
color: - nejaká vlastnosť (v tomto prípade farba)
; - stredník (uzatvára deklaráciu)
} – koniec deklarácie
Na bližšie špecifikovanie elementov používame identifikátor (id) a triedu (class). Identifikátor s konkrétnym názvom môžme použiť v rámci jednej web stránky iba raz. Triedu možno používať opakovane, a to aj s rovnakým pomenovaním.
Takto sa označujú:
Napr. div#menu p {color: red;} (mriežka sa používa pre identifikátor - id)
div.prava {color: red;} (bodka a používa pri triede – class)
Ako sa tvorí šablóna stylesheet v Adobe Dreamweaver:
Najprv si vytvoríme priečinok a v ňom stránku (napr. index.html), ku ktorej potom vytvoríme šablónu CSS.
(teda : file (soubor) – new(nový) – CSS a hneď ju aj uložíme do toho istého priečinka kde je náš index.html pod názvom sablona.css
Do hlavičky <head> vložíme prepojenie teda link so šablónou:
<link rel="stylesheet" type="text/css" href="sablona.css" />
Nasleduje samotná práca na šablóne, ktorá nám upraví teda naštýluje určené oblasti našej stránky.
V závislosti od rozloženia stránky sa bude odvíjať aj počet divov (blokov) a taktiež tried. Identifikátor (id) môžme použiť na torbu menu alebo navigácie napr.:
div#navigacia a{
text-decoration:none;
color:#F00;
font-weight:bold;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20px;
}
Aby nám šablóna upravovala našu stránku je potrebné danú triedu alebo identifikátor umiestniť v html kóde našej stránky a to na mieste, ktoré má byť upravené. Napríklad v šablóne som si vytvoril tri triedy– celok, prava_strana a lava_strana, samozrejme chcem aby pravá a ľavá strana boli umiestnené v celku, tak to bude vyzerať takto:
<body>
<div class="celok">
<div class="prava_strana"> Tuto je text umiestneny v bloku resp. triede pravá strana</div>
<div class="lava_strana">Tuto je text umiestneny v bloku resp. triede ľavá strana </div>
</div>
</body>