Właściwośći obramowania

margines(margin)
obramowanie(border)
marginess wewnętrzny(padding)
zawartość (content)

Każdy z tych elementów może być osobno formatowany przez właściwości obramowania Obramowanie deklarujemy cechą border i jest ono funckją ograniczającą element od otoczenia.
Szerokość obramowania definiujemy border-width i posiada ona trzy zdefiniowane wartosci:thin(cienkie), medium(średnie), thick(grube)


jedna wartość - wszystkie krawedzie takie same
obie wartości - 1 - wart. krawędzi poziome, 2 pionowe
trzy wartośći - 1 - wart. górna krawędź, 2 - wart. krawędzie lewa i prawa, 3 wart. - krawędź dolna.
cztery wartości - po kolei- góra, prawo, dół, lewa

Styl górnego obramowania:
selektor { border-top-style: styl }
Styl dolnego obramowania:
selektor { border-bottom-style: styl }
Styl lewego obramowania:
selektor { border-left-style: styl }
Styl prawego obramowania:
selektor { border-right-style: styl }

Natomiast w stylu wyrózniamy style takie jak :

hidden - ukryte obramowanie
dashed - linia kreskowa 
dotted- linia kropkowa 
solid - linia ciągła
groove - "rowek"
ridge - "grzbiet"
inset - "ramka"
outset - "przycisk"

napisz ze ramka oprocz tego ma byc formatowana i styl moze miec formatowany kolor podawany jako trzeci element lub dodge - color wartosc kolorow podajemy nazwa predefiniowana lub kodem szestnastkowym akapit otoczony ramka o szerokosci thick stylem table w kolorze blue

Włąściwości marginesu

margines(margin) to dodatkowy odstęp zewnętrzny od elementów Jedna wlasciowscia marginesu jest jego szerokość podawana w akceptowanych jednostkach typu piksele, Podobnie jak przy jednej warrtośći margines jest wyznaczany dla całego obiektu, lub możemy ustawić margines dla każdej krawędzi.

Przykład Szerokość dla akapitu(width)60 % , oraz border:solid red 1px

seeeeeeeee

Margines wewnętrzny

Padding jest liczony, wyznaczany od granicy elementów liczony do środka podawany w akceptowanych jednostkach podbnie jak margin i border moze byc sformatowany dla wszystkich krawedzi jednoczesnie dla roznych krawedzi lub zespolowo.3 - góra pionowy dół

all four margins will be 15px

Góra i dół marginesu wynoszą 10px, lewy i prawy margines zajmuje 2% strony

10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px

top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser

Darmowy hosting zapewnia PRV.PL

padding

Góra-top

<p style="padding-top: 15px; border:1px solid black;

Dół-bottom

<p style="padding-bottom: 15px; border:1px solid black;

Prawa right

<p style="padding-right: 15px; border:1px solid black;

Lewa - left

<p style="padding-left: 15px; border:1px solid black;

Obrys - outline

Obrys podbnie jak border "wyznacza"granice elementu. Różnica polega na tym że:
nie zajmuuje miejsca
jest tworzony na wierzchu elementu
jest definiowany dla wszystkich krawedzi równoczesnie obrys(outline) posiada trzy parametry takie jak border.

Cienki obrys.

Grubszy obrys.

Obrys 5 px.

Grafika w różnych wymiarach

Wymiar oryginalny

Wymiary

Wymiary okreslone stylem na min-height:166 i min-height:100px

Styl max-weight:500px; max-height:370px;

Cień w CSS

Efekt cienia dodajemy poleceniem box-shadow, Atrybutami są: Kierunek poziomy, kierunek pionowy, rozmycie, kolor, kolor cienia. Dla x wartosci dodatnie przesuwaja w prawo a ujemne przesuwaja w lewo. Dla y dodatnie w dół, ujemne do góry. Rozmycie podajemy w px, kolor dowolnym przyjmowanym formacie. Możliwe jest ustawienie różnych kolorów dla różnych bloków elementu
Prawidłowa deklaracja: box-shadow:3px -3px 5px gray;