Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Marginesy, dopełnienia i obramowanie

Email Drukuj PDF

Tematy: Pudełkowy model formatowania elementów | Marginesy | Dopełnienie | Obramowanie | Wymiary

Zagadnienia marginesów, dopełnienia — inaczej zwanego marginesami wewnętrznymi — oraz obramowania są ściśle ze sobą związane i dlatego zdecydowałem się opisać wszystkie w ramach jednego rozdziału niniejszego kursu. Zanim jednak przejdziemy do konkretów, konieczne jest wyjaśnienie pojęcia pudełka, gdyż pozwoli to lepiej zrozumieć różnice.

Pudełkowy model formatowania elementów

Kaskadowe arkusze stylów do formatowania wszystkich elementów wykorzystują model pudełka. W praktyce polega to na tym, że wszystkie elementy umieszczane są w dodatkowej przestrzeni o kształcie prostokątów (rysunek 8.1). W ramach każdego pudełka można kontrolować następujące właściwości:

  • Marginesy — odstępy dzielące poszczególne elementy — pudełka.

  • Obramowanie — linie rozdzielające marginesy i dopełnienie.

  • Dopełnienia — odstępy pomiędzy elementem a otaczającą go ramką. Dopełnienia bardzo często nazywane są również marginesami wewnętrznymi.

  • Szerokość.

  • Wysokość.

Rysunek 8.1. Schemat pudełka

Oczywiście nic nie stoi na przeszkodzie, aby dla pojedynczego elementu określić wszystkie dostępne właściwości.

Marginesy

Margines to obszar występujący po zewnętrznej stronie obramowania elementu. Jest on obecny w każdym elemencie użytym na stronie WWW. Za pomocą CSS można kontrolować lewy, prawy, górny oraz dolny margines.

Lewy, prawy, górny i dolny margines

margin-left | margin-right | margin-top | margin-bottom

Dostępne wartości:

wartość liczbowa | wartość procentowa | auto | inherit

Wartość domyślna:

0

Przykład:

p {margin-left:1cm;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Specyfikacja CSS przewiduje ustawienia dla następujących marginesów: prawego, lewego, górnego i dolnego. Odpowiednie wpisy mają postać:

<p style="margin-left:1cm;">Przykład tekstu z lewym marginesem 1 cm </p>

<p style="margin-right:1cm;">Przykład tekstu z prawym marginesem 1 cm </p>

<p style="margin-top:1cm;">Przykład tekstu z górnym marginesem 1 cm </p>

<p style="margin-bottom:1cm;">Przykład tekstu z dolnym marginesem 1 cm </p>

<<przykład>>

<div class="przyklad">

<h3>Przykład działania: margin-left</h3>

<div style="width:400px;height:300px;border:solid 1px black;background-color:#E7E7E7;">

<p style="margin-left:2cm;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

<p style="margin-left:2cm;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

</div>

 

<h3>Przykład działania: margin-right</h3>

<div style="width:400px;height:300px;border:solid 1px black;background-color:#E7E7E7;">

<p style="margin-right:2cm;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

<p style="margin-right:2cm;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

</div>

 

<h3>Przykład działania: margin-top</h3>

<div style="width:400px;height:300px;border:solid 1px black;background-color:#E7E7E7;">

<p style="margin-top:2cm;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

<p style="margin-top:2cm;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

</div>

 

<h3>Przykład działania: margin-bottom</h3>

<div style="width:400px;height:300px;border:solid 1px black;background-color:#E7E7E7;">

<p style="margin-bottom:2cm;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

<p style="margin-bottom:2cm;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

</div>

</div>

<</przykład>>

Poniżej zamieszczam jeszcze jeden przykład dokumentu o bardziej skomplikowanej strukturze marginesów.

<body style="margin-left:10%;margin-right:10%;margin-top:10%;margin-bottom:10%;">

<h3>Nagłowek bez własnego marginesu</h3>

<p style="margin-left:3cm">Przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm.</p>

<<przykład>>

<div class="przyklad">

<div style="width:400px;height:300px;border:solid 1px black;background-color:#E7E7E7;">

<div style="margin:10%; background-color:#C0FFFF;">

<h3>Lorem ipsum dolor sit amet</h3>

<p style="margin-left:2cm;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

</div>

</div>

<</przykład>>

Powyższy przykład zawiera marginesy ustawione dla całego dokumentu oraz dla wszystkich akapitów. Główne marginesy strony oraz margines akapitu zostały zsumowane i w praktyce wygląda to tak, że tekst jest oddalony od lewego brzegu o 10% + 3 cm. Dzięki zastosowaniu kolorowego tła lepiej widać, w jaki sposób zostały ustawione marginesy.

Marginesy mogą również przybierać wartości zerowe lub ujemne. Dzięki temu strona może zaczynać się idealnie od krawędzi okna przeglądarki lub wychodzić poza okno.

<body style="margin-left:0;margin-top:0;">

<p style="margin-left:-1cm;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

Na poniższym przykładzie dla pierwszego akapitu ustawiono ujemny margines, co powoduje, że tekst nie mieści się w wyznaczonym bloku tekstu.

<<przykład>>

<div class="przyklad">

<div style="width:400px;height:300px;border:solid 1px black;background-color:#E7E7E7;">

<div style="margin:10%; background-color:#C0FFFF;">

<h3>Lorem ipsum dolor sit amet</h3>

<p style="margin-left:-1cm;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p>

</div>

</div>

<</przykład>>

Przyjrzyjmy się jeszcze sytuacji, w której ustawiłem lewy i prawy margines dla elementu znajdującego się wewnątrz bloku tekstu.

<p>Przykład bloku tekstu z <span style=" margin-left: 1cm;margin-right: 1cm;font-style: italic;font-weight: bold;">dodatkowym elementem</span> który posiada własne marginesy.</p>

<<przykład>>

<div class="przyklad">

<p>Przykład bloku tekstu z <span style=" margin-left: 1cm;margin-right: 1cm;font-style: italic;font-weight: bold;">dodatkowym elementem</span> który posiada własne marginesy.</p>

</div>

<</przykład>>

Za pomocą odpowiednio zdefiniowanych marginesów można wyśrodkować pewne elementy na stronie. Poniżej znajduje się przykład tabeli wyśrodkowanej w ten sposób. Zgodnie z zaleceniami specyfikacji to właśnie taka konstrukcja jest poprawna i należy z niej korzystać w stronach, które tworzone są zgodnie z zaleceniami konsorcjum W3.

<table style="margin-left:auto;margin-right:auto;">

<tr>

<td width="100" height="100">1</td><td width="100" height="100">2</td>

</tr>

<tr>

<td width="100" height="100">3</td><td width="100" height="100">4</td>

</tr>

</table>

<<przykład>>

<div class="przyklad">

<div style="width:400px;height:300px;border:solid 1px black;background-color:#E7E7E7;padding:10pt;">

<table style="margin-left:auto;margin-right:auto;border:solid black 1px;background-color:#C0FFC0;">

<tr>

<td width="100" height="100">1</td><td width="100" height="100">2</td>

</tr>

<tr>

<td width="100" height="100">3</td><td width="100" height="100">4</td>

</tr>

</table>

</div>

</div>

<</przykład>>

Zbiorczy zapis właściwości marginesów

margin

Dostępne wartości:

margin-top | margin-right | margin-bottom | margin-left

Wartość domyślna:

0

Przykład:

p {margin:1cm 3cm;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Wpisy w arkuszu stylów odpowiedzialne za określanie właściwości poszczególnych marginesów mogą zostać zredukowane do pojedynczej linii. Aby ustawić wszystkie marginesy dla całego dokumentu (prawy, lewy, górny, dolny), należy skorzystać z następującego zapisu:

BODY

{

margin:1cm;

}

Teraz kolej na przykład zapisu pozwalającego na zróżnicowanie marginesów na stronie.

BODY

{

margin:1cm 2cm;

}

W tym przypadku górny i dolny margines będą miały 1 cm, natomiast prawy i lewy — 2 cm. W sytuacji gdy każdy margines ma inną wartość, odpowiedni zapis będzie wyglądał następująco:

BODY

{

margin:1cm 2cm 30px 1in;

}

Patrząc od lewej strony na liczby, mamy górny, prawy, dolny i lewy margines.

Poniżej zamieściłem schemat, z jakiego korzystają kaskadowe arkusze stylów przy zbiorczym zapisie wartości. Mam tutaj na myśli replikację wartości. Wartość górnego marginesu może zostać pobrana przez prawy i dolny margines. Natomiast prawy margines jest wykorzystywany przez lewy. Przedstawioną zależność doskonale widać na rysunku 8.2.

Rysunek 8.2. Schemat powielania wartości marginesów w zapisie zbiorczym

Dopełnienie

Dopełnienie to obszar występujący po wewnętrznej stronie obramowania elementu. Jest obecne w każdym elemencie użytym na stronie WWW. Za pomocą CSS można kontrolować lewe, prawe, górne oraz dolne dopełnienie. Warto wspomnieć w tym miejscu, że dopełnienie bywa również nazywane marginesem wewnętrznym.

Lewe, prawe, górne i dolne dopełnienie

padding-left | padding-right | padding-top | padding-bottom

Dostępne wartości:

wartość liczbowa | wartość procentowa | inherit

Wartość domyślna:

0

Przykład:

p {padding-left:1cm;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Za deklarację dopełnienia odpowiada polecenie padding-left, padding-right, padding-top oraz padding-bottom. W poniższych przykładach, aby poprawić widoczność działania dopełnienia i usprawnić jego kontrolę, włączyłem dodatkowo tło elementu.

<h1 style="padding-left:2cm;background-color:#C0FFC0;">Nagłówek z lewym dopełnieniem równym 2 cm</h1>

<h1 style="padding-right:2cm;background-color:#C0FFC0;">Nagłówek z prawym dopełnieniem równym 2 cm</h1>

<h1 style="padding-top:2cm;background-color: #C0FFC0;">Nagłówek z górnym dopełnieniem równym 2 cm</h1>

<h1 style="padding-bottom:2cm;background-color:#C0FFC0;">Nagłówek z dolnym dopełnieniem równym 2 cm</h1>

<<przykład>>

<div class="przyklad">

<div style="width:400px">

<h1 style="padding-left:2cm;background-color:#C0FFC0;">Nagłówek z lewym dopełnieniem równym 2 cm</h1>

<h1 style="padding-right:2cm;background-color:#C0FFC0;">Nagłówek z prawym dopełnieniem równym 2 cm</h1>

<h1 style="padding-top:2cm;background-color: #C0FFC0;">Nagłówek z górnym dopełnieniem równym 2 cm</h1>

<h1 style="padding-bottom:2cm;background-color:#C0FFC0;">Nagłówek z dolnym dopełnieniem równym 2 cm</h1>

</div>

</div>

<</przykład>>

Poniżej zamieszczam jeszcze jeden przykład dokumentu o bardziej skomplikowanej strukturze dopełnienia.

<h1 style="padding-left:2cm;padding-right:2cm;padding-top:2cm;padding-bottom:2cm;">Nagłówek ze wszystkimi dopełnieniami.</h1>

<<przykład>>

<div class="przyklad">

<div style="width:400px">

<h1 style="background-color:#C0FFC0;padding-left:2cm;padding-right:2cm;padding-top:2cm;padding-bottom:2cm;">Nagłówek ze wszystkimi dopełnieniami.</h1>

</div>

</div>

<</przykład>>

Na koniec jeszcze jeden przykład, mający uzmysłowić różnicę pomiędzy dopełnieniem oraz klasycznymi marginesami.

<h1 style="background-color:#C0FFC0;padding:1cm;margin-top:1cm;margin-bottom:1cm;">Nagłówek ze wszystkimi dopełnieniami równymi 1 cm i dodatkowym 1-centymetrowym marginesem górnym i dolnym.</h1>

<<przykład>>

<div class="przyklad">

<div style="width:500px">

<h1 style="background-color:#C0FFC0;padding:1cm;">Nagłówek ze wszystkimi dopełnieniami równymi 1cm.</h1>

<h1 style="background-color:#C0FFC0;padding:1cm;">Nagłówek ze wszystkimi dopełnieniami równymi 1cm.</h1>

<h1 style="background-color:#C0FFC0;padding:1cm;margin-top:2cm;margin-bottom:2cm;">Nagłówek ze wszystkimi dopełnieniami równymi 1cm i dodatkowym 2-centymetrowym marginesem górnym i dolnym.</h1>

<h1 style="background-color:#C0FFC0;padding:1cm;">Nagłówek ze wszystkimi dopełnieniami równymi 1cm.</h1>

</div>

</div>

<</przykład>>

Zbiorczy zapis właściwości dopełnienia

padding

Dostępne wartości:

padding-top | padding-right | padding-bottom | padding-left

Wartość domyślna:

0

Przykład:

p {margin:1cm 3cm;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Dla dopełnienia — podobnie jak dla marginesów zewnętrznych — można definiować wartości w sposób zbiorczy. Przykład takiego działania zamieszczam poniżej.

H1

{

background-color:silver;

padding:1cm;

}

Oczywiście wartości są replikowane zgodnie ze wzorem zamieszczonym na rysunku 8.2. Dlatego można stosować skrócony zapis w każdym przypadku.

Kolejność podanych wartości w skróconym zapisie jest taka sama jak dla marginesów zewnętrznych — patrząc od strony lewej, mamy górne, prawe, dolne i lewe dopełnienie.

H1

{

background-color:silver;

padding:1cm 1in 10px 20mm;

}

<<przykład>>

<div class="przyklad">

<div style="width:500px">

<h1 style="background-color:#C0FFC0;padding:1cm 1in 10px 20mm">Nagłówek ze wszystkimi dopełnieniami równymi 1cm.</h1>

</div>

</div>

<</przykład>>

Obramowanie

Obramowanie występuje pomiędzy marginesem a dopełnieniem i jest kolejnym elementem składowym modelu pudełka, o którym wspomniałem wcześniej. Typowe obramowanie przybiera formę pojedynczej lub podwójnej linii o ciągłej lub przerywanej strukturze i dowolnym kolorze.

Zgodnie z zaleceniami specyfikacji ramka jest rysowana nad tłem ustawionym dla elementu. Niestety, nie wszystkie przeglądarki (problem ma MS Internet Explorer w starszych wersjach) w taki sposób prezentują ramki, co w niektórych przypadkach może być przyczyną problemów.

Za pomocą kaskadowych arkuszy stylów można kontrolować następujące właściwości obramowania:

  • styl,

  • kolor,

  • grubość,

  • rozmiar,

  • miejsce występowania.

Style odpowiedzialne za formatowanie obramowania nie zawsze działają w pojedynkę. Dlatego warto połączyć różne atrybuty, np. grubość, styl i miejsce występowania, aby uzyskać zadowalający efekt.

Styl obramowania

border-top-style | border-right-style | border-bottom-style | border-left-style | border-style

Dostępne wartości:

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Wartość domyślna:

none

Przykład:

p {border-style:dotted;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Styl obramowania może być kontrolowany za pomocą kaskadowych arkuszy stylów. Tak się składa, że ze względu na charakter tego elementu możemy określić styl obramowania dla każdego z boków pudełka (górny, prawy, dolny, lewy) oraz dla wszystkich boków jednocześnie.

<h1 style="border-top-style:solid;">Nagłówek z obramowaniem na górze.</h1>

<h1 style="border-right-style:solid;">Nagłówek z obramowaniem z prawej strony.</h1>

<h1 style="border-bottom-style:solid;">Nagłówek z obramowaniem na dole.</h1>

<h1 style="border-left-style:solid;">Nagłówek z obramowaniem z lewej strony.</h1>

<h1 style="border-style:solid;">Nagłówek z pełnym obramowaniem.</h1>

<<przykład>>

<div class="przyklad">

<div style="width:400px;">

<h1 style="border-top-style:solid;">Nagłówek z obramowaniem na górze.</h1>

<h1 style="border-right-style:solid;">Nagłówek z obramowaniem z prawej strony.</h1>

<h1 style="border-bottom-style:solid;">Nagłówek z obramowaniem na dole.</h1>

<h1 style="border-left-style:solid;">Nagłówek z obramowaniem z lewej strony.</h1>

<h1 style="border-style:solid;">Nagłówek z pełnym obramowaniem.</h1>

</div>

</div>

<</przykład>>

Specyfikacja przewiduje kilka stylów obramowania. Poniższe przykłady prezentują dostępne możliwości.

<<przykład>>

<div class="przyklad">

<div style="width:400px;">

<h1 style="border-top-style:none;background-color:#C0FFC0;">Nagłówek z ramką none.</h1>

<h1 style="border-style:hidden;background-color:#C0FFC0;">Nagłówek z ramką hidden.</h1>

<h1 style="border-style:dotted;background-color:#C0FFC0;">Nagłówek z ramką dotted.</h1>

<h1 style="border-style:dashed;background-color:#C0FFC0;">Nagłówek z ramką dashed.</h1>

<h1 style="border-style:solid;background-color:#C0FFC0;">Nagłówek z ramką solid.</h1>

<h1 style="border-style:double;background-color:#C0FFC0;">Nagłówek z ramką double.</h1>

<h1 style="border-style:groove;background-color:#C0FFC0;">Nagłówek z ramką groove.</h1>

<h1 style="border-style:ridge;background-color:#C0FFC0;">Nagłówek z ramką ridge.</h1>

<h1 style="border-style:inset;background-color:#C0FFC0;">Nagłówek z ramką inset.</h1>

<h1 style="border-style:outset;background-color:#C0FFC0;">Nagłówek z ramką outset.</h1>

</div>

</div>

<</przykład>>

Szerokość obramowania

border-top-width | border-right-width | border-bottom-width | border-left-width | border-width

Dostępne wartości:

none | wartości liczbowe | wartości procentowe | thin | medium | thick | inherit

Wartość domyślna:

none

Przykład:

p {border-width:5px;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Kaskadowe arkusze stylów umożliwiają kontrolę grubości obramowania. Ze względu na charakter tego elementu możemy oddzielnie określić grubość obramowania dla każdego z boków pudełka (border-top-width, border-right-width, border-bottom-width, border-left-width) oraz dla wszystkich boków jednocześnie (border-width).

<h1 style="border-top-width:1px;border-top-style:solid;">Nagłówek z górnym obramowaniem 1px.</h1>

<h1 style="border-right-width:2pt;border-right-style:solid;">Nagłówek z prawym obramowaniem 2pt.</h1>

<h1 style="border-bottom-width:2em;border-bottom-style:solid;">Nagłówek z dolnym obramowaniem 2em.</h1>

<h1 style="border-left-width:1cm;border-left-style:solid;">Nagłówek z lewym obramowaniem 1cm.</h1>

<h1 style="border-width:1cm;border-style:solid;">Nagłówek z pełnym obramowaniem 1cm.</h1>

<<przykład>>

<div class="przyklad">

<div style="width:400px;">

<h1 style="border-top-width:1px;border-top-style:solid;background-color:#C0FFC0;">Nagłówek z górnym obramowaniem 1px.</h1>

<h1 style="border-right-width:2pt;border-right-style:solid;background-color:#C0FFC0;">Nagłówek z prawym obramowaniem 2pt.</h1>

<h1 style="border-bottom-width:2em;border-bottom-style:solid;background-color:#C0FFC0;">Nagłówek z dolnym obramowaniem 2em.</h1>

<h1 style="border-left-width:1cm;border-left-style:solid;background-color:#C0FFC0;">Nagłówek z lewym obramowaniem 1cm.</h1>

<h1 style="border-width:1cm;border-style:solid;background-color:#C0FFC0;">Nagłówek z pełnym obramowaniem 1cm.</h1>

</div>

</div>

<</przykład>>

Dodatkowo grubość obramowania może być określona za pomocą zdefiniowanych przez twórców CSS wartości thin, medium oraz thick.

<h1 style="border-width:thin;border-style:solid;">Nagłówek z pełnym obramowaniem thin.</h1>

<h1 style="border-width:medium;border-style:solid;">Nagłówek z pełnym obramowaniem medium.</h1>

<h1 style="border-width:thick;border-style:solid;">Nagłówek z pełnym obramowaniem thick.</h1>

<<przykład>>

<div class="przyklad">

<div style="width:400px;">

<h1 style="border-width:thin;border-style:solid;background-color:#C0FFC0;">Nagłówek z pełnym obramowaniem thin.</h1>

<h1 style="border-width:medium;border-style:solid;background-color:#C0FFC0;">Nagłówek z pełnym obramowaniem medium.</h1>

<h1 style="border-width:thick;border-style:solid;background-color:#C0FFC0;">Nagłówek z pełnym obramowaniem thick.</h1>

</div>

</div>

<</przykład>>

Kolor obramowania

border-top-color | border-right-color | border-bottom-color | border-left-color | border-color

Dostępne wartości:

nazwa lub wartość koloru | transparent | inherit

Wartość domyślna:

wg ustawień domyślnego koloru dla dokumentu

Przykład:

p {border-color:red;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Oprócz grubości, stylu oraz miejsca występowania obramowania można zdefiniować kolor tego elementu. Podobnie jak we wszystkich poprzednich przypadkach, tak i tu istnieje możliwość określenia koloru obramowania dla wybranego boku (border-top-color, border-right-color, border-bottom-color, border-left-color) lub dla całej ramki (border-color).

<h1 style="border-top-width:thick;border-top-style:solid;border-top-color:red;">Nagłówek z górnym czerwonym obramowaniem.</h1>

<h1 style="border-right-width:thick;border-right-style:solid;border-right-color:green;">Nagłówek z prawym zielonym obramowaniem.</h1>

<h1 style="border-bottom-width:thick;border-bottom-style:solid;border-bottom-color:navy;">Nagłówek z dolnym granatowym obramowaniem.</h1>

<h1 style="border-left-width:thick;border-left-style:solid;border-left-color:silver;">Nagłówek z lewym szarym obramowaniem.</h1>

<h1 style="border-width:thick;border-style:solid;border-color:yellow;">Nagłówek z pełnym żółtym obramowaniem.</h1>

<<przykład>>

<div class="przyklad">

<div style="width:400px;">

<h1 style="border-top-width:thick;border-top-style:solid;border-top-color:red;">Nagłówek z górnym czerwonym obramowaniem.</h1>

<h1 style="border-right-width:thick;border-right-style:solid;border-right-color:green;">Nagłówek z prawym zielonym obramowaniem.</h1>

<h1 style="border-bottom-width:thick;border-bottom-style:solid;border-bottom-color:navy;">Nagłówek z dolnym granatowym obramowaniem.</h1>

<h1 style="border-left-width:thick;border-left-style:solid;border-left-color:silver;">Nagłówek z lewym szarym obramowaniem.</h1>

<h1 style="border-width:thick;border-style:solid;border-color:yellow;">Nagłówek z pełnym żółtym obramowaniem.</h1>

</div>

</div>

<</przykład>>

Zbiorczy zapis właściwości obramowania

border-top | border-right | border-bottom | border-left | border

Dostępne wartości:

border-style | border-width | border-color

Wartość domyślna:

Przykład:

p {border:red;}

Dziedziczenie:

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Stosując zbiorczy zapis właściwości obramowania, możemy znacznie uprościć zapis stylów dla górnej, prawej, dolnej, lewej krawędzi (border-top, border-right, border-bottom, border-left) oraz dla całego elementu (border).

<h1 style="border-top:solid thick red;">Nagłówek z górnym obramowaniem.</h1>

<h1 style="border-right:solid thick red;">Nagłówek z prawym obramowaniem.</h1>

<h1 style="border-bottom:solid thick red;">Nagłówek z dolnym obramowaniem.</h1>

<h1 style="border-left:solid thick red;">Nagłówek z lewym obramowaniem.</h1>

<h1 style="border:solid thick red;">Nagłówek z pełnym obramowaniem.</h1>

<<przykład>>

<div class="przyklad">

<div style="width:400px;">

<h1 style="border-top:solid thick red;">Nagłówek z górnym obramowaniem.</h1>

<h1 style="border-right:solid thick red;">Nagłówek z prawym obramowaniem.</h1>

<h1 style="border-bottom:solid thick red;">Nagłówek z dolnym obramowaniem.</h1>

<h1 style="border-left:solid thick red;">Nagłówek z lewym obramowaniem.</h1>

<h1 style="border:solid thick red;">Nagłówek z pełnym obramowaniem.</h1>

</div>

</div>

<</przykład>>

Wymiary

Szerokość i wysokość

width | height

Dostępne wartości:

wartość liczbowa | wartość procentowa | inherit

Wartość domyślna:

auto

Przykład:

p {width:30%;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Pudełko każdego elementu może mieć ściśle określony rozmiar — szerokość i wysokość. Niezbędne polecenia wykorzystywane w tym celu to width i height.

<h1 style="height:5cm;">Nagłówek o wysokości pudełka równej 5cm.</h1>

<h1 style="width:30%;">Nagłówek o szerokości pudełka równej 30%.</h1>

<h1 style="width:50%;height:50%">Nagłówek o szerokości i wysokości pudełka równych 50%.</h1>

<<przykład>>

<div class="przyklad">

<div style="width:400px;">

<h1 style="height:5cm;background-color:#C0FFC0;">Nagłówek o wysokości pudełka równej 5cm.</h1>

<h1 style="width:30%;background-color:#C0FFC0;">Nagłówek o szerokości pudełka równej 30%.</h1>

<h1 style="width:50%;height:50%;background-color:#C0FFC0;">Nagłówek o szerokości i wysokości pudełka równych 50%.</h1>

</div>

</div>

<</przykład>>

Dzięki możliwości definiowania rozmiarów za pomocą CSS można „uciec” z pułapki, jaką w pewnych okolicznościach jest model pudełka będący podstawą stylów.

Minimalna wysokość i szerokość

min-width | min-height

Dostępne wartości:

wartość liczbowa | wartość procentowa | inherit

Wartość domyślna:

0

Przykład:

p {min-height:90px;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Kaskadowe arkusze stylów pozwalają na zdefiniowanie minimalnej wysokości i szerokości elementu. Rozwiązanie to jest przydatne w przypadku, gdy przeglądarka ma sama decydować o rozmiarach elementów na stronie. Jednak jako twórcy chcemy w pewnym stopniu kontrolować jej poczynania. Odpowiednie polecenia służące do tego to min-width i min-height.

<img src="kolo.jpg" style="min-width:300px;" />

<img src="kolo.jpg" style="min-height:100px;" />

<<przykład>>

<div class="przyklad">

<div style="width:400px;">

<img src="kolo.jpg" />

<img src="kolo.jpg" style="min-width:300px;" />

<img src="kolo.jpg" style="min-height:100px;" />

</div>

</div>

<</przykład>>

Maksymalna wysokość i szerokość

max-width | max-height

Dostępne wartości:

wartość liczbowa | wartość procentowa | none | inherit

Wartość domyślna:

none

Przykład:

p {max-width:100px;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Kaskadowe arkusze stylów pozwalają na zdefiniowanie maksymalnej wysokości i szerokości elementu. Rozwiązanie to jest przydatne w przypadku, gdy przeglądarka ma sama decydować o rozmiarach elementów na stronie. Jednak jako twórcy chcemy w pewnym stopniu kontrolować jej poczynania. Odpowiednie polecenia służące do tego to max-width i max-height.

<img src="kolo.jpg" style="max-width:50px;" />

<img src="kolo.jpg" style="max-height:10px;" />

<<przykład>>

<div class="przyklad">

<div style="width:400px;">

<img src="kolo.jpg" />

<img src="kolo.jpg" style="max-width:50px;" />

<img src="kolo.jpg" style="max-height:10px;" />

</div>

</div>

<</przykład>>

 

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15211464