I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í PODPORA ELEKTRONICKÝCH FOREM VÝUKY CZ.1.07/1.1.06/01.0043 Tento projekt je financován z prostředků ESF a státního rozpočtu ČR. SOŠ informatiky a spojů a SOU, Jaselská 826, Kolín
I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í Programové vybavení Programové vybavení_4.ročník_b Autorem tohoto výukového materiálu je Mgr. Hynek Kohout SOŠ informatiky a spojů a SOU, Jaselská 826, Kolín
Úvod Použití CCS Vlastnosti písma Vlastnosti textu Seznamy Pozadí Rámečky Pozice elementu, rozměry Příklady Metatagy Inspirativní webdesign Pravidla tvorby WWW Test CSS Informační zdroje
Úvod Kaskádové styly (Cascading Style Sheets ) Umožňují definovat způsob zobrazení (druh a velikost písma, barvu, zarovnání.. každého elementu na stránce. Styl není přímo součástí textu stránky a tak může být zápis stránky přehlednější a dobře strukturovaný. Styly umožňují definovat jednotný vzhled určitého elementu v celém dokumentu jedním zápisem -- nemusíme jej opakovat u každého elementu. Pro tvorbu CSS je potřeba textový editor a nezbytná znalost jazyka HTML.
Úvod Nevýhody použití CSS Rozdílná implementace různými prohlížeči????
Úvod Program Topstyle program pro přehledné zadávání kaskádovách stylů a jejich vlastností ctrl + mezerník vkládání příkazů
Použití CCS 1. Přímý styl Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". <p style="color: green">tento odstavec bude zelený.</p> 2. Stylopis Zápis kaskádového stylu se provádí mezi tagy <style>... </style> Tagy se umísťují do hlavičky dokumentu, která je uvozena tagy <head>... </head> Příklad: <head> <style> p {color: red} </style> <head> <body> <p></p> The British pride in ownership is well known.. A house, a garden and a place to wash the car is a British ideal. </body>
Použití CCS 3. Pomocí externího souboru V externím editoru vytvoříme soubor s příponou css. Např. styly.css Tento externí soubor propojíme s HTML stránkou nebo stránkami pomocí příkazu umístěného v hlavičce HTML stránky. <link rel="stylesheet" type="text/css" href=styly.css"> Do externího souboru vložíme css příkazy: p {color: green} h1 {color: red} styly.css p {color: green} h1 {color: red} stranka.html stranka.html stranka.html
Použití CCS Zapisují se jako soubor pravidel, složených ze dvou částí. CSS nazývá prvníčást selektorem a druhou část deklarací. H1{ color:blue } p{ align:left }
Vlastnosti písma font-family font-size font-variant font-style font-weight font typ písma velikost varianty písma řez písma tloušťka zkrácený zápis
Vlastnosti písma
hieroglifické Vlastnosti písma klínové tibetské
Vlastnosti písma font-family Určuje font pro vykreslení písma v prohlížeči tzv. rodina písma Pokud prohlížeč uvedené písmo najde, použije ho k vykreslení fontu, pokud nenajde zkouší použít další font uvedený v seznamu fontů vlastnosti font-family. H1 {font-family: Arial;} H1 { font-family: Arial,Verdena;} H1 { font-family: Arial,Verdena, Tahoma;}
Vlastnosti písma font-family Obecné skupiny písma vlastnosti font family serif patkové písmo sans-serif bezpatkové písmo cursive kurzíva fantasy ozdobné písmo monospace neproporcionální písmo
Vlastnosti písma font- size Velikost písma lze zadávat absolutně nebo relativně: mm cm in (milimetr) (centimetr) (2,54cm) pt (1/72 palce) px (pixel) % (procenta)
Vlastnosti písma font- style normal normální stojaté písmo Italic kurzíva obliques skloněné písmo (geometricky transformované stojaté písmo) font- variant normal small-caps normální stojaté písmo velká písmena zmenšená na velikost malých písmen
Vlastnosti písma font- weight font- weight : normal normální písmo font- weight : bold tučné Tuto vlastnost je možné zadávat číslicemi od 100 do 900 v násobcích 100 : font- weight : 100 nejméně tučné písmo 200. 300.... 900 nejvíce tučné písmo
Vlastnosti písma font- zkrácený zápis souhrnu vlastností Všechny vlastnosti font, je možné zapsat bez zadávání jednotlivých vlastností samostatně, ale výčtem v tomto pořadí: font-style 1. font-variant 2. font-weight 3. font-size 4. font-family 1 2 3 4 {font: bold italic 15px Verdana}
Vlastnosti textu word-spacing - mezery mezi slovy letter-spacing - mezery mezi znaky text-decoration - podtrhávání, přeškrtnutí vertical-align - svislé zarovnání text-transform - malé / velké znaky text-align - zarovnání textu text-indent - odsazení prvního řádku line-height řádkování
Vlastnosti textu word-spacing určuje mezeru mezi slovy word-spacing:normal word-spacing: 2px word-spacing: 150%; (standartní mezera mezi slovy) Dovolené jednotky: em, ex, px, cm, mm, pt, pc, in letter-spacing: 5px; letter-spacing určuje mezeru mezi písmeny Dovolené jednotky: em, ex, px, cm, mm, pt, pc, in
Vlastnosti textu text-decoration určuje vzhled písma text-decoration : none text-decoration : underline text-decoration : overline text-decoration : line-through text-decoration : blink žádné podtržení podtržení nadtržení přeškrtnutí blikání
Vlastnosti textu vertical-align určuje vertikální zarovnávání textu v bloku vertical-align : baseline vertical-align : middle zarovnání na účaří rámu zarovnání středu prvku na střed řádku vertical-align : top zarovnání horní hrany textu s horní hranou rámu vertical-align : bottom zarovnání spodní hrany řádku s dolní hranou rámu vertical-align : sub posune účaří rámu dolů vertical-align : super posune účaří rámu nahoru vertical-align : text-top zarovnání horní hrany rámu s horním účařím vertical-align : textubaseline zarovnání na účaří rámu
Vlastnosti textu text-transform převod velkých písmen na malá a opačně text-transform : none znaky beze změn text-transform : capitalize převedení na kapitálky každé slovo text-transform : uppercase všechny znaky převedené na velké text-transform : lowercase všechny znaky převedené na malé
Vlastnosti textu text-align horizontální zarovnání textu text-align : left / right / center / justify vlevo, vpravo, na střed, do bloku text-indent odsazení prvnířádky text-indent : 40px Dovolené jednotky: em, ex, px, cm, mm, pt, pc, in
Vlastnosti textu text-height řádkování textu line-height: 1.3px; line-height: 170%; procento normální výšky line-height: 1.5; násobek velikosti řádkování Dovolené jednotky: em, ex, px, cm, mm, pt, pc, in line-height: 170% ; = line-height: 1.7;
Seznamy Pří použítí seznamů se používají tagy <ul>, <ol>, <li> <OL> <LI> asie <LI> afrika <LI> amerika </OL> <UL> <LI> asie <LI> afrika <LI> amerika </UL> číslovaný seznam seznam s odrážkami U číslovaného i nečíslovaného seznam lze v CSS typ odrážky nebo číslování, obrázkovou odrážku a umístění odrážek v textu.
Seznamy Vzhled odrážky nebo čísla list-style-type: disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none Doplňky: armenian, georgian, hiragana, katakana, hiragana-iroha, katakana-iroha
Seznamy Umístění odrážky list-style-position : outside odrážka je umístěna vlevo od bloku textu, řádky začínají pod sebou inside odrážka je umístěna hned vedle textu, takže druhý řádek je pod odrážkou Obrázková odrážka list-style-image list-style-image: url( foto.gif ). <ul> <li style="list-style-image: url( adresar/foto.gif')">text odrážky</li> </ul> Umístění obrázku na disku může být popsáno absolutním i relativním odkazem!
Třídy, identifikátory Třídy 1. Umožňují vytvořit vlastní prvky nezávislé na HTML 2. definují se pomocí tečky a názvu třídy v hlavičce dokumentu nebo externím souboru: Definice třídy: <style>.název třídy { seznam vlastností }.test { text-align: center; font-weight: bold } </style> Použití třídy: <style> <tag class="jméno_třídy"> <p class= testl">vlastní text odstavce</p> </style>
Třídy, identifikátory Kombinace tříd Třídy v jednotlivých tagách lze libovolně kombinovat a seskupovat Jsou definovány tyto třídy <style>.kurziva {font-style: italic;}.tucna {font-weight:bold;}.zelená {color:green;} </style> Použití: <p class="kurziva tucna zelená"> <p class="kurziva zelená"> <p class=" tucna zelená">
Třídy, identifikátory Kontextové selektory Používají se v případě, pokud je nutné použit jinou vlastnost u prvku, který je uvnitř jiného elementu <style> div p { color : green; background-color : white; } </style> Pokud bude element p uvnitř elementu div sformátuje se dle předpisu text bude zelený, podklad bílý. Text Text Text Text Text Text Text Text Text
Třídy, identifikátory Identifikátor Je podobný třídě, má však vyšší prioritu. Označuje se symbolem # na rozdíl od třídy, kde se používá.. Může být přiřazen pouze jedinému objektu na rozdíl od třídy. Definice ID <STYLE> #prvni_odstavec {text-indent : 40px ;} </STYLE> Použití: <P ID="prvni_odstavec">Toto je text na který je použit ID </P>
Třídy, identifikátory Dědičnost Třídy Příklad: p {color : red;} p.zelena {color : green;} každý odstavec bude zobrazen červeným písmen a odstavce třídou zelená. (p class="cervena") se zobrazíčervenou barvou. Identifikátor.moje{color : Black;} #zelena{color : blue;} (id= zelena") bude zobrazen černým písmen a odstavce s třídou zelená.
Třídy, identifikátory Dědičnost Vyšší váha stylu pokud máme styl v externím souboru a nastavené odstavce P na zelenou barvu a jeden odstavec v HTML stránce chcete změnit na červenou barvu tak přímo do elementu přídáte style="color:red" style="color:red" má vyšší váhu protože byl zapsán později a odstavec bude červený. Pokud za styl je vloženo slovo! important nebude záležet jesli byl napsán později a bude mít vždy vyšší váhu!! Dědičnost si vysvětlíme na následujícím příkladu, co se stane když do hlavního nadpisu vložíme element a (odkaz), odkaz zdědí po hlavním nadpisu velikost, ale jen tehdy pokud odkazu ve stylovém předpisu velikost nenastavíme. h1{color : green; background-color : red;font-family : Verdanal, Helvetica, sans-serif; font-size : 150%;} Odkaz <a> zdědí po nadpisu velikost, barvu pozadí a rodinu písma.
Třídy, identifikátory Pseudotřídy Charakteristika: 1. Speciálním typem class 2. vždy použity na celý obsah elementu 3. aktivovány nějakou událostí nebo splněním podmínky 4. Používají symbol : link visited active hover focus
Třídy, identifikátory Pseudotřídy Pseudotřídy definované pro odkazy :link - aplikuje se na ještě nenavštívený odkaz :visited aplikuje se na již navštívený odkaz O použití je rozhodnuto již při načítání HTML stránky prohlížečem. Dynamické pseudotřídy :active - odkaz bykl aktivován, na odkazu bylo zmáčknuto tlačítko myši a tlačítko je stále stlačeno. :hover aktivuje se při přejetí kurzoru nad odkazem :focus - odkaz byl vybrán například klávesou TAB
Pseudotřídy Pseudotřídy definované pro text :first-letter - používá se k formátování prvního písmena v textu - tvorba iniciály :first-line - používá se k formátování prvního řádku v textu p:first-line {color: red} Třídy, identifikátory
Pozadí Barva na pozadí široce podporovaná vlastnost většinou prohlížečů Příklad: background-color : RGB(255,0,0) background-color: #FFFFCC background-color: red Obrázek na pozadí background-image background-image: url(/foto/leto/obrazek.jpg) background-image: url(foto.jpg) Při zadání URL je nutné dbát na správné umístění cílového souboru ve stromové struktuře počítače!
Pozadí background-color Opakování obrázku na pozadí Vlastnosti: repeat-x horizontální opakování obrázku repeat-y vertikální opakování obrázku no-repeat zákaz opakování obrázku na pozadí Příklad: 1. body {background-image: url(obrazek.png); background-repeat: repeat-x;} 2. body {background-image: url(obrazek.png); background-repeat: repeat-y;} U prohlížečů je vlastnost opakování nastavena automaticky. Jednotlivé obrazy se vykreslují jeden vedle druhého - vyplní celý obsah HTML stránky.
Pozadí Pozice obrázku na pozadí background-position určuje pozici obrázku na obrazovce background-position: x y Vlastnosti: bottom dole right vpravo left vlevo top nahoře % pixel Příklad: background-position: right top background-position: 100% 0%
Pozadí rolování obrázkového pozadí Fixace pozadí background-attachment : rolování obrázkového pozadí Příklad: background-attachment :scroll background-attachment :fixed pozadí se roluje se stránkou pozadí je pevně přichyceno při rolování Definice <style> body {background-image: url(foto.jpg); background-attachment:scroll;} </style>
Pozadí
Rámečky Pomocí kaskádových stylů lze u boxů nastavit šířku, výšku, orámování, vnitřní a vnější okraj.
Buňkám tabulek vždy nastavujte vnitřní okraj (cellpadding), aby se text nelepil na rámeček. Celému tělu stránky (tag <body>) zadejte pravý a levý margin, ať není text nalepený na okraje okna. Potom se navíc může vlevo vykreslit něco na pozadí nebo -- pokud bude okraj větší -- umístit do něj absolutně pozicované menu. Máte-li na stránce víc obrázků, oddělujte je prostorem. České odstavce bez vertikálních mezer popisuji v CSS prakticky. Zajímavé je, že plovoucí elementy (obrázky například) se umísťují do marga jiných elemetů. Například pokud máte obrázek plovoucí vpravo a za ním odstavec s pravým margem, obrázek se zarovná ke kraji dokumentu. A určitě přijdete na další. Kdo hodně používá tabulky a pozadí nebo dělá rámečky kolem obrázků nebo odstavců, musí pochopit rozdíl mezi vnitřním a vnějším okrajem elementu. Používá se
Rámečky Margin Vlastnost margin určuje velikost vnějších okrajů okolo boxu. Výčet vlastností: margin-top - horní vnější okraj margin-bottom - dolní vnější okraj margin-left - levý vnější okraj margin-right - pravý vnější okraj margin - kompletní nastavení vnějších okrajů Velikost se udává v procentech nebo délkových jednotkách Příklad: p.ramecek{ margin-bottom : 15px; margin-left : 15px; margin-right : 15px; margin-top : 15px; } Zkrácený zápis: nastavuje se v tomto pořadí horní okraj, druhé pravý okraj, třetí spodní okraj, čtvrté levý okraj. p.ramecek {margin : 15px 15px 15px 15px;}.
Rámečky Padding Vlastnost padding určuje velikost vnitřních okrajů uvnitř boxu. Výčet vlastností: padding-top - horní vnitřní okraj padding-bottom - dolní vnitřní okraj padding-left - levý vnitřní okraj padding-right - pravý vnitřní okraj Velikost se udává v procentech nebo délkových jednotkách Příklad: p.vnokraj { padding-bottom : 40px; padding-left : 40px; padding-right : 40px; padding-top : 40px; } Zkrácený zápis: nastavuje se v tomto pořadí horní okraj, druhé pravý okraj, třetí spodní okraj, čtvrté levý okraj. p.vokraj {padding : 50px 50px 50px 50px;}
Rámečky Border Vlastnost border určuje šířku, barvu a druh rámečku. Výčet vlastností: border-top - nastavení horníčásti rámečku border-bottom - nastavení dolníčásti rámečku border-left - nastavení levéčásti rámečku border-right - nastavení pravéčásti rámečku border - kompletní nastavení rámečku border-color - kompletní nastavení barvy rámečku border-style - kompletní nastavení stylu rámečku border-width - kompletní nastavení šířky rámečku Kombinace jednotlivých vlastností I. border-left-color - nastavení barvy border-left-style - nastavení stylu border-left-width - nastavení šířky border-right-color - nastavení barvy border-right-style - nastavení stylu border-right-width - nastavení šířky
Rámečky Kombinace jednotlivých vlastností II. border-top-color - nastavení barvy border-top-style - nastavení stylu border-top-width - nastavení šířky border-bottom-color - nastavení barvy border-bottom-style - nastavení stylu border-bottom-width - nastavení šířky Border border-style - kompletní nastavení stylu rámečku border-style border-style: none dotted dashed solid double groove ridge inset outset.
Rámečky Border ukázka vzhledu jednotlivých rámečků Příklad: test{ border-bottom : 2px dashed #FF00FF; border-left : 4px dashed #FF00FF; border-top : 2px dashed #FF00FF; border-right : 4px dashed #FF00FF; }
Width šířka určuje šířku objektu p.test{width : 300px;} tag p s třídou test bude široký 300 pixelů Rámečky Rozměry objektu Velikost se udává v procentech nebo délkových jednotkách. Vlastnost width nefunguje na řádkové prvky!! Height výška určuje výšku objektu p.test{height : 300px;} tag p s třídou test bude vysoký 300 pixelů Velikost se udává v procentech nebo délkových jednotkách.
Rámečky Plování objektu Float plování / obtékání objektu float : left float : right float :none intherit zarovnání vlevo a obtékání textem z druhé strany zarovnání vpravo a obtékání textem z druhé strany objekt není plovoucí hodnota se zdědí po rodičovském prvku Příklad: img.doprava {float : right} obrázek bude umístěn vpravo
Rámečky Řízení obtékání textu Clear clear : none clear : both clear : left clear : right popisuje čekání na ukončení obtékaných prvků na plovoucí prvky se nečeká objekt buude vykreslen až po všemi prvek čeká na obtékané elementy přiražené doleva prvek čeká na obtékané elementy přiražené doprava Čekání na plovoucí objekt, je myšleno, že se vykreslí až pod tímto plovoucím objektem. Normálně prvky na skončení obtékaného prvku nečekají (kdyby čekaly, tak ty prvky už nebudou obtékané. Plovoucí objekty jsou takové objekty, které mají nastavenou vlastnost float na left nebo right, popřípadě jsou zarovnány vlastnoastí align doleva nebo doprava.
Rámečky Příklad na řízení obtékání Výchozí situace: Na stránce je umístěný text, vedle textu vpravo obtékaný obrázek. Za textem má následovat nadpis s tagem <H4>... </H4>. <img src= foto.jpg" width= 300" height= 300" style="float: right"> vlastní text článku... <h4>nadpis</h4> 1. Nadpis se zobrazí nalevo od obtékaného obrázku. Nadpis bude umístěn pod obrázkem nikoliv vedle něho. <img src= foto.jpg" width="200" height="300" style="float: right"> vlastní text článku... <h4 style="clear: both">nadpis</h4> 2.
Rámečky Příklad na řízení obtékání Řešení 1
Rámečky Příklad na řízení obtékání Řešení 2
Pozice elementu, rozměry Pozice Absolutní Relativní Absolutní pozice - objekt je umístěn do stránky na udané souřadnice bez ohledu na okolní text. Relativní pozice naproti tomu určuje pouze, o kolik se má objekt posunout oproti své normální poloze.
Pozice elementu, rozměry Pozice elementu position:relative position:absolute relativní pozice absolutní pozice v souřadném systému top posunutí objektu směrem dolů v jednotkách * left posunutí objektu směrem doprava v jednotkách * z-index překrývání objektů. Je možné zadávat kladná i zápornáčísla. Čím vyššíčíslo tím je nám vrstva blíže. *Dovolené jednotky pro top a left : em, ex, px, cm, mm, pt, pc, in Příklad: position: relative; top: 50px ; position: absolute; top: 150px; left: 100px
Pozice elementu, rozměry Příklad 1 <body> Normální text, <span style="position: relative; top: 20px"> relativně umístěný text</span> a <span style="position: absolute; top: 100px; left: 150px">absolutně umístěný text</span>. </body> Příklad 2 position:absolute; width: 150px; height: 150px; top:250px; left: 100px; backgroundcolor:lime; z-index:2