Přihlášení

Jméno

Heslo



Nejste členem?
Klikněte sem
a zaregistrujte se.

Zapomněli jste heslo?
Pro zaslání nového
Klikněte sem.

Photo cloud


progeCAD - alternativa AutoCAD ®
Dodavatelem školní verze konstrukčního 2D&3D programu progeCAD Professional je konstrukční a vývojová kancelář SoliCAD, s.r.o.
 Vertikalní menu, vodorovně rozbalovací, třiúrovňové

05. Kaskádové styly 1.

Kaskádové (CSS) styly


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ů





Komentáře

Zatím nikdo nekomentoval. Buďte první kdo vloží svůj komentář.

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í.

Zatím nikdo nehodnotil.
Vygenerované za: 0.12 sekund
5,115,968 návštěv