vod do css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Úvod do CSS PowerPoint Presentation
Download Presentation
Úvod do CSS

Loading in 2 Seconds...

play fullscreen
1 / 46
shelby-fry

Úvod do CSS - PowerPoint PPT Presentation

93 Views
Download Presentation
Úvod do 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. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Úvod do CSS

  2. Kaskádovéstyly

  3. Základní info • Samostatný, ale doplňujícíjazyk k HTML • Z anglického Cascading Style Sheets • MomentálněverzeCSS3 • Syntaxevypadátakto: footer { color: white; background-color: #444; } CSS

  4. Řečenojednoduše • CSS pravidlonastavuje pro HTML element neboskupinuelementů : • Jakmávypadat • Kde se mánacházet Příklad: Chci, abykaždýodkazbylrůžovoubarvou

  5. Jakaplikovatstylynastránku? 1. Inline <h1 style=“color: blue;”>Nadpis</h1> 2. Element style <head> ... <style> h1 { color: blue; } </style> </head> 3. Nejlepšícesta je …..

  6. Externímsouborem! <link rel=“styleshet” href=“robin.css” type=“text/css”>

  7. Syntaxe h1{background-color:yellow;} Selektor Hodnota Vlastnost { } označujedeklaračníblok ; označujekonecdeklarace : oddělujevlastnost a hodnotu

  8. Selektor • z HTML dokumentuvybere element, kterýchcemestylovat • Příklad: • Chcemenastylovat pro každýodstavectyppísmakurzíva <p> Loremipsum dolor sit amet, consectet. </p> p { font-style: italic; } CSS Loremipsum dolor sit amet, consectet. HTML Výsledek

  9. Druhyselektorů • Selektorypodle HTML elementu p, ul, a, header, div • Selektorypodle class • Selektorypodle ID #title { … } <p id=“title”></p> <p class=”title”> Ahoj! <p> .title { color: pink; } CSS HTML

  10. Druhyselektorů II. • Podlerodiče p a – všechnyodkazyuvnitřodstavce ul li – všechnyli uvnitřnesetřízenéhoseznamu div.title h1 – všechnynadpisyprvníúrovněuvnitřdivu se třídou title • Podlepseudoclass a:hover– vybereodkazy a nastyluje je vechvíli, kdy se přesněpřejedemyší

  11. Ukázka a,a:hover { text-decoration: none; color: black; } a:hover { background-color: purple; color: white; padding: 5px } Vyberejakodkazy, takodkazyvestavu hover Vybereužjenodkazyvestavu hover a přidádalšístylyčipřepíšestávající

  12. Hádanka • <footer> • <p class=“unicorn” id=“kitten”> • Hey is this unicorn or kitten? • </p> • </footer> • footer p { • background: orange; • } • p { • background: blue; • } • p#kitten { • background: pink; • } • p.unicorn { • background: green; • } HTML CSS Jakoubarvupozadíbudeodstavecmít?

  13. Inline styl ID Class, pseudo-class Elements CSS specificity!

  14. Vlastnosti Vlastnostibloku • padding: 5px; • margin: 10px; • border: 2px solid black; • border-radius: 5px; • opacity: 0.5; • z-index: 1; • position: relative; • top: 0; • bottom: 0; Textovévlastnosti • font-size: 18px; • background-color: black; • color: blue; • text-align: center; • font-weight: bold; • text-decoration: underline; • font-family: Helvetica; • line-height: 1.5; • font-style: italic;

  15. Rámečky a průhlednost

  16. Hodnoty Velikosti • pixely (16px) • emy (2em) • procenta (50%) Barvy • anglickéslovo (red) • hexadecimálníhodnota (#ffffff) • rgbahodnota (0,0,255) Některévlasnosti se mohounapsat s vícerohodnotamizároveň, např.: border: 2px solid red; Některévlasnostiberoujakohodnotuceléčíslo, např. opacity Některévlastnostiberoiklíčovéslovo, např.: text-align: center;

  17. Zobrazováníelementů Každý element v HTML je buď • Blokový • Řádkový • Řádkovo-blokový Nastavitlzepomocí: display: block | inline | inline-block | none;

  18. Box model Margin Border padding Content

  19. Příklady blockquote { padding: 20px; } blockquote { padding: 0; } aside h1 { margin: 30px; } aside h1 { margin: 0; }

  20. Příklady – jak NE

  21. Shrnutí – proč to bylošpatně? • Přílišmnohotextu • Přílišmnohobarev • Velkýkontrast, zahlcenírůznýmistyly • Nepoužívánípaddingunebomarginu • Nejasnérozloženístránky- chybílayout • Velikostfontu • Špatnáčitelnost • Nevhodnépozadí

  22. Příklady – jak ANO

  23. Shrnutí – proč to funguje? • Jednoduchost • Sjednocenoststylů • Jasnérozložení • Vkusnězvolenébarvy • Jednotnébarevnéschéma

  24. CSS efekty- ukázky • http://xboxgiftcard.net/en/ • http://avmc.com.ua/ • http://www.brigittecalegari.com.br/ • http://www.costa.co.uk/experience/ - parallax scrolling • http://www.storstad.de/ - parallax scrolling

  25. Projekt – Kryštůfek Robin

  26. header, section, aside, footer, article { outline: 5px dotted red; } • Zvýrazněno: • Header • Footer • Section • Aside • Article CSS

  27. Používejte outline pro zvýrazněnívašehorozvržení!

  28. Float bez stylování float: left; float: right;

  29. Float pro layout

  30. Jakudělatdvasloupce? article { float: right; width: 70%; } aside { float: left; width: 30%; } section { overflow: hidden; } footer { position: fixed; bottom: 0; } Pokud element obsahujepouzeprvkykteréfloatují (v našempřípaděsection) – scvrknesejehovýškana 0 => To opravíoverflow:hidden, kterénastaví, že se má element roztáhnoutkolemsvéhoobsahu CSS CSS

  31. Praktickáčást:nastylujtesvůj web!