Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

Transkript

1 Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s formátováním pomocí atributů v HTML formátovací schopnosti rozšiřuje. Styly umožňují přesně určit, jak bude který element vypadat. Narozdíl od atributů stylem můžeme definovat jednotný vzhled elementu pro celý dokument (např. že všechny nadpisy úrovně 1 budou červené) a to jediným zápisem pro příslušný element (nikoli v každém tagu příslušného elementu). Stejně tak můžeme pomocí stylu určit odlišné formátování pro třeba jen jediný výskyt určitého elementu. Tím se jednak zbavíme velkého množství kódu, jednak se tento kód stane mnohem přehlednější. Navíc pokud se jednou rozhodneme změnit například barvu písma všech odstavců, bude to pro nás otázka několika málo vteřin, měnit každý atribut u každého elementu v HTML by byla katastrofa. Jeden styl můžeme snadno použít pro libovolné množství stránek. Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány. Každé takové pravidlo má dvě části, selektor (název elementu, pro který má toto pravidlo platit) a deklaraci (co pro něj má platit). V deklaraci určujeme vlastnost a její hodnotu, deklarace je uzavřena do složených závorek. Celé to zapisujeme takto: selektor {vlastnost: hodnota_vlastnosti A konkrétně: h1 {color: blue Selektorem, tedy elementem, který formátujeme je zde h1 (nadpis 1. úrovně). Deklarací je {color: blue. Ta určuje, že vlastnost color bude mít hodnotu blue. Celé dohromady to tedy znamená, že všechny nadpisy 1. úrovně v dokumentu budou mít modrou barvu. Pokud budeme chtít určit elementu více než jednu vlastnost, jednotlivé vlastnosti od sebe oddělíme středníkem. Takto můžeme definovat libovolné množství vlastností. selektor {vlastnost1: hodnota_vlastnosti1; vlastnost2: hodnota_vlastnosti2; Pokud budeme chtít určit dvěma elementům jejich společnou vlastnost, oddělíme od sebe jednotlivé selektory čárkou. selektor1, selektor2 {vlastnost: hodnota_vlastnosti;

2 Dědičnost Většina vlastností se dědí. To znamená, že element, který nemá vlastnost definovanou jí dědí po nadřazeném elementu. Týká se to především vlastností písma barvy, velikosti, stylu atd. Pokud tedy chceme definovat nějakou vlastnost, kterou budou mít všechny elementy společnou (a později případně je vytvářet výjimky) definujeme ji pro element body. Komentáře Pokud si chceme ke stylu psát nějaké poznámky pro lepší orientaci, zapíšeme ji do komentářů. Ty se v CSS tvoří pomocí /* a */. Mezi hvězdičky pak můžeme umístit i několikařádkový komentář, ten se samozřejmě ve výsledném zobrazení neobjeví. body {color: blue /* tady si píši komentář, že mám všechny texty modré*/ Připojení stylu k dokumentu Styl můžeme k dokumentu připojit několika způsoby, můžeme definovat přímo v dokumentu nebo v externím souboru, způsoby můžeme i kombinovat. Externí soubor Pokud chceme mít styl uložený v externím souboru (což je velmi výhodné při používání jednoho stylu pro více dokumentů), v nějakém textovém editoru uložíme námi definovaný styl do souboru s příponou css. Ten pak připojíme k dokumentu zápisem v hlavičce (tj. mezi tagy <head> a </head>) buď v tagu link <link rel="stylesheet" type="text/css" href="styl.css" /> nebo v tagu style <style type="text/css">@import "styl.css";</style> Pokud je styl umístěn na jiném serveru, tak můžeme použít zápis: <style type="text/css">@import url(" "styl.css"; můžeme také vložit jeden styl do druhého stylu.

3 Soubory první.html a styly.css umístíme do jedné složky Do html kódu píšeme obsah stránky, pomocí souboru css upravujeme její vzhled prvni.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="pspad editor, <title>kaskády</title> <link rel="stylesheet" type="text/css" href="styly.css"> </head> <body> <h1>kaskádové styly - lepší způsob vytváření stránek</h1> </body> </html> styly.css /* CSS Document */ body {background: rgb(153,0,0) ; color: rgb(255,255,102); font-family: Comic Sans MS; font-size: 20px; h1 {font-size: 150%; text-align: center; Rozdělení stránky na několik částí hlavička, patička, sloupce vše se děje pomocí stylů Pro jednoznačný popis nějakého elementu existuje univerzální atribut ID. Ve stylopisu mu přiřadíme deklaraci, která začíná dvojkřížkem # (pravý Alt + X) - #hlavicka{. V těle html dokumentu by se měl element vyskytovat jenom jednou, odkazuje se na něj zápisem <div id = hlavicka >

4 Pozicování Existují dva naprosto odlišné druhy pozicování. 1. Absolutní pozice umístí objekt do stránky na udané souřadnice bez ohledu na okolní text. 2. Relativní pozice naproti tomu určuje pouze, o kolik se má objekt posunout oproti své Příklad: prvni.html normální poloze. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="pspad editor, <title>kaskády</title> <link rel="stylesheet" type="text/css" href="styly.css"> </head> <body> <div id="hlavicka"> <h1>kaskádové styly - lepší způsob vytváření stránek</h1> <div id="vlevo"> </body> </html> styly.css /* CSS Document */ body {background: rgb(153,0,0) ; color: rgb(51,255,102); font-family: Comic Sans MS; font-size: 20px; h1 {font-size: 150%; text-align: center; #hlavicka{position: absolute; top: 15px; left: 20px; width: 950px; height: 200px; background-color: rgb(255,255,153); color:rgb(153,0,0) ; #vlevo{position: absolute; top: 230px; left: 20px; width: 150px; height: 450px; background-color: rgb(153,255,102);

5 Padding - tato vlastnost určuje šířku vnitřního okraje prvku. Padding se může zadávat jednou hodnotou najednou pro všechny čtyři strany, nebo se vypíše více hodnot pro různé strany (to je to a b c d). Existují varianty padding-top, padding-right, padding-bottom a padding-left určené jen pro zadání jedné strany vnitřního okraje. U prohlížeče Internet Explorer je padding započítáván do šířky prvku, u ostatních ne. Margin - určuje šířku vnějšího okraje prvku, vzdálenost mezi případným rámečkem a okolním dokumentem Margin je CSS vlastnost, která v prohlížečích chybuje asi nejčastěji. Pomocí vlastnosti padding-top odsadíme nadpis od horního okraje hlavičky

6 Další část stránky nazveme obsah, vyplníme jím největší plochu naší zkušební stránky. Vytvořili jsme další prvek odstavec. Pomocí odstavce můžeme nastavit šířku textu, zvolit jiné písmo, barvu pozadí apod. Př. prvni.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="pspad editor, <title>kaskády</title> <link rel="stylesheet" type="text/css" href="styly.css"> </head> <body> <div id="hlavicka"> <h1>kaskádové styly - lepší způsob vytváření stránek</h1> <div id="vlevo"> <div id="obsah"> <p>slorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam nunc ut neque eleifend sagittis. Vivamus ut ante purus. Nam mattis tempor diam, eget vehicula felis rutrum non. I </p> </body> </html> styly.css /* CSS Document */ body {background: rgb(153,0,0) ; color: rgb(51,255,102); font-family: Comic Sans MS; font-size: 20px; h1 {font-size: 150%; text-align: center; #hlavicka {position: absolute; top: 15px; left: 20px; width: 950px; height: 170px; background-color: rgb(255,255,153); color:rgb(153,0,0) ; padding-top: 30px ; #vlevo{position: absolute; top: 250px; left: 20px; width: 150px; height: 450px;

7 background-color: rgb(153,255,102); #obsah {position: absolute; top: 250px; left: 200px; width: 770px; height: 450px; background-color: rgb(255,255,153); p {background-color: rgb(102,255,153); color: rgb(153,51,0); width: 300px; position: relative; border: thin rgb(51,153,0) ; top: 100px; left: 100px; Menu odkazy na další stránky V kaskádových stylech lze upravit, jak bude vypadat odkaz, který ještě nebyl použitý, na který klikáme, který jsme už měli otevřený a nad kterým jen přejedeme a:link {color: rgb(102,0,0);text-decoration: none; a:visited {color: rgb(102,0,0);text-decoration: none; a:active {color: rgb(102,0,0);text-decoration: none; a:hover {color: rgb(102,0,0);text-decoration: none; background-color: rgb(255,204,0); Máme-li více stránek, používáme jeden soubor s kaskádovými styly a vybíráme jen ty objekty, které chceme na dané stránce mít

8 Identifikátory a třídy Vyskytuje-li se prvek na stránce více než jednou, použijte class (třídu). Vyskytuje-li se prvek na stránce pouze jednou, použijte id (identifikátor). Podle standardů není možné použít atribut id pro prvek, vyskytující se na stránce více než jednou (validátor zahlásí chybu ID "main" already defined). Identifikátory se zpravidla používají pro animace ve Flashi, nebo JavaScriptové kódy tedy unikátní prvky. Značení Identifikátory se ve stylopisu zapisují mřížkou (#): #vlevo {float: left; width: 150px <div id="vlevo"> Třídy se zapisují tečkou (.):.vlevo {float: left; width: 150px <span class="vlevo"> </span> Může být zároveň id a class? Zápis typu: <h1 id=" " class=" "> není chybný, je to naprosto korektní řešení! Jedná se o unikátní prvek (id), na který se uplatňuje ještě nějaké obecné formátování (class). Průhlednost Poloprůhledné grafické formáty PNG je dobré nahrazovat CSS transparentností. Zápis průhlednosti vyjadřují čísla od 0.0 až po 1.0 (0.1, 0.8 ). Aby bylo dílo průhledné ve věch prohlížečích, musíme použít čtyři CSS zápisy. V IE funguje průhlednost textu pouze s přesně stanovenými rozměry..pruhledne { opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; Další příklady tříd:.kulate {-moz-border-radius:20px.zelene{color: rgb(0,204,0);