dusan@pc-slany.cz
mail formulß°em
|
|
Pφ╣e Yuh∙ dusan@pc-slany.cz mail formulß°em
|
| font text a odstavec barvy a pozadφ velikost a obtΘkßnφ okraje rßmeΦky seznamy pozicovßnφ dal╣φ vlastnosti Internet Exploreru |
Sna╛il jsem se napsat struΦn² p°ehled vlastnostφ a hodnot kaskßdov²ch styl∙. ZejmΘna jsem si vyhrßl s p°φklady, kterΘ by m∞ly b²t "╛ivΘ" -- to znamenß, ╛e p°i jejich formßtovßnφ byly pou╛ity p°esn∞ ty styly, jak jsou zapsßny v textu p°φklad∙. (Proto je tato strßnka barevn∞ i jinak "chudß" -- nechci nic zkazit kaskßdovßnφm.) Pokud se vßm tedy n∞jak² p°φklad zobrazφ ╣patn∞, znamenß to, ╛e jej vß╣ prohlφ╛eΦ nepodporuje. (P∙vodn∞ jsem tuto strßnku d∞lal pouze jako test r∙zn²ch prohlφ╛eΦ∙, jak jsou na tom s podporou CSS.) Zßkladnφ p°φnos tΘto strßnky spoΦφvß v poznßmkßch na pravΘ stran∞ tabulek a nßvaznost na p°edchozφ kapitoly kurzu CSS: ·vod do CSS, strukturovßnφ textu, praktickΘ pou╛itφ styl∙ a slo╛it∞j╣φ deklarace. M∙╛ou se hodit i dΘlkovΘ jednotky v CSS. |
V prvnφm sloupci jsou vlastnosti pou╛itelnΘ p°i deklaraci stylu, v dal╣φm sloupci pou╛itelnΘ hodnoty, ve t°etφm v²klad v²znamu t∞chto hodnot. Nezßle╛φ na velikosti pφsem. Zßpis stylu do hlaviΦky dokumentu je potom symbolicky:
selektor {vlastnost: hodnota;
vlastnost2: hodnota}
Nap°. body {color: red}. Podrobn∞ji v p°edchozφch textech kurzu CSS.
| Vlastnost | Hodnoty | V²znam | P°φklady | Poznßmky |
|---|---|---|---|---|
| font-family | seznam pφsem | Druh pφsma, font | font-family: Arial CE, sans-serif | M∙╛e se zadßvat vφce pφsem za sebou, odd∞luje se Φßrkami.
Pokud klient nemß v systΘmu prvnφ font, bere dal╣φ atd.
S touto deklaracφ mß problΘm Opera. Vizte P°ehled pou╛iteln²ch pφsem. |
| font-style | normal italic oblique |
normßlnφ kurzφva skon∞nΘ |
font-style: normal font-style: italic font-style: oblique |
Sklon∞nΘ pφsmo je prostß geometrickß transformace, kurziva je jin² °ez. Prohlφ╛eΦe v∞t╣inou u╛φvajφ k∙rzφvu i p°i oblique. |
| font-variant | normal small-caps |
normßlnφ kapitßlky |
Font-variant: Small-caps |
Kapitßlky jsou velkß pφsmena velikosti mal²ch. Velkß pφsmena
by m∞la b²t trochu v∞t╣φ.
IE 5 ud∞lß sice kapitßlky, ale zmen╣φ i velkß pφsmena, co╛ by nem∞l. |
| font-size | xx-small x-small small medium large x-large xx-large v²╣ka procento |
mr≥avΘ maliΦkΘ malΘ st°ednφ velkΘ ob°φ maxipsφ v²╣ka zv∞t╣enφ |
font-size: xx-small font-size: x-small font-size: small font-size: medium font-size: large font-size: x-large font-size: 14pt font-size: 16px font-size: 125% |
Netscape se na procenta tvß°φ divn∞. MS IE 3.x zase neumφ
sprßvn∞ zobrazovat jednotky em a ex.
Vizte pou╛itelnß pφsma v r∙zn²ch velikostech. |
| font-weight | normal bold bolder lighter 100, 200, 300, 400, 500, 600, 700, 800, 900 |
normßlnφ tuΦnΘ trochu tuΦn∞j╣φ trochu sv∞tlej╣φ duktus vyjßd°en² Φφslem |
font-weight: normal font-weight: bold font-weight: bolder font-weight: lighter font-weight: 100 font-weight: 300, font-weight: 400 font-weight: 500 font-weight: 600 font-weight: 800 font-weight: 900 |
U v∞t╣iny font∙ majφ smysl jenom zßkladnφ tlou╣╗ky: zßle╛φ
to na v²robci fontu.
Bolder a lighter se doporuΦuje nepou╛φvat. |
| font | v╣echny mo╛nΘ p°edchozφ hodnoty nebo systΘmovΘ pφsmo | font: bold italic 20px Arial | Tato deklarace je citlivß na po°adφ jednotliv²ch ·daj∙. Musφ se pou╛φt v po°adφ:
tuΦnost kurzφva velikost jmΘno. Netscape 4 chce v╣echny hodnoty.
Pou╛ije-li se v deklaraci nap°. font: 12pt/14pt, ·daj za lomφtkem se vztahuje k vlastnosti line-height. |
|
| Vlastnost | Hodnoty | V²znam | P°φklady | Poznßmky |
|---|---|---|---|---|
| text-decoration | none underline overline line-through blink |
bez dekorace podtr╛enφ "nadtr╛enφ" p°e╣krtnutφ blikßnφ |
text-decoration: none text-decoration: underline text-decoration: overline text-decoration: line-through text-decoration: blink |
Teoreticky se dß zadßvat vφce vlastnostφ najednou. Netscape 4 neumφ overline. MS IE neumφ blinkat. |
| text-transform | none capitalize uppercase lowercase |
nechat jak to je ZaΦßtky Slov VelkΘ VELK┴ P═SMENA malß pφsmena |
Text-Transform: none Text-Transform: capitalize Text-Transform: uppercase Text-Transform: lowercase |
|
| word-spacing | normal dΘlka |
mezislovnφ mezera zv∞t╣enß o dΘlku |
word-spacing: normal word-spacing: 100px |
Nepou╛φvß se a prohlφ╛eΦe to nepodporujφ, snad pouze Opera a Mozilla |
| letter-spacing | normal dΘlka |
prostrkßnφ znak∙ zv∞t╣enΘ o dΘlku |
letter-spacing: normal letter-spacing: 5pt |
Netscape 4 nepodporuje |
| line-height | normal v²╣ka nßsobek procento |
v²╣ka °ßdku absolutnφ v²╣ka nßsobek zv∞t╣enφ |
line-height: 3 line-height: 8px |
|
| text-indent | dΘlka procento |
odsazenφ prvnφho °ßdku |
text-indent: 50 |
Mozilla 5 na tΘto strßnce zßhadn∞ nepodporuje, normßln∞ ale ano. Popis pou╛itφ u Φesk²ch odstavc∙ |
| text-align | left right center justify |
zarovnßnφ vlevo vpravo na st°ed do bloku |
text-align: left
text-align: right text-align: center text-align: justify blablabla blablabla blablabla bla bla bla |
Dß se pou╛φt jen u blokov²ch element∙, tj. u v∞cφ, kterΘ mß smysl zarovnßvat, nap°φklad u odstavc∙. |
| vertical-align | baseline sub super top text-top middle bottom text-bottom procento |
na °ßdek dolnφ index hornφ index co nejv²╣e vr╣ek k vr╣ku st°ed na st°ed co nejnφ╛e spodek ke spodku procento v²╣ky |
baseline °ßdeksub °ßdeksuper °ßdektop °ßdektext-top °ßdekmiddle °ßdekbottom °ßdektext-bottom °ßdekbottom °ßdek10% °ßdek
|
Vertikßlnφ zarovnßnφ na °ßdku
Internet Explorer 4 a 5.0 podporuje jenom sub a super (pojem indexu zde neznamenß zmen╣ovßnφ). |
| display | block inline list-item none |
blokov² element °ßdkov² element seznam nezobrazφ se |
display: block <br> display: inline <br> display: list-item <br> |
Jde o to °φct prohlφ╛eΦi, ╛e n∞kter² element je druhu odstavec (blok), nebo ╛e mß b²t zarovnßn do °ßdku, nebo ╛e je to seznam. Nejzajφmav∞j╣φ je mo╛nost nezobrazenφ. Ostatnφ hodnoty majφ v²znam pouze p°i formßtovßnφ XML dokument∙. |
| white-space | normal pre nowrap |
normßlnφ text p°edformßtovan² nezalamovat |
P°edformßtovan² text zachovßvß mezery a
konce °ßdk∙ jako ve zdroji. Obdoba tagu <pre>. Nezalamovan² neud∞lß automatick² konec °ßdky. Podle m²ch zku╣enostφ nefunguje nikde. |
|
Vizte nßvod pro pou╛itφ pozadφ v HTML a CSS.
| Vlastnost | Hodnoty | V²znam | P°φklady | Poznßmky |
|---|---|---|---|---|
| color | barva | barva pφsma | color:blue | Barva pφsma a zßkladnφch rßmeΦk∙ nebo barva toho, k Φemu se to vztahuje |
| background-color | barva transparent |
barva pozadφ pr∙hlednΘ pozadφ |
background-color: yellow background-color: transparent |
Barva pozadφ. Pr∙hlednost (transparent) je p°ednastavenß, ale jako hodnota se nedß nastavit. |
| background-image | none url(cesta) |
obrßzek na pozadφ |
background-image: url('pozadi5.gif') | Opera tady blbne, ale umφ to. |
| background-repeat | repeat no-repeat repeat-x repeat-y |
pozadφ se opakuje neopakuje opakuje v ose X nebo v ose Y |
background-image:
url('pozadi5.gif'); background-repeat: repeat background-repeat: no-repeat background-repeat: repeat-x background-repeat: repeat-y |
|
| background-attachment | scroll fixed |
pozadφ se posouvß pozadφ je jako p°ibitΘ |
p°φklad mß smysl pouze u pozadφ strßnky; fixed se pou╛φvß zejmΘna v souvislosti s rßmy | Netscape 4 neumφ fixed |
| background-position | top, center, bottom left, center, right, dΘlka, procento |
Poloha obrßzku na pozadφ (nejΦast∞ji pokud se neopakuje) |
background-image: url('pozadi5.gif'); background-repeat: no-repeat; background-position: right 50% |
2 hodnoty se odd∞lujφ mezerou. Prvnφ pat°φ k horizontßlnφ, druhß
hodnota k vertikßlnφ poloze.
Netscape 4.x neumφ zm∞nit polohu z levΘ hornφ, dokonce tuto vlastnost ani neznß. |
| background | v╣echny v²╣e uvedΘ hodnoty | background: url('pozadi5.gif') no-repeat scroll silver center bottom | Vizte V╣e o pozadφ |
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.
Netscape umφ v bloku podbarvit jenom text, ale kdy╛ se mu zadß border: cokoliv (krom∞ 0px), tak podbarvφ cel² blok. Pro Netscape 4 existujφ je╣t∞ vlastnosti layer-background-color a layer-background-image, ale fungujφ jen pro absolutn∞ pozicovanΘ oddφly. Je to to╛Θ╛, co bacground-color a background-image. V jin²ch prohlφ╛eΦφch to nefunguje.
* 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 | Hodnoty | V²znam | P°φklady | Poznßmky |
|---|---|---|---|---|
| width | auto ╣φ°ka procento |
automatickß ╣φ°ka nastavenß ╣φ°ka procento * |
Vizte popis dΘlkov²ch jednotek | V IE nelze nastavit width pro body. V NN ano.
Prohlφ╛eΦe se velmi li╣φ v tom, u kter²ch objekt∙ jsou ochotny ╣φ°ku akceptovat. |
| height | auto v²╣ka procento |
automatickß v²╣ka nastavenß v²╣ka procento * |
Dß se nastavit jenom n∞kter²m tag∙m. NejlΘpe funguje u <div>. Netscape 4 mß s height problΘmy. |
|
| float | left right none |
umφst∞nφ plovoucφho (obtΘkanΘho) objektu Φi zda je neplavec |
float: left normßlnφ odstavec float: right |
Pro IE 4 nutno aplikovat na div, img nebo object |
| clear | left right both none |
Φekßnφ na skonΦenφ plovoucφch objekt∙ zleva, zprava, obou, nebo ╛ßdn²ch |
Pou╛φvß se namφsto atributu "clear" u tagu BR. V∞t╣inou u nadpis∙ pod obrßzky. |
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.
** P°i zadßvßnφ Φty° hodnot najednou se vztahujφ ke stranßm
elementu v po°adφ: hornφ, pravß, dolnφ, levß. Netscape 4 to nechßpe.
| Vlastnost | Hodnoty | V²znam | P°φklady | Poznßmky |
|---|---|---|---|---|
| margin | dΘlka procento auto |
╣φ°ka vn∞j╣φho okraje procento * automatick² okraj |
Vizte text o okrajφch | mo╛no zadßvat v╣echny Φty°i okraje dohromady nebo zvlß╣╗
** IE 5 asi nepodporuje zßpornΘ hodnoty, IE 4 a NN 4 ano |
margin-top margin-left margin-bottom margin-right |
jako u margin | vn∞j╣φ okraj hornφ lev² spodnφ prav²< |
Popis pou╛itφ u Φesk²ch odstavc∙ | Zßpis vlastnost-strana Netsape 4 neumφ |
| padding | dΘlka procento |
╣φ°ka vnit°nφho okraje procento * |
mo╛no zadßvat v╣echny Φty°i okraje dohromady nebo zvlß╣╗ ** | |
| padding-top padding-left padding-bottom padding-right |
jako u padding | hornφ vnit°nφ okraj lev² spodnφ prav² |
| border-width | thin medium thick dΘlka |
╣φ°ka rßmeΦku slabß, normßlnφ tlustß nastavenß |
P°φklady v p°φloze | mo╛no zadßvat v╣echny Φty°i okraje dohromady nebo zvlß╣╗
**
Zji╣t∞na chyba u Mozilly 5 |
| border-width-top border-width-left border-width-bottom border-width-right |
jako u border-width |
hornφ ╣φ°ka rßmeΦku levß spodnφ pravß |
Netscape 4 neumφ | |
| border-color | barva | barva rßmeΦku | border-color: red;
|
nutno zadßvat v╣echny Φty°i okraje dohromady |
| border-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset |
Druh rßmeΦku ╛ßdn², teΦkovan², Φßrkovan², pln², dvojit², p°φkop, val, ∩olφk, nßvr╣φ |
border-style: none
border-style: dotted border-style: dashed border-style: solid border-style: double border-style: groove border-style: ridge border-style: inset border-style: outset |
IE 4 a 5 zobrazuje doted a dashed jako solid a stφnuje v╣e Φernou barvou
(proto je p°φklad v zelenΘ, aby bylo alespo≥ n∞co vid∞t). Ostatnφ prohlφ╛eΦe vΦetn∞ IE 5.5 zobrazujφ sprßvn∞ a stφnujφ ╣edou. Netscape styl rßmeΦku podporuje pouze v zßpisu border: |
| border-top border-left border-bottom border-right |
barva, tlou╣╗ka a styl |
celkovΘ vlastnosti strany rßmeΦku |
P°φklady v p°φloze | Netscape 4 zcela ignoruje |
| border | barva, tlou╣╗ka a styl |
v╣echny vlastnosti rßmeΦku | border: solid blue 2px |
Jedin² zßpis, kter² Netsape 4 akceptuje |
| border | margin | padding | width | top | bottom | left | right |
| rßmeΦek | vn∞j╣φ okraj | vnit°nφ okraj | ╣φ°ka (rßmeΦku) | hornφ | spodnφ | lev² | prav² |
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ß.
V╣echny vlastnosti seznam∙ lze podle m²ch zku╣enostφ aplikovat na tagy <ul>, <dir>, <menu> a <li>. N∞kterΘ podrobnosti chovßnφ CSS v seznamech.
| Vlastnost | Hodnoty | V²znam | P°φklady | Poznßmky |
|---|---|---|---|---|
| list-style-type | disc circle square decimal lower-roman lower-alpha upper-alpha none |
puntφk koleΦko ΦtvereΦek Φφslovßnφ °φmskΘ Φφslice ßbΘcΘΦkovßnφ ABCD bez odrß╛ek |
|
Netscape 4 nezvlßdß decimal a *-* |
| list-style-image | none URL(cesta) |
normßlnφ nebo obrßzkovß odrß╛ka |
|
Netscape 4 nepodporuje v∙bec. |
| list-style-position | inside outside |
odrß╛ky v ·rovni textu odrß╛ka mimo text |
|
|
| list-style | v╣echny p°edchozφ hodnoty |
Nßsledujφcφ vlastnosti se n∞kdy shrnujφ pod pojem CSS-P. Nefungujφ v IE 3, NN 3 a v Ope°e 3. P°φklady se v tabulce nedajφ ud∞lat pln∞ funkΦnφ. Vizte popis pozicovßnφ.
| Hodnoty | V²znam | Poznßmky | |
|---|---|---|---|
| position | absolute relative static |
absolutnφ umφst∞nφ relativnφ umφst∞nφ normßlnφ umφst∞nφ |
Vizte popis pozicovßnφ. |
| left | auto dΘlka procento |
bez posunutφ posunutφ vpravo o dΘlku nebo o procento |
Nemß smysl pro position: static.Vlevo se posouvß zßpornou hodnotou. |
| top | auto dΘlka procento |
bez posunutφ posunutφ dol∙ o dΘlku nebo o procento |
Nemß smysl pro position: static.Nahoru se posouvß zßpornou hodnotou. |
| clip | auto rect(top right bottom left) |
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. Netscape 4 neznß! |
| overflow | none hidden scroll auto |
nechat p°etΘkat o°φznout v╛dy rolovat rolovßnφ, je-li t°eba |
pro elementy, kterΘ se nevejdou do vymezenΘ oblasti nebo majφ clip:
rect
Netscape 4 v∙bec neznß! Vizte p°φklad na overflow. |
| z-index | auto Φφslo |
definice p°ekr²vßnφ element∙ jakoby v ose z |
Netscape 4 divn∞ vykresluje n∞kterΘ p°ekryvy. V elementech s nφzk²m z-index navφc v NN4 n∞kdy nereagujφ odkazy. |
| visibility | inherit visible hidden |
nem∞n∞nß viditelnost viditeln² element skryt² (neviditeln²) |
u skryt²ch objekt∙ se vyhradφ mφsto, jako by tam byly. Netscape 4 skryje pouze elementy s position: absolute nebo relative. |
SamostatnΘ strßnky s podrobnostmi: grafickΘ filtry, barvenφ rolovacφ li╣ty, CSS kurzory
| Vlastnost | hodnoty | v²znam | poznßmky |
|---|---|---|---|
| filter | none Alpha Blur Chroma DropShadow FlipH FlipV Glow Gray Invert Light Mask Shadow Wave XRay |
grafick² filtr ╛ßdn² zpr∙hledn∞nφ rozmazßnφ zpr∙hledn∞nφ stφn p°evrßcenφ horizontßln∞ p°evrßcenφ vertikßln∞ obsvφcenφ stupn∞ ╣edi inverze barev nasvφcenφ (skriptem) podbarvenφ pr∙hlednosti stφn vlna perokresba |
Ka╛d² filtr mß dal╣φ parametry v zßvorce. Lze aplikovat pouze na p°esn∞ rozm∞rovanΘ objekty (width, height), v IE 6 i na nerozm∞rovanΘ. Popis grafick²ch filtr∙ na samostatnΘ strßnce a p°φklady. |
| cursor | Auto Default Crosshair Hand Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
Automatick² kurzor zßkladnφ kurzor zam∞°ovacφ k°φ╛ek ruΦiΦka 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 |
P°φklady kurzor∙ na samostatnΘ strßnce. |
| scrollbar-n∞co-color (n∞kolik r∙zn²ch vlastnostφ) |
barva | zbarvenφ urΦit²ch Φßstφ rolovacφ li╣ty | Barvenφ rolovacφ li╣ty v samostatnΘm textu. Funguje od verze IE 5.5. |
| writing-mode | lr-tb tb-rl |
text zleva doprava text shora dol∙ (otoΦen² o 90░) |
Podpora v IE 5.5. Svisl² text je otoΦen² ne╣ikovn∞ (odpovφdß anglosaskΘ norm∞). VhodnΘ pro zßhlavφ tabulek. Hodnoty vychßzenφ z angliΦtiny: left, right, top, bottom. JinΘ hodnoty nejsou podporovßny. |
| table-layout | auto fixed |
nerozm∞rovanß tabulka se p°izpusobuje oknu tabulka se nezu╛uje do okna |
Podpora v IE 5+. Pou╛itφ pouze u tagu <table> |
| border-collapse | separate collapse |
bu≥ky v tabulce majφ rßmeΦky odd∞lenΘ sousednφ bu≥ky majφ vykreslen² rßmeΦek spoleΦn∞ jednou Φarou |
Podpora v IE 5+. Pou╛itφ pouze u tagu <table> |
Dal╣φ zji╣t∞nΘ vlastnosti teprve zkoumßm.
Vite tΘ╛: hlavnφ strßnka CSS, ·vod do CSS, praktickΘ pou╛itφ styl∙, t°φdy a identifikßtory, zßpis barev, r∙znΘ prohlφ╛eΦe, zßpis stylu pro r∙znΘ prohlφ╛eΦe, omezenφ CSS, dΘlkovΘ jednotky v CSS, p°ehled HTML tag∙
Zßpis stylu do hlaviΦky dokumentu:
<style>
selektor {vlastnost: hodnota; vlastnost2: hodnota}
selektor2 {vlastnost: hodnota}
/* atd. */
</style>
Nebo se dajφ do samostatnΘho *.css souboru napsat jenom selektory s vlastnostmi. Napojenφ toho souboru ve hlaviΦce:
<link rel="stylesheet" href="soubor.css">
| druh selektoru | zßpis | p°φklady | v²znam p°φkladu | poznßmky |
|---|---|---|---|---|
| tag | jmΘno tagu | p {color: red} | Normßlnφ text <p>Φerven² text</p> |
|
| identifikßtor | #identifikßtor | #cervene {color: red} | Normßlnφ text <span id="cervene"> ovlivn∞n² text</p> |
|
| tag#identifikßtor | b#cerverne {color: red} | <b>Jenom tuΦn²</b> <b id="cervene"> tuΦn² a Φerven²</b> |
||
| t°φda | .t°φda | .cervena {color: red} | Normßlnφ text <span class="cervena"> Φerven² text</span> |
Vztahuje se na ka╛d² tag, kter² mß uvedeno sprßvnΘ class |
| tag.t°φda | i.cerverna {color: red} | <i>Jenom kurzφva</i> <i class="cervena"> Φervenß kurzφva</i> |
Vztahuje se jen na konkrΘtnφ tag, kter² mß uvedeno sprßvnΘ class | |
| hromadnß deklarace | selektor, selektor | H1, H2, H3 {color: red} | <h1>╚erven² nadpis</h1> <h2>TakΘ Φerven² </h2> |
Seznam libovoln²ch platn²ch selektor∙ (tag∙, t°φd apod.) odd∞len² Φßrkou |
| kontextovß deklarace | nad°azen²Selektor selektor (odd∞lenΘ mezerou) |
li a {font-weight: bold} | <li>normßlnφ text seznamu <a href=...>tuΦn² odkaz</a></li> |
P°φklad: ztuΦ≥uje odkazy (<a>) uvnit° seznamu (<li>) |
| i b {color: red} | <i><b>╚ervenß tuΦnß kurzφva</b></i> <b><i>Normßlnφ tuΦnß kurzφva</i><b> |
Zßle╛φ na po°adφ | ||
| pseudot°φda | tag:pseudot°φda | a:hover {color: red} | <a href="...">ZΦervenß p°i p°ejetφ my╣φ</a> | Pseudot°φdy a:link, a:visited, a:active, a:hover jsou pouze u odkaz∙ |
| p:first-line {color: red} | <p>Prvnφ °ßdka odstavce bude Φervenß</p> |
Funguje pouze v Mozille a v IE 5.5 Existuje i :first-letter (prvnφ pφsmeno) |
||
| p°φmß deklarace v HTML (to nenφ selektor) | <tag style="zßpis stylu"> | <p style="color: red">╚erven² odstavec</p> | Nezapisuje se do stylopisu | |
Mnohem vφce o selektorech a deklaracφch v textu o t°φdßch a identifikßtorech. Vizte zßpis stylu prakticky.
Vzhled tΘto strßnky je zßm∞rn∞ uboh², aby se nenaru╣ilo formßtovßnφ p°φklad∙.
Inspiroval jsem se podobn²m dφlem Ji°φho Koska, u n∞j╛ najdete trochu jinak zpracovan² popis vlastnostφ CSS. P°esnß specifikace CSS1 by m∞la b²t na www.w3c.org/TR/REC-CSS1 (anglicky).
<a
href="http://dusan.pc-slany.cz/internet/css_prehled.htm"><img
src="http://dusan.pc-slany.cz
/internet/images/jpw_css.gif" alt="P°ehled CSS"></a>
P°idejte, prosφm, na svΘ strßnky odkaz nebo ikonku. Dφky.
Jak psßt web:
http://dusan.pc-slany.cz/internet/
Pφ╣e Yuh∙: autorova strßnka, mail: dusan@pc-slany.cz
Slßva koΦkßm! Poslednφ aktualizace 01.02.2002