CSS << Studio Deštník >>

cascading style sheets

Pomocí kaskádových stylů můžeme ovládat formátování několika stránek najednou. Tímto dosáhneme jejich grafické podobnosti. Kaskádovými styly můžeme řídit velikost textu, jeho barvu, styl atd., ale i komplexně barvu pozadí, resp. url obrázku na pozadí.

Obsah:

Připojení kaskádových stylů k dokumentu a základní informace
Vlastnosti písma a textu
Vlastnosti barev a pozadí
Vlastnosti boxů
Klasifikační vlastnosti
Vlastnosti pro určení pozice
Vlastnosti na straně prohlížeče
Tvorba CSS souborů a praktické použití kaskádových stylů

Připojení kaskádových stylů k dokumentu a základní informace
Připojení CSS k HTML dokumentu provádíme :
1. pomocí tagu LINK v hlavičce dokumentu: <LINK REL=StyleSheet TYPE=text/css HREF="url"> pokud se jedná o externí soubor s příponou .CSS.
2. pomocí tagu STYLE v hlavičce dokumentu: <STYLE TYPE=text/css> definice stylu </STYLE>
3. nebo pomocí elementu STYLE přímo v daném tagu: <TAG STYLE="definice stylu">
Vysvětlení značek :
  A | B   Právě jedna z entit A a B
  A || B   Alespoň jedna z entit A a B
  [ ... ]   Skupiny
  ?   Předcházející entita je nepovinná
  {A,B}   Předcházející entita se opakuje najméně A-krát a nejvíce B-krát

Typy elementů v HTML :
- Blokové elementy jsou ty elementy, před i za kterými je zalomena řádka (např. H1, P).
- Inline elementy jsou běžnou součástí texty na řádce. Nemají okolo sebe žádné zalomení řádek (např. B, STRONG).
- Nahrazované elmety 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, OBJECT).
Základní typy písem :
  serif   - patkové písmo (např. Times Roman)
  sans-serif   - bezpatkové písmo (např. Arial)
  cursive   - ozdobná kurzíva (např. Zapf-Chancery)
  fantasy   - ozdobné písmo
  monospace   - neproporcionální písmo (např. Courier)
Pozn.: tyto typy písem se doporučuje vždy umisťovat na konec řady písem, např. {font-family: Garamond, Times, serif;}

Jednotky použitelné v CSS :
  em   - výška aktuálního písma, odpovídá šířce písmene M
  ex   - výška písmene x
  px   - pixely, 1px=1 bod obrazovky
  in   - palce, 1in=2,54cm=72pt
  cm   - centimetry
  mm   - milimetry
  pt   - body, 1pt=1/72in=1/12pc=0,36mm
  pc   - pica, 1pc=12pt

Vlastnosi písma a textu:

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se	Popis
font-family	seznam písem	zál.na prohl.	všechny el.	ano	rodina písma
font-style	normal \| italic \| oblique	normal	všechny el.	ano	styl písma, normal=normální, italic=kurzíva, oblique=skloněné
font-variant	normal \| small-caps	normal	zál.na prohl.	ano	normální nebo kapitálky
font-weight	normal \| bold \| bolder \| lighter \| 100 \| 200 \| ... \| 900	normal=400	všechny el.	ano	duktus (tloušťka) písma
font-size	xx-small \| x-small \| small \| medium \| large \| x-large \| xx-large \| larger \| smaller \| délka \| procento	medium	všechny el.	ano	velikost písma
font	předešlé vlastnosti	...	všechny el.	ano	komplexní nastavení vlastností písma
word-spacing	normal \| délka	normal	všechny el.	ano	o kolik se má zvětšit mezislovní mezera
letter-spacing	normal \| délka	normal	všechny el.	ano	o kolik se má zvětšit mezi mezi písmeny
text-decoration	none \| [underline \|\| overline \|\| line-through \|\| blink]	none	všechny el.	ne	ozdoba písma, underline=podtržení, overline=čára nad, line-through=čára přes, blink=blikání
vertical-align	baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \| procento	baseline	inline el.	ano	vertikální zarovnání
text-transform	capitalize \| uppercase \| lowercase \| none	none	všechny el.	ano	převod textu na: cap.=kapitálky, upper.=velká pís., lower.=malá písmena
text-align	left \| right \| center \| justify	zál.na prohl.	blokové el.	ano	zarovnání textu: left=doleva, right=doprava, center=na střet, justify=do bloku
text-indent	délka \| procento	0	blokové el.	ano	velikost odstavcové odrážky
line-height	normal \| číslo \| délka \| procento	normal	všechny el.	ano	výška řádky, číslo udává násobek vel. písma (většinou aspoň 1,2)

Vlastnosti barev a pozadí

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se	Popis
color	RRGGBB	zál.na prohl.	všechny el.	ano	barva písma
background-color	RRGGBB \| transparent	transparent	všechny el.	ne	barva pozadí
background-image	URL \| none	none	všechny el.	ne	obrázek na pozadí
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat	repeat	všechny el.	ne	směry opak. pozadí
background-attachment	scroll \| fixed	scroll	všechny el.	ne	pozadí se pohybuje se stránkou (scroll) nebo je pevné (fixed)
background-position	[procento \| délka]{1,2} \| [top \| center \| bottom] \|\| [left \| center \| right]	0% 0% (=top left)	blokové a nahrazované el.	ne	poloha obrázku na pozadí (X a Y souř.)
background	předešlé vlastnosti	...	všechny el.	ne	komplexní nastavení vlastností pozadí

Vlastnosti boxů

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se	Popis
margin-top	délka \| procento \| auto	0	všechny el.	ne	velikost horního okraje
margin-right	délka \| procento \| auto	0	všechny el.	ne	velikost pravého okraje
margin-bottom	délka \| procento \| auto	0	všechny el.	ne	velikost dolního okraje
margin-left	délka \| procento \| auto	0	všechny el.	ne	velikost levého okraje
margin	[délka \| procento \| auto] {1,4}	impl. hodn. jednotl. vlast.	všechny el.	ne	komplexní nastavení velikostí okraů
padding-top	délka \| procento	0	všechny el.	ne	velikost vnitřního pravého okraje
padding-right	délka \| procento	0	všechny el.	ne	velikost vnitřního pravého okraje
padding-botom	délka \| procento	0	všechny el.	ne	velikost vnitřního dolního okraje
padding-left	délka \| procento	0	všechny el.	ne	velikost levého vnitřního okraje
padding	[délka \| procento] {1,4}	0	všechny el.	ne	komplexní nastavení velikosti vnitřního okraje
border-top-width	thin \| medium \| thick \| délka	medium	všechny el.	ne	šířka horní části rámečku
border-right-width	thin \| medium \| thick \| délka	medium	všechny el.	ne	šířka pravé části rámečku
border-bottom-width	thin \| medium \| thick \| délka	medium	všechny el.	ne	šířka dolní části rámečku
border-left-width	thin \| medium \| thick \| délka	medium	všechny el.	ne	šířka levé části rámečku
border-width	thin \| medium \| thick \| délka	impl. hodn. jednotl. vlast.	všechny el.	ne	komplexní nastaení šířky rámečku
border-color	barva {1,4}	hodn. vlast. `color`	všechny el.	ne	barva rámečku
border-style	[none \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset] {1,4}	none	všechny el.	ne	nastavení tvaru rámečku
border-top	border-top-width \|\| border-style \|\| barva	impl. hodn. jednotl. vlast.	všechny el.	ne	nastav. vlast. horní části rámečku
border-right	border-right-width \|\| border-style \|\| barva	impl. hodn. jednotl. vlast.	všechny el.	ne	nastav. vlast. pravé části rámečku
border-bottom	border-bottom-width \|\| border-style \|\| barva	impl. hodn. jednotl. vlast.	všechny el.	ne	nastav. vlast. dolní části rámečku
border-left	border-left-width \|\| border-style \|\| barva	impl. hodn. jednotl. vlast.	všechny el.	ne	nastav. vlast. levé části rámečku
border	border-width \|\| border-style \|\| barva	impl. hodn. jednotl. vlast.	všechny el.	ne	komplexní nastav. vlast. rámečku
width	délka \| procento \| auto	auto	blokové a nahrazované elementy	ne	šířka
height	délka \| auto	auto	blokové a nahrazované el.	ne	výška
float	left \| right \| none	none	všechny el.	ne	umístění plovoucího objektu: left=vlevo, right=vpravo, none=normální objekt
clear	none \| left \| right \| both	none	všechny el.	ne	čekání na skočení plovoucích elementů: left=vlevo, right=vpravo, both=na obou stranách

Klasifikační vlastnosti

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se	Popis
display	inline \| block \| list-item \| run-in \| compact \| marker \| table \| inline-table \| table-row-group \| table-header-group \| table-footer-group \| table-row \| table-column-group \| table-column \| table-cell \| table-caption \| none \| inherit	block	všechny el.	ne	způsob zobrazení elementu
white-space	normal \| pre \| nowrap	normal	blokové el.	ano	způsob práce s mezerami, normal=normální, pre=mezery a konce řádek se zachovávají, nowrap=text se nebude zalamovat do řádek
list-style-type	disc \| circle \| square \| decimal \| lower-roman \| upprer-roman \| lower-alpha \| upper-alpha \| none	disc	el. mající `display:list-item`	ano	druh odráže v seznamu
list-style-image	URL \| none	none	el. mající `display:list-item`	ano	obrázek použitý jako odrážka v seznamu
list-style-position	inside \| outside	outside	el. mající `display:list-item`	ano	umístění odrážky: outside=před textem, inside=uvnitř textu seznamu
list-style	list-style-type \|\| list-style-position \|\| list-style-image	impl. hodn. jednotl. vlast.	el. mající `display:list-item`	ano	komplexní nastavení položek seznamu

Vlastnosti pro určení pozice

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se	Popis
position	absolute \| relative \| static	static	všechny el.	ano	způsob umístění elementu; static odpovídá běžnému formátování
left	délka \| procento \| auto	auto	všechny el.	ne	posunutí el. vpravo, pokud je záporný pak vlevo
top	délka \| procento \| auto	auto	všechny el.	ne	posunutí el. dolů, pokud je záporný pak nahoru
width	délka \| procento \| auto	auto	blokové a nahrazované el. a el. mající `position:absolute;`	ne	šířka elementu
height	délka \| procento \| auto	auto	blokové a nahrazované el. a el. mající `position:absolute;`	ne	výška elementu
clip	auto \| rect([délka \| auto] [délka \| auto] [délka \| auto] [délka \| auto])	auto	el. mající `position:absolute;`	ne	definice obdélníkové části el., která bude vidět (standartně je vidět celý el.)
overflow	none \| clip \| scroll	none	el. s relativní nebo absolutní pozicí	ne	způs. zobraz. el., jejichž obsah se nevejde do zobraz. prostoru; none=obsah el. přeteče, clip=obsah bude zaříznut, scroll=po obsahu půjde scrollovat
z-index	auto \| číslo	auto	el. s relativní nebo absolutní pozicí	ne	pozice el. na pseudoose z
visibility	inherit \| visible \| hidden	inherit	všechny el.	pro inherit	viditelnost el.; visible=viditelný, hidden=skrytý

Vlastnosti na straně prohlížeče

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se	Popis
cursor	auto \| crosshair \| default \| pointer \| move \| e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize \| text \| wait \| help	různé	všechny el.	ano	ikona kurzoru myši
scrolling-face-color	RGB \| barva	různé	BODY	ano	popředí scrolovací lišty - 1 (od IE 5.5)
scrolling-hightlight-color	RGB \| barva	různé	BODY	ano	stínování scrolovací lišty -2 (od IE 5.5)
scrolling-3dlight-color	RGB \| barva	různé	BODY	ano	stínování scrolovací lišty - 3 (od IE 5.5)
scrolling-shadow-color	RGB \| barva	různé	BODY	ano	stínování scrolovací lišty - 4 (od IE 5.5)
scrolling-darkshadov-color	RGB \| barva	různé	BODY	ano	stínování scrolovací lišty - 5 (od IE 5.5)
scrolling-track-color	RGB \| barva	různé	BODY	ano	pozadí scrolovací lišty - 6 (od IE 5.5)
scrolling-arrow-color	RGB \| barva	různé	BODY	ano	šipky scrolovací lišty - 7 (od IE 5.5)

Tvorba CSS souborů a praktické použití kaskádových stylů
V CSS souboru se zpravidla vlastnosti jednotlivých elementů zapisují takto:

ELEMENT1     { vlastnost1: hodnota; vlastnost2: hodnota; vlastnost3: hodnota; ...}
ELEMENT2     { vlastnost1: hodnota; vlastnost2: hodnota; vlastnost3: hodnota; ...}
...

Elementům se v tomto případě říká selektory a vlastnostem a jejim hodnotám deklarace.
Př.:

BODY          { font-family: Garamond, Times, serif; color: #FFFFFF; background-color: #000080; text-align: justify; }
H1          { font-size: 16pt; text-align: center; }
A          { text-decoration: none; color: #FFFF33; font-weight: 300; }

Kromě již definovaných HTML elemetů mužeme zvoli jesště tzv. třídy. Ty se zapisují jako vlastnost daného elementu přimo do tagu: <A CLASS="trida" HREF="index.html">. Takovéto třídy potom v CSS definujeme takto:

.trida1          { vlastnost1: hodnota; vlastnost2: hodnota; vlastnost3: hodnota; ...}
.trida2          { vlastnost1: hodnota; vlastnost2: hodnota; vlastnost3: hodnota; ...}
...

Př.:

.bila          { font-style: italic; color: white; }
.mail          { font-family: monospace; font-size: 10pt; }

Stejným způsobem se kaskádové styly zapisují i mezi značky <STYLE TYPE=text/css> </STYLE>.

Obsah | Další příklady užití