1. Kaskádové štýly Alžbeta Bárdyová Zuzana Kotmanová BMI, 2013

2. INTRO& Syntax CSS CascadingStyleSheets = Kaskádové štýly Štýly, ktoré definujú ako budú HTML elementy zobrazené CSS sú podporované všetkými prehliadačmi Syntax Skladá sa z 2 častí: selektor a 1 alebo viac deklarácií Selektor určuje, ktorý HTML element budeme meniť Deklarácia vždy končí bodkočiarkou a skladá sa z vlastnosti a hodnoty, skupiny deklarácií sú usporiadané v zložených zátvorkách id – na špecifikáciu jedného jedinečného elementu, používa id atribút HTML elementu, definovaný je mriežkou “#” #para1{text-align:center;color:red;} Trieda – na špecifikáciu pre skupinu elementov, definovaná je bodkou “.” .center {text-align:center;}

3. spôsoby vkladania CSS Existujú 3 spôsoby vkladaniakaskádových štýlov: External style sheet, Internalstyle sheet, Inline style Externalstylesheet – ideálny ak sa používa pre viac stránok, každá stránka musí byť prepojená so súborom pomocou <link> v hlavičke <head><link rel="stylesheet" type="text/css„href="mystyle.css"></head> Môže byť napísaný v akomkoľvek textovom editore a nemal by obsahovať HTML tagy, uožený musí byť s príponou .css Internalstylesheet – pre jedinečný dokument, definovaný v hlavičke, použitím <style> <style> hr {color:sienna;} </style> Inlinestyle – Priamy štýl – ako atribút HTML prvku <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

4. Pozadie CSS vlastnosť Background = vlastnosti pozadia Farba pozadia (background-color) body {background-color:yellow;} Obrázok na pozadí (background-image) body {background-image:url('paper.gif');} Opakovanieobrázkuna pozadí (background-repeat) body {background-image:url('gradient2.png'); background- repeat:repeat-y;} Rolovanie obrázku na pozadí(background-attachement) body {background-image:url('img_tree.png');background-repeat:no-repeat;background-attachment:fixed;} Umiestnenieobrázku pozadia (background-position) body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:righttop;} Skrátený zápis všetkých vlastností body{background:lightblueurl('img_tree.png') repeat-y right top;margin-right:200px;}

5. background-color background-image background-attachement viaceré vlastnosti background-repeat background-position

6. tEXT Text Color body {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);} Text Alignment(left, right, justified) h1 {text-align:center;}p.date{text-align:right;}p.main{text-align:justify;} Text Decoration(none,overline,underline,blink,line-throungh) h1 {text-decoration:overline;} h2 {text-decoration:line-through;}h3 {text-decoration:underline;}h4 {text-decoration:blink;} Text Transformation(uppercase, lowercase, capitalize) p.uppercase{text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;} Text Indentation p {text-indent:50px;}

7. FONT Font Family p{font-family:"Times New Roman", Times, serif;} Font Style p.normal {font-style:normal;} p.italic {font-style:italic;}p.oblique {font-style:oblique;} Font Size • Set Font Size with Pixels h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} • Set Font Size with Em h1 {font-size:2.5em;} /* 40px/16=2.5em */h2 {font-size:1.875em;} /* 30px/16=1.875em */p {font-size:0.875em;} /* 14px/16=0.875em */

8. links Styling Links a:link {color:#FF0000;}      /* unvisitedlink */a:visited {color:#00FF00;}  /* visitedlink */a:hover {color:#FF00FF;}  /* mouse over link */a:active {color:#0000FF;}  /* selectedlink*/ Common Links Styles • Text Decoration a:link {text-decoration:none;}a:visited {text-decoration:none;}a:hover {text-decoration:underline;}a:active {text-decoration:underline;} • Background Color a:link {background-color:#B2FF99;}a:visited {background-color:#FFFF85;}a:hover {background-color:#FF704D;}a:active {background-color:#FF704D;}

9. tables Table Borders table, th, td{border: 1px solid black;} Collapse Borders table{border-collapse:collapse;}table,th, td{border: 1px solidblack;} Table Width and Height table {width:100%;}th{height:50px;} Table Text Alignment • Text-align (left, right, center) • Vertical-align (top, bottom, middle) Table Padding td{padding:15px;} Table Color table, td, th{border:1px solid green;}th{background-color:green;color:white;}

10. Ďakujeme za pozornosť