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. Na rozdí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. Definování stylu uvnitř dokumentu To můžeme provést opět v tagu style, kam tentokrát místo odkazu na externí styl umístíme přímo definici stylu. <style type="text/css">body {color: blue</style>

3 Nebo můžeme definovat styl přímo nějakému elementu, což se hodí zvláště v případě, kdy máme definovaný jednotný styl, ale pro například jedno konkrétní slovo chceme použít jiné pravidlo. Potom použijeme v příslušném tagu atribut style. <h1 "style=color: green">nadpis</h1> Váha stylů Pokud ve stylu definujeme pro stejný element stejnou vlastnost dvakrát, vyšší váhu má ta deklarace, která byla definovaná později (myšleno na pozdějším řádku) a ta se také provede. Pokud bychom chtěli některé deklaraci přiřadit větší důležitost, použijeme!important. h1 {color: blue!important Pozn.: Starší (ale opravdu hodně staré) prohlížeče styly vůbec nepodporují. Pokud tedy používáte zápis pomocí tagu style a chcete tento případ ošetřit, stačí celý styl vložit do komentářů:  Editor PSPad využíváme jej k vytváření externích souborů např. styl.css Je dobré mít uložený soubor html a css v jedné složce, aby nebylo nutné vypisovat dlouhou cestu. V externím souboru jsme nadefinovali body barvu pozadí, barvu písma, font a velikost písma apod., dále nadpis1 a hlavičku styl.css body {background-color: rgb(176,224,230); font: 18px Comic Sans MS; color: rgb(0,0,255); h1 {font-size: 150%; text-align: center; #hlavicka {position: absolute; top: 50px; left: 50px; width: 900px; height: 200px; border: thin rgb(0,0,51) solid kaskada.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, <link rel="stylesheet" type="text/css" href="styl.css"> <title>kaskádové styly</title> </head> <body> <div id="hlavicka"> <h1>první stránka</h1>

4 </body> </html> 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 > 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: styl.css normální poloze. /* CSS Document */ body {background-color: rgb(176,224,230); font: 18px Comic Sans MS; color: rgb(0,0,255); h1 {font-size: 150%; text-align: center; #hlavicka {position: absolute; top: 50px; left: 50px; width: 100%; height: 200px; padding-top: 50px; #vlevo {position: absolute; top: 270px; left: 50px; width: 25%; height: 600px;

5 #stred {position: absolute; top: 270px; left: 300px; width: 75%; height: 600px; background-color: rgb(255,255,255); kaskada.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, <link rel="stylesheet" type="text/css" href="styl.css"> <title>kaskádové styly</title> </head> <body> <div id="hlavicka"> <h1>první stránka</h1> <div id="vlevo"> <ol> <li>na první stránku</li> <li>na druhou stránku</li> </ol> <div id="stred"> </body> </html>

6 Okraje 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 Trochu jiný způsob vytvoření layoutu stránky je pomocí vlastnosti float. Vlastnost float vytváří z běžných prvků prvky plovoucí. Takový prvek je potom zobrazován jako obdélník, odsunutý ke okraji sazby a ostatní obsah jej obtéká. Výchozí hodnotou vlastnosti float je none. Dokud neurčíme jinak, jsou proto prvky neplovoucí, neobtékané. Kromě none jsou možnými hodnotami ještě left a right s hodnotou left se prvek stane plovoucím vlevo (je posunut k levému okraji a okolní obsah jej zprava obtéká), s hodnotou right je prvek plovoucí vpravo (analogicky je odsunut doprava a obtékán zleva). Abychom měli při různém rozlišení stránku uprostřed, použijeme prvek obal, do kterého vkládáme všechny zbývající prvky styl.css /* CSS Document */ body {background-color: rgb(224,240,255); font: 18px Georgia; color: rgb(0,0,255); h1 {font-size: 150%;

7 text-align: center; # obal {margin: 50px auto 0 auto width: 960px; #hlavicka { width: 100%; height: 150px; border: thin rgb(176,176,176) solid; padding-top: 50px; #vlevo {float: left; width: 23%; height: 500px; border: thin rgb(176,176,176) solid; padding: 10px 10px 10px 10px #stred {float: left; width: 55%; height: 500px; background-color: rgb(224,240,255); padding: 10px 10px 10px 10px #vpravo {float: right ; width: 15%; height: 500px; border: thin rgb(176,176,176) solid; padding: 10px 10px 10px 10px; #stred p {width: 250px; margin: 30px 30px 30px 30px; font-size: 80%; padding: 5px 5px 5px 5px; kaskada.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, <link rel="stylesheet" type="text/css" href="styl.css"> <title>kaskádové styly</title> </head> <body> <div id="obal"> <div id="hlavicka"> <h1>první stránka</h1> <div id="vlevo"> <ol> <li><a href="kaskada.html">na první stránku</a></li> <li><a href="kaskada2.html">na druhou stránku</a></li> </ol>

8 <div id="stred"> <p>lorem ipsum dolor sit amet consectetuer cursus odio malesuada in tortor. Dolor urna non ipsum gravida vitae habitasse In semper convallis sed. Duis quis Sed leo eu euismod nibh lacinia Quisque penatibus.</p> </body> </html> 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 <div class="vlevo"> Může být zároveň id a class?

9 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). Odkazy a:link a:hover a:visited a:active styl.css nenavštívený přejížděný myší navštívený v okamžiku kliknutí /* CSS Document */ body {background-color: rgb(176,224,230); font: 18px Comic Sans MS; color: rgb(0,0,255); h1 {font-size: 150%; text-align: center; #hlavicka {position: absolute; top: 50px; left: 50px; width: 100%; height: 200px; padding-top: 50px; #vlevo {position: absolute; top: 270px; left: 50px; width: 25%; height: 600px; padding: 10px 10px 10px 10px #stred {position: absolute; top: 270px; left: 300px; width: 75%; height: 600px; background-color: rgb(255,255,255); #stred p {width: 250px; border: thin rgb(0,0,0) solid; margin: 30px 30px 30px 30px; font-size: 80%; padding: 5px 5px 5px 5px; #obal {width: 1000px; margin: 20px auto 0 auto a:link {text-decoration: none; color: blue; a:hover {text-decoration: none; color: rgb(255,255,255);background-color: rgb(153,51,51); a:visited {text-decoration: none; color: rgb(51,51,0); a:active {text-decoration:none; color: red;.kulate {-moz-border-radius-bottomleft: 15px;

10 -moz-border-radius-topright: 15px; kaskada.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, <link rel="stylesheet" type="text/css" href="styl.css"> <title>kaskádové styly</title> </head> <body> <div id="obal"> <div id="hlavicka"> <h1>první stránka</h1> <div id="vlevo"> <a href="kaskada.html">na první stránku</a><br> <a href="kaskada2.html">na druhou stránku</a> <div id="stred"> <p class="kulate">lorem ipsum dolor sit amet consectetuer cursus odio malesuada in tortor. Dolor urna non ipsum gravida vitae habitasse In semper convallis sed. Duis quis Sed leo eu euismod nibh lacinia Quisque penatibus.</p> </body> </html>

11 styl.css /* CSS Document */ body {background-color: rgb(176,224,230); font: 18px Comic Sans MS; color: rgb(0,0,255); h1 {font-size: 150%; text-align: center; #hlavicka {position: absolute; top: 50px; left: 50px; width: 100%; height: 200px; padding-top: 50px; #vlevo {position: absolute; top: 270px; left: 50px; width: 25%; height: 600px; padding: 10px 10px 10px 10px; line-height: 50px; #stred {position: absolute; top: 270px; left: 300px; width: 75%; height: 600px; background-color: rgb(255,255,255); #stred p {width: 250px; border: thin rgb(0,0,0) solid; margin: 30px 30px 30px 30px; font-size: 80%; padding: 5px 5px 5px 5px; #obal {width: 1000px; margin: 20px auto 0 auto a:link {text-decoration: none; color: blue; a:hover {text-decoration: none; color: rgb(255,255,255); background-color: rgb(153,51,51); a:visited {text-decoration: none; color: rgb(51,51,0); a:active {text-decoration:none; color: red;.kulate {-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; img {float: right; margin: 15px 15px 15px 15px; width: 250px;

12 kaskada2.css <!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, <link rel="stylesheet" type="text/css" href="styl.css"> <title>kaskádové styly</title> </head> <body> <div id="obal"> <div id="hlavicka"> <h1>druhá stránka</h1> <div id="vlevo"> <a href="kaskada.html">na první stránku</a><br> <a href="kaskada2.html">na druhou stránku</a> <div id="stred"> <p class="kulate">lorem ipsum dolor sit amet consectetuer cursus odio malesuada in tortor. Dolor urna non ipsum gravida vitae habitasse In semper convallis sed. Duis quis Sed leo eu euismod nibh lacinia Quisque penatibus.</p> <img class="kulate" src="budova.png" alt="budova.png, 691kB" title="budova"> </body> </html> Barevné pozadí V grafickém editoru (např. GIMP) si vytvoříme malý obrázek a pak jej v daném objektu opakujeme #hlavicka { background-image: url(obr.png); background-repeat: repeat-x; width: 100%; height: 150px; padding-top: 50px;

13 Čtvrtek 21. září Postupně znovu opakujeme kaskádové styly. Layout lzevytvářet absolutním pozicováním a přesným určením levého horního rohu i všech rozměrů objektu Př. #hlavicka { position: absolute; top: 20px; left: 20px; width: 960px; height: 150px; Další možnost, vzhledem k velikosti a rozlišení monitorů možná lepší, je používání relativního pozicování, procent a vlastnosti float. Př. #hlavicka { position: relative; width: 100%; height: 150px; Letos jsme zatím vytvořili tuto stránku styl.css body {background-color: rgb(255,204,0); font-family: Vivaldi; font-size: 20 pt ; color: rgb(0,102,0); h1 {text-align: center; font-size: 150%; #hlavicka {position: relative; width: 100%; height: 150 px; border: thin rgb(0,204,0) solid; padding-top: 50 px; #menu {position: relative; float: left; width: 20%; border: thin rgb(0,204,0) solid; padding: 15 px 15 px; margin-top: 15 px; line-height: 30 pt; #obsah {position: relative; float: left; width: 80%; border: thin rgb(0,204,0) solid; padding: 15 px 15 px; margin-top: 15 px;

14 opakovani.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="pspad editor, <link rel="stylesheet" type="text/css" href="styl.css"> <title></title> </head> <body> <div id="hlavicka"> <h1>opakujeme si styly</h1> <div id="menu"> <a href=" ">První</a><br> <a href=" ">Druhá</a><br> <a href=" ">Třetí</a><br> <div id="obsah"> dhksdurfweo </body> </html>