1/31 Káskádové styly = CSS CSS = Cascading Style Sheets = tabulky kaskádových stylů na začátku byl stylesheet soubor pravidel definující vzhled textu nezávisle na obsahu pomocí CSS lze nadefinovat společný vzhled souboru stránek v HTML bez podpory CSS vzhled definován pro každou značku zvlášť, typicky pomocí značky <font>, HTML5 ji již nepodporuje nyní standard CSS 2.1 http://www.w3.org/style/css, reálně CSS 3 CSS je tvořen pravidly ve tvaru selektor { vlastnost1: hodnota; vlastnost2: hodnota;... } selektor seznam značek, kterých se uvedená pravidla týkají
Příklady: h1 { } Káskádové styly = CSS color:red; /* červená barva písma */ background:yellow; /* žlutá barva pozadí */ 2/31 h1,h2,h3 {color:red;}/* pravidla platí pro h1, h2, h3*/ h1 {color:red;} /* alternativní zápis výše uvedeného */ h2 {color:red;} h3 {color:red;} ol ol {color:red;} /* 2. úroveň uspořádaného seznamu */
CSS možnosti definice stylů 3/31 lokální definice stylů platí v rámci značky globální definice stylů platí v rámci HTML dokumentu externí definice stylů lze použít pro libovolný HTML dokument Při použití různých typů definic se uplatňuje kaskáda v pořadí LOKÁLNÍ GLOBÁLNÍ EXTERNÍ definice V pořadí EXTERNÍ GLOBÁLNÍ LOKÁLNÍ definice se naopak uplatňuje dědičnost výjimkou je nastavení váhy pravidla má vliv na vícenásobnou definici stejného stylu pro stejný element h1 {color: blue!important}
4/31 Lokální definice stylů na úrovni jednotlivých značek HTML platí jen v rámci použité značky styly se vkládají pomocí atributu style přímo do značky: <h1 style="color:red;font-size:30px;">červený nadpis</h1> definice celého odstavce: <p style="color:red;font-weight:bold;">tučný odstavec</p> definice celé stránky: <body style="color:red;background:black;">...</body>
5/31 Globální definice stylů na úrovni HTML dokumentu definice se vkládají do hlavičky dokumentu mezi značky <style> a </style> <head> <title>globální definice stylů</title> <style type="text/css"> h1 { color:red;font-size:30px; } p { color:red;font-weight:bold; } </style> </head>
6/31 Externí definice stylů pro jeden či více HTML dokumentů nejvýhodnější společný styl souboru stránek snadná změna vzhledu stránek pouze úprava CSS CSS v samostatném souboru do HTML se vkládá pomocí nepárové značky <link> v hlavičce <head> <title>externí definice stylů</title> <link rel="stylesheet" type="text/css" href="styly.css" media="screen" /> </head> atribut rel specifikuje, že jde o CSS atribut type tzv. MIME typ, specifikace CSS ve formě textu atribut href cesta k externímu CSS souboru media určuje výstupní zařízení
7/31 Externí definice stylů atribut media určuje, pro jaké výstupní zařízení se má použít specifikovaný styl media="screen" zobrazení na monitoru media="print" tisk media="handheld" mobilní zařízení (nízké rozlišení) media="aural" hlasové syntetizéry lze nastavit hlasitost, barvu media="all, projection, tv, braille" Media Queries v CSS3 styly podmíněné parametry zařízen (rozměry, rozlišení, orientace) <link rel="stylesheet" href="bigscreen.css" media="screen and (min-width: 1100px)"> <link rel="stylesheet" href="iphoneandandroid.css" media="screen and (max-device-width: 480px)"> <link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">
Základní použití CSS stylů 8/31 barva, případně obrázek na pozadí typy písma a jeho formátování velikost a obtékání okraje, rámečky zarovnávání seznamy styly odkazů
Nastavení pozadí (dokumentu) 9/31 pozadí dokumentu selektor body pozadí buňky tabulky, odstavce, bloku selektor td, p, div pro nastavení barev lze použít předdefinované názvy (17), hexadecimální tvar (např. #000000 černá), RGB zápis rgb(255,0,0) body { background-color: red; /* nastavení barvy pozadí */ background-color:#0000ff; /* color:rgb(0,0,255);*/ background-image:url(pozadi.gif); /* obrázek */ } p { background-image:url(pozadi.gif); background-repeat:repeat-x; background-repeat: no-repeat; background-position: top right; background-attachment: scroll (fixed); }
Typy písma a jeho formátování 10/31 barva písma vlastnost color pozadí písma vlastnost background h1 { color:red; background-color: yellow; } vlastnost font-family p { font-family:arial; font-family:sans-serif; font-family:'arial CE','Verdana CE',Arial,Verdana, sans-serif; } vlastnost font-size (v jednotkách px, pt, mm, %, em) p { font-size:12px; }
Typy písma a jeho formátování 11/31 vlastnost font-weight tučnost písma (normal, bold, 100-900) p { font-weight:bold; } vlastnost font-style kurzíva (normal, italic) p { font-style:italic; } font-variant kapitálky (normal, small-caps) sdružená vlastost font p { font: italic small-caps bold 12px arial } Kdekoli v HTML dokumentu lze používat klasické značky pro formátování písma - <b>, <i>, <strong>, <em> atd.
Externí fonty formou relativní cesty nebo URL podporované formáty TTF, OTF, WOFF, latin extended 12/31 <style> @font-face { div { font-family: Sansation; font-family: Sansation; src: url(sansation_light.woff); } } </style> @import url(http://fonts.googleapis.com/css?family=open+sans&subse t=latin,latin-ext); <link href='http://fonts.googleapis.com/css?family=open+sans&sub set=latin,latin-ext' rel='stylesheet' type='text/css'> font-family: 'Open Sans', sans-serif; /* CSS */
13/31 fonty místo obrázků, úspora dat IcoMoon App Icon fonts
14/31 Velikost a obtékání, práce s blokem uvedené vlastnosti se vztahují k blokovému elementu vlastnost width šířka rodiče (px, pt, em, %, auto) vlastnost height výška rodiče (px, pt, em, %, auto) vlastnost float umístění obtékaného objektu (left, right, none) vlastnost clear ukončení obtékání objektů (left, right, both, none) vlastnost display především možnost skrytí bloku (např. tisk) definice řádkového/blokového prvku vlastnost position nastavení pozice bloku v dokumentu vlastnost overflow nastavení obsahu bloku při při jeho přetečení (visible, hidden, auto) vlastnost figure (figurecaption) obtékání obrázků (popisků)
15/31 Okraje a rámečky mají význam u blokových elementů vlastnost margin šířka vnějšího okraje (auto, px, pt, em, %) margin-top (right, bottom, left) u tabulek cellspacing vlastnost padding šířka vnitřního okraje (px, pt, %) padding-top (right, bottom, left) u tabulek cellpadding vlastnost border rámeček kolem blokového elementu (px, pt) border-width (px), border-top-width (atd.) border-color border-style (solid, dotted, dashed, groove atd.) border-top: solid 1px red;
Okraje a rámečky 16/31 border-color:red; border-style:solid; border-style:dashed; border: solid green 4px; border-style:dotted; border-width (thin, medium, thick, hodnota) border-style (dotted, dashed, solid, double, groove, ridge, in(out)set border-color border-top, border-right, border-bottom, border-left margin, margin-top, margin-right,... (auto, hodnota, %) padding, padding-top, padding-right,... (auto, hodnota, %) box-sizing: border-box
17/31 Zarovnávání a úpravy textu text-align horizontální zarovnání v bloku (left, right, center) vertical-align vertikální zarovnání v td (top, middle, bottom,!pouze pro řádkové elementy) text-decoration none, underline, overline, line-through, blink text-transform none, capitalize, uppercase, lowercase letter-spacing, word-spacing mezery mezi písmeny, slovy text-indent odsazení prvního řádku white-space (normal, pre, nowrap) chování bílých znaků
18/31 Ostatní nastavení čáry <hr /> různá podpora prohlížečů, nejlépe takto: <hr style="border-style:solid; border-width:1px; border-color:red" width="50%" align="left" /> border-collapse v tabulce spojí rámečky sousedních buněk (collapse)
19/31 Styly hypertextových odkazů (pouze) pro značku <a> existují speciální pseudotřídy a:link {color:#00ff00;} /* barva nenavštíveného odkazu */ a:visited {color:#00ff00;} /* barva navštíveného odkazu */ a:hover {color:red;} /* barva odkazu pod kurzorem myši */ a:active {color:red;} /* barva odeslanéhho odkazu */ Pseudotřída :hover pro další elementy <p class= hover >Změna textu</p> pro styl p.hover:hover {color:red;}
CSS3 pseudotřídy li:first-child, li:last-child, li:only-child, li:nthchild(2) p:nth-last-child(2) p:first-letter p:first-line 20/31 p:first-of-type, p:last-of-type, p:nth-of-type(2), p:nthof-type(2n+1), p:only-of-type p.nth-last-of-type(2)
Styly seznamů 21/31 vlastnosti značek <ul>, <ol>,<li> list-style-image (url) list-style-type (disc, circle, square, decimal, lower-roman, upperroman, lower-alpha, upper-alpha, lower-greek, hebrew,...) list-style-position (inside, outside) zarovnání sdružená vlastnost list-style ul { } list-style:decimal outside;
22/31 Třídy a identifikátory efektivní využití vlastních stylů třídu kaskádového stylu určuje atribut class třídy lze používat v rámci XHTML dokumentu opakovaně Třídy vztahující se k použité značce p {color:red;} /* nastavení stylu odstavců */ p.zeleny {color:green;} /* některé budou zelené */ <p>tento odstavec bude červený.</p> <p class="zeleny">druhý odstavec bude zelený.</p>
23/31 Obecné třídy pro všechny značky Třídy a identifikátory p {color:red;} /* nastavení stylu odstavců */ h1 {color:red;} /* nastavení stylu nadpisu h1 */.zeleny {color:green;} /* zelené písmo kdekoli */ <p>tento odstavec bude červený.</p> <p class="zeleny">druhý odstavec bude zelený.</p> <h1>červený nadpis</h1> <h1 class="zeleny">zelený nadpis</h1> NEBO <p class="zeleny">všechno v tomto odstavci, co není jinak definováno v CSS, bude napsáno zeleným písmem. </p>
Třídy a identifikátory 24/31 identifikátor kaskádového stylu určuje atribut id v XHTML dokumentu lze identifikátor použít pouze jednou spíše pro blokové prvky #zahlavi {color:green; /* formát záhlaví stránky */ background:yellow;} <div id="zahlavi">záhlaví stránky</div>
25/31 Značky <div> a <span> jediné dvě značky, které nenesou žádný význam ( nemají) ideální pro potřeby CSS <div class="obalovaci"> <p class="obalovaci"> <p>odstavec</p> <p>odstavec</p> <p>další odstavec</p> <p>další</p>...... </div> </p> <div> je element blokový, <span> je element řádkový, neboli <div> před a za sebou zalomí řádek, <span> nikoli <div> by se neměl vyskytovat v rámci řádkové značky
CSS3 výběr podle atributů 26/31 element[atribut*="hodnota"] element[atribut^="hodnota"] element[atribut$="hodnota"] a[href^="https"] hodnota href začíná https a[href$=".pdf"] hodnota href končí.pdf a[href*="upce"] hodnota href obsahuje upce Další CSS3 selektory http://www.w3schools.com/cssref/css_selectors.asp
27/31 Výběr nových vlastností CSS3 uvedené vlastnosti nepodporuje IE<9 HTML5Shiv border-radius <div style="-webkit-border-radius:50px; -moz-borderradius:50px; border-radius:50px; width:200px; height:60px; background-color:#808080; color:#fff; text-align:center; line-height:50px;">objekt</div> box-shadow (horizontálně, vertikálně, šířka, barva) <div style="-webkit-box-shadow:10px 5px 20px #000; -mozbox-shadow:10px 5px 20px #000; width:200px; height:60px; background-color:#808080; color:#fff; text-align:center; line-height:50px; box-shadow:10px 5px 20px #000;">Objekt</div> -webkit = safari, opera, -moz = mozilla, -ms = IE
text-shadow (jako u box-shadow) 28/31 <span style="-webkit-text-shadow:15px 10px 15px #000; -moztext-shadow:15px 10px 15px #000; text-shadow:15px 10px 15px #000; font-size:50px; color:#808080;">text</span> transform (translate) <style type="text/css">.objekt{float:left;margin:5px 10px;width:100px;height:60px; background-color:gray;color:#fff;text-align:center; -webkit-transition:all 1s ease-in-out; /* typ animace */ -moz-transition:all 1s ease-in-out}.objekt1:hover{ -webkit-transform:translate(3em,1em); -moz-transform:translate(3em,1em)} </style> <div class="objekt objekt1">translate</div> <div style="clear:both;"></div>
29/31 transform (rotate) <style type="text/css">.objekt{float:left;margin:5px 10px;width:100px;height:60px; background-color:gray;color:#fff; text-align:center;-webkittransition:all 1s ease-in-out;-moz-transition:all 1s easein-out;}.objekt2:hover{ -webkit-transform:rotate(100deg); -moz-transform:rotate(100deg)} </style> <div class="objekt objekt2">rotate</div> <div style="clear:both;"></div>
30/31 transform (scale) <style type="text/css">.objekt{float:left;margin:5px 10px;width:100px;height:60px; background-color:gray;color:#fff; text-align:center;-webkittransition:all 1s ease-in-out;-moz-transition:all 1s easein-out;}.objekt3:hover{-webkit-transform:scale(2);-moztransform:scale(2)} </style> <div class="objekt objekt3">scale</div> <div style="clear:both;"></div>
průhlednost (opacity) <div style="opacity:0.5; width:200px; height:60px; color:#000; text-align:center; lineheight:50px;background>red;">průhledný objekt</div> 31/31 průhlednost (barevný model RGBA) <div style="background-color:rgba(100, 0, 0, 0.5); width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">průhledný objekt</div> sloupce (multiple columns) <div style= width:250px;-moz-column-count:2; -moz-columngap:10px; -webkit-column-count:2; -webkit-column-gap:10px; column-count:2; column-gap:10px;">text bude rozdělen do dvou sloupců! </div> pozadí (multiple backgrounds) background: url('left.jpg') top left no-repeat, url('prvni.jpg') top right no-repeat, url('druhy.jpg') top center repeat-x;