1 / 20

HTML 5 a CSS 3

HTML 5 a CSS 3. Rozvržení stránky pomocí HTML 5. HTML 5. Deklarace typu dokumentu v HTML 5. Výběr znakové sady. CSS. Hlavička stránky. Seznam v části nav neobsahuje odrážky. Vodorovné zarovnání. Ukázka stránky. Odkazy. styl.css. na odkaz nebylo kliknuto. odkaz po kliknutí.

hedia
Télécharger la présentation

HTML 5 a CSS 3

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. HTML 5 a CSS 3

  2. Rozvržení stránky pomocí HTML 5

  3. HTML 5 Deklarace typu dokumentu v HTML 5 Výběr znakové sady

  4. CSS Hlavička stránky Seznam v části nav neobsahuje odrážky Vodorovné zarovnání

  5. Ukázka stránky

  6. Odkazy • styl.css na odkaz nebylo kliknuto odkaz po kliknutí odkaz při přejetí myší

  7. Třída kulaté • styl.css • index.html zápis pro starší prohlížeče Firefox zápis pro starší prohlížeče Chrome přiřazení třídy k objektu header přiřazení třídy k objektu nav

  8. Vlastnost box-sizing • může mít tři hodnoty

  9. Vlastnost box-sizing může mít hodnotu • border-box • padding-box • content-box Všechny objekty mají zadanou stejnou velikost

  10. Text uspořádaný do sloupců styl.css .sloupce { column-count:3; //počet sloupců -moz-column-count:3; -webkit-column-count:3; column-gap:40px; //šířka mezery -moz-column-gap:40px; -webkit-column-gap:40px; } index.html - <p class="sloupce">

  11. Zkosení objektu styl.css .zkoseni {transform:skew(-10deg); } index.html <asideclass="zkoseni">

  12. Rotace objektu styl.css .otaceni{transform:rotate(-10deg); } index.html <asideclass="otaceni">

  13. Rotace i zkosení styl.css .kombinace{transform:skew(-10deg)rotate (-10deg);} index.html <asideclass="kombinace">

  14. Stín objektu styl.css aside{ box-shadow: 10px 5px 20px rgb(128,128,128);…}

  15. Ovál a kružnice styl.css #oval {width: 250px; height: 150px; background: rgb(51,0,0); border-radius: 50%; } index.html <div id="oval"> </div> width: 150px; height:150px;

  16. Další tvary • http://www.itnetwork.cz/tutorial-zakladni-tvary-v-css-3

  17. Jednoduché tvary • Do tvaru lze vložit obrázek – jako pozadí

  18. Průhlednost Opacity zajistí poloprůhlednost objektu samotného i jeho dceřinných objektů styl.css .opacity {background: rgb(20%, 100%, 20%); -ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: .5; } index.html <p class="opacity">

  19. Průhlednost RGBa je barva aplikovatelná na cokoliv bez vlivu na zbytek elementu styl.css .rgba {background: rgb(20%, 100%, 20%); background: rgba(20%, 100%, 20%, .5); index.html <p class="rgba">

  20. Užitečné odkazy • http://www.itnetwork.cz/cesky-html-5-manual • http://www.itnetwork.cz/cesky-css-3-manual-rejstrik • http://www.vzhurudolu.cz/prirucka/css3 • http://jecas.cz/float • http://www.itnetwork.cz/online-generatory-css-stylu-pro-moderni-webmastery

More Related