Styl textu CSS 1 Volba písmap Pět obecných kategorií: Serif pátkova písma Pro text těla, zejména pro tisk, a hodí se i pro záhlaví. Times, Georgia,...
Styl textu CSS 2 Volba písmap Serifs mají 3 základní funkcí: utvořít spojení mezi písmény a tím usnadnit čtění udržovát mezery mezi písmény pomáha rozlišovat jednotliva písména, zejména horníčást písmén která je více důležita pro čtění než spodníčast Sans-serif bezpátkova písma Většínou zaoblená a šírší. Pro záhlaví, pro text na obrazovce. Arial, Helvetica, Verdana,...
Styl textu CSS 3 Volba písmap Monospace neproporcionální písma. Všechna písmena mají stejnou šířku (fixed-pitch). Použivají pro vzorky kódu programů a pro tabulky. Courier,... pitch
Styl textu Volba písmap Srovnání odstavců: CSS 4 Monospace (neproporcionální) písma mohou být změřeny podle počtu písmen na jeden inch (palec): 10 characters per inch 10-pitch písmo je 12pt 1 inch 12-pitch písmo je 10pt (palec 2,54 cm)
Styl textu CSS 5 Volba písmap Fantasy dekorativní písma s neobvyklýmí funkcemí. Použivají jako parafa (monogram), pro nadpisy v románách a pohádkách. Galleria, ZurichCalligraphic, Western,... Drop cap (padací písmeno) je první písmeno članku nebo odstavce. Je zvětšeno i umístěno tak že obsadí několik řadků. (drop capital letter)
Styl textu CSS 6 Volba písmap Cursive označované jako ručně psané písmo. Pro grafické prvky a dekorativní typografické prvky návrhu. Lucida, Handwriting,... Schéma písemp sem: - Zvolte jedno písmo, obecný serif nebo sans-serif, a použivejte stejné písmo pro všechno. Měňte velikost, šířku, barvu a ostatní styly. - Zvolte dvě písma, obecný serif a obecný sans-serif. Používejte sans-serif pro všechny nadpisy a popisky. Serif používejte pro text těla.
CSS 7 Aplikování rodin písma p na text Vyberete text a pak v něm použijete vlastnost font-family a odpovidající hodnotu. Hodnoty: 1) název písma; 2) klíčové slovo rodiny písem; 3) řada jmen, nasledovaných klíčovým slovem rodiny písem. 1) Názvy jednotlivých písem. body{ font-family: Arial; } Pokud uživatel nemá písmo Arial na svém počítačí, prohlížeč použije výchozi písmo (většínou Times). 2) Klíčová slova pro rodiny písem. Odpovídají názvům rodin písem: serif, sans-serif, monospace, fantasy a coursive. h1 {font-family: fantasy;} Problem: nemáte kontrolu nad tím, které písmo to bude. Poslední možnost h1{font-family:arial, sans-serif;} Příklad. Nastavení písem v prvcích stránky. body {font-family: Times, Georgia, serif;} h1,h2{font-family: Arial, Helvetica, sans-serif;}
Velikost písem Vlastnost font-size s hodnoty zadané: - absolutné - relativně - hodnotou - procentuální hodnotou CSS 8 1) Klíčová slova pro absolutní a relativní nastavení velikosti. Klíčová slova: xx-small, x-small, small, medium, large, x-large, xx-large (absolutní) p{font-size: medium;} Klíčová slova: smaller, larger (relativní) Vztahují se vždy k již definované velikosti. 2) Hodnoty velikosti. Zahrnují 3 relativní a 5 absolutních hodnot. Relativní hodnoty: em, px Absolutní hodnoty: pt, in, mm, cm
CSS 9 Velikost písem 72 points Písmo zabírá jenom 3/4 výšky 1 point = 0,3527 mm 1 point = 1/72 inch
CSS 10 Velikost písem Hodnota em <html> <head> <style type= text/css > h1 { font-size: 2em; } </style> </head> <body> <h1>movies</h1> </body> </html> 1 em c em měrná jednotka, rovnající se Pt (právě použivaného písma) 3) Hodnoty v procentech. Jsou vždy relativní vůči jíné hodnotě. body { font-size: 1 em; } h1 { font-size: 150% ;}
Šířka písmap Šířka znamená, nakolik tučné písmo bude. Vlastnost font-weight. Hodnoty: -číselné hodnoty (100 900) - klíčové slovo ( normal odpovídá šířce 400; bold 700; bolder dálší větší šířka; lighter dálší menší šířka ) body { font-family:times, Georgia, serif; font-size: 1em; font-weight: normal; } h1,h2 { font-family:arial, Helvetica, sans-serif;} h1 { font-size: 150%; font-weight:bold;} h2 { font-size: 130%; font-weight:lighter;} CSS 11
Styl písma Pomáhají měnit řez Vlastnost font-style s hodnotou: - normal (zajístit zobrazení textu v normalní šířce) - italic (vytváří kurzivu) CSS 12 Barva textu Barva textu Vlastnost color body { font-family: Times, serif; font-size: 1em; font-weight: normal; color:black; } h1, h2 { font-family: Arial, sans-serif; } h1 { font-size:150%; font-weight: bold; color: #999; } h2 { font-size: 130%; font-weight: lighter; font-style: italic; color: #333; }
Zarovnání textu Vlastnost text-align. Hodnoty: - left; - center; - right; - justify. CSS 13 Dekorace textu Vlastnost text-decoration. Hodnoty: - none (používá se k odstranění výchozího podtržení odkazů) - underline - overline (umistuje čáru nad vybraný text) - line-through (umistuje čáru přes vybraný text) - blink (kromě Internet Explorer) Příklad. Dekorace textu pomocí CSS <p style= text-decoration:underline; >Tento text je podtržený</p> <p style= text-decoration:overline; >Tento text má nad sebou čáru</p> <p style= text-decoration:line-through; >Tento text je přeškrtnutý</p> <p style= text-decoration:blink; >Tento text bliká</p>
CSS 14 Odsazení prvního řádku textu Vlastnost text-indent p { text-indent: 45px; } p { text-indent: 40%; } vůči ohraničujícímu rámečku elementu Záporné hodnoty pro předsazení textu. Převod textu a varianty písma Převod textu na malá a velká písmena. Vlastnost text-transform Hodnoty: - capitalize - uppercase - lowercase - none Varianty písma Vlastnost font-variant Hodnoty: - small-caps - normal ( výchozí hodnota )
CSS 15 Příklad. Převod a varianty textu v CSS. <head> <title>práce se styly</title> <style type= text/css > body { font-family: Times, serif; color: black; } h1 { font-family: Arial; font-size: 24px; font-variant: small-caps; } h2 {font-family: Times; color:#999; font-size: 18px; font-style:italic; text-transform: lowercase; }.accent { font-weight: 700; color: red; text-transform: uppercase; } p { font-size: 16px; text-transform: capitalize; } </style> </head> <body> <h1> Na trh vstupuje silné pivo</h1> <h2> Pivo </h2> <p> Dobrý den, v dnešních novinách jsem se dočetl, že v pivovaru v <span class= accent >Ústí nad Labem</span> začali vařit jednadvacetistupňové pivo.</p> </body>
Nastavení výšky řádku Výška řádku je vzdálenost mezi řádky textu. Vlastnost line-height s hodnotami: - délkovými -číselnými - procentuálními Příklad. <p style= line-height: 20px; > Text 1. </p> <p style= line-height: 2; > Text 2. </p> <p style= line-height: 65%; > Text 3. </p> CSS 16 Mezery mezi písmeny p a slovy Vlastnosti letter-spacing a word-spacing Příklad. <p style= letter-spacing: 10px; > Text 1. </p> <p style= word-spacing: 0.5 em; > Text 2. </p>
CSS 17 Úpravy prvních písmen p a prvních řádků textu Pomocí selektorů pseudoelementů můžete nastavovat styl prvního písmene (iniciály) a prvního řádku textu. : first-line : first-letter Příklad. Využíti selektorů pseudoelementů. <p: first-line { font-weight: bold; color:#333; } <p: first-letter { font-style:italic; color:#999; } Souhrnné nastavení písma Zahrnuje některé vlastnosti písma a výšky řádku. (nikoliv vlastnosti textu) Souhrnná vlastnost font. Pořadí hodnot: font-style, font-variant, font-weight, font-size / line-height, font-family p { font: italic small-caps bold 14px / 15px Arial, sans-serif; }
CSS 18 Efekty odkazů 1. Stavy odkazů link (před aktivováním) visited (po použití) hover (pod kurzorem myši) active (po klepnutí na odkaz) pseudotřídy dynamické pseudotřídy Selektory pro nastavování odkazů: :link :visited :hover :active Příklad. a { color:orange; } a: link { color:orange; } a: visited { color:yellow; } a: hover { color:fuchsia; } a: lactive { color:red; } Pořadí je důležité!
Změna stylů odkazu Přidávání barvy pozadí pro stav hover a { color: orange; } a:link { color: orange; } a:visited { color: yellow; } a:hover { color: fuchsia; font-style: italic; } a:active { color: red; } CSS 19 Odstranění podtržení odkazu (vlastnost text-decoration: none;) a { color: orange; text-decoration: none; } Podtržení pouze ve stavu hover a:hover { text-decoration: underline; }
CSS 20 Více stylů odkazů CSS umožňuje mít v jednom dokumentu více než jeden styl odkazů. Např. Oblast navigace s modrým pozadím a oblast s obsahem s bílým pozadím. Aplikace stylů odkazů pomocí tříd /* implicitní styly odkazů pro oblast s obsahem */ a { color: orange; text-decoration:none;} a:link { color: orange; } a:visited { color: yellow; } a:hover { color: fuchsia; } a:active { color: red; } /* styly odkazů pro oblast s navígací */ a.nav { color: white; text-decoration:none; } a.nav:link { color: white; } a.nav:visited { color: yellow; } a.nav:hover { color: orange; } a.nav:active { color: fuchsia; } Atribut class= nav v těch odkazů, jež mají použivat tuto třídu <a class= nav href= http://www.someweb.com/ >Someweb</a>
CSS 21 Styly odkazů pomocí selektorů potomků Elementy mohou být jednoznačně identifikovány pomocí selektoru identifikátoru (id). Selektory (id) začinají mřížkou následovanou vlastním názvem # id name Postup aplikace: 1) Nejprve použijete selektor nadřazeného elementu, pak mezeru a pak element, pro nějž chcete nastavit styly (např. # nav a) Příklad. <head> <title>práce se styly</title> <style type= text/css > body { font:14px Times; color:white; background-color:black; } h1 { font:22px Arial; color:orange; text-decoration:underline; } h2 { font:italic 20px Times; color: red; background-color:black; } /* implicití nastavení odkazů */ a { color: orange; text-decoration:none;} a:link { color: orange; } a:visited { color: yellow; }
Styly odkazů pomocí selektorů potomků CSS 22 a:hover { color: fuchsia; text-decoration:underline; } a:active { color: red; } /* styly pro elementy obsažené v části example2 */ #example2 a { color: lime; } #example2 a:link { color: lime; } #example2 a:visited { color: red; } #example2 a:hover { color: aqua; text-decoration:underline; } #example2 a:active { color: fuchsia; } </style> </head> <body> <div id= example1 > <p>text-1.</p> </div> <div id= example2 > <p>text-2.</p> </div> </body>
CSS 23 Styly číslovaných seznamů Vlastnost list-style-type Hodnoty: decimal-leading-zero (číslovaní od nuly) lower-roman upper-roman (číslovanířímskýmíčíslicemí) ol {list-style-type:lower-roman; } Můžete nahradit čísla obrázky (vytvořte obrázky pro všechna čísla a pro každou položku seznamu použijte třídy). Příklad. Použítí tříd k aplikování obrázků v číslovaném seznamu. <head> <title>práce se styly</title> <style type= text/css >.list1 {list-style-image: url(1.gif);}.list2 {list-style-image: url(2.gif);}.list3 {list-style-image: url(3.gif);} </style> </head>
CSS 24 Styly číslovaných seznamů <body> <h1>computerworld</h1> <ol> <li class= list1 >Text-1.</li> <li class= list2 >Text-2.</li> <li class= list3 >Text-3.</li> </ol> </body> Styly nečíslovaných seznamů Mužete změnit odrážky, nahradit jí obrázkem a změnit polohu odrážky vůči textu. Nastavení ponocí jednoho ze tři klíčových slov: disc, circle a square. <h2>balík WAMP:</h2> <ul> <li style= list-type-style:disc; >PHP</li> <li style= list-type-style:circle; >Server Apache</li> <li style= list-type-style:square; >DB server MySQL</li> </ul>
Nahražení odrážku vlastním m obrázkem Vlastnost list-style-image <head> <title>práce se styly</title> <style type= text/css > ul {list-style-image: url(bullet.gif); } </style> </head> <body> <h1>balík WAMP:</h1> <ul> <li style= list-style-type:disc; >Text1</li> <li style= list-style-type:circle; >Text2</li> <li style= list-style-type:square; >Text3</li> </ul> </body> CSS 25 Vlastnost list-style-position s hodnotou outside nebo inside.
CSS 26 Souhrnné vlastnosti pro seznamy Vlastnost list-style <head> <title>práce se styly</title> <style type= text//css > body {font:14px Times; color:black; background-image:url(balloon.gif); background-position:right top; background-repeat:no-repeat;} h1 {font:italic 20px Times; color:red; text-transform:lowercase;} ul {list-style:url(arrow.gif) inside; } </style> </head> <body> <h1>balík WAMP</h1> <ul> <li>php</li> <li>server Apache</li> <li>db<br/>server MySQL</li> </ul> </body> Pokud nechcete obrázek, můžete jej nahradit klíčovým slovem.
CSS 27 Vertikální navigace založená na seznamu Kombinace: odkazy a seznamy. V nastavení stylů seznamu vlastnost list-style-type s hodnotou none. <head> <title>práce se styly</title> <style type= text/css > body{font:14px Times; color:black;} ul{ list-style-type:none; } a{color:orange; text-decoration:none;} a:link{color:orange;} a:visited{color:yellow;} a:hover{color:fuchsia; text-decoration:underline;} a:active{color:red;} </style> </head> <body> <ul> <li><a href= uvod.html >Úvodní stránka</a></li> <li><a href= produkty.html >Produkty</a></li> <li><a href= sluzby.html >Služby</a></li> </ul></body>
CSS 28 Vertikální navigační seznam s efekty obrázků Můžete použit obrázky na pozadí a selektor: hover. Příklad. Využítí obrázků pozadí k vytvoření sofistikovaných efektů navigace. body{font:bold 15px Times, serif; color:black;} a{color:white; text-decoration:none; display:block;} a:link{color:white;} a:visited{color:yellow;} a:hover{color:white; background-image:url(linkhover.gif);} a:active{color:red;} #nav, #nav a, #nav li {width:100px; margin:0; padding:0; list-style-type:none;} li{background-image:url(linkback.gif); border-bottom:3px solid white;} Výsledek navigace s vizuálními efekty.
CSS 29 Horizontální navigace založená na seznamu Vlastnost display:block slouzí k přepnutí odkazu z vloženého na blokový element. Vlastnost display:inline slouží k přepnutí odkazu na vložený element. <head> <title>práce se styly</title> <style type= text/css > body{font:14px Times; color:black;} ul #navlist {margin-left:0; padding-left:0; white-space:nowrap;} #navlist li{display:inline; list-style-type:none;} #navlist a{padding:3px 10px;} #navlist a, #navlist a:visited {color:white; background-color:orange; text-decoration:none;} #navlist a:hover{color:orange; background-color:yellow; text-decoration:none;} </style> </head>
Horizontální navigace založená na seznamu CSS 30 <body> <div id= navcontainer > <ul id= navlist > <li><a href= uvod.html >Úvod</a></li> <li><a href= produkty.html >Produkty</a></li> <li><a href= sluzby.html >Služby</a></li> </ul> </div> </body>