Obramowanie

Obramowanie

Witam w kolejnej części kursu poświęconego CSS. Na pewno zapoznaliście się już z poprzednimi lekcjami. Jeżeli tak, to z całą pewnością wiecie, jak formatować tekst i ustawiać tło strony przy pomocy stylów. Dzisiejsza część poświęcona będzie elementowi BORDER odpowiadającemu za obramowania elementów.

Dostałem kilka listów na temat poprzednich części kursu. Napisaliście, że bardziej pasuje Wam przedstawienie wszystkich elementów CSS w tabelkach. Jest to prostsze, bardziej przejrzyste i znacznie pomaga w tworzeniu własnych styli. Właśnie dla tego postanowiłem powrócić do tej formy.

Większość osób z pewnością pomyśli, że element ten służy "tylko" do robienia ciekawych obramowań np. tekstu. Określenie takie byłoby trochę krzywdzące :))) Niektórzy nie zdają sobie sprawy jakie ciekawe efekty można osiągnąć poprzez wykorzystanie elementu BORDER. Najlepszym przykładem mogą tu być pola "Imię" oraz "e-mail" formularza subskrypcji CnEB. Mała zmiana w znacznym stopniu może sprawić, że Twój formularz będzie odróżniał się od typowych.

Powinniście już wiedzieć, jak budować formułę stylu (patrz pierwsza lekcja). Teraz wystarczy, że użyjesz jednego z elementu BORDER:

WŁAŚCIWOŚCI	WARTOŚCI	FUNKCJA
BORDER-COLOR	Wartość koloru kodowa - np. white RGB - np. #000000	Kolor obramowania
BORDER-STYLE	None - styl domyślny Dotted - kropki Dashed - linie przerywane Solid - zwykłe (całe) Double - podwójne Groove - efekt 3D* Ridge - efekt 3D* Inset - efekt 3D* Outset - efekt 3D*	Styl obramowania
BORDER-WIDTH	Dowolna wartość Thin Medium Thick	Grubość obramowania
BORDER-LEFT	To samo co w BORDER-WIDTH	Cechy lewego obramowania
BORDER-RIGHT	To samo co w BORDER-WIDTH	Cechy prawego obramowania
BORDER-TOP	To samo co w BORDER-WIDTH	Cechy górnego obramowania
BORDER-BOTTOM	To samo co w BORDER-WIDTH	Cechy dolnego obramowania

*szczerze mówiąc nie są one zbyt efektowne :)

Tak właśnie przedstawia się tabela podstawowych elementów BORDER. Teraz wystarczy, że stworzymy dowolny styl:

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

Pojawia się teraz drobny problem. Wiemy już jak określić np. grubość lewego obramowania (border-left: thin;) ale co zrobić jeżeli przyjdzie nam ochota aby określić styl dla lewego obramowania??? W takim wypadku trzeba stworzyć odpowiedni element, schemat wygląda następująco:

Border - część obramowania (np.bottom, right) - style: własność;

Wygląda to mniej więcej tak: border-left-style: dotted;

Prawda, że proste? Wystarczy, że na koniec każdego elementu dodamy style i przypiszemy odpowiednią właściwość. Mała zmiana, a pozwala stworzyć naprawdę ciekawe efekty. Zamiast style można również użyć color, wówczas styl będzie wyglądał następująco:border-top-color: red;

Dopiero teraz widać, jak ogromne możliwości posiada oraz jak bardzo różnorodny jest CSS. Mam nadzieję, że zrozumieliście tą część kursu. Jestem przekonany, że ciekawie wykorzystane obramowania nieraz pomogą Wam stworzyć ładnie wyglądające strony.