1 / 20

CSS

CSS. Kaskádové štýly. CSS – C ascading S tyle S heets zobrazovanie HTML elementov vytváranie externý súborov . css. Použitie štýlov. 3 spôsoby: e xterné CSS súbory, interný štýl, inline ( priamy ) štýl. Externé Css súbory. <! doctype html> <html> < head >

jara
Télécharger la présentation

CSS

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. CSS Kaskádové štýly

  2. CSS – CascadingStyleSheets • zobrazovanie HTML elementov • vytváranie externý súborov .css

  3. Použitie štýlov • 3 spôsoby: • externé CSS súbory, • interný štýl, • inline (priamy)štýl.

  4. Externé Css súbory • <!doctype html> • <html> • <head> • <title>Externe Csssubory</title> • <linkrel="stylesheet" type="text/css" href="styly.css"> • </head> • <body> • <h1>Ukazka pouzitiaexternychcss suborov</h1> • </body> • </html>

  5. súbor: styly.cssbody{background-color: lightblue;}h1 {font-size: 20px;text-align:left; font-weight: bold;color:blue;}

  6. Interný štýl <head> <title>Internystyl</title> <style> body {background-color: lightblue;} h1 {font-size: 20px;text-align:left; font-weight: bold;color:blue;} </style> </head> <body> <h1>Ukazka pouzitiainterneho stylu</h1> </body>

  7. Inline(priamy) štýl <head> <title>Inlinestyl</title> </head> <body style="background-color:lightblue;"> <h1 style="font-size: 20px;text-align:left;font-weight: bold;color:blue;"> Ukazkapouzitiainline stylu</h1> </body>

  8. Nastavenie pozadia • background-color • background-image • background-repeat (no-repeat,repeat-x(y)) • background-attachment (scroll, fixed) • background-position (top, center, bottom, left,right)

  9. Background-color • HEX - # • RGB – rgb(,,) • meno farby <body style="background-color:RGB(255,128,0);"> </body> Background- transparent (priehľadné pozadie)

  10. Background-image <head> <title>Pozadie</title> </head> <body style="backgroundcolor:green;"> <p style="background-image: url('obrazok2.jpg');width:162px; height:172px;float:left;"> </p> </body>

  11. Background-repeat <head> <title>Pozadie</title> </head> <body style="background-color: green; background-image: url('obrazok2.jpg'); background-repeat:repeat-y;"> </body>

  12. Nastavenie textov • text-color • text-align (left,right,center,justify) • text–decoration (none,underline,overline,line-through,blink) • text-transform (none, capitalize, uppercase,lowercase) • text-indent

  13. body {background-color:blue;} h1 { color:white; text-align:center; text-decoration:underline; text-transform:uppercase; text-indent:50px;} p {color:#ffffff; text-align:right; text-decoration:none; text-transform:capitalize; text-indent:100px;}

  14. Nastavenie fontov • font-family • font-style (normal, italic, oblique) • font-size (small, medium, large, px,%, ….)

  15. body {background-color: blue;} h1 { color:white;text-align:center;text- decoration:underline;text-transform:uppercase; text-indent:50px; font-family:Times New Roman; font-style:italic; font-size:50px;} p {color:#ffffff;text-align:right;textdecoration:none; text-transform:capitalize; text-indent:100px; font-family:Arial CE; font-style:normal; font-size:1.8em;}

  16. Nastavenie odkazov • a:link – (normálny, základný stav odkazu) • a:visited – (stav kedy užívateľ použil odkaz) • a:hover - (stav keď kurzor myši je na ňom ) • a:active - (stavv momente kliknutia)

  17. a:link {color: green; text-decoration: underline; background-color:#ffffff;} a:visited {background-color:lightblue;color: green; text-decoration: underline; } a:hover {background-color:yellow;color: green; text-decoration: underline; } a:active {background-color:pink;color: green; text-decoration: underline;}

  18. Nastavenie tabuliek • table • border • border-collapse (separate, collapse) • width • height • text-align • padding • backgroud-color

  19. <body style="background-color: white;font-size: 20px;text-align: left;font-weight: bold;"> <div> tabulka:</div><br> <tablestyle="border: 2px blacksolid;border-collapse: collapse; float:left;width: 40%;text-align: center;"> <trstyle="background-color: greenyellow;border: 2px blacksolid;"> <thstyle="width: 50%;">1.stlpec</th><th style="width:50%;">2.stlpec</th></tr> <trstyle="background-color: yellow;"> <td>text</td><td>text</td></tr> <trstyle="background-color: greenyellow;"> <td>text</td><td>text</td></tr> <trstyle="background-color: yellow;"> <td colspan="2">text</td></tr> </table> </body>

  20. Ďakujem za pozornosť

More Related