90
KASKÁDOVÉ STYLY
KASKÁDOVÉ STYLY
2
PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ. SOUČASNÉ PROHLÍŽEČE JIŽ KASKÁDOVÉ STYLY PODPORUJÍ, OVŠEM DÍKY KONKURENČNÍMU BOJI NĚKTERÉ VLASTNOSTI FUNGUJÍ POUZE V NĚKTERÝCH PROHLÍŽEČÍCH A JINDE JSOU IGNOROVÁNY.
CSS2 BYLO UVEDENO V ROCE 1998, OVŠEM PODPORUJÍ JEJ POUZE NĚKTERÉ NOVĚJŠÍ PROHLÍŽEČE.
3
U STYLOPISŮ (BUDE VYSVĚTLENO V DALŠÍ KAPITOLE) JE VHODNÉ POUŽÍVAT KOMENTÁŘŮ, KTERÉ SE LIŠÍ OD KOMENTÁŘŮ V HTML.
/* komentářová poznámka */
NEJČASTĚJI SLOUŽÍ PRO POPSÁNÍ NASTAVENÍ PŘÍSLUŠNÉ ZNAČKY, TŘÍDY ČI PSEUDOTŘÍDY, COŽ SE UPLATNÍ PŘI POZDĚJŠÍ MODIFIKACI TĚCHTO PRVKŮ NEBO NAPŘ. PŘI LADĚNÍ STYLU.
4
NA INTERNETU JE SPOUSTA NÁSTROJŮ, KTERÉ UMOŽŇUJÍ VYTVÁŘET STYL VELMI POHODLNÝM ZPŮSOBEM. JEDEN TAKOVÝ PROGRAM VÁM ZDE NABÍZÍM. JMENUJE SE KM CSS EDITOR OD MIRKA KINTRA, KTERÝ JE ŠÍŘEN JAKO GNU LICENCE. MŮŽETE SI JEJ TEDY ZDARMA STÁHNOUT. NA ADRESE MUJWEB.ATLAS.CZ/WWW/KMTOOLS, JSOU TÉŽ ZDROJOVÉ KÓDY V OBJECT PASCALU.
TO SAMOZŘEJMĚ NEVYLUČUJE TVORBU STYLŮ NAPŘ. V POZNÁMKOVÉM BLOKU (NOTEPAD) ČI JAKÉMKOLI ASCII EDITORU. NĚKDY JE PRÁVĚ TENTO ZPŮSOB RYCHLEJŠÍ, NEŽ POUŽITÍ NĚJAKÉHO SPECIALIZOVANÉHO
5
1. DEFINICE KASKÁDOVÝCH STYLŮ
KASKÁDOVÝ STYL SE DEFINUJE TŘEMI ZPŮSOBY:
* IN-LINE ZÁPISEM – ŘÁDKOVÝ STYL* STYLOPISEM – INTERNÍ STYLOVÝ DOKUMENT* EXTERNÍM STYLOPISEM – EXTERNÍ STYLOVÝ DOKUMENT
6
IN-LINE ZÁPIS
SLOUŽÍ PRO NASTAVENÍ PARAMETRŮ KONKRÉTNÍ ZNAČKY. POKUD TEDY POTŘEBUJETE NASTAVIT POUZE KONKRÉTNÍ ZNAČKU, POUŽIJE SE U NÍ PARAMETR STYLE=" ". HODNOTOU TOHOTO PARAMETRU JE PAK SEZNAM ATRIBUTŮ, KTERÉ TUTO ZNAČKU OVLIVNÍ.
<p style="color: navy"> ... </p>
a) ŘÁDKOVÝ STYL
7
<html> <head> <title>Ukákový příklad</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> </head> <body><p>Text odstavce.</p><p style="color: blue">Text odstavce.</p><p>Text odstavce.</p> </body></html>
ŘÁDKOVÝ STYL
8
VYTVOŘTE INTERNETOVOU STRÁNKU POMOCÍ ŘÁDKOVÉHO STYLU CSS.
POZADÍ : MODRÉ
NADPIS: H1 – ŽLUTÝ
TEXT PRVNÍHO ODSTAVCE : ITALIC, X-LARGE, ČERVENÝ
TEXT DRUHÉHO ODSTAVCE : OBLIQUE, SMALER, BÍLÝ
TEXT TŘETÍHO ODSTAVCE: NORMAL, LARGER, ŠEDIVÝ
CVIČENÍ
9
STYLOPIS
SE DEKLARUJE V HLAVIČCE HTML STRÁNKY PÁROVOU ZNAČKOU <STYLE>. UVNITŘ TÉTO ZNAČKY JE PAK UVEDEN NÁZEV ZNAČKY (TZV. SELEKTOR ZNAČKY - BUDE POPSÁNO DÁLE), KTEROU NASTAVUJETE A VE SLOŽENÝCH ZÁVORKÁCH JE SEZNAM ATRIBUTŮ. JEDNOTLIVÉ ATRIBUTY S HODNOTAMI SE ODDĚLUJÍ STŘEDNÍKEM! STYLOPIS SE POUŽÍVÁ V PŘÍPADĚ, KDY CHCETE NASTAVIT SPOLEČNÉ VLASTNOSTI ZNAČEK NA JEDNÉ WWW STRÁNCE.
<style type="text/css"><!-- p { color: red; } h1 { font-size: 16pt; }--></style>
b) INTERNÍ STYLOVÝ DOKUMENT
10
<html> <head> <title>Ukákový příklad</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <style type="text/css"> <!-- h1 {color: red} --> </style> </head> <body> <h1>Nadpis první úrovně.</h1> <h2>Nadpis druhé úrovně.</h2> </body></html>
INTERNÍ STYLOVÝ DOKUMENT
11
CVIČENÍ
VYTVOŘTE INTERNETOVOU STRÁNKU POMOCÍ INTERNÍHO CSS.
POZADÍ : MODRÉ
NADPIS: H1 – ŽLUTÝ
TEXT ODSTAVCE : ITALIC, X-LARGE, ČERVENÝ
12
EXTERNÍ STYLOPIS
SE POUŽÍVÁ PRO VÍCE SPOLEČNÝCH WWW STRÁNEK, KDE JE PAK ZARUČEN STEJNÝ DESIGN VŠECH STRÁNEK, VE KTERÝCH JE DEFINICE TOHOTO STYLU. PRAKTICKY JE TO REALIZOVÁNO EXTERNÍM SOUBOREM (NAPŘ. MUJ_STYL.CSS), V NĚMŽ JE STYL DEFINOVÁN A WWW STRÁNKOU, DO NÍŽ JE CSS STYL "NALINKOVÁN". TOTO OVŠEM NEVYLUČUJE POUŽITÍ RŮZNÝCH VLASTNOSTÍ NA JEDNOTLIVÝCH STRÁNKÁCH.
Soubor muj_styl.css p { color: red; } h1 { font-size: 16pt; }WWW stránka obsahuje tzv. "linkovací řádek":<link rel="stylesheet" href="muj_styl.css" type="text/css">
DO KONKRÉTNÍ WWW STRÁNKY JE PAK EXTERNÍ SOUBOR NALINKOVÁN. POKUD VYTVÁŘÍTE URČITOU STROMOVOU STRUKTURU VAŠICH WWW STRÁNEK, NEZAPOMEŇTE UVÉST SPRÁVNOU CESTU K TOMUTO EXTERNÍMU SOUBORU!
c) EXTERNÍ STYLOVÝ DOKUMENT
13
<html> <head> <title>Ukákový příklad</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <link rel="stylesheet" href="ukazka.css" type="text/css"> </head> <body> <h1>Nadpis první úrovně.</h1> <h2>Nadpis druhé úrovně.</h2> <h3>Nadpis třetí úrovně.</h3> </body></html>
h3 {color: green}
EXTERNÍ STYLOVÝ DOKUMENT
14
SESKUPOVÁNÍ
h1 {color: red}
h1{font-variant: small-caps}
h2{color: blue}
h1{font-family: serif}
h2{font-variant: small-caps}
h1 {color: red; font-variant: small-caps; font-family:serif}
h2 {color: blue; font-variant: small-caps}
h1, h2{font-variant: small-caps}
h1{color: red; font-family: serif}
h2{color: blue}
15
2. SYNTAXE STYLŮ
PRAVIDLO DEFINUJÍCÍ STYL SE SKLÁDÁ Z NEJMÉNĚ TŘÍ ZÁKLADNÍCH ČÁSTÍ:
* SELEKTOR ZNAČKY * SLOŽENÉ ZÁVORKY A V NICH JE * STŘEDNÍKEM ODDĚLENÝ SEZNAM VLASTNOSTÍ
V DEFINICI STYLU NEJSOU ROZLIŠOVÁNA MALÁ A VELKÁ PÍSMENA, OVŠEM STRIKTNÍ PRAVIDLA ŘÍKAJÍ, ŽE SELEKTORY JSOU PSÁNY MALÝMI PÍSMENY, A STEJNĚ TAK I JEJICH HODNOTY.
selektor_značky { parametr: hodnota;}
16
SELEKTORY
PRO URČENÍ ČÁSTI DOKUMENTU, JEJÍŽ VZHLED BUDE UPRAVOVÁN PODLE STYLU, SE POUŽÍVAJÍ SELEKTORY.
VÝBĚR PRVKU PODLE JMÉNA
VÝBĚR VŠECH PRVKŮ
VÝBĚR PRVKU PODLE ATRIBUTU „id“
VÝBĚR PRVKU PODLE TŘÍDY
VÝBĚR PRVKU PODLE JEHO UMÍSTĚNÍ
17
VÝBĚR PRVKU PODLE JMÉNA
p {…………….}
h1 {……………}
TAKOVÝ ZÁPIS PROHLÍŽEČI ŘÍKÁ : „URČITÝM ZPŮSOBEM UPRAV VZHLED VŠECH PRVKŮ S ODPOVÍDAJÍCÍM NÁZVEM, KTERÉ NALEZNEŠ V DOKUMENTU“.
18
POKUD POTŘEBUJETE NASTAVIT SPOLEČNOU VLASTNOST PRO VÍCE SELEKTORŮ, TYTO SE PAK UVÁDÍ ZA SEBE ODDĚLENÉ ČÁRKOU TAK, JAK UKAZUJE NÁSLEDUJÍCÍ PŘÍKLAD. V NĚM JE UKÁZÁNO, JAK NADPISY 1. AŽ 6. ÚROVNĚ BUDOU VYCENTROVÁNY NA STŘED ŘÁDKU.
h1, h2, h3, h4, h5, h6 { text-align: center; }
19
VÝBĚR VŠECH PRVKŮ
* {…………….}
UNIVERZÁLNÍ SELEKTOR – URČUJE, ŽE UVEDENÝ VZHLED BUDE APLIKOVÁN NA VŠECHNY ELEMENTY V DOKUMENTU BEZ ROZDÍLU.
20
IDENTIFIKÁTORY SE POUŽÍVAJÍ TEHDY, POKUD SE DANÝ PRVEK VYSKYTUJE NA STRÁNCE POUZE JEDNOU (NA ROZDÍL OD TŘÍD, KTERÉ JE MOŽNÉ POUŽÍVAT NA STRÁNCE VÍCEKRÁT). POUŽÍVAJÍ SE NAPŘ. PRO DEFINICI POZICOVANÝCH PRVKŮ NA STRÁNCE (HLAVIČKA, NAVIGACE, TĚLO, PATIČKA, ATP.). JEJICH NÁZEV SI MŮŽE UŽIVATEL VYTVOŘIT SÁM, PŘED NÍM VŠAK VŽDY MUSÍ BÝT ZNAK # (ZAHRÁDKA, HASH), VIZ UKÁZKA:
VÝBĚR PRVKU PODLE ATRIBUTU „id“
#hlavicka { position: absolute; top: 0px; left: 0px; width: 30%; }
21
Z PŘEDCHOZÍHO ODSTAVCE JIŽ VÍTE, ŽE SE NA KONKRÉTNÍ STRÁNCE MŮŽE DANÝ IDENTIFIKÁTOR VYSKYTOVAT POUZE JEDNOU. JAK SE TEDY ZAPÍŠE DO STRÁNKY? POMOCÍ PARAMETRU id="nazev_identifikatoru", KTERÝ JE MOŽNÉ PSÁT KE VŠEM ZNAČKÁM, NEJČASTĚJI ALE K PÁROVÉ ZNAČCE <div>, VIZ NÁSLEDUJÍCÍ UKÁZKA:
<div id="hlavicka"> ...</div>
ZNAČKOU <div> (TZV. KONTEJNEREM) SE TEDY ZADEFINUJE OBLAST S VLASTNOSTMI DEFINOVANÝMI POD PŘÍSLUŠNÝM IDENTIFIKÁTOREM POMOCÍ CSS. IDENTIFIKÁTORY SE NEPOUŽÍVAJÍ JEN V SOUVISLOSTI S CSS, ALE MNOHDY JE MŮŽETE NALÉZT U SKRIPTŮ (NAPŘ. JAVASCRIPTŮ), FLASHOVÝCH PRVKŮ, ATP.
VÝBĚR PRVKU PODLE ATRIBUTU „id“
22
VÝBĚR PRVKU PODLE ATRIBUTU „id“
ČASTO SE STÁVÁ , ŽE POTŘEBUJEME UPRAVIT VZHLED JENOM JEDNOHO URČITÉHO PRVKU V DOKUMENTU (NAPŘ. POUZE PRVNÍHO ODSTAVCE). KDYBYCHOM JAKO SELEKTOR POUŽILI p, ÚPRAVA VZHLEDU BY SE TÝKALA VŠECH ODSTAVCŮ. PRO JEDNOZNAČNÉ URČENÍ PRVKU POUŽIJEME HODNOTU ATRIBUTU „id“ (IDENTIFIKÁTORU). HODNOTA „id“ MUSÍ BÝT UNIKÁTNÍ !!
<html> <head> <title>Ukákový příklad</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"><style type="text/css"> <!-- #prvni {color: red} --> </style> <body> <p id="prvni">Text prvniho odstavce.</p> <p>Text druhého odstavce</p> </body></html>
23
NYNÍ SE ZAMĚŘÍME NA TZV. TŘÍDY STYLŮ, KTERÉ UMOŽŇUJÍ VE STYLOPISECH VYTVÁŘET NĚKOLIK RŮZNÝCH STYLŮ PRO JEDINOU ZNAČKU, PŘIČEMŽ STYLY SE LIŠÍ JMÉNEM SVÉ TŘÍDY. SETKÁVÁME SE TEDY S TZV. REGULÁRNÍMI TŘÍDAMI, KTERÉ MOHOU BÝT POUŽITY NAPŘ. V TEXTU, KDE JE POTŘEBA POUŽÍVAT RŮZNÉ STYLY ODSTAVCŮ. NÁZEV TŘÍDY SE OD SELEKTORU ODDĚLUJE (BEZ MEZER) TEČKOU. VÍCE PAK UKAZUJE NÁSLEDUJÍCÍ UKÁZKA S DEFINICÍ REGULÁRNÍ TŘÍDY.
p.blok { text-align: justify; font-size: 1em; font-family: serif; } p.definice { text-align: center; font-style: italic; }
VÝBĚR PRVKU PODLE TŘÍDY
24
PŘÍSLUŠNOU TŘÍDU PAK V HTML KÓDU POUŽIJETE POMOCÍ PARAMETRU class="název_třídy" (UVEDENÉHO U ZNAČKY, KDE BYLA REGULÁRNÍ TŘÍDA DEFINOVÁNA NAPŘ. TEDY <p class="blok">). REGULÁRNÍ TŘÍDU LZE POUŽÍT POUZE U TÉ ZNAČKY, U NÍŽ BYLA PŘÍSLUŠNÝM SELEKTOREM DEFINOVÁNA.MŮŽEME TÉŽ DEFINOVAT TZV. GENERICKÉ TŘÍDY, KTERÉ SE NEVZTAHUJÍ KE KONKRÉTNÍ ZNAČCE A JE MOŽNÉ JÍ POUŽÍT U JAKÉKOLI ZNAČKY, COŽ UKAZUJE I NÁSLEDUJÍCÍ PŘÍKLAD. U GENERICKÉ TŘÍDY NENÍ DEFINOVÁN ŽÁDNÝ SELEKTOR A DEFINUJE SE OPĚT PŘED NÁZVEM TŘÍDY TEČKOU.
.kurziva { font-style: italic; }
25
TUTO GENERICKOU TŘÍDU PAK V HTML KÓDU POUŽIJETE STEJNÝM ZPŮSOBEM JAKO TŘÍDU REGULÁRNÍ (NAPŘ. TEDY <P CLASS="KURZIVA"> NEBO TÉŽ U JINÉ ZNAČKY <H1 CLASS="KURZIVA">).U KASKÁDOVÝCH STYLŮ EXISTUJÍ JEŠTĚ TZV. PSEUDOTŘÍDY, KTERÉ SLOUŽÍ K DEFINICI STYLU ZOBRAZENÍ PRO URČITÉ STAVY ZNAČEK. JMÉNO ZNAČKY JE ODDĚLENO OD NÁZVU PSEUDOTŘÍDY DVOJTEČKOU A NÁZEV TŘÍDY JE JIŽ PŘEDDEFINOVÁN, COŽ NÁM NEUMOŽŇUJE DALŠÍ PSEUDOTŘÍDY VYTVÁŘET. NĚKTERÉ PSEUDOTŘÍDY SI ZDE UVEDEME, OSTATNÍ JE PAK MOŽNÉ NAJÍT V REFERENCI CSS NAPŘ. NA WWW.W3C.ORG.U ODKAZŮ SE POUŽÍVAJÍ TYTO PSEUDOTŘÍDY:
a:link - pro nenavštívený odkaz a:active - pro odkaz, který je právě vyvoláván a:visited - pro navštívený odkaz a:hover - pro odkaz, nad nímž právě přejíždíte kurzorem myši a:focus - pro odkaz, který byl nastaven pomocí klávesy [TAB] (tabulátor)
26
DALŠÍ DVĚ PSEUDOTŘÍDY SE POUŽÍVAJÍ U ODSTAVCŮ:
p:first-line - pro zvýraznění prvního řádku odstavce p:first-letter - pro zvýraznění prvního znaku odstavce (např. iniciála)
CSS2 DEFINUJE JEŠTĚ NEKOLIK TYPŮ PSEUDOTŘÍD (NAPŘ. JAZYKOVOU PSEUDOTŘÍDU :lang(jazyk), RODIČOVSKOU PSEUDOTŘÍDU :first-child, MÍSTO PŘED :before A ZA :after, ATP.)
27
VÝBĚR PRVKU PODLE TŘÍDY
NĚKDY JE POTŘEBA PRO VÍCE PRVKŮ, KTERÉ SPOLU NAVENEK NIJAK NESOUVISÍ , URČIT STEJNOU VLSTNOST ZOBRAZENÍ.
<html> <head> <title>Ukákový příklad</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"><style type="text/css"> <!-- .modre {color: blue} /* obsah všech prvků třídy "modré" se zobrazí modře (první nadpis a první odstavec) */ h1.modre {......} /* upravujeme vzhled prvku h1 patřícího do třídy "modré" (pouze první nadpis) */ p.modre {.......} /* upravujeme vzhled prvku p patřícího do třídy "modré" (pouze první odstavec)*/ --> </style> <body> <h1 class="modre">První nadpis.</h1> <h1>Druhý nadpis.</h1> <p class="modre">Text prvního odstavce.</p> <p> Text druhého odstavce.</p> </body></html>
28
VÝBĚR PRVKU PODLE JEHO UMÍSTĚNÍ
<html> <head> <title>Ukákový příklad</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"><style type="text/css"> <!-- h1 em {color: red} p em {color: blue} --> </style> <body> <h1>V nadpisu je jedno významné <em>slovo</em>.</h1> <p>Text odstavce obsahuje další důležité <em>slovo</em>.</p> </body></html>
OZNAČUJE URČITÉ PRVKY PODLE JEJICH UMÍSTĚNÍ.
p a em {……} - VYBERE OBA PRVKY
29
ZAJÍMAVÝM PRVKEM JSOU TZV. KONTEXTOVÉ SELEKTORY, KTERÉ ZARUČÍ POUŽITÍ KONKRÉTNÍHO STYLU V OKAMŽIKU, KDY SE V KÓDU STRÁNKY OBJEVÍ PŘÍSLUŠNÁ SEKVENCE, NAPŘ.:
h2 em { color: red; }
VÝBĚR PRVKU PODLE JEHO UMÍSTĚNÍ
30
3. DÉLKOVÉ JEDNOTKY
DÉLKOVÉ ÚDAJE SE ZAPISUJÍ JAKO CELÁ NEBO DESETINNÁ ČÍSLA S NEBO BEZ ZNAMÉNKA. DVOJICE PÍSMEN IDENTIFIKUJÍCÍ JEDNOTKY MUSÍ BÝT PŘIPOJENA IHNED ZA ČÍSLEM (TEDY BEZ MEZERY). PROCENTA SE ZAPISUJÍ JAKO CELÁ NEBO DESETINNÁ ČÍSLA S NEBO BEZ ZNAMÉNKA, ZA KTERÝMI IHNED NÁSLEDUJE ZNAK %. HODNOTY ZADANÉ JAKO PROCENTO SE RELATIVNĚ VZTAHUJÍ K NĚJAKÉ JINÉ HODNOTĚ, OD KTERÉ SE ODVODÍ ABSOLUTNÍ VELIKOST. POKUD POUŽÍVÁME PROCENTA, MUSÍME SI VŽDY UVĚDOMIT, OD KTERÉ HODNOTY SE BUDE ABSOLUTNÍ VELIKOST ODVÍJET. VĚTŠINOU SE JEDNÁ O ŠÍŘKU ELEMENTU.
31
S OHLEDEM NA ČITELNOST STRÁNEK SE SPÍŠE DOPORUČUJE POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE: ZOBRAZIT - VELIKOST TEXTU). POKUD JSOU OVŠEM NA STRÁNCE NASTAVENY ABSOLUTNÍ ROZMĚRY PRO TEXT, UŽIVATEL JE ODKÁZÁN NA VELIKOST TEXTU DEFINOVANOU AUTOREM.
jednotka popis
em Výška aktuálního písma. Odpovídá šířce písmena 'M'
ex Výška písmene 'x'
px Pixely - 1 pixel = 1 bod obrazovky
32
jednotka popis
in Palce - 1 in = 2,54 cm = 72 pt
cm Centimetry
mm Milimetry - 10 mm = 1 cm
pt Body (pity) - 1 pt = 1/72 in = 1/12 pc
pc Body (pica) - 1 pc = 12 pt
33
34
4. BARVY
Při specifikování barev máme několik možností. Tou první je použití jména barvy nebo příslušného HEXa kódu. Další možností je zapsat barvu přímo v RGB pomocí červené, zelené a modré složky barvy.
#rgb zkrácený zápis např. #f00 je červená
#rrggbb úplný zápis např. #ffff00 je žlutá
rgb(r, g, b) r, g, b jsou od 0 do 255
rgb(r%, g%, b%) r, g, b jsou od 0 do 100 (%)
35
5. DRUHY ELEMENTŮ
Blokové elementy jsou ty elementy, před i za kterými je zalomena řádka (např. h1 a p). Inline elementy jsou běžnou součástí textu na řádce. Nemají okolo sebe žádná zalomení řádek (např. strong). Nahrazované elementy jsou ty, které jsou nahrazeny nějakým obsahem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. img a object).
36
6. RODINY PÍSEM
Při zadávání písma je nutné myslet na to, že ne všichni čtenáři budou mít příslušné písmo na svém počítači nainstalováno (např. s ohledem na platformu). Proto se na závěr definice použitých písem používá zápis rodiny písem, do kterých použitý font patří. Pokud tedy prohlížeč definované písmo neumí zobrazit (není nainstalováno), sáhne si po standardním písmu, jež spadá do definované rodiny.V následující tabulce jsou některé rodiny písem, které lze použít při definici fontu.
serif patková písma (např. Times New Roman)
sans-serif bezpatková písma (např. Arial)
coursive kurzíva
fantasy ozdobná písma
monospace neproporcionální písma (např. Courier New)
37
7. VLASTNOSTI CSS - PÍSMO
font - family
p {font-family: serif}
p {font-family: Times, serif}
p {font-family: cursive}
p {font-family: fantasy}
p {font-family: monospace}
p {‘Times New Roman’}
Vlastnost font-family nastavuje druh písma. Možné je i použití více definic, pro případ, že některé písmo nebude k dispozici:
style="font-family: Verdana, Arial, Helvetica"
38
font - style
p {font-style: italic}
p {font-style: oblique}
p {font-style: normal}
Normální, kurzíva, skloněný font-style: normal | italic | oblique
39
font - variant
p {font-variant: small-caps}
p {font-style: normal}
Text kapitálkami tj. Velká písmena o velikosti malýchfont-variant: normal | small-caps
40
Nastaví tučnost textu
font-weight: normal | bold | bolder | lighter | 100, 200, 300, 400, 500, 600, 700, 800, 900
font-weight
41
font-size
42
Umožňuje nastavit vše předchozí v jediné vlastnosti
font: tloušťka velikost písmo stylstyle="font: bold 10px Verdana italic"
Hodnoty musejí dodržovat své pořádí a vždy musí být obsažena hodnota pro tloušťku (jinak budou některé vlastnosti ignorovány)
font
43
8. VLASTNOSTI CSS - BARVY
Nastavuje barvu textu.
Nastavit barvu můžete pomocí hexadecimálního tvaru (#OOOOO), nebo pomocí názvů (black)
style="color: red"
color
44
Nastavuje barvu pozadístyle="background-color: white"
Základem dobrého webu je nastavení barvy pozadí i v případě, že má být bílá (implicitní nastavení).
Někteří návštěvníci mají implicitní barvu pozadí změněnou.
Černý text na černém pozadí... není dobře vidět.
background-color
45
Obrázek jako pozadí prvku
background-image: url(cesta k obrázku)
style="background-image: url('images/pozadi.gif')"
background-image
46
Opakování obrázku na pozadí donekonečna, jen jednou, podle osy x a y
repeat | no-repeat | repeat-x | repeat-y
style="background-image: url(images/js.gif); background-repeat: repeat-y"
Pozadí se bude opakovat jen vertikálně (osa y). Když byste chtěli zobrazit pozadí jen jednou, použijte hodnotu no-repeat
background-repeat
47
Pozadí, které se neposune při rolování stránky.
background-attachment: scroll | fixed Hodnota fixed obrázek fixuje, připichuje na stránku.
Obrázek se při rolování neposunuje
background-attachment
48
Pozice pozadí
background-positon:top| center| bottom| left center| right| 10px| 10%| 10ptstyle=" background-image: url(images/pozadi.gif); background-repeat: no-repeat;
background-position: right 0px; top 50px"
background-position
49
Nastaví pozici horního rohu objektu na pozici 0;0 pomocí parametrů letf a top nastavíme pozici
od levého a horního okrajeposition:absolute;
left: xxx; top: xxxstyle="position: absolute; left: 603px; top: 400px" Takový prvek bude vzdálen 400px od horního okraje stránky a 603px od levého.
position:absolute
8. VLASTNOSTI CSS - POZICE
50
Často se využívá u obrázků jsou-li odkazem, po najetí kurzoru se posunou dolů
position: relative; top: xxx; left: xxx<style>A:hover{position: relative; top: 2px}</style>
position:relative
51
Velká vychytávka, pomocí z-index můžete nastavit, aby se objekty překrývalyz-index: hodnota<span style="position: absolute;z-index: 1; color: red"> ------
</span> <span style="color: blue; border: 1px solid gray;background-color:black">
<strong>ahoj</strong> </span>
0000000000000 ahoj
z-index
52
9. RÁMEČKY A OKRAJE
border-width
Tučnost rámečku
border-width: thin | medium | thick| 1px | 3px
border-style
Nastavuje typ rámečku jednolitý, tečkovaný, čárkovaný, dvojitý atd.
border-style: none | dotted | dashed | solid double | groove | ridge | inset | outset
53
border-color
Barva rámečku
border-color: barva (#000000, red, green, rbg(50%,25%,25%))
style="border: solid red 1px"
54
55
<div style="border:1px solid gray"> <div style="border: 1px solid gray;margin:50px 20px 40px 90px">toto je objekt</div> </div>
margin
margin je prostor kolem objektu
56
padding
<span style="border: 1px solid gray;padding:50px 20px 40px 90px">toto je objekt a okraji</span>
padding je vnitřní okraj objekltu
57
58
59
10. TABULKY
NADPIS TABULKY CAPTION-SIDE (TOP/ BOTTOM/ LEFT/ RIGHT)
TABLE CAPTION { CAPTION-SIDE: BOTTOM}
FORMÁTOVÁNÍ TABULKY TABLE-LAYOUT (AUTO / FIXED)
SLUČOVÁNÍ RÁMŮ BORDER-COLLAPSE (COLLAPSE/ SEPARATE)
TABLE.VYSLEDKY {BORDER-COLLAPSE: SEPARATE}
ODSTUP MEZI RÁMY BORDER-SPACING ( VELIKOST/VELIKOST)
ZOBRAZENÍ PRÁZDNÝCH BUNĚK EMPTY-CELLS (SHOW/ HIDE)
60
PROCVIČENÍ
CSS
61
ŘEŠENÍ
62
OBECNÝ CSS
PŘÍKLADY TABULEK
63
ÚPLNÝ RÁM
64
HTML KÓD
65
CSS
ŠÍŘKA RÁMEČKU, STYL RÁMEČKU, BARVA RÁMEČKU
NONE, HIDDEN, SOLID, DOUBLE, DOTTED, DASHED, GROOVE, RIDGE, INSET, OUTSET
66
HORIZONTÁLNÍ RÁM
67
HTML KÓD
68
CSS
69
VERTIKÁLNÍ RÁM
70
HTML KÓD
71
CSS
72
SPECIÁLNÍ RÁMOVÁNÍ
73
HTML KÓD
74
CSS
75
TABULKY PODOBNÉ TABULKÁM HTML
76
HTML KÓD
77
CSS
78
KOMPLEXNÍ PŘÍPAD RÁMOVÁNÍ
79
HTML KÓD
80
CSS
81
CVIČENÍ
VYTVOŘTE V CSS JEDNODUCHÝ KALENDÁŘ NA MĚSÍC KVĚTEN.
MOŽNÉ ŘEŠENÍ – MĚSÍC BŘEZEN
82
7. VLASTNOSTI PÍSMA
83
8. VLASTNOSTI BAREV
84
9. VLASTNOSTI TEXTU
85
10. VLASTNOSTI BOXŮ 1
86
10. VLASTNOSTI BOXŮ 2
87
10. VLASTNOSTI BOXŮ 3
88
11. KLASIFIKAČNÍ VLASTNOSTI
89
11. ŘÍZENÍ POZICE
End of Lecture
Good Night.
