Navigace
· administrace sešitů· Domů
· TWIDDLA-whiteboard
· Kvízy - Kahoot!
· Testy-Socrative
· Tematické plány IVT
· Literatura
· Výuka IVT
· Program - seminář 3.r. 2016/17
· Program-seminář 4.r. - 2016/17
· Program IVT 1.A 2016/17
· IVT 1.A - 2015/16
· Seminární práce
· Maturita z IVT
· Ke stažení
· Odkazy
· Galerie fotek
· Kontakt
· FAQ
· Vyhledávání
· Rozvrh hodin + supl
· KALKULAČKA
· DIGI III
· Pokusná výuka - ONENOTE
Kdo je on-line
· Hosté on-line: 5· Členové on-line: 0
· Registrovaní členové: 3
· Nejnovější člen: zavadil
Přihlášení
Nejste členem?
Klikněte sem
a zaregistrujte se.
Zapomněli jste heslo?
Pro zaslání nového
Klikněte sem.
Photo cloud
Dodavatelem školní verze konstrukčního 2D&3D programu progeCAD Professional je konstrukční a vývojová kancelář SoliCAD, s.r.o.
05. Kaskádové styly 1.
Kaskádové (CSS) styly
Parametry CSS stylů
Formátování textů:
Vlastnosti písma:
color: rgb(28, 46, 59); - barva (red, blue atd. )
background-color: red: - barva pozadí
font-size: 15px; - velikost
font-style: normal; - styl písma (bold, italic)
font-family: Arial,Helvetica,sans-serif; - font
text-decoration; - podtržení (none, underline)
Vlastnosti odstavce.
text-align: left; - zarovnání (center, right, justify)
vertical-align: top;
margin-top: 6px; - odsazení nad odstavcem (v bodech px)
margin-bottom: 0px; - odsazení pod odstavcem
Formátování odstavců:
#ramecek { border: 10px solid rgb(191, 153, 115); -šířka, barva
margin: 0pt auto 1em - vnější okraj;
padding: 10px; - vnitřní okraj
position: relative; - umístění - pozice - relativní vůči předchozí oblasti
top: 0pt;
left: 0pt;
width: 90%; - velikost vůči stránce
min-width: 530px; - minimální velikost
max-width: 1024px;
background-color: rgb(255, 230, 204); - barva elementu (rámečku)
}
Pro formátování textu, prvků stránky i pro umístění objektů na stránce se v současnosti používají kaskádové styly. Dá se říct, že pomocí stylů pracujeme podobně, jako při využití stylů v textových editorech. Můžeme přesně modifikovat a nastavovat parametry písma, textu (odsazení odstavce...), hypertextové odkazy, detailní nastavení vlastností jednotlivých objektů atd.
Problémem kaskádových stylů může být skutečnost, že ne všechny internetové prohlížeče akceptují striktní formu CSS a „vykládají si “ stejné styly různě. Je třeba vždy vyzkoušet, jak se stránka chová v různých prohlížečích.
CSS styly je možno definovat třemi způsoby.
přímý zápis stylu - tímto se rozumí definice stylu přímo v souvislost s konkrétním tagem uvnitř stránky.
Př. Chceme vytvořit červený nadpis tučným písmem:
<h1 style="color: red">Hlavní červený nadpis</h1>
definice stylu v hlavičce - souhrn vlastností na dané stránce zapíšeme do hlavičky stránky.
Př:
<head>
...
<style>
h1 {color: red}
</style>
</head>
Mezi párovými tagy <style> můžeme definovat libovolný počet vlastních stylů.
externí soubor CSS
V principu se jedná o oddělení obsahu stránky a souboru, určujícího její vzhled. Soubor určující vzhled se připojuje (linkuje) většinou do všech stránek jednoho vebu. Je tedy možno najednou změnit celý vzhled webové stránky pouze změnou jednoho souboru. Externí soubos se styly by měl mít příponu CSS - tedy např. neco.css (v našem příkladě styly.css)
V tomto souboru stačí definovat bez jakýchkoli dalších značek definovat standardní metodou styl
Př. - obsah jednoduchého souboru se styly
h2 {color: blues}
h1 {color: green}
Nejlepší je ukázat si princip CSS na jednoduchém příkladu:
Jednoduchý HTML soubor bez použití stylů:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [cz] (WinNT; I) [Netscape]">
<TITLE>priklad1</TITLE>
</HEAD>
<BODY>
<H1>Příklad 1</H1>
</BODY>
<</HTML>
Ukázka 1
Ten samý soubor s využitím stylů:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [cz] (WinNT; I) [Netscape]">
<TITLE>priklad1b
<link href="styly.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<H1>Příklad 1</H1>
</BODY>
</HTML>
Ukázka 2
a zde je soubor se styly.
Na další ukázce 3 je již složitější příklad - soubor styly.css je použit stejný, jako v předchozím příkladu.
Parametry CSS stylů
Formátování textů:
Vlastnosti písma:
color: rgb(28, 46, 59); - barva (red, blue atd. )
background-color: red: - barva pozadí
font-size: 15px; - velikost
font-style: normal; - styl písma (bold, italic)
font-family: Arial,Helvetica,sans-serif; - font
text-decoration; - podtržení (none, underline)
Vlastnosti odstavce.
text-align: left; - zarovnání (center, right, justify)
vertical-align: top;
margin-top: 6px; - odsazení nad odstavcem (v bodech px)
margin-bottom: 0px; - odsazení pod odstavcem
Formátování odstavců:
#ramecek { border: 10px solid rgb(191, 153, 115); -šířka, barva
margin: 0pt auto 1em - vnější okraj;
padding: 10px; - vnitřní okraj
position: relative; - umístění - pozice - relativní vůči předchozí oblasti
top: 0pt;
left: 0pt;
width: 90%; - velikost vůči stránce
min-width: 530px; - minimální velikost
max-width: 1024px;
background-color: rgb(255, 230, 204); - barva elementu (rámečku)
}
Oblasti mohou být také plovoucí přes část okna prohlížeče:
float: left:
Třídy CSS, oblasti
Další možností, jak vymezit vlastnosti objektu (většinou jednoho), je využít tzv. třídy - class, nejčastěji ve spojení s tagem span: <span class="nazev">. To nám umožňuje použít vlastnosti definované ve třídě (stylu) nazev pro určitý element, např. odkaz. V definici vlastností, tj. v CSS souboru, začíná třída tečkou: .nazev
Na následující (již složitější) ukázce 4 vidíme rozsáhlejší použití kaskádových stylů
Přidat komentář
Pro přidání komentáře musíte být přihlášený.Hodnocení
Hodnotit mohou pouze přihlášení uživatelé.
Prosím přihlaště senebo se registrujte pro možnost hodnocení.
Prosím přihlaště senebo se registrujte pro možnost hodnocení.
Zatím nikdo nehodnotil.