Start Publikacje Tłumaczenia Książki Słownik programistyczny

Promocje Heliona

Bestsellery Heliona

5.5 Własności bloków

Własności bloków służą do określania rozmiarów, obwodu i pozycjonowania elementów blokowych. W rozdziale 4 znajdują się przykłady użycia własności bloków.

Własności marginesów służą do określania marginesów elementów. Aby ustawić wszystkie marginesy na raz należy użyć własności „margin”. Marginesy z poszczególnych stron elementu ustawiane są przy pomocy bardziej precyzyjnych własności marginesów.

Własność „padding” służy do określania wielkości odstępu pomiędzy krawędziami elementu a jego zawartością. Aby ustawić wszystkie marginesy wewnętrzne (dopełnienie) na raz należy użyć własności „padding”. Dopełnienie pomiędzy treścią i poszczególnymi krawędziami elementu ustawiane jest przy pomocy bardziej precyzyjnych własności.

Własność „border” służy do kontrolowania wyglądu krawędzi elementu. Każdy element posiada cztery krawędzie (jedna z każdej strony), które posiadają następujące właściwości: szerokość (width), kolor (color) oraz styl (style).

Własności „width” i „height” służą do określania rozmiarów bloku. Własności „float” i „clear” służą natomiast do pozycjonowania elementów na stronie.

5.5.1 „margin-top”

Wartości: <length> | <percentage> | auto
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka

Własność ta służy do ustawiania marginesu górnego:

H1 { margin-top: 2em }

Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.

5.5.2 „margin-right”

Własność ta służy do ustawiania prawego marginesu:

H1 { margin-right: 12.3% }

Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.

5.5.3 „margin-bottom”

Własność ta służy do ustawiania marginesu dolnego:

H1 { margin-bottom: 3px }

Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.

5.5.4 „margin-left”

Własność ta służy do ustawiania lewego marginesu:

H1 { margin-right: 2em }

Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.

5.5.5 „margin”

Wartości: [ <length> | <percentage> | auto ]{1,4}
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka

Własność „margin” jest własnością zbiorczą służącą do określania wartości następujących własności: „margin-top”, „margin-right”, „margin-bottom” oraz „margin-left” w jednym miejscu.

Jeżeli określone zostały wszystkie cztery wartości, to odnoszą się one odpowiednio do marginesów: górnego, prawego, dolnego i lewego. Jeżeli jest tylka jedna wartość, to ma ona zastosowanie do wszystkich stron. Jeżeli określone są tylko dwie lub trzy wartości, to brakujące wartości dobierane są z przeciwnych stron.

BODY {margin: 2em} /* wszystkie marginesy będą miały wartość 2em */
BODY {margin: 1em 2em} /* margines górny i dolny = 1em, prawy i lewy = 2em */
BODY {margin: 1em 2em 3em} /* górny=1em, prawy=2em, dolny=3em, lewy=2em */

Ostatnia reguła jest równoznaczna z następującym zapisem:

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em; /* wartość skopiowana od  strony prawej */
}

Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.

5.5.6 „padding-top”

Wartości: <length> | <percentage>
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka

Własność ta służy do określania górnego dopełnienia.

BLOCKQUOTE { padding-top: 0.3em }

Dopełnienie nie może przyjmować wartości ujemnych.

5.5.7 „padding-right”

Własność ta służy do określania dopełnienia prawego.

BLOCKQUOTE { padding-right: 10px }

Dopełnienie nie może przyjmować wartości ujemnych.

5.5.8 „padding-bottom”

Własność ta służy do określania dolnego dopełnienia.

BLOCKQUOTE { padding-bottom: 2em }

Dopełnienie nie może przyjmować wartości ujemnych.

5.5.9 „padding-left”

Własność ta służy do określania dopełnienia lewego.

BLOCKQUOTE { padding-left: 20% }

Dopełnienie nie może przyjmować wartości ujemnych.

5.5.10 „padding”

Wartości: [ <length> | <percentage> ]{1,4}
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka

Własność „padding” jest własnością zbiorczą służącą do określania wartości następujących własności: „padding-top”, „padding-right”, „padding-bottom” oraz „padding-left” w jednym miejscu.

Jeżeli określone zostały wszystkie cztery wartości, to odnoszą się one odpowiednio do dopełnienia: górnego, prawego, dolnego i lewego. Jeżeli jest tylka jedna wartość, to ma ona zastosowanie do wszystkich stron. Jeżeli określone są tylko dwie lub trzy wartości, to brakujące wartości dobierane są z przeciwnych stron.

Obszar zajmowany przez dopełnienie przyjmuje tło ustawione za pomocą własności „background”:

H1 { 
  background: white; 
  padding: 1em 2em;
}

Powyższy przykład ustawia dopełnienie górne i dolne na „1em” oraz prawe i lewe na „2em”. Jednostka „em” jest zależna od rozmiaru czcionki: wartość „1em” równa się rozmiarowi używanej czcionki.

Dopełnienie nie może przyjmować wartości ujemnych.

5.5.11 „border-top-width”

Wartości: thin | medium | thick | <length>
Wartość domyślna: „medium”
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność „border-top-width” służy do określania szerokości górnej krawędzi elementu. Szerokość jaka zostanie zastosowana po użyciu słów kluczowych jest uzależniona od klienta, ale przy zachowaniu następującej zasady: „thin” <= „medium” <= „thick”.

Wartości przypisane słowom kluczowym są takie same dla całego dokumentu.

H1 { border: solid thick red }
P  { border: solid thick blue }

Powyższy przykład spowoduje, że zarówno elementy „H1” jak i elementy „P” będą mieć takie samo obramowanie bez względu na rozmiar użytej czcionki. W celu uzależnienia szerokości obramowania od czcionki można użyć jednostek „em”:

H1 { border: solid 0.5em }

Wartości krawędzi nie mogą być ujemne.

5.5.12 „border-right-width”

Wartości: thin | medium | thick | <length>
Wartość domyślna: „medium”
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta służy do określania szerokości prawej krawędzi elementu. W razie jej braku szerokość prawej krawędzi jest taka sama jak krawędzi górnej.

5.5.13 „border-bottom-width”

Wartości: thin | medium | thick | <length>
Wartość domyślna: „medium”
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta służy do określania szerokości dolnej krawędzi elementu. W razie jej braku szerokość dolnej krawędzi jest taka sama jak krawędzi górnej.

5.5.14 „border-left-width”

Wartości: thin | medium | thick | <length>
Wartość domyślna: „medium”
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta służy do określania szerokości lewej krawędzi elementu. W razie jej braku szerokość lewej krawędzi jest taka sama jak krawędzi górnej.

5.5.15 „border-width”

Wartości: [thin | medium | thick | <length>]{1,4}
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta jest własnością zbiorczą służącą do ustawiania wartości następujących własności: „border-width-top”, „border-width-right”, „border-width-bottom” oraz „border-width-left” w jednym miejscu.

Możliwe jest użycie od jednej do czterech wartości:

jedna wartość: wszystkie cztery krawędzie przyjmą tę samą szerokość
dwie wartości: szerokość krawędzi górnej i dolnej przyjmą wartość pierwszą, a krawędzie lewa i prawa drugą
trzy wartości: krawędź górna przyjmuje pierwszą wartość, krawędzie lewa i prawa przyjmują wartość drugą, a trzecia wartość zostaje dla krawędzi dolnej
cztery wartości: każda z nich jest dopasowywana do odpowiednich krawędzi w następującej kolejności: góra, prawa, dół oraz lewa

Komentarze w poniższym przykładzie odpowiadają wartościom jakie przybiorą poszczególne krawędzie w kolejności: góra, prawa, dół, lewa:

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */

Szerokość krawędzi nie może być wartością ujemną.

5.5.16 „border-color”

Wartości: <color>{1,4}
Wartość domyślna: wartośćwłasności „color”
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność „border-color” służy do określania koloru wszystkich czterech krawędzi. Własność ta może przyjmować od jednej do czterech wartości. Zasady dopasowywania wartości do odpowiednich krawędzi są takie same jak dla własności „border-width”.

Jeżeli nie zostanie określony kolor krawędzi, to przyjmą one kolor określony przez wartość własności „color” elementu.

P { 
  color: black; 
  background: white; 
  border: solid;
}

Powyższy przykład spowoduje, że obramowanie elementu będzie reprezentowane w postaci czarnej linii ciągłej.

5.5.17 „border-style”

#xy34 { border-style: solid dotted }

Powyższy przykład spowoduje, że krawędzie poziome elementu będą liniami ciągłymi („solid”), a krawędzie pionowe kropkowanymi („dotted”).

Ze względu na fakt, że wartością domyślną własności „border-style” jest „none”, krawędzie nie będą widoczne dopóki nie zostanie ustalona inna wartość dla tej własności.

Znaczenie poszczególnych wartości dostępnych dla własności „border-style” jest następujące:

none: Brak krawędzi (bez względu na własność „border-width”).
dotted: Krawędź jest linią przerywaną, złożoną z kropek, stykającą się z miejscem gdzie kończy się tło.
dashed: Krawędź stanowi linia przerywana złożona z kresek, stykająca się z miejscem gdzie kończy się tło.
solid: Krawędź stanowi linia ciągła.
double: Krawędź stanowi podwójna linia, stykająca się z miejscem gdzie kończy się tło. Suma szerokości poszczególnych linii oraz przestrzeni między nimi równa jest wartości własności <border-width>.
groove: Trójwymiarowe zagłębienie o kolorze określonym przez własność <color>
ridge: Trójwymiarowy grzbiet o kolorze określonym przez Własność <color>
inset: Tworzy wrażenie, że zawartość elementu jest zapadnięta. Kolor krawędzi określony jest przez własność <color>.
outset: Tworzy wrażenie, że zawartość elementu jest wypchnięta. Kolor krawędzi określony jest przez własność <color>.

CSS core: Aplikacja kliencka może potraktować każdą z wartości: „dotted”, „dashed”, „double”, „groove”, „ridge”, „inset” oraz „outset” jako „solid”

5.5.18 „border-top”

Wartości: <border-top-width> || <border-style> || <color>
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta służy do ustawiania szerokości, stylu i koloru górnej krawędzi elementu.

H1 { border-bottom: thick solid red }

Powyższa reguła ustawia szerokość, styl i kolor dolnej krawędzi elementu „H1”. Własności pominięte przybiorą wartości domyślne:

H1 { border-bottom: thick solid }

Jako że nie ustalono koloru obramowania, to przyjmie ono taki sam kolor jaki określa wartość parametru „color” elementu.

Warto również pamiętać, że w odróżnieniu od własności „border-style”, która może przyjmować maksymalnie do czterech wartości, ta własność ogranicza się tylko do jednej wartości stylu.

5.5.19 „border-right”

Wartości: <border-right-width> || <border-style> || <color>
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Jest to własność zbiorcza służąca do kontrolowania szerokości, stylu i koloru prawej krawędzi elementu. Pod pozostałymi względami jest ona równoznaczna z własnością „border-top”.

5.5.20 „border-bottom”

Wartości: <border-bottom-width> || <border-style> || <color>
Wartość domyślna: brak dla własności zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Jest to własność zbiorcza służąca do kontrolowania szerokości, stylu i koloru dolnej krawędzi elementu. Pod pozostałymi względami jest ona równoznaczna z własnością „border-top”.

5.5.21 „border-left”

Wartości: <border-left-width> || <border-style> || <color>
Wartość domyślna: brak dla własności zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Jest to własność zbiorcza służąca do kontrolowania szerokości, stylu i koloru lewej krawędzi elementu. Pod pozostałymi względami jest ona równoznaczna z „border-top”.

5.5.22 „border”

Wartości: <border-width> || <border-style> || <color>
Wartość domyślna: brak dla własności zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Jest to własność zbiorcza służąca do kontrolowania szerokości, stylu i koloru wszystkich krawędzi elementu. Na przykład pierwsza deklaracja w poniższym przykładzie wywoła taki sam efekt jak wszystkie pozostałe razem wzięte.

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

W przeciwieństwie do własności zbiorczych „margin” i „padding”, za pomocą własności „border” nie można ustawić innych wartości dla każdej krawędzi. W tym celu należy zastosować jedną lub więcej z pozostałych własności krawędzi.

W związku z tym, że przy użyciu własności krawędzi mogą zachodzić pewne konflikty, ważne jest w jakiej kolejności zostaną one wpisane:

BLOCKQUOTE {
  border-color: red;
  border-left: double
  color: black;
}

Powyższy przykład spowoduje, że lewa krawędź będzie czarna, a pozostałe krawędzie będą czerwone. Dzieje się tak dlatego, że własność „border-left” ustawia szerokość, styl i kolor lewej krawędzi, a wartość własności „color”, jeżeli nie zostanie zdefiniowana, jest zastępowana przez wartość własności „color” elementu. Fakt, że własność „color” elementu została wpisana dopiero po „border-left” nie ma tutaj znaczenia.

Godne zauważenia jest to, że własność „border” umożliwia ustawienie tylko jednego rozmiaru dla wszystkich krawędzi w przeciwieństwie do własności „border-width”.

5.2.23 „width”

Wartości: <length> | <percentage> | auto
Wartość domyślna: auto
Zastosowanie: elementy blokowe i osadzone
Dziedziczenie: nie
Wartości procentowe: odnoszą się do szerokości elementu rodzica

Własność ta może być stosowana do elementów tekstowych, ale najbardziej przydaje się do elementów osadzonych, takich jak obrazy. W razie potrzeby obraz jest przeskalowywany, aby dopasować się do rozmiarów określonych przez wartość tej własności. Współczynnik kształtu obrazu jest zachowany jeżeli wartość własności „height” zostanie ustawiona na „auto”.

Przykład:

IMG.icon { width: 100px }

Jeżeli zarówno własność „height” jak i „width” zostaną ustawione na „auto”, to wymiary elementu zostaną takie same jak jego wymiary własne.

Wartości ujemne nie są dozwolone.

Zależności pomiędzy tą własnością, a własnościami marginesów i dopełnienia wyjaśnione zostały w rozdziale 4.

5.5.24 „height”

Wartości: <length> | auto
Wartość domyślna: auto
Zastosowanie: elementy blokowe i osadzone
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Przykład:

IMG.icon { height: 100px }

Jeżeli zarówno własność „width” jak i „height” zostaną ustawione na „auto”, to wymiary elementu zostaną takie same jak jego wymiary własne.

W przypadku elementów tekstowych wysokość elementu może być wymuszona przy pomocy np. paska przewijania.

Wartości ujemne nie są dozwolone.

CSS core: Aplikacje klienckie mogą ignorować (np. traktować jako „auto”) wartość własności „height” jeżeli zostanie ona zastosowana do elementu innego niż element osadzony.

5.5.25 „float”

Wartości: left | right | none
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Jeżeli wartością własności „float” jest „none”, to element zostanie wyświetlony tam gdzie go umieszczono w dokumencie. Przy zastosowaniu wartości „left” lub „right” element zostanie wyrównany do odpowiedniej strony, a sąsiadujący z nim tekst będzie go otaczał z odpowiedniej strony. Przy zastosowaniu wartości „left” lub „right” element traktowany jest jako element blokowy (tj. własność „display” jest ignorowana). Więcej szczegółów na ten temat znajduje się w rozdziale 4.1.4.

IMG.icon { 
  float: left;
  margin-left: 0;
}

Powyższy przykład spowoduje, że wszystkie elementy „IMG” z klasą „icon” zostaną umieszczone wzdłuż lewej krawędzi elementu rodzica.

Własność ta najczęściej stosowana jest do obrazów będących elementami śródliniowymi, ale może być także stosowana dla elementów zawierających tekst.

5.5.26 „clear”

Wartości: none | left | right | both
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta określa, czy i po której stronie elementu mogą znajdować się elementy pływające. Mówiąc dokładniej, wartości tej własności wskazują te strony, po których elementy pływające występować nie mogą. Zastosowanie wartości „left” spowoduje przesunięcie elementu poniżej wszystkich elementów pływających do lewej. Przy wartości „none” elementy pływające mogą znajdować się po obu stronach elementu.

Przykład:

H1 { clear: left }

Spis treści

Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.

Copyright © 2004 W3C^® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaku towarowego, używania dokumentu i licencji oprogramowania.