- - - Menu - - -

 » Úvod
 » Základní prvky
 » Vlastnosti textu
 » Obrázky
 » Odkazy
 » Formuláře
 » Seznamy a čáry
 » Tabulky a rámy
 » Ostatní značky
 » Speciální efekty
 » Tipy a triky

 » Styly CSS
 » Java Script

 » Propagace a služby
 » Ed. 1st Page 2000
 » Grafika na www
 » Download

 » Kniha návštěv
 » Odkazy



- - - Info - - -

GimiWeb
Top Wallpapers
Cars Wallpapers
Základy HTML
Delphi kódy
Gimi FotoGalerie
Gimi Software
Kozel zahradník
FotoSpace

Gimi © 2016

  

Zpět
Styly CSS
 


Úvod do CSS   3 způsoby zápisu   Přehled některých zápisů   Scrollbars   Barevné formuláře  

Úvod do CSS

CSS neboli Cascading Style Sheets je stručně řečeno vylepšení a zjednodušení formátování nejen textu v dokumentu HTML. Známe tři způsoby zápisu CSS:

» Přímé formátování
» Zápis v hlavičce
» Použití externího souboru

3 způsoby zápisu

Přímé Formátování

<p style="color: white; font-weight: bold">Tento odstavec bude bílou barvou písma a tučně.</p>

Tento odstavec bude bílou barvou písma a tučně.

» Tento způsob se používá jen málo.


Zápis v hlavičce

<style>

p   {color: white; font-weight: bold}

</style>


» Tímto způsobem se zformátují všechny odstavce na stránce.
» Na stránce tedy stačí použít :

<p>Tento odstavec bude bílou barvou písma a tučně.</p>


Externí soubor CSS

» Tento nejpoužívanější způsob, používá externí soubor s příponou *.css.
» Vytvořte si soubor pojmenovaný třeba styl.css a do něj napište následující:


p   {color: white; font-weight: bold}

» V hlavičce dokumentu, který se má řídit podle tohoto stylu musí být tento odkaz:

<link rel="stylesheet" type="text/css" href="styl.css">

» Osobně tento způsob doporučuji. Jeho hlavní výhodou je, že můžete změnit třeba formátování textu u 200 stránek, záměnou pár znaků v souboru *.css.

Přehled některých zápisů

» Níže uvedená tabulka se týká posledně jmenovaného zápisu v externím souboru.
» Jednotlivé prvky se oddělují středníkem ; .

příklad typického zápisu:

A:link {
     FONT-WEIGHT: normal;
     FONT-SIZE: 8pt;
     COLOR: #000000;
     FONT-FAMILY: Verdana, Arial;
     TEXT-DECORATION: underline

}

je to prakticky totéž jako:

A:link { FONT-WEIGHT: normal; FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Arial; TEXT-DECORATION: underline }



Základní prvky


BODY {...}Hodnoty v těle dokumentu (barva textu, pozadí, styl textu, scrollbar ...)
A:link {...}Nenavštívený odkaz (formátování textu)
A:visited {...}Navštívený odkaz (formátování textu)
A:hover {...}Odkaz po najetí kurzorem (formátování textu)
A:active {...}Odkaz těsně po kliknutí (formátování textu)
TABLE {...}Formát tabulky (velikost, pozadí tabulky, formátování textu ...)
TR {...}Část tabulky (velikost, pozadí, formátování textu ...)
TD {...}Část tabulky (velikost, pozadí, formátování textu ...)
LI {...}Odrážky "Seznamy" (styl, formátování textu)
HR {...}Linka "Dělící čára" (barva, velikost, zarovnání)
H1 {...}Nadpisy H1 - H6 (formátování textu)
BIG {...}Větší písmo "BIG" nebo menší "SMALL" (formátování textu)
DIV {...}Formátování tagu "DIV"



Možnosti definování


ZápisMožnostiPopis
   
font-family:verdana, arial, ...použitý typ písma
font-style:normal - italic - obliquenormální písmo, kurzíva, umělá kurzíva
font-weight:normal - bold - bolder - lighternormální, tučné, velmi tučné, extra tučné *
font-size:14ptvelikost písma v bodech **
color:#FFCC00barva písma, linky ...
background-color:#FFCC00 - transparentbarva pozadí, průhledné pozadí
background-image:none - url(../obrazek.jpg)žádný obrázek v pozadí, ze souboru
background-repeat:repeat - no-repeat - repeat-xopakování textury, neopakování, ***
background-attachment:scroll - fixedurčuje rolování pozadí, nebo jej zakazuje
word-spacing:normal - 0.8mmezera mezi slovy
letter-spacing:2em - -2emmezera mezi písmeny (i záporná hodnota!)
text-decoration:none - underline - overline - line-troughtdekorace žádná, podtržení, nadtržení, přeškrtnutí
text-transform:capitalize-uppercase-lowercasekapitálky - velká písmena - malá písmena
text-align:left, right, center, justifyzarovnání L, P, na střed a na oba okraje
line-height:150%meziřádková mezera
margin:10pt 10pt 10pt 10ptokraje rámečku (Horní Pravý Spodní Levý)
padding:10pt 10pt 10pt 10ptvolný prostor (nahoře vpravo dole vlevo)
border-width:thin thick medium 12pttenký, široký, středně široký, velikost, HPSL
border-style:none - dotted - dashed - solid - double - groove - ridge - inset - outsetjedná se o vzorkování rámečku: žádný - tečkovaný - čárkovaný - spojitá čára - dvojitá čára - prostorový žlábek - vystouplý rámeček - zapuštěné osvětlení - vystouplé osvětlení
list-style-type:disc - circle - square - decimal - lower-roman - upper-roman - lower-alpha - upper-alpha - nonestyl odrážek: plné kolečko - prázdné kolečko - čtvereček - arabské číslice - římské malé - římské velké - malá písmena - velká písmena - žádné
list-style-image:url(../obrazek.jpg)jako značku odrážky lze použít i obrázek



* font-weight: bolder - lighter se prakticky nepoužívá, jedná se o řez u některých písem.
** font-size: 14pt - zápisů velikosti písma je několik, ale tento způsob je nejpoužívanější.
*** background-repeat: repeat-x a repeat-y - opakování textury jen svisle nebo jen vodorovně.



Délkové jednotky

Podporované relativní jednotky:
em : jednotka vztažená k šířce písmene "m" (rovná se výšce textu)
ex : jednotka vztažená k výšce písmene x
px : výška zadaná v pixelech (pixel je bezrozměrný - záleží na parametrech zobrazení)

Podporované absolutní jednotky:
in : palce (1" = 2.54cm)
cm : centimetry
mm : milimetry
pt : typografické body (1pt = 1/72 palce)
pc : picas (1pc = 12pt)

Scrollbars


BODY {
   scrollbar-face-color:#C0C0C0;
   scrollbar-arrow-color:#000000;
   scrollbar-highlight-color:#FFFFFF;
   scrollbar-3dlight-color:#C0C0C0;
   scrollbar-shadow-color:#808080;
   scrollbar-darkshadow-color:#000000;
   scrollbar-track-color:#E0E0E0;
  }


» Výše uvedený text vložte do souboru *.css

Barevné Formuláře

S použitím barvy

» Jedná se o příklad využití stylů CSS
» Do souboru *.css vložte následující kód:

#prvek {
   background-color: #33CCFF;
    color: #3300CC;
    font-weight: bold;
    border-style: groove;

}

» Při použití tlačítka, textového pole atd. vložte do formuláře id="prvek" podle příkladu níže
» Různou kombinací vlastností vznikají zajímavé efekty!

<textarea id="prvek"name="" rows=5 cols=20></textarea>



<input name="" type="text" value="" id="prvek">



<input type="button" value="tlačítko" id="prvek">






S použitím obrázku

» Vše je stejné jako v předchozím příkladu, jen místo background-color: #33CCFF; je zde použito background-image: url(../obrazek.jpg)