CSS (4)
Projekt: CZ.1.07/1.5.00/34.0745 OAJL - inovace výuky Příjemce: Obchodní akademie, odborná škola a praktická škola pro tělesně postižené, Janské Lázně, Obchodní 282 Tento projekt je financován Evropskou unií – Evropským sociálním fondem a státním rozpočtem ČR. Autor: Mgr. Josef Kulhavý Předmět: Informační technologie
Obsah 1 CSS 2 Vztah CSS – HTML 3 CSS v HTML kódu 4 CSS v HTML kódu 5 Strutkura 6 Začínáme prakticky 7 Písmo 8 Odstavec 9 Ohraničení, pozadí 10 Barvy
CSS Cascading Style Sheets = kaskádové styly 1 Cascading Style Sheets = kaskádové styly Vznik CSS: 1994, nyní: CSS3 CSS se využívá k formátování obsahu HTML dokumentů Určuje, jak se má objekt (text, obrázek, tabulka) zobrazit Rozšiřuje schopnosti atributů v HTML CSS stylem můžeme definovat jednotný vzhled pro celý dokument jediným zápisem Např. že všechny nadpisy úrovně 1 budou červené Kód se stane mnohem přehlednější
Vztah CSS – HTML Samotný HTML se dnes již prakticky nepoužívá 2 Samotný HTML se dnes již prakticky nepoužívá Nejčastější model: HTML = obsah dokumentu + základní rozvrstvení dokumentu CSS = vzhled dokumentu V HTML kódu se uvede CSS kód nebo cesta k němu
CSS v HTML kódu 1. způsob: 2. způsob: 3 V hlavičce HTML dokumentu Párový tag: style 2. způsob: V prvku, který upravujeme Parametr: style <head> <title>CSS styly</title> <style type="text/css"> h1 { font-family: arial; font-size: 14px; } p { color: gray; } </style> </head> <h1 style="font-family: arial; font-size: 14px;"> Toto je nadpis</h1> <p style="color: gray;">tento odstavec je šedý</p>
CSS v HTML kódu 3. způsob: 4 styly.css: V externím souboru V hlavičce HTML kódu je umístěn pouze odkaz na tento externí soubor styly.css: h1 { font-family: arial; font- size: 14px; } p { color: gray; } img { border: solid 1 px red; } <head> <title>CSS styly</title> <link rel="stylesheet" href="styly.css„ type="text/css“> </head>
Struktura 5 Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány: Selektor = název elementu, pro který má pravidlo platit Jako selektor použijeme název tagu (např.: body, p, img) Možno též definovat vlastní selektory – na začátek píšeme tečku „.“ Deklarace = co pro něj má platit vlastnost: hodnota Deklarace je uzavřena do složených závorek Deklarace se od sebe oddělují středníkem selektor { vlastnost: hodnota; vlastnost: hodnota; } nebo .selektor { vlastnost: hodnota; vlastnost: hodnota; } Stejně jako u HTML nezáleží na počtu mezer, zalomení řádku, tabulátorech
Začínáme prakticky 6 Do HTML dokumentu dopišme tento řádek: <link rel="stylesheet„ href="styly.css" type="text/css"> Pomocí poznámkového bloku vytvořme nový prázdný dokument styly.css Do dokumentu styly.css napišme deklaraci pro změnu barvy všech elementů na červenou: body { color: red; } znak { = pravý Ctrl + B znak } = pravý Ctrl + N Dokument uložte a zobrazte stránku index.htm
Písmo 7 Rodina písma: font-family Definujeme název konkrétního písma Pro případ, že by prohlížeč neměl písmo k dispozici, napíšeme na konec obecnou rodinu body { font-family: Helvetica, Arial, sans-serif; } Velikost písma: font-size Nejčastěji uvádíme v pixelech h1 { font-size: 20px; } Tučné písmo: font-weight Hodnota „bold“ (nebo „normal“ pro normální písmo) h2 { font-weight: bold; } Kurzíva: font-style Hodnota „italic“ (nebo „normal“ pro normální písmo) h1 { font-style: italic; } Podtržení písma: text-decoration Podtržení: „underline“ Nadtržení: „overline“ Přeškrtnuní: „line-through“ h1 {text-decoration: overline; }
Odstavec 8 Zarovnání: text-align Doleva: „left“ Doprava: „right“ Na střed: „center“ Do bloku: „justify“ p { text-align: justify; } Zvětšení mezery mezi znaky: letter-spacing Uvede se hodnota zvětšení v tzv. „em“ body { letter-spacing: 0.02em; } Výška řádku: line-height Uvede se hodnota v procentech, nebo uvádějící násobek výšky běžného řádku p { line-height: 1.6; }
Ohraničení, pozadí 9 Možno aplikovat na tabulky, obrázky, ale i text Ohraničení ze všech stran: border Ohraničení pouze z vybrané strany: border-top, border-right, border-bottom, border-left Vlastnosti: tloušťka ohraničení: např. 1px styl ohraničení: solid (jednoduchá čára), double (dvojitá čára), dotted (tečkovaná čára) barva ohraničení: např. black p { border: solid 1px red; } Pozadí: background-color Uvede se barva ohraničení body { background-color: gray; } Možno též podbarvit obrázkem: background-image table { background-image: ‘tulipan.jpg’; }
Barvy 10 Pro určení barev se používá systém barev RGB (Red Green Blue). Každá barva se skládá ze tří základních barev (červené, zelené a modré) v různém poměru. Čím více barev, tím blíže k bílé. Čím méně barev, tím blíže k černé. (Tzn. čím větší číslo, tím světlejší barva). Odstíny šedi vznikají, když jsou všechny tři složky na stejné hodnotě. Zápis barvy Název barvy (v angličtině) – u předdefinovaných (pojmenovaných) barev body { color: blue; } RGB zápis – procentuálně – intenzitu každé barvy určujeme procenty 0% (minimální intenzita) až 100% (maximální intenzita) body {color: rgb(100%,0%,0%)} RGB zápis – desítkově – čísly 0 až 255 body {color: rgb(255,0,0)} RGB zápis – šestnáctkově – 00 až FF (tj. 0-9, a-f), zápis začíná značkou „#“ body {color: #FF0000}
Použité zdroje http://www.webtvorba.cz/css/uvod-do-css.html http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/