LINUXSOFT.cz Přeskoč levou lištu

ARCHIV



   

> CSS (21) - Orámování II.

Dnešní díl nás seznámí se sdruženými vlastnostmi pro nastavení orámování v kaskádových stylech.

12.7.2005 07:00 | Vasek | Články autora | přečteno 13397×

Styl orámování

Pro nastavení stylu orámování použijeme sdruženou vlastnost border-style. Jako její hodnota se používají klíčová slova.

border-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í
  solid pro orámování se použije plná čára
  dotted pro orámování se použije tečkovaná čára
  dashed pro orámování se použije čárkovaná čára
  double pro orámování se použije dvojitá plná čára
  groove pro orámování se použije čára vypadající jako vyrytá do pozadí
  ridge pro orámování 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é orámování
  hidden totéž jako none vyjma tabulek
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje nastavit styl orámování celého objektu. CSS specifikace umožňuje, aby klienti interpretovali dotted, dashed, double, groove, ridge, inset, outset jako solid, této možnosti využívají hlavně starší verze.

Tato vlastnost může mít zadáno čtyři, tři, dvě nebo jednu hodnotu stylu orámování (jednotlivé hodnoty jsou odděleny mezerou). Pokud jsou použity čtyři, nastavujeme tím styl orámování pro všechny strany v tomto pořadí: horní, pravá, dolní a levá. Při zadání třech hodnot se použije první hodnota pro horní orámování, druhá pro pravé a levé orámování, a třetí pro dolní orámování. První z hodnot při zadání jen dvou hodnot vlastnosti border-style definuje styl horního a dolního orámování, druhá z hodnot udává styl pravého a levého orámování. Při definování pouze jedné hodnoty se daný styl orámování použije pro všechny strany najednou.

Příklad použití

h1{
border-bottom-style: double;
border-top-style: double;
border-right-style: double;
border-left-style: double;
}


lze nahradit
h1{
border-style: double double double double;
}


nebo
h1{
border-style: double double double;
}


či
h1{
border-style: double double;
}


nebo nejjednodušeji
h1{
border-style: double;
}




  border-style:solid       border-style:dotted       border-style:dashed       border-style:double  

  border-style:groove       border-style:ridge       border-style:inset       border-style:outset  

  border-style:none       border-style:hidden  

Podpora v prohlížečích

NN4 nepodporuje dotted a dashed; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE podpora od verze 4 (verze 4 a 5 místo dotted a dashed použijí solid; verze 5,5 a 6 již podporují dashed a dotted, ale při tloušťce ohraničení 1 pixel použije místo dotted hodnotu dashed); Opera plná podpora od verze 4; IE 5/MAC plná podpora; Konqueror plná podpora.

Barva orámování

Pro nastavení barvy orámování použijeme sdruženou vlastnost border-color. Jako její hodnota se používají klíčová slova a čísla.

border-color
Hodnoty: <barva> | <transparent> | inherit
Výchozí hodnota: hodnota vlastnosti color
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze použít
Média: vizuální
  <barva> viz díl č. 3
  <transparent> nastavení průhledný spodní rámeček
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje nastavit barvu orámování objektu. Pokud není tato vlastnost definovaná, použije se pro orámování barva nadefinovaná pomocí vlastnosti color (viz díl č. 13) daného objektu. Tato vlastnost nemá sama o sobě žádný význam, je nutné ji používat spolu s vlastností border-style.

Tato vlastnost může mít zadáno čtyři, tři, dvě nebo jednu hodnotu barvy orámování (jednotlivé hodnoty jsou odděleny mezerou). Pokud jsou použity čtyři, nastavujeme tím barva orámování pro všechny strany v tomto pořadí: horní, pravá, dolní a levá. Při zadání třech hodnot se použije první hodnota pro horní orámování, druhá pro pravé a levé orámování, a třetí pro dolní orámování. První z hodnot při zadání jen dvou hodnot vlastnosti border-color definuje barvu horního a dolního orámování, druhá z hodnot udává barvu pravého a levého orámování. Při definování pouze jedné hodnoty se daná barva orámování použije pro všechny strany najednou.

Příklad použití

h1{
border-bottom-color: red;
border-top-color: red;
border-right-color: red;
border-left-color: red;
}


lze nahradit
h1{
border-color: red red red red;
}


nebo
h1{
border-color: red red red;
}


či
h1{
border-color: red red;
}


nebo nejjednodušeji
h1{
border-color: red;
}




  border-color: red  

  border-color: red blue  

  border-color: red blue green  

  border-color: red blue green black  

Jak již bylo napsáno výše, tato vlastnost se musí používat spolu s vlastností border-style, proto i v předchozích ukázkách bylo použito této vlastnosti.

Podpora v prohlížečích

NN4 s chybami (jedna z nich se projeví neschopností nastavit každou hranu jinou barvou); Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4 (nepodporuje hodnotu transparent); Opera plná podpora od verze 3; IE 5/MAC plná podpora; Konqueror plná podpora.

Šířka orámování

Pro nastavení šířky orámování použijeme sdruženou vlastnost border-width. Jako její hodnota se používají klíčová slova a číselné hodnoty s jednotkou.

border-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í
  <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 orámování objektu. Tato vlastnost nemá sama o sobě žádný význam, je nutné ji používat spolu s vlastností border-style. Hodnota thin nastaví slabou šířku orámování, s hodnotou medium bude orámování středně široké, a pro tlusté orámování je možné použít thick. U orámování stylu double se jako šířka počítá tloušťka obou čar a mezery mezi nimi.

Tato vlastnost může mít zadáno čtyři, tři, dvě nebo jednu hodnotu tloušťky orámování (jednotlivé hodnoty jsou odděleny mezerou). Pokud jsou použity čtyři, nastavujeme tím tloušťku orámování pro všechny strany v tomto pořadí: horní, pravá, dolní a levá. Při zadání třech hodnot se použije první hodnota pro horní orámování druhá pro pravé a levé orámování a třetí pro dolní orámování. První z hodnot při zadání jen dvou hodnot vlastnosti border-width, definuje tloušťku horního a dolního orámování, druhá z hodnot udává loušťku pravého a levého orámování. Při definování pouze jedné hodnoty, se daná tloušťka orámování použije pro všechny strany najednou.

Příklad použití

h1{
border-bottom-width: thin;
border-top-width: thin;
border-right-width: thin;
border-left-width: thin;
}


lze nahradit
h1{
border-width: thin thin thin thin;
}


nebo
h1{
border-width: thin thin thin;
}


či
h1{
border-width: thin thin;
}


nebo nejjednodušeji
h1{
border-width: thin;
}




border-width:thin

border-width:medium

border-width:thick



Jak již bylo napsáno výše, tato vlastnost se musí používat spolu s vlastností border-style, proto i v předchozích ukázkách bylo použito této vlastnosti.

Podpora v prohlížečích

IE nesprávně započítává šířku orámování do šířky/výšky prvku. Tato nepřesnost je odstraněna v IE6 při práci ve striktním režimu.

NN4 s chybami; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4 (plná podpora ve verzi 6 ve striktním režimu); Opera plná podpora od verze 4; IE 5/MAC plná podpora; Konqueror plná podpora.

Spodní, horní, levé, pravé orámování

Pro nastavení orámování z jedné strany lze použít příslušnou souhrnnou vlastnost border-bottom, border-top, border-left, border-right .

V následujícím textu budu používat pro označení výše vyjmenovaných vlastností následující zápis border-direction

border-direction
Hodnoty: <border-direction-width> | <border-direction-style> | <border-direction-color> | 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í
  <border-direction-width> viz díl č. 20
  <border-direction-style> viz díl č. 20
  <border-direction-color> viz díl č. 20
  inherit hodnota se dědí po rodičovském prvku

Jde o úsporný zápis všech vlastností pro orámování v kaskádových stylech. Všechny vlastnosti sdružené do vlastnosti border-direction a vlastnosti border-direction-width, border-direction-style a border-direction-color jsou nejdříve nastavené na výchozí hodnoty, a poté jsou všechny vlastnosti nastavené na hodnoty, které byly nadefinovány ve vlastnosti border-direction.

Příklad použití

h1{
border-bottom: thin solid red;
}

h1{
border-top: thin solid red;
}

h1{
border-left: thin solid red;
}

h1{
border-left: left solid red;
}

Podpora v prohlížečích

Viz díl č. 20 popisující podporu jednotlivých vlastností.

Orámování

Pro nastavení orámování lze použít souhrnnou vlastnost border.

border
Hodnoty: <border-width> | <border-style> | <border-color> | 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í
  <border-width> viz dílčí vlastnost
  <border-style> viz dílčí vlastnost
  <border-color> viz dílčí vlastnost
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje nastavit všechny tři vlastnosti naráz. Pomocí této vlastnosti je možné nastavit stejně všechny čtyři strany stejně.

h1{
border-bottom-style: double;
border-bottom-width: thin;
border-bottom-color: #f26d0c;
border-top-style: double;
border-top-width: thin;
border-top-color: #f26d0c;
border-right-style: double;
border-right-width: thin;
border-right-color: #f26d0c;
border-left-style: double;
border-left-width: thin;
border-left-color: #f26d0c;
}


lze nahradit
h1{
border-bottom: thin double #f26d0c;
border-top: thin double #f26d0c;
border-left: thin double #f26d0c;
border-right: thin double #f26d0c;
}


nebo nejjednodušeji
h1{
border: thin double #f26d0c;
}

Podpora v prohlížečích

NN4 s řadou chyb; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE podpora od verze 4 (verze 4 a 5 vykreslí orámování kolem řádkových prvků jen v případě nastavení rozměrů daného prvku, plná podpora ve verzi 6 ve striktním režimu); Opera plná podpora od verze 4; IE 5/MAC plná podpora; Konqueror plná podpora.

Závěr

Dnešním dílem jsme dokončili povídání o vlastnostech pro orámování prvků.

Verze pro tisk

pridej.cz

 

DISKUZE

Nejsou žádné diskuzní příspěvky u dané položky.



Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

28.11.2018 23:56 /František Kučera
Prosincový sraz spolku OpenAlt se koná ve středu 5.12.2018 od 16:00 na adrese Zikova 1903/4, Praha 6. Tentokrát navštívíme organizaci CESNET. Na programu jsou dvě přednášky: Distribuované úložiště Ceph (Michal Strnad) a Plně šifrovaný disk na moderním systému (Ondřej Caletka). Následně se přesuneme do některé z nedalekých restaurací, kde budeme pokračovat v diskusi.
Komentářů: 1

12.11.2018 21:28 /Redakce Linuxsoft.cz
22. listopadu 2018 se koná v Praze na Karlově náměstí již pátý ročník konference s tématem Datová centra pro business, která nabídne odpovědi na aktuální a často řešené otázky: Jaké jsou aktuální trendy v oblasti datových center a jak je optimálně využít pro vlastní prospěch? Jak si zajistit odpovídající služby datových center? Podle jakých kritérií vybírat dodavatele služeb? Jak volit vhodné součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně datové centrum spravovat? Jak co nejlépe eliminovat možná rizika? apod. Příznivci LinuxSoftu mohou při registraci uplatnit kód LIN350, který jim přinese zvýhodněné vstupné s 50% slevou.
Přidat komentář

6.11.2018 2:04 /František Kučera
Říjnový pražský sraz spolku OpenAlt se koná v listopadu – již tento čtvrtek – 8. 11. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma umění a technologie, IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

4.10.2018 21:30 /Ondřej Čečák
LinuxDays 2018 již tento víkend, registrace je otevřená.
Přidat komentář

18.9.2018 23:30 /František Kučera
Zářijový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 20. 9. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

9.9.2018 14:15 /Redakce Linuxsoft.cz
20.9.2018 proběhne v pražském Kongresovém centru Vavruška konference Mobilní řešení pro business. Návštěvníci si vyslechnou mimo jiné přednášky na témata: Nejdůležitější aktuální trendy v oblasti mobilních technologií, správa a zabezpečení mobilních zařízení ve firmách, jak mobilně přistupovat k informačnímu systému firmy, kdy se vyplatí používat odolná mobilní zařízení nebo jak zabezpečit mobilní komunikaci.
Přidat komentář

12.8.2018 16:58 /František Kučera
Srpnový pražský sraz spolku OpenAlt se koná ve čtvrtek – 16. 8. 2018 od 19:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát jsou tématem srazu databáze prezentaci svého projektu si pro nás připravil Standa Dzik. Dále bude prostor, abychom probrali nápady na využití IoT a sítě The Things Network, případně další témata.
Přidat komentář

16.7.2018 1:05 /František Kučera
Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

13.12.2018 10:57 / Jan Mareš
Re: zavináč

2.12.2018 23:56 / František Kučera
Sraz

5.10.2018 17:12 / Jakub Kuljovsky
Re: Jaký kurz a software by jste doporučili pro začínajcího kodéra?

20.9.2018 10:04 / Jan Ober
Jaký kurz a software by jste doporučili pro začínajcího kodéra?

20.9.2018 10:00 / Jan Ober
Re: Gimp

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2022) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze