. - Obramowanie i margines

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.

Margines

Właściwość margin pozwala na określenie odstępu między poszczególnymi elementami strony. Możemy określić wartości każdej krawędzi z osobna lub przypisać wartości parami np, góra-dół, lewa-prawa. Aby lepiej zrozumieć marginesy wyobraź sobie, że Twoja strona zbudowana jest z różnych bloków. Powiedzmy, że jeden blok to tekst zawarty pomiędzy znacznikami <P></P>, a bloków takich może być na stronie kilka. Teraz przypiszemy każdemu blokowi nazwę np. <P CLASS="blok1">...</P>, <P CLASS="blok2">...</P>. Następnie w stylach określamy odpowiednie wartości każdemu z bloków np.

<STYLE TYPE="text/css">

P.blok1 {margin-right: 2px;}

P.blok2 {margin-top: 5px;}

</STYLE>

Otrzymamy jeden akapit (blok1) wcięty w prawo o dwa pixele i drugi (blok2) obniżony o 5 pixeli.

Oto spis elementów należących do Margin:
margin-left, -right, -top, -bottom	długość np. 2em lub 2cm wartość procentowa auto	określenie jednego z marginesów

Wypełnienie wokół elementu

Na początku może wydawać Ci się, że wypełnienie to, to samo co margines. Jednak nie. Margines określa odstęp jednego elementu od drugiego. Natomiast wypełnienie to obszar pomiędzy obramowaniem elementu a jego zawartością. Aby określić właściwości wypełnienia używamy elementu Padding.

Oczywiście styl z wykorzystaniem nie różny się od typowych formuł CSS. Najpierw podajemy selektor, któremu chcemy przypisać właściwość wypełnienia. Następnie określamy dowolną wartość elementu padding i gotowe.

W tym przykładzie posłużymy się wypełnieniem akapitu:


<HTML>

 
 <HEAD>

 
  <STYLE TYPE="text/css">

 
  P {padding: 8px; border: 1px; }

 
  </STYLE>

 
 </HEAD>

 
 <BODY>


  <P> Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst

 
 </BODY>


</HTML>

Zobacz przykład: http://www.webinside.pl/materialy/rozne/p1_css5.htm

Tabela elementów i wartości PADDING:
padding	dowolna długość dowolna wartość procentowa
padding-left, -right, - top, -bottom	dowolna długość dowolna wartość procentowa

Na tym kończymy kolejną część kursu CSS poświęconej marginesom i wypełnieniom. Zapraszam do kolejnej części.