DHTML0100

Marginesy i obramowania

Listing 6.6. Ten kod zapisany zostanie w zewnętrznym pliku CSS o nazwie Listing-6-6.css

F • border: Smra groove red; )

•lewa { boider-left-width: .5in; )

.prawa I border-right-width: .5in; }

.góra { border-top-width: .Sin; }

.doi { border-bottom-width: .Sin; }

Listing 6.7. Kod z listingu 6.6 zostaje następnie dołączony do tego dokumentu

<html>

<head>

<rr«e;:a http-eauiy^^Content-Type" ->content-"r.ext/htmi; charset=ISC-88S9-2^M>

<t;itie>Listing 6.7</titłe>

</head>

Bułka z masłem. Pan eon ceso. Cheesburger,

A to będzie prawdziwe śniadanko kontynetałne -jajko na bekonie, kawusia i dwa kawałki bagietki.

W końcu nadszedł czas na dobry obiadek: winko,...

</body>

•-/html>

Rysunek 6.8. Tak wygląda powyższy kod wyświetlony w' przeglądarce. Ogólnie grubość obramowania wynosi 5mm, jednak klasy gara. doi, lewa i prawa mogą zostać wykorzystane do zmienienia tych ustawień na każdej z krawędzi obramowania

Określanie szerokości obramowania jednego boku

Jeśli chcesz, możesz pojedynczo określać szerokości obramowania każdego z boków elementu, co jest przydatne przy zastępowaniu szerokości obramowań określonych za pomocą właściwości border-width. Na rysunku 6.8 szerokość obramowań każdego z elementów została określona za pomocą właściwości border, a potem szerokość obramowania na wybranym z boków każdego elementu została zmieniona.

Aby zdefiniować szerokość obramowania pojedynczego boku

1. ,lewa{

Podaj selektor reguły. W listingu 6.6 stworzone zostały niezależne klasy, które pozwolą na kontrolowanie szerokości obramowań dowolnego znacznika HTML-owego (listing 6.7).

2. border-

Rozpocznij definicję od podania właściwości border i znaku minus

3. left-

Podaj nazwę boku elementu, którego obramowanie chcesz określić - top (górny), bottom (dolny), left (lewy), right (prawy).

4. width:

Poinformuj przeglądarkę, że chcesz zdefiniować szerokość obramowania w tym celu zapisz width i dwukropek.

5. .5in

Określ szerokość podając wartość:

• wielkości określającej długość;

• wielkości względnej: thin, medium, thick.

6. ;}

Nie zapomnij zamknąć definicji za pomocą średnika i zamykającego nawiasu klamrowego }.

z Rada

■ Właściwości border-width-.., nie są dostępne w Internet Explorerze. Zamiast nich należy stosować właściwość border.

Określanie szerokości obramowania

103