Download presentation
Presentation is loading. Please wait.
1
Ing. Anita Sáreníková/ Cvičenia z aplikovanej informatiky
HTML a CSS Ing. Anita Sáreníková/ Cvičenia z aplikovanej informatiky Obchodná akadémia, Akademika Hronca 8, Rožňava Moderné vzdelávanie pre vedomostnú spoločnosť / Projekt je spolufinancovaný zo zdrojov EÚ OA Rožňava – moderná škola ITMS kód Projektu
2
HTML ul - odrážky ol - zoznam (číslovanie) li - položky v zozname
<li type=„square“> </li> - štvorec Disk Circle
3
Farby v HTML http://deja-vix.sk/htmlhelp/farby.html
4
HTML a CSS (X)HTML súbor sa zobrazuje preddefinovaným vizuálnym a typografickým štýlom, ktorý je úmyselne veľmi strohý a konzervatívny. Toto preddefinované zobrazenie webu v prehliadači sa dá meniť pomocou CSS. Základná funkcionalita (X)HTML sa dá dokonca pomocou CSS výrazne rozšíriť. Pozn. To, čo sa hodí, treba nechať. Iné zmeniť. Moderné vzdelávanie pre vedomostnú spoločnosť Projekt je spolufinancovaný zo zdrojov EÚ
5
CSS - Cascading Style Sheets
CSS je deklaratívny jazyk. (Navonok okázalý.) Má jednoduchý a čitateľný syntax. (Nie je ťažké sa ho naučiť.) CSS súbor sa nazýva aj šablóna alebo štýl. Šablóna, ktorá obsahuje pravidlá. Selektor určuje, na ktoré elementy bude pravidlo (deklarácia) aplikované. V zložených zátvorkách sa nachádza séria deklarácií .
6
p strong {color: navy; font-weight: bold; background:transparent}
selektor deklarácia vlastnosť hodnota Selektor hovorí, že pravidlo bude aplikované na každý element strong. Na každý takýto element v dokumente budú aplikované tri deklarácie: farba, typ písma - tučné a pozadie transparentné.
7
Zápis v hlavičke html súboru
<link rel="stylesheet" href="resources/style.css" type="text/css"> Príklad css súboru
8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML> <HEAD> <TITLE>Skúšobná www stránka</TITLE> <META http-equiv="Content-Type" content="text/html; charset="utf-8"> <STYLE type="text/css"> BODY { font-family: 'Arial'; /* Na celej stránke bude font Arial */ color: blue; /* Text bude modrý */ font-size: 12px; /* Veľkosť textu bude 12 pixelov */ } H1 { color: red; /* všetky veľké nadpisy budú červené */ } </STYLE>
9
</HEAD> <BODY> <!-- Aktivuje sa štýl pre BODY--> <H1>Používam CSS</H1> <!-- Aj keď pre BODY mám modrú farbu, prekryje to najneskôr použité (H1), takže bude červený--> <P>Text</P> <!-- Tento text bude modrý (červená sa ukončila /H1)--> </BODY> </HTML>
10
body { background-color:#E0E0E0; margin:0px; padding:12px; } table,img { border-width:0px; } img.layout { display:block; } .centered { margin-left:auto; margin-right:auto; text-align:left; } .photoDescription,.slideshowDescription,.footer,.navigation,.subalbumDescription,.albumDescription { font-family:'Lucida Grande',Verdana,Helvetica,sans-serif; color:#606060; } .albumTitle,.subalbumTitle,.subalbumLink,.slideshowTitle { font-family:'Trebuchet MS','Lucida Grande',Arial,Helvetica,sans-serif; color:#505050; } .albumTitle { font-size:34px; font-weight:bold; color:#FFFFFF; } .albumDescription { font-size:14px; color:#FFFFFF; } .photoDescription { font-size:11px; } .subalbumTitle { font-size:20px; font-weight:bold; text-align:center; } .subalbumDescription { font-size:12px; text-align:center; } .slideshowDescription { font-size:12px; text-align:center; } .navigation { font-size:12px; } .footer { font-size:9px; text-align:center; color:#909090; } .subalbumLink { font-size:15px; font-weight:bold; } a:link,a:visited,a:active { text-decoration:none; color:#3060C0; } a:hover { text-decoration:none; color:#A0A0A0; }
Similar presentations
