Przejdź do treści

Obramowanie

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 mogą 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

Komentarze

Zobacz więcej komentarzy