CSS v kostce
Ing. Vilém Lipold, Dušan Janovský
CSS v kostce
1
Zápis stylů
Styly se dají zapsat trojím způsobem:
1. přímo u měněného elementu atributem style="..."
2. stylopisem = seznamem stylů zapsaným <style></style> ve hlavičce dokumentu
3. externím souborem CSS (externí stylopis)
Přímý styl
CSS se dá použít ve zdroji i přímo u stylovaného elementu.
<p style="text-align: center">Text odstavce… </p>
Stylopis
<html>
<head>
<title>Stylopis</title>
<style type="text/css">
h2 { color: blue; font-style: italic;}
</style>
</head>
<body>
<h1>Hlavní nadpis</h1>
<h2>Nadpis druhé úrovně</h2>
<p>Odstavec s normálním textem</p>
<h2>Nadpis druhé úrovně</h2>
<p>Odstavec s dalším textem.</p>
</body>
</html>
•
H2 je selektor (jméno tagu, jehož formátování se mění)
•
{} složené závorky vymezují deklaraci formátu selektoru
•
color je vlastnost
blue je hodnota
•
Vlastnost a hodnota jsou odděleny dvojtečkou a mezerou. Pomocí stylopisů se dají formátovat libovolné
HTML tagy.
CSS v kostce
2
Externí stylopis
Soubor pokus.css
p
a
a:link
a:visited
a:active
a:hover
h2
h1
{text-indent: 30px; margin: 0px 0px 0px 0px;}
{text-decoration: none}
{color: green}
{color: navy}
{color: black}
{color: red; text-decoration: underline}
{color: blue; font-style: italic}
{color: green; text-align: center}
HTML stránka
<html>
<head>
<title>Stránka s externím stylopisem</title>
<link rel="stylesheet" type="text/css" href="pokus.css">
</head>
<body>
<h1>Externě stylovaná stránka … atd…
Typy médií
<link rel="stylesheet" type="text/css" media="print"
href="pokus.css">
•
all - všechny typy zařízení (default)
•
aural - hlasový syntezátor
•
braille - dotykové zařízení
•
embossed - plastická tiskárna pro nevidomé
•
hanheld - PDA
•
print - tiskárna
•
screen - obrazovka počítače
•
projection - projekce (zpětný nebo velkoplošný projektor)
•
tty - neproporční znakový výstup (terminál, dálnoúpis)
tv - televize
•
:pseudotřídy
<style type="text/css">
a
{text-decoration: none}
a:link
{color: green}
a:visited {color: navy}
a:active {color: black}
a:hover
{color: red; text-decoration: underline}
</style>
CSS v kostce
3
•
text-decoration: none odkazy nebudou podtrhávané
•
a:link nenavštívený odkaz
•
a:visited navštívený odkaz
•
a:active na který se zrovna kliklo nebo po kterém jede tabulátor
•
a:hover přes který se jede myší
text-decoration: underline podtržení
•
Tag <a> </a> je jediný, u něhož se vyskytují pseudotřídy.
CSS v kostce
4
URL v CSS
Symbolický zápis
css-vlastnost: url("adresa_objektu");
Příklad zápisu
background-image: url("pozadi.gif");
Uvozovky se dají nahradit apostrofy:
background-image: url('pozadi.gif');
URL v adrese může být i absolutní.
Příklad zápisu grafické odrážky
li {list-style-image: url("odrazka.gif");}
Oddělovače
Následující zápisy jsou rovnocenné:
background-image: url('pozadi.gif');
background-image: url("pozadi.gif");
Uvozovky jsou správné, ale selhávají v in-line zápisu:
<p style="background-image: url("...
a to už je chyba. Nejjistější jsou tedy apostrofy. Na české klávesnici se dělají např. kombinací Alt + 39.
Nejčastější chyba: špatné odvození relativní adresy
V případě použití externího css souboru se relativní adresy vyhodnocují od tohoto externího css souboru,
nikoliv od html stránky. Příklad:
Mám tři soubory:
/index.html
/obrazky/pozadi.gif
/styly/styl.css
Když budu chtít zadat obrázkové pozadí přímo do stránky, tak je to takhle:
<body style="background-image: url('obrazky/pozadi.gif');">
Ale když to budu psát do souboru styl.css (který je v jiném adresáři), tak ta adresa bude jiná:
background-image: url('../obrazky/pozadi.gif');
CSS v kostce
5
Délkové jednotky v CSS
V CSS se mezi číslem a značkou jednotky nedělá mezera. Například:
font-size: 14pt;
Použitelné jednotky jsou px, mm, cm, in, pt, pc, em a ex.
Desetiny se oddělují tečkou.
Pixel
Základní délkovou jednotkou je pixel, což je obrazovkový bod. Zapisuje se px.
Absolutní jednotky
Značky mm, cm, in, pt a pc představují normální rozměry známé z reálného světa. Nijak ale není dáno,
jak se tyto jednotky zobrazí v konečném efektu (například existují různá rozlišení obrazovek), fungují
přesně jenom při tisku (takže zas tak „absolutní“ to není).
Značka
Název
Převod
Počet px
mm
milimetr
1mm = 3.78px
cm
centimetr
1cm = 10mm
1cm = 37.8px
in
palec (inch)
1in = asi 2,6cm
1in = 96px
pt
typografický bod
72pt = 1in
3pt = 4px*
pc
pica nebo též cicero
1pc = 12pt , 6pc = 1in
1pc = 16px
Typografické jednotky pt a pc se odvozují od anglického palce. V běžném životě se s nimi nesetkáte, ale
například pt je ta jednotka, ve které se udává velikost písmen v textových editorech typu Wordu.
Převod pt na pixely je závislý na nastavení systémového zobrazení. Normálně jsou monitory
nastavené na 96 dpi (96 px na palec), což při 72 pt na palec dává vztah 3pt = 4px. Uživatel si
může dpi monitoru změnit (např. ve Windows Ovládací panely > Zobrazení > Nastavení >
Upřesnit > Velikost písma > jiný, 100% pak odpovídá 96 px), potom poměr 3pt = 4px nemusí
platit.
Doporučení: vyberte si jednu „oblíbenou“ jednotku a všechno uvádějte v ní. Doporučuji samozřejmě
pixel.
Relativní jednotky
Značka
Název
Význam
em
eM, čtverčík
šířka velkého písmena M
ex
eX
výška malého písmena x
Jednotky em a ex mění svou velikost v závislosti na aktuální velikosti písma. Aktuální velikost písma
může být ovlivněna jednak nadřazeným nastavením stylu (font-size), formátovacími značkami
(<big> a pod.) a také volbou uživatele. Tyto jednotky možňují design, který se při změně nastavení
velikosti textu nerozsype.
Aby obrázek byl vysoký stejně jako tři řádky, zadáte k obrázku style="height:3em".
CSS v kostce
6
Procenta
Zápis vypadá jako u obyčejných jednotek: width: 20%. Jediným problémem je to, z čeho jsou to
procenta.
Procenta se počítají
•
•
•
z přirozených rozměrů elementu (týká se pouze písma a výšky řádku),
z rozměrů rodičovského elementu (třeba buňka tabulky), nebo
ze šířky stránky a výšky okna.
CSS v kostce
7
Přehled vlastností CSS
selektor
{vlastnost: hodnota; vlastnost2: hodnota}
Selektory
Druh selektoru
Zápis
Příklady
tag
jméno tagu
p {color:
red}
#identifikátor
#cervene
{color: red}
tag#identifikátor
b#cerverne
{color: red}
.třída
.cervena
{color: red}
tag.třída
i.cerverna
{color: red}
selektor, selektor
h1, h2, h3
{color: red}
identifikátor
třída
hromadná
deklarace
li a {fontweight:
bold}
kontextová
deklarace
CSS v kostce
nadřazenýSelektor
selektor
(oddělené mezerou)
i b {color:
red}
Význam příkladu Poznámka
Normální text
<p>červený
text</p>
Normální text
<span
id="cervene">ovli
vněný text</span>
<b>Jenom
tučný</b>
<b
id="cervene">tuč
ný a červený</b>
Normální text
<span
Vztahuje se na každý
class="cervena"> tag, který má uvedeno
červený
správné class
text</span>
<i>Jenom
kurzíva</i>
Vztahuje se jen na
<i
konkrétní tag, který má
class="cervena">
uvedeno správné class
červená
kurzíva</i>
<h1>Červený
Seznam libovolných
nadpis</h1>
platných selektorů (tagů,
<h3>Také
tříd apod.) oddělený
červený</h3>
čárkou
<li>normální text Příklad ztučňuje odkazy
seznamu
(<a>) uvnitř seznamu
<a href=...>tučný (<li>). Jde o přímého
odkaz</a></li> rodiče.
<i><b>Červená
tučná
kurzíva</b></i>
Záleží na pořadí
<b><i>Normální
tučná
kurzíva</i><b>
8
pseudotřída
tag:pseudotřída
přímá deklarace <tag
v HTML (to není style="zápis
stylu">
selektor)
<a
Pseudotřídy a:link,
a:hover
href="...">Zčerve
a:visited, a:active, jsou
{color: red} ná při přejetí
pouze u odkazů.
myší</a>
<p>
p:first-line První řádka
Existuje i :first-letter
{color: red} odstavce bude
(první písmeno)
červená
</p>
<p style="color:
Nezapisuje se do
red">Červený odstavec</p> stylopisu
Font (písmo)
Vlastnost
Poznámka
Může se zadávat více
seznam písem
písem za sebou, odděluje
font-family: Arial
font-family (serif, sans-serif,
Druh písma, font
se čárkami. Pokud klient
CE, sans-serif
monospace, cursive)
nemá v systému první
font, bere další atd.
Skloněné písmo
(oblique) má být prostá
normal
normální
font-style: normal geometrická
font-style
italic
kurzíva
font-style:italic
transformace, kurzíva je
oblique
skloněné
font-style: oblique jiný řez. Prohlížeče
většinou užívají kurzívu i
při oblique.
Kapitálky jsou velká
normální
FONT-VARIANT:
písmena velikosti
font-variant normal
small-caps
kapitálky
SMALL-CAPS
malých. Velká písmena
by měla být trochu větší.
font-size: xxxx-small
mrňavé
small
x-small
maličké
font-size: x-small
small
malé
font-size: small
medium
střední
font-size: medium
font-size
large
velké
x-large
obří
font-size: large
xx-large
maxipsí
font-size: x-large
výška
výška
font-size: 14pt
procento
zvětšení
font-size: 16px
font-size: 125%
font-weight normal
normální
font-weight:
U většiny fontů mají
bold
tučné
normal
smysl jenom základní
bolder
trochu tučnější
font-weight: bold tloušťky: záleží to na
lighter
trochu světlejší
výrobci fontu.
100, 200, 300, 400, duktus vyjádřený font-weight:
500, 600, 700, 800, číslem
bolder
CSS v kostce
Hodnoty
Význam
Příklady
9
font
900
font-weight:
lighter
font-weight: 100
font-weight: 300,
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 800
font-weight: 900
všechny možné předchozí hodnoty
Tato deklarace je citlivá
na pořadí jednotlivých
údajů. Musí se použít v
font: italic bold
pořadí: kurzíva tučnost
20px Arial
velikost jméno (musí být
deklarovány všechny
tyto vlastnosti).
Text a odstavec
Vlastnost
Hodnoty
textdecoration
none
underline
overline
line-through
blink
texttransform
none
capitalize
uppercase
lowercase
word-spacing normal
délka
letterspacing
normal
délka
line-height normal
násobek
CSS v kostce
Význam
Příklady
text-decoration:
none
text-decoration:
bez dekorace
underline
podtržení
text-decoration:
nadtržení
overline
přeškrtnutí
text-decoration:
blikání
line-through
text-decoration:
blink
Text-Transform:
nechat jak to je
none
Začátky Slov
Text-Transform:
Velké
capitalize
VELKÁ
Text-Transform:
PÍSMENA
uppercase
malá písmena
Text-Transform:
lowercase
word-spacing:
mezislovní mezera normal
zvětšená o délku word-spacing:
50px
letter-spacing:
normal
prostrkání znaků
letterzvětšené o délku
spacing:
3pt
line-height: 3
výška řádku
line-height: 80%
line-height: 8px
násobek
Poznámka
Teoreticky se dá zadávat
více vlastností najednou.
MS IE neumí blinkat.
10
procento
výška
text-indent délka
procento
text-align
left
right
center
justify
verticalalign
baseline
sub
super
top
text-top
middle
bottom
text-bottom
procento
display
block
inline
list-item
none
normal
white-space pre
nowrap
zvětšení
absolutní výška
textindent: 50px;
odsazení prvního
druhý řádek
řádku
odstavce
text-align: left
text-align: right
Dá se použít jen u
zarovnání vlevo
text-align: center
blokových elementů, tj.
vpravo
text-align: justify
u věcí, které má smysl
na střed
blablabla
zarovnávat, například u
do bloku
blablabla
odstavců.
blablabla bla bla
bla
na řádek
baseline řádek
dolní index
sub řádek
Vertikální zarovnání
horní index
super řádek
nízkého prvku na vyšším
co nejvýše
top řádek
řádku. Vlastnosti top,
vršek k vršku
text-top řádek
middle a bottom se dají
střed na střed
middle řádek
použít u buněk tabulky a
co nejníže
bottom řádek
u obrázků na řádku.
spodek ke spodku text-bottom řádek
procento výšky
30% řádek
Jde o to říct prohlížeči,
že některý element je
display: block
druhu odstavec (blok),
<br>
blokový element
nebo že má být zarovnán
display: inline
do řádku, nebo že je to
<br>
řádkový element
seznam. Nejzajímavější
display: list-item
seznam
je možnost nezobrazení.
<br>
nezobrazí se
Ostatní hodnoty mají
display: none
význam pouze při
<br>
formátování XML
dokumentů.
normální text
Předformátovaný text zachovává mezery a
předformátovaný konce řádků jako ve zdroji. Nezalamovaný
nezalamovat
neudělá automatický konec řádky.
Barvy a pozadí
Barva se může zadávat následujícími způsoby:
•
názvem barvy: red
•
hexadecimálně: #FF0000
•
hexadecimálně: #ff0000
•
hexadecimálně: #f00
CSS v kostce
11
•
•
procentuelně: rgb(100%, 0%, 0%)
absolutně: rgb(255, 0, 0)
Vlastnost
Hodnoty
Význam
Příklady
color
barva
barva písma
color:blue
background- barva
color
transparent
background- none
image
url(cesta)
repeat
background- no-repeat
repeat
repeat-x
repeat-y
background- scroll
attachment fixed
background- top, center, bottom
left, center, right,
position
délka, procento
Poznámka
Barva písma a
základních rámečků nebo
barva toho, k čemu se to
vztahuje
background-color:
barva pozadí
yellow
průhledné pozadí backgroundcolor:transparent
obrázek na pozadí
pozadí se opakuje
neopakuje
opakuje v ose X
nebo v ose Y
příklad má smysl
pozadí se posouvá pouze u pozadí
pozadí je jako
stránky; fixed se
přibité
používá zejména v
souvislosti s rámy
backgroundimage:
url('graphic/pozad
2 hodnoty se oddělují
Poloha obrázku na i3.gif');
mezerou. První patří k
pozadí(nejčastěji backgroundhorizontální, druhá
repeat: no-repeat;
pokud se
hodnota k vertikální
backgroundneopakuje)
poloze.
position: right
50%;
background: silver
url(graphic/pozadi
background Všechny výše uvedé hodnoty
3.gif) no-repeat
scroll center
bottom;
URL se zadává do závorek a apostrofů, např.: background-image: url('pozadi.gif') . Jsou
ale možné i uvozovky nebo jenom závorky. URL může být absolutní i relativní, je však citlivé na velikost
písmen.
Velikost a obtékání
Procenta v této tabulce se vztahují k šířce (výšce) rodičovského elementu. Šířka rodiče je nejčastěji šířka
dokumentu (nezávislá na okně), kdežto procentuální výška nevnořených elementů se počítá z výšky okna!
Vlastnost
width
CSS v kostce
Hodnoty
auto
šířka
Význam
Příklady
automatická šířka
nastavená šířka
Poznámka
Prohlížeče se velmi liší v
tom, u kterých objektů
12
procento
procenta
height
auto
výška
procento
float
left
right
none
clear
left
right
both
none
automatická výška
nastavená výška
procenta
umístění
plovoucího
(obtékaného)
objektu či zda je
neplavec
čekání na
skončení
plovoucích
objektů zleva,
zprava, obou,
nebo žádných
jsou ochotny šířku
akceptovat.
Dá se nastavit jenom
blokovým tagům.
Nejlépe funguje u <div>.
Většinou u nadpisů pod
obrázky.
Okraje
Blokový model v CSS:
Vlastnosti uvedené v této tabulce lze spolehlivě aplikovat pouze na tzv. blokové elementy, což jsou
většinou buňky tabulky nebo odstavce. Obrázek ilustruje významy vlastností. Příklady se v tabulce nedají
dost dobře udělat.
V IE je jako šířka (výška) objektu brán součet šířky (výšky) obsahu, vnitřního okraje a rámečku.
Při zadávání čtyř hodnot najednou se vztahují ke stranám elementu v pořadí: horní, pravá, dolní, levá.
Např.: padding: 12px 3px 6px 9px.
Vlastnost
margin
CSS v kostce
Hodnoty
délka
procento
auto
Význam
Příklady
šířka vnějšího
okraje
procento
automatický okraj
Poznámka
Možno zadávat všechny
čtyři okraje dohromady
nebo po dvojicích nebo
zvlášť.
13
margin-top
margin-left
marginjako u margin
bottom
marginright
padding
délka
procento
padding-top
paddingleft
paddingjako u padding
bottom
paddingright
vnější okraj horní
levý
spodní
pravý
Možno zadávat všechny
čtyři okraje dohromady
nebo po dvojicích nebo
zvlášť.
šířka vnitřního
okraje
procento
horní vnitřní okraj
levý
spodní
pravý
Rámečky
Vlastnost
Hodnoty
borderwidth
thin
medium
thick
tloušťka
border-topwidth
borderleft-width
borderjako u border-width
bottomwidth
borderright-width
bordercolor
borderstyle
CSS v kostce
Význam
Příklady
tloušťka rámečku
slabá,
normální
tlustá
nastavená
Poznámka
Možno zadávat všechny
čtyři okraje dohromady
nebo po dvojicích nebo
zvlášť.
horní tloušťka
rámečku
levá
spodní
pravá
barva
barva rámečku
none
dotted
dashed
solid
double
groove
ridge
Druh rámečku:
žádný
tečkovaný
čárkovaný
plný
dvojitý
příkop
val
border-color:
Možno zadávat všechny
red; border-style:
čtyři okraje dohromady
solid; bordernebo po dvojicích nebo
width: 3px
zvlášť.
IE 6 zobrazuje úzkou
dotted jako dashed,
Netscape styl rámečku
podporuje pouze v zápisu
border:.
14
inset
outset
ďolík
návrší
border-top
border-left
bordercelkové vlastnosti
barva, tloušťka a styl
bottom
strany rámečku
borderright
border
barva, tloušťka a styl
border: solid blue
všechny vlastnosti
2px
rámečku
Slovníček okrajů a rámečků
border
margin
padding
width
top
bottom
left
right
šířka
rámeček
vnější okraj vnitřní okraj
horní
spodní
levý
pravý
(rámečku)
Prohlížeče se velmi liší v tom, na jaký tag dovolí okraje a velikost aplikovat. U některých tagů styl prostě
ignorují. V příkladech je použit odstavec <p>. Při zadávání čtyř hodnot najednou se vztahují ke stranám
elementu v pořadí: horní, pravá, dolní, levá. Prostě hodinové ručičky.
Seznamy
Všechny vlastnosti seznamů lze aplikovat na tagy <ol>, <ul>, <dir>, <menu> a <li> a na položky
display:list-item.
Vlastnost
Hodnoty
disc
circle
square
list-style- decimal
upper-roman
type
lower-roman
lower-alpha
upper-alpha
none
Význam
puntík
kolečko
čtvereček
číslování
římské číslice
ábécéčkování
ABCD
bez odrážek
normální nebo
list-style- none
obrázková
image
URL('cesta')
odrážka
odrážky v úrovni
list-style- inside
textu
position
outside
odrážka mimo text
list-style všechny předchozí hodnoty
Příklady
Poznámka
Při inside je puntík
jakoby součástí dalšího
textu.
Pozicování
Vlastnost
position
CSS v kostce
Hodnoty
absolute
relative
static
Význam
absolutní umístění
relativní umístění
normální umístění
Poznámka
Mozilla podporuje
hodnotu fixed.
15
left
auto
délka
procento
bez posunutí
posunutí vpravo o délku
nebo o procento
top
auto
délka
procento
bez posunutí
posunutí dolů o délku
nebo o procento
right
bottom
auto
délka
procento
auto
délka
procento
pozicování od pravého okraje okna
nebo elementu
pozicování od spodního okraje okna
nebo elementu
Pro prvky s position:
absolute nebo
position:
relative. Vlevo se
posouvá zápornou
hodnotou.
Pro prvky s position:
absolute nebo
position:
relative. Nahoru se
posouvá zápornou
hodnotou.
variace na vlastnosti left a
top (top a left ale vždy
vyhrají). Pouze pro
objekty s position:
absolute.
clip
auto
rect(shora zprava
zdola zleva)
normální zobrazení
zadání obdélníku pro oříznutí
elementu
Pouze pro elementy s
position: absolute.
Hodnoty v závorce
udávají viditelný
obdélník. Shora a zleva
jsou souřadnice levého
horního rohu vzhledem k
elementu. Zprava a zdola
jsou souřadnice pravého
dolního rohu. Místo
hodnoty se může zadat
auto v tom směru se to
nebude ořezávat.
overflow
visible
hidden
scroll
auto
nechat přetékat
oříznout
vždy rolovat
rolování, je-li třeba
Pro elementy, které mají
nastavené rozměry a
nevejdou se do nich.
z-index
auto
číslo
visibility
visible
hidden
CSS v kostce
Nefunguje pro tagy
iframe, select (v IE) pro a
flashové animace. Pro
definice překrývání elementů jakoby prvky s position:
v ose z
absolute nebo
position:
relative.
U skrytých objektů se
viditelný element
vyhradí místo, jako by
skrytý (neviditelný)
tam byly (narozdíl od
display: none).
16
Tabulky
Vlastnost
Hodnoty
tablelayout
auto
fixed
bordercollapse
separate
collapse
Význam
nerozměrovaná tabulka se
přizpůsobuje oknu;
fixed = tabulka se nezužuje do okna
buňky v tabulce mají rámečky
oddělené
sousední buňky mají vykreslený
rámeček společně jednou čarou
Poznámka
Význam
automatický kurzor
základní kurzor
zaměřovací křížek
ručička v IE
ručička správně
přesouvací čtyřšipka
východní šipka
severovýchodní
severozápaní
severní
jihovýchodní
jihozápaní
jižní
západní šipka
textový kurzor
přesýpací hodiny
kurzor s otazníkem
Poznámka
Použití pouze u tagu
<table>
Použití pouze u tagu
<table>
Další vlastnosti
Vlastnost
cursor
Hodnoty
auto
default
crosshair
hand
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
IE6 má i další možnosti.
Odkazy
css.jakpsatweb.cz - On-line CSS příručka
http://jigsaw.w3.org/css-validator/ - validátor CSS
http://www.newsgator.com - Editor TopStyle Lite zdarma
CSS v kostce
17
Download

CSS v kostce