CSS - kaskádové štýly pre moderný dizajn vašej domovskej stránky
Kaskádové štýly sa používajú v modernom webdizajne na oddelenie obsahu a dizajnu. To znamená, že obsah je v kóde HTML a dizajn a farby sú definované pomocou informácií o štýloch.
- centrálne definovateľný (súbor .css určuje vzhľad celej domovskej stránky, zmeny v tomto jednom súbore a potom tiež zmena zobrazenia celej domovskej stránky)
- rýchlejšia doba načítania, pretože jednotlivé stránky HTML sú štíhlejšie a centrálny súbor .css stačí načítať iba raz
- CSS je podporovaný všetkými prehľadávačmi v základných funkciách
- Ak prehliadač nepozná definíciu CSS, jednoducho sa nezobrazí. Stránka funguje aj tak (samozrejme nevyzerá skvele, ale funkčnosť zostáva zachovaná)
Príklad formátovania pomocou CSS:
Text naformátovaný pomocou CSS
A takto vyzerá zodpovedajúci zdrojový kód:
style = "background-color: # 0080FF; color: black; font-family: BankGothic Md BT; font-size: 20pt; letter-spacing: 5px; padding: 10px; text-align: center"> Text naformátovaný pomocou CSS
Červeno zafarbená časť je informáciou o CSS. Ako vidíte, informácie o CSS sa nachádzajú priamo v značke
a bude sa dať posledný deň
opäť skončil. Informácie CSS ovplyvňujú iba túto časť zdrojového textu.
Je však oveľa zaujímavejšie ovládať kompletný dizajn webových stránok pomocou externého súboru CSS. Takto je integrovaný externý súbor CSS:
V záhlaví súboru HTML pridajte odkaz na súbor .css.
Takto to vyzerá (v zdrojovom kóde):
Červená časť je rozhodujúcou časťou .css - tu sa odkazuje na váš súbor.
Teraz vytvorte vhodný súbor .css v editore Windows, v našom príklade súbor design.css s nasledujúcim obsahom:
Venujte osobitnú pozornosť prípone súboru .css! Teraz môžete súbor design.css ľubovoľne meniť.
Najjednoduchší spôsob, ako vytvárať a upravovať súbory .css, je použitie editora CSS Topstyle. Viac informácií nájdete tu:
- download.chip.eu/sk/TopStyle-Lite-3.10_919203.html - tu môžete zadarmo získať Topstyle Lite od spoločnosti Chip
- a tu profesionálna verzia (s nákladmi): www.topstyle4.com
V CSS existuje veľké množstvo formátovania. Najlepšie sú popísané na Selfhtml:
- wiki.selfhtml.org/wiki/CSS - Selfhtml je odkaz na HTML s veľkou oblasťou CSS, sú podrobne popísané a vysvetlené všetky možnosti formátovania a sú tu aj príklady.
Okolo CSS je tiež veľa trikov, rád a experimentov. Toto sú najzaujímavejšie webové stránky o kaskádových štýloch:
Týmto môžete oficiálne preukázať, že váš web obsahuje kaskádové štýly (CSS).
Našli ste na našom webe chybu? Dajte nám vedieť, aby sme mohli chybu opraviť!