|
Menu
TEAM Distributions (131)
Software (10844) CSS (23) - Ohraničení
Tento díl nás seznámí s možnostmi ohraničení prvků v kaskádových stylech.
19.1.2006 06:00 | Vasek | read 18653×
DISCUSSION
Ohraničení neboli obrys prvků je vlastnost, která umožňuje zvýraznit prvky, které získaly focus. Obrys prvku je vždy v nejvrchnější vrstvě (tzn. je nad všemi objekty), obrys nezabírá žádné místo navíc. Tvar obrysu vychází ze zvyklostí prohlížeče, nemusí tedy být vždy obdélníkový. Přestože soubor vlastností pro nastavení obrysů prvku je součástí CSS2 specifikace(http://www.w3.org/TR/REC-CSS2) jeho podpora v prohlížečích je malá, respektive nulová.
Styl obrysu
Pro nastavení stylu obrysu použijeme vlastnost outline-style. Jako její hodnota se používají klíčová slova.
Hodnoty: solid | dotted | dashed | double | groove | ridge | inset | outset | none | hidden | inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze použít
Média: vizuální, interaktivní
solid pro obrys se použije plná čára
dotted pro obrys se použije tečkovaná čára
dashed pro obrys se použije čárkovaná čára
double pro obrys se použije dvojitá plná čára
groove pro obrys se použije čára vypadající jako vyrytá do pozadí
ridge pro obrys se použije čára vystupující z pozadí
inset použije se čára, která vytvoří efekt vytlačení prvku do plátna
outset použije se čára, která vytvoří efekt vystoupení prvku z plátna
none žádné obrys
inherit hodnota se dědí po rodičovském prvku
Tato vlastnost umožňuje nastavit styl obrysu objektu.
Příklad použití
outline-style: double;
}
Podpora v prohlížečích
NN4 nepodporuje; Mozilla (Netscape 6+) nepodporuje; IE nepodporuje; Opera nepodporuje; IE 5/MAC plná podpora; Konqueror nepodporuje.
Barva obrysu
Pro nastavení barvy obrysu použijeme vlastnost outline-color. Jako její hodnota se používají klíčová slova a čísla.
Hodnoty: <barva> | invert | inherit
Výchozí hodnota: hodnota vlastnosti color
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze použít
Média: vizuální, interaktivní
<barva> viz díl č. 3
invert obrys se vykreslí inverzní barvou každého pixelu, tím je zajištěna viditelnost na každém pozadí
inherit hodnota se dědí po rodičovském prvku
Tato vlastnost umožňuje nastavit barvu obrysu objektu. Tato vlastnost nemá sama o sobě žádný význam, je nutné ji používat spolu s vlastností outline-style.
Příklad použití
outline-color: green;
}
Podpora v prohlížečích
NN4 nepodporuje; Mozilla (Netscape 6+) nepodporuje; IE nepodporuje; Opera nepodporuje; IE 5/MAC plná podpora; Konqueror nepodporuje.
Šířka obrysu
Pro nastavení šířky obrysu použijeme vlastnost outline-width. Jako její hodnota se používají klíčová slova a číselné hodnoty s jednotkou.
Hodnoty: <absolutní-velikost> | <velikost> | inherit
Výchozí hodnota: hodnota vlastnosti color
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze použít
Média: vizuální, interaktivní
<absolutní-velikost> thin | medium | thick
<velikost> číslo a jednotka viz díl č. 2
inherit hodnota se dědí po rodičovském prvku
Tato vlastnost umožňuje nastavit šířku obrysu objektu. Tato vlastnost nemá sama o sobě žádný význam, je nutné ji používat spolu s vlastností outline-style. Hodnota thin nastaví slabou šířku obrysu, s hodnotou medium bude obrys středně široký, a pro tlusté obrysy je možné použít thick. U stylu obrysu double se jako šířka počítá tloušťka obou čar a mezery mezi nimi.
Příklad použití
outline-width: thin;
}
Podpora v prohlížečích
NN4 nepodporuje; Mozilla (Netscape 6+) nepodporuje; IE nepodporuje; Opera nepodporuje; IE 5/MAC plná podpora; Konqueror nepodporuje.
Obrys
Orámování
Pro nastavení obrysu lze použít souhrnnou vlastnost outline.
Hodnoty: <outline-color> | <outline-style> | <outline-width> | inherit
Výchozí hodnota: viz dílčí vlastnosti
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze použít
Média: vizuální, interaktivní
<outline-color> viz dílčí vlastnost
<border-style> viz dílčí vlastnost
<outline-width> viz dílčí vlastnost
inherit hodnota se dědí po rodičovském prvku
Tato vlastnost umožňuje nastavit obrys objektu. Jak jsem napsal již v prvním odstavci, tuto vlastnost nelze používat z důvodu malé podpory prohlížečů.
Příklad použití
outline: thin double blue;
}
outline: thick solid black;
}
:active{
outline: thick double red;
}
Předcházející ukázka nastavuje pro prvky s focusem tlustý černý rámeček a pro aktivní prvky tlustý dvojitý červený rámeček.
Podpora v prohlížečích
NN4 nepodporuje; Mozilla (Netscape 6+) s chybami; IE plná podpora od verze 5; Opera nepodporuje; IE 5/MAC plná podpora; Konqueror nepodporuje.
Závěr
Tato vlastnost není moc používaná, jelikož většina prohlížečů není zatím schopna pracovat v interaktivním režimu. Proto ve specifikaci CSS3 dojde k úpravě této vlastnosti, která by měla zajistit její větší použitelnost.
|
|
||
|
DISCUSSION
For this item is no comments. |
||
|
Add comment is possible for logged registered users.
|
||
Search Software
Search Google
| 1. |
Pacman linux Download: 4873x |
| 2. |
FreeBSD Download: 9063x |
| 3. |
PCLinuxOS-2010 Download: 8561x |
| 4. |
alcolix Download: 10943x |
| 5. |
Onebase Linux Download: 9656x |
| 6. |
Novell Linux Desktop Download: 0x |
| 7. |
KateOS Download: 6239x |
| 1. |
xinetd Download: 2411x |
| 2. |
RDGS Download: 937x |
| 3. |
spkg Download: 4751x |
| 4. |
LinPacker Download: 9961x |
| 5. |
VFU File Manager Download: 3196x |
| 6. |
LeftHand Mała Księgowość Download: 7200x |
| 7. |
MISU pyFotoResize Download: 2803x |
| 8. |
Lefthand CRM Download: 3560x |
| 9. |
MetadataExtractor Download: 0x |
| 10. |
RCP100 Download: 3116x |
| 11. |
Predaj softveru Download: 0x |
| 12. |
MSH Free Autoresponder Download: 0x |
linuxsoft.cz
| Design: www.megadesign.cz