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 Soubor DTD

Prohlížeč

Výstupní dokument

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; } selektor

vlastnost

hodnota

Pravidlo

CSS 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ů.

3

CSS

4

Dědičnost ■ Dědičnost znamená, že styly od svých nadřazených elementů dědí.

Můj nadpis

Následující text

■ elementy h1 a p jsou považovány za potomka elementu body. 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)

Vítejte!

Vítejte!

2)

Vítejte!

Vítejte!

CSS 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. <style type=“text/css”> body{background-color:black; color:white;} h1{font-size:24px;} p{font-size:12px;}

Vítejte!

První odstavec.

Druhý odstavec.

5

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 Připojení souboru se styly (styly.css) k souboru HTML (element link)

Vítejte!

První odstavec.

Druhý odstavec.

7

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ů. <style type=“text/css”> @import url (import.css);

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

Styles.css

index.html

mod2.css 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 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ář */

10

CSS 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; }

11

CSS 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.

12

13

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

Grafické rozlišení ● Počet bodů tvořicích zobrazení - 640x480; - 800x600; - 1024x780; - 1280x1024;

■ - - - - - - - - - - - - -- - - - ■ 640 px - 480 px ■

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 ● R + G + B = bílá ● absence barev = černá ● 16 milionů barev

15

CMYK model ● Cyan (modrozelená), magenta (fuchsin), žlutá --- odečítací barvy. Bílá R G B

Bílá

- R = cyan

R G B

Bílá

- 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. Pixel Kombinovaný pixel = Triáda

CSS 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

16

Název

Hexadecimální zápis

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

Ukázka

17

CSS Hodnoty RGB Barva zadána pomocí následujicí syntaxe: color: rgb (128, 128, 128);

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

18

CSS

19

Zadání barvy pozadí (pro stránku i jakýkoliv element) Vlastnost background-color body { background-color: #999; } h1 { background-color: #CCC; } 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 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 )

20

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%; background-position: 100px 4px; background-position: bottom right;

---- procentuálné ---- pevně ---- kličovýmí slovy

CSS Druh hodnoty Procentuální

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ů

Pevně

background-position: 20px 20px

20 px zleva, 20 px dolů

Klíčová slova

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 Uchycení a posun obrázků na pozadí Vlastnost background-attachment s hodnotou fixed nebo scroll. 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; }

23