1 / 10

Kaskádové štýly

Kaskádové štýly. Alžbeta Bárdyová Zuzana Kotmanová BMI , 2013. INTRO & Syntax. CSS C ascading S tyle S heets = 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í

libra
Download Presentation

Kaskádové štýly

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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ť

More Related