Obramowanie

W tym rozdziale dowiesz się...

Styl obramwania

  1. Styl górnego obramowania: 
    selektor { border-top-style: styl }
  2. Styl dolnego obramowania: 
    selektor { border-bottom-style: styl }
  3. Styl lewego obramowania: 
    selektor { border-left-style: styl }
  4. Styl prawego obramowania: 
    selektor { border-right-style: styl }
We wszystkich przypadkach selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "styl" należy wpisać:
  • none - brak obramowania

    Przykład:

    border-top-style: none

  • hidden - ukryte obramowanie (nie interpretuje MSIE 4)

    Przykład:

    border-top-style: hidden

  • dashed - linia kreskowa (interpretuje MSIE 6, ale nie MSIE 5)

    Przykład:

    border-top-style: dashed

  • dotted - linia kropkowa (interpretuje MSIE 6, ale nie MSIE 5)

    Przykład:

    border-top-style: dotted

  • solid - linia ciągła

    Przykład:

    border-top-style: solid

  • double - linia ciągła podwójna

    Przykład:

    border-top-style: double

  • groove - "rowek"

    Przykład:

    border-top-style: groove

  • ridge - "grzbiet"

    Przykład:

    border-top-style: ridge

  • inset - "ramka"

    Przykład:

    border-top-style: inset

  • outset - "przycisk"

    Przykład:

    border-top-style: outset

Atrybuty mieszane stylu obramowania

selektor { border-style: wartości atrybutów }
Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości stylu obramowania (rozdzielone spacjami), analogicznie jak w przypadku stylu pojedynczego obramowania.

Polecenie pozwala ustalić kilka wartości stylu obramowania jednocześnie. Możliwe jest przy tym podanie:

  • jednej wartości - dla wszystkich krawędzi na raz
  • dwóch wartości - osobno dla krawędzi poziomych i pionowych
  • czterech wartości - osobno dla kolejnych krawędzi (górna prawa dolna lewa)

Przykład:

border-style: dashed

border-style: double solid

border-style: groove ridge inset outset

Szerokość obramowania

  1. Szerokość górnego obramowania: 
    selektor { border-top-width: szerokość }
  2. Szerokość dolnego obramowania: 
    selektor { border-bottom-width: szerokość }
  3. Szerokość lewego obramowania: 
    selektor { border-left-width: szerokość }
  4. Szerokość prawego obramowania: 
    selektor { border-right-width: szerokość }
We wszystkich przypadkach Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "szerokość" należy podać:
  • thin - cienkie obramowanie
  • medium - średnie obramowanie
  • thick - grube obramowanie
  • lub konkretną wartość w jednostkach długości

Pozwala zdefiniować szerokość dowolnego brzegu obramowania.

UWAGA! W Internet Explorerze 6 polecenie działa poprawnie, tylko jeśli określony został jednocześnie styl obramowania.

Przykład:

border-top-width: 5mm; border-top-style: solid

border-top-width: thin; border-top-style: solid

border-top-width: medium; border-top-style: solid

border-top-width: thick; border-top-style: solid

Atrybuty mieszane szerokości obramowania

selektor { border-width: wartości atrybutów }
Jako "wartości atrybutów" należy wpisać kolejne wartości szerokości (rozddzielone spacjami), analogicznie jak w przypadku szerokości pojedynczego obramowania.

[Zobacz także: Wstawianie stylów]

Polecenie pozwala ustalić kilka wartości szerokości obramowania jednocześnie. Możliwe jest przy tym podanie:

  • jednej wartości - dla wszystkich krawędzi na raz
  • dwóch wartości - osobno dla krawędzi poziomych i pionowych
  • czterech wartości - osobno dla kolejnych krawędzi (górna prawa dolna lewa)

UWAGA! W Internet Explorerze 6 polecenie działa poprawnie, tylko jeśli określony został jednocześnie styl obramowania.

Przykład:

border-width: 2mm; border-style: solid

border-width: thin thick; border-style: solid

border-width: thin medium thick 3mm; border-style: solid

Kolor obramowania

  1. Kolor górnego obramowania: 
    selektor { border-top-color: kolor }
  2. Kolor dolnego obramowania: 
    selektor { border-bottom-color: kolor }
  3. Kolor lewego obramowania: 
    selektor { border-left-color: kolor }
  4. Kolor prawego obramowania: 
    selektor { border-right-color: kolor }
We wszystkich przypadkach jako "kolor" należy podać definicję koloru.

[Zobacz także: Wstawianie stylów]

UWAGA! W Internet Explorerze 6 polecenie działa poprawnie, tylko jeśli określony został jednocześnie styl obramowania.

Przykład:

border-top-color: red; border-top-style: solid

Atrybuty mieszane koloru obramowania

selektor { border-color: wartości atrybutów }
Jako "kolor" należy wpisać kolejne definicje kolorów (rozdzielone spacjami). Wpisanie "transparent" ustali kolor przezroczysty.

[Zobacz także: Wstawianie stylów]

Polecenie pozwala ustalić kilka wartości kolorów obramowania jednocześnie. Możliwe jest przy tym podanie:

  • jednej wartości - dla wszystkich krawędzi na raz
  • dwóch wartości - osobno dla krawędzi poziomych i pionowych
  • czterech wartości - osobno dla kolejnych krawędzi (górna prawa dolna lewa)

UWAGA! W Internet Explorerze 6 polecenie działa poprawnie, tylko jeśli określony został jednocześnie styl obramowania.

Przykład:

border-color: red; border-style: solid

border-color: red blue; border-style: solid

border-color: red blue green #eb3; border-style: solid

Atrybuty mieszane obramowania

  1. Atrybuty mieszane górnego obramowania: 
    selektor { border-top: wartości atrybutów }
  2. Atrybuty mieszane dolnego obramowania: 
    selektor { border-bottom: wartości atrybutów }
  3. Atrybuty mieszane lewego obramowania: 
    selektor { border-left: wartości atrybutów }
  4. Atrybuty mieszane prawego obramowania: 
    selektor { border-right: wartości atrybutów }
  5. Atrybuty mieszane całego obramowania: 
    selektor { border: wartości atrybutów }
Jako "wartości atrybutów" należy wpisać kolejne wartości szerokości, stylu (obowiązkowo!) i koloru obramowania (rozddzielone spacjami).

[Zobacz także: Wstawianie stylów]

Polecenie pozwala podać w jednej komendzie kilka atrybutów obramowania jednocześnie, które mągą dotyczyć różnych własności. Dzięki temu możemy uniknąć pisania długich deklaracji, np. zamiast wpisywać:

border-width: medium; border-style: solid; border-color: blue
wystarczy podać: 
border: medium solid blue
a otrzymamy ten sam efekt.

Przykład:

border-top: thick double green

border: medium solid blue

Ciekawym zastosowaniem dolnego obramowania może być uzyskanie efektu podkreślenia o różnym stylu, kolorze i grubości:

<span style="border-bottom: 3px solid red">...</U>

<span style="border-bottom: 3px double red">...</span>

<span style="border-bottom: 1px dashed red">...</span>


Aby skrócić zapis i ułatwić późniejsze modyfikacje, można posłużyć się klasą selektorową, tzn. w arkuszu stylów wpisujemy np.:

*.podkreslenie { border-bottom: 2px #f80 solid }
a następnie na stronie: 
<span class="podkreslenie">...</span>

Innym ciekawym przykładem może być zagnieżdżanie obramowania:

<div style="border: solid red 3px">
	<div style="border: solid green 3px">
		<div style="border: solid blue 3px">
			Potrójnie zagnieżdżone obramowanie
		</div>
	</div>
</div>
Potrójnie zagnieżdżone obramowanie

Styl obrysu

(interpretuje Opera 7, Firefox)

selektor { outline-style: styl }
Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "styl" należy wpisać:
  1. none - brak obrysu.

    Przykład:

    outline-style: none

  2. dashed - linia kreskowa.

    Przykład:

    outline-style: dashed

  3. dotted - linia kropkowa.

    Przykład:

    outline-style: dotted

  4. solid - linia ciągła.

    Przykład:

    outline-style: solid

  5. double - linia ciągła podwójna.

    Przykład:

    outline-style: double

  6. groove - "rowek".

    Przykład:

    outline-style: groove

  7. ridge - "grzbiet".

    Przykład:

    outline-style: ridge

  8. inset - "ramka"

    Przykład:

    outline-style: inset

  9. outset - "przycisk"

    Przykład:

    outline-style: outset

UWAGA! Polecenie nie jest interpretowane przez MSIE 6.

Obrys jest zbliżony swoim wyglądem do obramowania. Istnieją jednak pewne różnice:

  • Obrys nie zajmuje miejsca w modelu pudełkowym i dlatego nie wpływa na rozmiary ani pozycję żadnych elementów.
  • Obrys nie musi być prostokątem.
  • Jest tworzony zawsze na wierzchu elementu.
  • Można ustawiać atrybuty obrysu tylko w stosunku do wszystkich boków jednocześnie (nie da się tego robić oddzielnie dla każdego).

Szerokość obrysu

(interpretuje Opera 7, Firefox)

selektor { outline-width: szerokość }
Selektorem może być dowolny znacznik, np.: p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "szerokość" należy podać:
  • thin - cienki obrys
  • medium - średni obrys
  • thick - gruby obrys
  • lub konkretną wartość w jednostkach długości

UWAGA! Należy jednocześnie podać styl obrysu.

Polecenie nie jest interpretowane przez MSIE 6.

Przykład:

outline-width: 2mm

Kolor obrysu

(interpretuje Opera 7, Firefox)

selektor { outline-color: kolor }
Selektorem może być dowolny znacznik, np.: p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "kolor" należy wpisać definicję koloru. Wpisanie invert ustali kolor będący odwróceniem barw koloru tła.

UWAGA! Należy jednocześnie podać styl obrysu.

Polecenie nie jest interpretowane przez MSIE 6.

Przykład:

outline-color: blue

Atrybuty mieszane obrysu

(interpretuje Opera 7, Firefox)

selektor { outline: wartości atrybutów }
Selektorem może być dowolny znacznik, np.: p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości (oddzielone spacjami) jakie mają przyjąć atrybuty obrysu.

Polecenie pozwala podać kilka atrybutów obrysu w jednej komendzie (podobnie jak przy obramowaniu).

UWAGA! Polecenie nie jest interpretowane przez MSIE 6.

Przykład:

outline: medium solid blue