KASKÁDOVÉ STYLY
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.
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.
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
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
a) ŘÁDKOVÝ STYL 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>
ŘÁDKOVÝ STYL <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> </body> </html>
CVIČENÍ 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Ý
b) INTERNÍ STYLOVÝ DOKUMENT 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>
INTERNÍ STYLOVÝ DOKUMENT <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>
CVIČENÍ VYTVOŘTE INTERNETOVOU STRÁNKU POMOCÍ INTERNÍHO CSS. POZADÍ : MODRÉ NADPIS: H1 – ŽLUTÝ TEXT ODSTAVCE : ITALIC, X-LARGE, ČERVENÝ
c) EXTERNÍ STYLOVÝ DOKUMENT 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!
EXTERNÍ STYLOVÝ DOKUMENT <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}
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}
selektor_značky { parametr: hodnota;} 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;}
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Í
VÝBĚR PRVKU PODLE JMÉNA 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“.
h1, h2, h3, h4, h5, h6 { text-align: center; } 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; }
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.
VÝBĚR PRVKU PODLE ATRIBUTU „id“ 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: #hlavicka { position: absolute; top: 0px; left: 0px; width: 30%; }
VÝBĚR PRVKU PODLE ATRIBUTU „id“ 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“ Č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>
VÝBĚR PRVKU PODLE TŘÍDY 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; }
.kurziva { font-style: italic; } 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; }
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)
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.)
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>
VÝBĚR PRVKU PODLE JEHO UMÍSTĚNÍ OZNAČUJE URČITÉ PRVKY PODLE JEJICH 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> p a em {……} - VYBERE OBA PRVKY
VÝBĚR PRVKU PODLE JEHO UMÍSTĚNÍ 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; }
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.
Výška aktuálního písma. Odpovídá šířce písmena 'M' ex 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
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
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 (%)
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).
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)
7. VLASTNOSTI CSS - PÍSMO font - family 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" 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’}
font - style Normální, kurzíva, skloněný font-style: normal | italic | oblique p {font-style: italic} p {font-style: oblique} p {font-style: normal}
font - variant Text kapitálkami tj. Velká písmena o velikosti malých font-variant: normal | small-caps p {font-variant: small-caps} p {font-style: normal}
font-weight Nastaví tučnost textu font-weight: normal | bold | bolder | lighter | 100, 200, 300, 400, 500, 600, 700, 800, 900
font-size
Umožňuje nastavit vše předchozí v jediné vlastnosti font Umožňuje nastavit vše předchozí v jediné vlastnosti font: tloušťka velikost písmo styl style="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)
8. VLASTNOSTI CSS - BARVY color Nastavuje barvu textu. Nastavit barvu můžete pomocí hexadecimálního tvaru (#OOOOO), nebo pomocí názvů (black) style="color: red"
background-color 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.
Obrázek jako pozadí prvku background-image Obrázek jako pozadí prvku background-image: url(cesta k obrázku) style="background-image: url('images/pozadi.gif')"
background-repeat 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
Pozadí, které se neposune při rolování stránky. background-attachment 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-position: right 0px; top 50px" 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"
8. VLASTNOSTI CSS - POZICE position:absolute Nastaví pozici horního rohu objektu na pozici 0;0 pomocí parametrů letf a top nastavíme pozici od levého a horního okraje position: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.
Často se využívá u obrázků jsou-li odkazem, position:relative Č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>
<strong>ahoj</strong> </span> z-index Velká vychytávka, pomocí z-index můžete nastavit, aby se objekty překrývaly z-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
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
style="border: solid red 1px" border-color Barva rámečku border-color: barva (#000000, red, green, rbg(50%,25%,25%)) style="border: solid red 1px"
margin je prostor kolem objektu <div style="border:1px solid gray"> <div style="border: 1px solid gray;margin:50px 20px 40px 90px">toto je objekt</div> </div> margin je prostor kolem objektu
padding je vnitřní okraj objekltu <span style="border: 1px solid gray;padding:50px 20px 40px 90px">toto je objekt a okraji</span> padding je vnitřní okraj objekltu
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)
PROCVIČENÍ CSS
ŘEŠENÍ
PŘÍKLADY TABULEK OBECNÝ CSS
ÚPLNÝ RÁM
HTML KÓD
ŠÍŘKA RÁMEČKU, STYL RÁMEČKU, BARVA RÁMEČKU CSS ŠÍŘKA RÁMEČKU, STYL RÁMEČKU, BARVA RÁMEČKU NONE, HIDDEN, SOLID, DOUBLE, DOTTED, DASHED, GROOVE, RIDGE, INSET, OUTSET
HORIZONTÁLNÍ RÁM
HTML KÓD
CSS
VERTIKÁLNÍ RÁM
HTML KÓD
CSS
SPECIÁLNÍ RÁMOVÁNÍ
HTML KÓD
CSS
TABULKY PODOBNÉ TABULKÁM HTML
HTML KÓD
CSS
KOMPLEXNÍ PŘÍPAD RÁMOVÁNÍ
HTML KÓD
CSS
MOŽNÉ ŘEŠENÍ – MĚSÍC BŘEZEN CVIČENÍ VYTVOŘTE V CSS JEDNODUCHÝ KALENDÁŘ NA MĚSÍC KVĚTEN. MOŽNÉ ŘEŠENÍ – MĚSÍC BŘEZEN
7. VLASTNOSTI PÍSMA
8. VLASTNOSTI BAREV
9. VLASTNOSTI TEXTU
10. VLASTNOSTI BOXŮ 1
10. VLASTNOSTI BOXŮ 2
10. VLASTNOSTI BOXŮ 3
11. KLASIFIKAČNÍ VLASTNOSTI
11. ŘÍZENÍ POZICE
End of Lecture Good Night. (c) 1999. Tralvex Yeap. All Rights Reserved