1 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/ Tento projekt je financován z prostředků ...
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="...".
Tento odstavec bude zelený.
2. Stylopis Zápis kaskádového stylu se provádí mezi tagy <style>......... Tagy se umísťují do hlavičky dokumentu, která je uvozena tagy ........... Příklad: <style> p {color: red} The British pride in ownership is well known. A house, a garden and a place to wash the car is a British ideal.
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. Do externího souboru vložíme css příkazy: p {color: green} styly.css h1 {color: red} 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
typ písma
font-size
velikost
font-variant
varianty písma
font-style
řez písma
font-weight
tloušťka
font
zkrácený zápis
Vlastnosti písma
Vlastnosti písma hieroglifické
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 (milimetr) cm (centimetr) in (2,54cm) pt (1/72 palce)
Vlastnosti písma font- weight font- weight : normal font- weight : bold
normální písmo 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
(standartní mezera mezi slovy)
word-spacing: 2px word-spacing: 150%; Dovolené jednotky: em, ex, px, cm, mm, pt, pc, in
letter-spacing určuje mezeru mezi písmeny letter-spacing: 5px; Dovolené jednotky: em, ex, px, cm, mm, pt, pc, in
Vlastnosti textu text-decoration určuje vzhled písma text-decoration : none
žádné podtržení
text-decoration : underline
podtržení
text-decoration : overline
nadtržení
text-decoration : line-through
přeškrtnutí
text-decoration : blink
blikání
Vlastnosti textu
vertical-align určuje vertikální zarovnávání textu v bloku zarovnání na účaří rámu
vertical-align : baseline
zarovnání středu prvku na střed řádku
vertical-align : middle vertical-align : top vertical-align : bottom
zarovnání horní hrany textu s horní hranou rámu zarovnání spodní hrany řádku s dolní hranou rámu
vertical-align : sub vertical-align : super vertical-align : text-top vertical-align : textubaseline
posune účaří rámu dolů posune účaří rámu nahoru zarovnání horní hrany rámu s horním účařím 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
, ,
asie
afrika
amerika
číslovaný seznam
asie
afrika
amerika
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
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
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 ……} Použití třídy: <style>
vlastní text odstavce
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;} Použití:
…………………………………………
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; } 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 ;} Použití:
Toto je text na který je použit ID
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 zdědí po nadpisu velikost, barvu pozadí a rodinu písma.
![](“foto.jpg")
vlastní text článku......................................................................... ![](”foto.jpg")
vlastní text článku.........................................................................