Download presentation
Presentation is loading. Please wait.
1
CSS - Cascading Style Sheets
Kaskádové štýly CSS - Cascading Style Sheets
2
Na čo je CSS? Štandard CSS (Cascading Style Sheets), priniesol do webdizajnu možnosť oddeliť obsah webových dokumentov od prezentácie jazyk CSS používame na opis prezentácie dokumentov, teda ako dokument vyzerá CSS nám umožňuje opísať prezentáciu dokumentov oddelene od štruktúry – k HTML dokumentu prilinkujeme súbor so štýlom, ktorý opisuje, ako majú byť jednotlivé HTML elementy naformátované Výhodou je, že jeden CSS súbor môžeme použiť s viacerými HTML dokumentmi, a keď následne potrebujeme formátovanie zmeniť, môžeme to urobiť rýchlo a jednoducho
3
Čo je CSS? CSS súboru hovoríme šablóna alebo tiež štýl (style sheet)
Podobne ako (X)HTML dokumenty, aj CSS šablóny sú vlastne textové súbory Šablóna pozostáva z pravidiel Pravidlo sa skladá z dvoch častí: Prvá je podmienka, ktorej hovoríme selektor, a ktorá určuje, na ktoré elementy v dokumente bude pravidlo aplikované Druhá časť je séria deklarácií, uzavretá v zložených zátvorkách, z ktorých každá mení nejakú vlastnosť cieľového elementu
4
Druhy selektorov Selektor je časť pravidla, ktorá určuje, na ktoré elementy bude pravidlo aplikované. Základné druhy selektorov sú: selektor typu: vyberá element podľa mena elementu. Občas sa hodí aj univerzálny selektor, znak „*“, ktorý vyberá každý element; ID selektor: vyberie element, ktorý má hodnotu atribútu id nastavenú na nejakú konkrétnu hodnotu. Takýto element môže byť v celom dokumente iba jeden. Selektor má tvar #<hodnota> ; selektor triedy: vyberá podľa hodnoty atribútu class, hodnotou ktorého môže byť medzerami oddelený zoznam tried. Má tvar .<trieda> . Je to jeden z najpoužívanejších a najpraktickejších selektorov; selektor pseudo-triedy: vyberá element, ktorý je v určitom stave, v závislosti od akcie, ktorú vykonal používateľ. Tento selektor začína znakom „:“. Najdôležitejšie pseudo-triedy sú :link (nenavštívený odkaz), :visited (navštívený od-kaz), :hover (element, nad ktorým je práve kurzor), a :active (element, nad ktorý požţívateľ drží stlačené tlačidlo myši).
5
Selektor typu body { color: navy; background: aqua }
element vlastnosť hodnota h1 { font-size: 128% } p { font-family: Arial, Helvetica, sans-serif }
6
Selektor triedy Definovanie štýlu: .cerveny { color: red; font-size: 12pt;} Použitie v kóde: <P CLASS=„cerveny“>Červený text</P> <H2 CLASS=„cerveny“>Červený nadpis</P>
7
Ako aplikovať CSS? Aby sa formátovanie spustilo, musíme pripojiť CSS šablónu k dokumentu Máme niekoľko možností: Prvou je vložiť CSS kód priamo do (X)HTML dokumentu, v hlavičke (tzv. interný štýl)
8
Interný štýl <head> <title>Náš prvý dokument s CSS</title> <style type="text/css"> body { color: navy; background: aqua } h1 { font-size: 128% } p { font-family: Arial, Helvetica, sans-serif } </style> </head>
9
Externý štýl Druhou (oveľa lepšou možnosťou) je uložiť CSS šablónu do samostatného súboru a ten prilinkovať s využitím elementu link, opäť v hlavičke. Takto môžeme tú istú šablónu opätovne využiť na formátovanie viacerých dokumentov Pripojenie z externého súboru moj_styl.css : <link rel="stylesheet" type="text/css" href="moj_styl.css"/>
10
Inline štýl Okrem týchto dvoch možností existuje v (X)HTML ešte atribút style, ktorý môže mať každý vizuálny element Hodnotou atribútu nie sú pravidlá ale séria deklarácií oddelených bodkočiarkou Takéto použitie, nazývané tiež inline štýl, je zo všetkých najmenej odporúčané; znovupoužiteľnosť kódu je tu fakticky nulová
11
Inline štýl - príklad <h1 style="text-align: center; background-color: rgb(255, 204, 102);"><a name="Moja_prvá_stránka"></a><span style="background-color: rgb(153, 0, 0);"><span style="font-weight: bold;"></span><span style="color: rgb(255, 204, 153);">Moja p<a href="#Moja_prv%E1_str%E1nka">rvá stránka</a></span></span></h1>
12
Javascript Pod client-side programovaním - programovaním na strane klienta, rozumieme možnosť obohatenia webových stránok o programový kód, ktorý je interpretovaný prehliadačom. Keďže ide zväčša o kratšie programy, ktoré sú interpretované, nazývame ich niekedy aj client-side skripty. Umožňujú interaktivitu na webe
13
Štruktúra javascriptu
JavaScriptový program môžeme do webovej stránky vložiť pomocou HTML elementu script -(interný). Element script môžeme vložiť ako do hlavičky, tak aj do tela HTML dokumentu. <script type="text/javascript"> /* ... programový kód ... */ </script> Prípadne môžeme program uložiť do samostatného súboru(externý) a tento potom prilinkujeme k webovej stránke Pripojenie z externého súboru moj_script.js : <script type="text/javascript" src=„moj_script.js"/>
14
Príklad scriptu Posledna zmena dokumentu
<html> <head> <title> JavaScript DESTINATION - P020 </title> <SCRIPT LANGUAGE="JavaScript"> <!-- function MakeArray(n) {this.length = n; return this;} var Days = new MakeArray(7); var Months = new MakeArray(12); Days[1]="Nedela"; Days[2]="Pondelok"; Days[3]="Utorok"; Days[4]="Streda"; Days[5]="Stvrtok"; Days[6]="Piatok"; Days[7]="Sobota"; Months[1]="Januar"; Months[2]="Februar"; Months[3]="Marec"; Months[4]="April"; Months[5]="Maj"; Months[6]="Jun"; Months[7]="Jul"; Months[8]="August"; Months[9]="September"; Months[10]="Oktober"; Months[11]="November"; Months[12]="December"; function getNiceDate(theDate) { return Days[theDate.getDay()+1] + " " + theDate.getDate() + " " + Months[theDate.getMonth()+1] + " 19" + theDate.getYear(); } // --> </SCRIPT> </head> <BODY> Posledna zmena: <SCRIPT LANGUAGE="JavaScript"> <!-- var lastMod = new Date(); lastMod.setTime(Date.parse(document.lastModified)); document.writeln(getNiceDate(lastMod)); // --> </body> </html>
Similar presentations
