CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se stránka načítá a zobrazuje rychlejí; CSS umožňuje nastavovat jeden dokument nebo velký počet dokumentů. Změnite styl na jednom místě a vše se promítne do všech dokumentů, ke kterým je tento soubor se styly připojen; Dokumenty CSS se ukládají do cache. To znamená, že jsou náčteny do paměti prohlížeče pouze jednou. Prohlížeč nemusí při prochazení webu tyto styly znovu interpretovat. Výsledkem je rychlejší přechod mezi stránkami a rychlejší načítání stránek; Oddělením prezentace od struktury a obsahu znamená lepší dostupnost styl CSS Dokument XHTML Prohlížeč Výstupní dokument Soubor DTD
CSS 2 Pravidla CSS Pravidla CSS jsou tvořena ze selektorů a alespoň jedně deklarace. Selektor určuje element HTML, na který by měl být styl aplikován. Deklarace tvořena alespoň jednou vlastnosti CSS a odpovidajicí hodnotou vlastnosti. deklarace h1 { color : red; } Pravidlo selektor vlastnost hodnota
CSS 3 Druhy stylů: 1) Styly prohlížeče (výchozí styly) 2) Uživatelské styly (pro uživatele se specialnimí potřebami) 3) Individuální styly (jednotlivé elementy, attribut style, jednorázové účely) 4) Vložené styly (jeden dokument, element style) 5) Připojené styly (externí soubory, element link) 6) Importované styly ( import stylu do připojeného externého souboru nebo do dokumentu) Kaskáda Kaskáda je hierarchie aplikace (tj. system aplikování pravidel). Kaskáda také označuje způsob aplikování více stylů.
CSS 4 Dědičnost Dědičnost znamená, že styly od svých nadřazených elementů dědí. <body> <h1> Můj nadpis </h1> <p> Následující text </p> </body> elementy h1 a p jsou považovány za potomka elementu body. Styly pro element body budou zděděny potomky. Zadávání individuálních stylů Mají vliv pouze na element; Použivaje se v situacích: - kdy potřebujeme rychle opravit jeden element; - jeden element na webu. 1) <h1> Vítejte! </h1> Vítejte! 2) <h1 style= color:red; font-size:24px; >Vítejte!</h1> Vítejte!
CSS 5 Vložené styly Mají vliv pouze na dokument Použivaje se v situacích: - jediný dokument na webu; - pracovní dokument. Vložené styly se zadávají do záhlaví dokumentu do elementu style s povinným atributem type. <head> <title>práce se styly</title> <style type= text/css > body{background-color:black; color:white;} h1{font-size:24px;} p{font-size:12px;} </style> </head> <body> <h1>vítejte!</h1> <p>první odstavec.</p> <p>druhý odstavec.</p> </body>
CSS 6 Připojený externí soubor se styly Externí soubor se styly je oddělený textový soubor, do kterého jsou umístěna pravidla CSS (s připonou.css) Element link v záhlaví dokumentu. styly.css body { background-color:#999; color:black; } h1 { font-family: Arial; font-size: 24px; color: #CCC; } p { font-family: Times; font-size: 12px; color: white; }
CSS 7 Připojení souboru se styly (styly.css) k souboru HTML (element link) <! DOCTYPE html PUBLIC -//w3c//dtd XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd > <html xmlns= http://www.w3.org/1999/xhtml > <head> <title> práce se styly </title> <link rel= stylesheet type= text/css href= styly.css media= all /> </head> <body> <h1> Vítejte! </h1> <p> První odstavec. </p> <p> Druhý odstavec. </p> </body> </html>
CSS 8 Atributy v elementu link rel popisuje vztah k odkazovanému souboru; type definuje druh jazyka a použitého formátu; href atribut pro odkaz; media umožňuje zadat různé styly pro různá média (handheld, print, screen, all). Import souborů se styly Soubor se styly můžete importovat: - do hlavního externího souboru se styly (který je připojen k dokumentu) - přímo do dokumentu 1) Příme importování do dokumentu (direktiva @import). Vyžaduje použití dvou druhů stylů: importovany styly (např. Soubor import.css) a vložené styly. Příklad. Importování stylů pomocí vložených stylů. <head> <title> práce se styly </title> <style type= text/css > @import url (import.css); </style> </head>
CSS 9 2) Importování stylů do připojeného externího souboru se styly. Modularizace stylů a jejích následný import do hlavního souboru se styly. mod1.css mod2.css Styles.css index.html mod3.css Příklad: V jednotlivéch modulech: - styly pro reklamy; - styly pro tabulky; - styly pro formuláře; apod. Výhoda: možnost provádení nezávislých změn v modulech.
CSS 10 Komentáře v CSS Komentáře se v CSS zadávají jínak než komentáře v HTML. Komentáře CSS začinají lomítkem a hvězdičkou a končí hvězdičkou následovanou lomítkem. /* globální styly */ body { background-color:orange; font-family: Arial, Helvetica, sans-serif; color:white; } /* styly pro rozvržení */ #nav { position: absolute; top: 0; left: 0; width: 150px; } /* tento styl dočasně skryjeme.warning { color:red; } Lukáš: až bude tento styl připraven, zruš komentář */
CSS 11 Formátování CSS 1. Deklarace uvedena za selektorem na jednom řádku: body { background-color: #999; color: black; } 2. Pravidla rozdělena na jednotlivéřádky: body { background-color: #999; color: black; }
CSS 12 Barvy a obrázky Možností: Aplikovat barvy na pozadí stránek a pozadí elementů; Rozhodovat mezi: - hexadecimalními barvami, - hexadecimalními zkrácenými barvami, - barvami v RGB, - v procentech zadánými barvami, - mezi 17 názvy barev (css 2.1). Nastavení obrázků. Vkládat obrázky na pozadí elementů. 1. Barvy Způsoby definování barev: - Hexadecimální zadání barvy; - Zkrácený zápis hexadecimální hodnoty; - Hodnoty RGB; - Procenta RGB; - Názvy barev.
Pixel (pixel element, dot (bod)) individuální bod na obrazovce nebo na tiskárně (adresovatelný bod); nejmenší komponent zobrazení, který program může ovládat (řídit); měrná jednotka. bod - - - - - - - - - - - - -- - - - - 640 px - - 480 px - - Grafické rozlišení Počet bodů tvořicích zobrazení - 640x480; - 800x600; - 1024x780; - 1280x1024; 13 Bitová mapa Bitová mapa je binární reprezentace grafického zobrazení. Kazdý bit nebo skupina bitů v bitové mapě reprezentují jeden pixel zobrazení. bod Skupina bitů 1 1 0 1 0 1 1 1
14 Počet bitů --- počet barev 1 bit černá a bílá 4 bitů 16 barev 8 bitů 256 barev 24 bitů 16,7 milionů barev (8 bitů pro každou základní barvu) Model barev Model sada základních barev 1. RGB (červená, zelená, modrá) 2. CMYK ( cyan = modrozelená, magenta = fuchsin, žlutá, černá) Obrazovka RGB Tiskárna CMYK RGB model RGB model R + G + B = bílá absence barev = černá 16 milionů barev
15 CMYK model Cyan (modrozelená), magenta (fuchsin), žlutá --- odečítací barvy. Bílá Bílá Bílá R G B - R = cyan R G B - G = fuchsin R G B - B = žlutá Cyan + Magenta + Yellow = Brown (Hnědá) + Black (Černá) 100 milionů barev Barvy pro obrazovku (RGB) Určitý počet intenzit pro každou základní barvu Pomocí změn intenzity různé odstíny barev Pro každý pixel tři body. Kombinovaný pixel = Triáda Pixel
CSS 16 Hexadecinální zadání barvy hex hodnota je šestnáctková hodnota. Tři zakladní barvy (červená, zelená a modrá). Každe odpovida 2 čísla hex: RRGGBB. Např. #FF FF FF = 255, 255, 255 ---- bílá Příklad. hex barva ve stylu body {color: #FFCC99; background-color: #808080;} a { color: #66CC33; } barva pozadí = šedá barva textu = broskvová barva odkazu = světle zelená Zkrácený zápis hex hodnoty Umožňuje zadávat hexadecimální barvy, které mají dva stejné znaky v hodnotě jedné barvy. Příklad: Plný zápis : #00CC33 nebo #882266 Zkrácený zápis: #0C3 a #826
Název Hexadecimální zápis Ukázka 17 Black #000000 Blue #0000ff Aqua #00ffff Fuchsia #ff00ff Gray #808080 Green #008000 Lime #00ff00 Maroon #800000 Navy #000080 Olive #808000 Yellow #ffff00 Purpure #800080 Red #ff0000 Silver #c0c0c0 Teal #008080 White #ffffff
Hodnoty RGB Barva zadána pomocí následujicí syntaxe: color: rgb (128, 128, 128); CSS 18 Procenta RGB Procentuální hodnoty červené, želené a modré (0 100%). -Všechny hodnoty nulové ----černá barva; -Všechny hodnoty 100% ---- bílá barva. color: rgb (50%, 100%, 30%) ---- světle zelená Názvy barev 17 předdefinovaných barev (css 2.1): aqua black blue fuchsia grey green lime maroon navy olive purple red silver teal white yellow orange
Zadání barvy pozadí (pro stránku i jakýkoliv element) Vlastnost background-color body { background-color: #999; } h1 { background-color: #CCC; } CSS 19 Nastavení obrázku pozadí 1. Pozadí dokumentu (vlastnost background-image s hodnotou obsahujicí umístění a název souboru obrázku) body { background-image: url (gray.jpg); } Opakování obrázku na pozadí je standardní chování prohlížeče 2. Pozadí elementu. Příklad. Obrázek na pozadí všech nadpisů h1,h2,h3,h4,h5,h6 { background-image: url (gray.jpg); } Seskupování selektorů Všechny selektory, jež sdílí pravidla, můžete seskupit h1, p { color: red; }
CSS 20 Opakování pozadí Vlastnost background-repeat pro opakování v horizontálním směru: body{ background-image: url (gray.jpg); background-repeat: repeat-x; } pro opakování v vertikálním směru: body{ background-image: url (gray.jpg); background-repeat: repeat-y; } pro neopakování obrazku: background-repeat: no-repeat repeat; ( obrázek se zobrazí pouze v levém hornim rohu a nebude opakován )
CSS 21 Umístění obrázku pozadí 1. Nastavit background-repeat na no-repeat. 2. Nastavit background-position pomocí jedné z hodnot (tabulka) - u procentuálních nebo pevných hodnot je jako první uvedena horizontální hodnota a jako druhá vertikální hodnota. - pokud je zadána jen jedna hodnota, bude tato hodnota použita pro nastavení v horizontálním směru a výchozí hodnotou vertikálního směru bude 50%. Příklad. Pozice obrázku pozadí zadaná procentuálné, pevně a kličovýmí slovy. background-position: 0% 0%; ---- procentuálné background-position: 100px 4px; ---- pevně background-position: bottom right; ---- kličovýmí slovy
Procentuální Pevně Klíčová slova Druh hodnoty CSS 22 Příklad Umístění background-position: 0% 0% Levý horní roh background-position: 100% 100% Pravý dolní roh background-position: 14% 80% 14% doprava, 80% dolů background-position: 20px 20px 20 px zleva, 20 px dolů background-position: top left background-position:left top 0% 0% background-position: top center background-position: center top 50% 0% background-position: fight top background-position: top right 100% 0% background-position: left background-position: left center background-position: center left 0% 50% background-position: center background-position: center center 50% 50% background-position: right background-position: right center background-position: center right 100% 50% background-position: bottom left background-position: left bottom 0% 100% background-position: bottom background-position: bottom center background-position: center bottom 50% 100% background-position: right bottom background-position: bottom right 100% 100%
CSS 23 Uchycení a posun obrázků na pozadí Vlastnost background-attachment s hodnotou fixed nebo scroll. Fixed umožňuje zafixovat obrázek vůčí oknu prohlížeče. Scroll umožňuje posouvat obrázek společně s dokumentem. Souhrnná vlastnost CSS pro pozadí body { background-color: white; background-image: url (images/ball.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: right bottom; } Zkrácená verze: body{ background: white url(images/ball.gif) no-repeat scroll right bottom; }