|
|||||||||||||||||||||||||||||||||||||||||||||||||
Menu
Distributions (131)
bootable [55]
commercial [7] no-commercial [42] unclassified [20] [7]
Software (10844)
|
CSS (23) - OhraničeníTento díl nás seznámí s možnostmi ohraničení prvků v kaskádových stylech.
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 obrysuPro nastavení stylu obrysu použijeme vlastnost outline-style. Jako její hodnota se používají klíčová slova.
outline-style
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í
h1{
outline-style: double; } Podpora v prohlížečíchNN4 nepodporuje; Mozilla (Netscape 6+) nepodporuje; IE nepodporuje; Opera nepodporuje; IE 5/MAC plná podpora; Konqueror nepodporuje. Barva obrysuPro nastavení barvy obrysu použijeme vlastnost outline-color. Jako její hodnota se používají klíčová slova a čísla.
outline-color
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í
h1{
outline-color: green; } Podpora v prohlížečíchNN4 nepodporuje; Mozilla (Netscape 6+) nepodporuje; IE nepodporuje; Opera nepodporuje; IE 5/MAC plná podpora; Konqueror nepodporuje. Šířka obrysuPro nastavení šířky obrysu použijeme vlastnost outline-width. Jako její hodnota se používají klíčová slova a číselné hodnoty s jednotkou.
outline-width
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í
h1{
outline-width: thin; } Podpora v prohlížečíchNN4 nepodporuje; Mozilla (Netscape 6+) nepodporuje; IE nepodporuje; Opera nepodporuje; IE 5/MAC plná podpora; Konqueror nepodporuje. ObrysOrámováníPro nastavení obrysu lze použít souhrnnou vlastnost outline.
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í
h1{
outline: thin double blue; }
:focus{
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číchNN4 nepodporuje; Mozilla (Netscape 6+) s chybami; IE plná podpora od verze 5; Opera nepodporuje; IE 5/MAC plná podpora; Konqueror nepodporuje. ZávěrTato 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.
Related article
CSS (1.) - Úvod CSS (2.) - Dědičnost a připojení CSS k dokumentu CSS (3.) - Barvy CSS (4.) - Hodnoty CSS (5.) - Média CSS (6.) - Písmo I. (Velikost písma) CSS (7.) - Písmo II. (Tloušťka písma) CSS (8.) - Písmo III. (Řez a šířka písma ) CSS (9.) - Písmo IV. (Varianta a čitelnost písma) CSS (10.) - Písmo V. (Rodina písma - úvod) CSS (11.) - Písmo VI. (Rodina písma - správná definice) CSS (12.) - Písmo VII. (Sdružená definice písma) CSS (13.) - Barva a Pozadí CSS (14.) - Seznam CSS (15.) - Text CSS (16.) - Speciální textové vlastnosti CSS (17.) - Generovaný obsah CSS (18.) - Rozměry CSS (19.) - Výplň CSS (20) - Orámování I CSS (21) - Orámování II. CSS (22) - Okraje CSS3 - Seznámení CSS3 + HTML5 - Tvoříme kompletní webovou prezentaci Previous Show category (serial) Next
|
Szukanie oprogramowania
|
|||||||||||||||||||||||||||||||||||||||||||||||
©Pavel Kysilka - 2003-2024 | maillinuxsoft.cz | Design: www.megadesign.cz |