|
|
|
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ápis | Možnosti | Popis |
| | | |
| font-family: | verdana, arial, ... | použitý typ písma |
| font-style: | normal - italic - oblique | normální písmo, kurzíva, umělá kurzíva |
| font-weight: | normal - bold - bolder - lighter | normální, tučné, velmi tučné, extra tučné * |
| font-size: | 14pt | velikost písma v bodech ** |
| color: | #FFCC00 | barva písma, linky ... |
| background-color: | #FFCC00 - transparent | barva pozadí, průhledné pozadí |
| background-image: | none - url(../obrazek.jpg) | žádný obrázek v pozadí, ze souboru |
| background-repeat: | repeat - no-repeat - repeat-x | opakování textury, neopakování, *** |
| background-attachment: | scroll - fixed | určuje rolování pozadí, nebo jej zakazuje |
| word-spacing: | normal - 0.8m | mezera mezi slovy |
| letter-spacing: | 2em - -2em | mezera mezi písmeny (i záporná hodnota!) |
| text-decoration: | none - underline - overline - line-trought | dekorace žádná, podtržení, nadtržení, přeškrtnutí |
| text-transform: | capitalize-uppercase-lowercase | kapitálky - velká písmena - malá písmena |
| text-align: | left, right, center, justify | zarovnání L, P, na střed a na oba okraje |
| line-height: | 150% | meziřádková mezera |
| margin: | 10pt 10pt 10pt 10pt | okraje rámečku (Horní Pravý Spodní Levý) |
| padding: | 10pt 10pt 10pt 10pt | volný prostor (nahoře vpravo dole vlevo) |
| border-width: | thin thick medium 12pt | tenký, široký, středně široký, velikost, HPSL |
| border-style: | none - dotted - dashed - solid - double - groove - ridge - inset - outset | jedná 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 - none | styl 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!
S použitím obrázku
|
|
