Loading ...Spis treści
- 8.1 Wymiary pola
- 8.2 Przykład marginesów, dopełnienia i obramowania
- 8.3 Własności marginesów: ‚margin-top’, ‚margin-right’, ‚margin-bottom’, ‚margin-left’ oraz ‚margin’
- 8.4 Własności dopełnienia: ‚padding-top’, ‚padding-right’, ‚padding-bottom’, ‚padding-left’ oraz ‚padding’
- 8.5 Własności obramowania
- 8.5.1 Szerokość obramowania: ‚border-top-width’, ‚border-right-width’, ‚border-bottom-width’, ‚border-left-width’ oraz ‚border-width’
- 8.5.2 Kolor obramowania: ‚border-top-color’, ‚border-right-color’, ‚border-bottom-color’, ‚border-left-color’ oraz ‚border-color’
- 8.5.3 Styl obramowania: ‚border-top-style’, ‚border-right-style’, ‚border-bottom-style’, ‚border-left-style’ oraz ‚border-style’
- 8.5.4 Własności zbiorcze obramowania: ‚border-top’, ‚border-right’, ‚border-bottom’, ‚border-left’ oraz ‚border’
- 8.6 Model polowy dla elementów śródliniowych w kontekście dwukierunkowym
Model polowy CSS opisuje prostokątne pola generowane dla elementów znajdujących się w drzewie dokumentu i rozmieszczanych zgodnie z modelem formatowania wizualnego.
8.1 Wymiary pola
Każde pole ma obszar treści (np. tekst, obraz itp.) otoczony opcjonalnymi obszarami dopełnienia, obramowania i marginesu. Rozmiar każdego z tych obszarów określa się za pomocą własności zdefiniowanych poniżej. Na poniższym rysunku przedstawiono wzajemny układ tych obszarów oraz terminologię używaną do nazywania fragmentów marginesów, obramowania i dopełnienia:
Margines, obramowanie i dopełnienie można podzielić na cztery segmenty: górny, prawy, dolny i lewy (np. na rysunku "ML" oznacza margines lewy, "DP" — dopełnienie prawe, "KG" — krawędź górna obramowania itd.).
Obrzeże każdego z tych czterech obszarów (treści, dopełnienia, obramowania i marginesu) nazywane jest "krawędzią", a więc każde pole ma cztery krawędzie:
- krawędź treści lub krawędź wewnętrzną
- Krawędzie treści otaczają prostokąt o rozmiarach wyznaczonych przez szerokość i wysokość pola, które często zależą od treści prezentowanej elementu. Cztery krawędzie treści definiują pole treści pola.
- krawędź dopełnienia
- Krawędzie dopełnienia otaczają dopełnienie pola. Jeśli dopełnienie ma szerokość 0, jego krawędź pokrywa się z krawędzią treści. Cztery krawędzie dopełnienia definiują pole dopełnienia pola.
- krawędź obramowania
- Krawędź obramowania otacza obramowanie pola. Jeśli obramowanie ma szerokość 0, jego krawędź pokrywa się z krawędzią dopełnienia. Cztery krawędzie obramowania definiują pole obramowania pola.
- krawędź marginesu lub krawędź zewnętrzną
- Krawędzie marginesu otaczają margines pola. Jeśli margines ma szerokość 0, jego krawędź pokrywa się z krawędzią obramowania. Cztery krawędzie marginesu definiują pole marginesu pola.
Każdą krawędź można podzielić na segment górny, prawy, dolny i lewy.
Wymiary obszaru treści pola — szerokość treści i wysokość treści — zależą od kilku czynników: czy element, który wygenerował pole ma ustawioną własność ‚width’ lub ‚height’, czy pole to zawiera tekst lub inne pola, czy pole jest tabelą itd. Szerokość i wysokość pól zostały opisane w rozdziale poświęconym szczegółom dotyczącym modelu formatowania wizualnego.
Styl tła treści oraz obszary dopełnienia i obramowania pola są określone przez własność ‚background’ elementu generującego. Tło marginesów jest zawsze przezroczyste.
8.2 Przykład marginesów, dopełnienia i obramowania
Poniższy przykład ilustruje zależności między marginesem, dopełnieniem i obramowaniem. Kod przykładowego dokumentu HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Przykład marginesów, dopełnienia i obramowania</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* Obramowanie nie zostało ustawione */
}
LI {
color: white; /* Tekst ma kolor biały */
background: blue; /* Treść i dopełnienie będą niebieskie */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Dopełnienie prawe zostało ustawione na 0px */
list-style: none /* Żadnych glifów przed elementem listy */
/* Obramowanie nie zostało ustawione */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* Ustawia szerokość obramowania z wszystkich stron */
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>Pierwszy element listy
<LI class="withborder">Drugi element listy,
nieco dłuższy, aby zademonstrować zawijanie.
</UL>
</BODY>
</HTML>
W drzewie tego dokumentu (między innymi) znajduje się element UL mający dwoje dzieci LI.
Pierwszy z poniższych rysunków przedstawia możliwy wynik powyższego kodu. Na drugim natomiast pokazano relacje między marginesami, dopełnieniem i obramowaniem elementów UL i elementów LI będących ich dziećmi. (Obrazu nie należy skalować.)
Uwagi:
- Szerokość treści każdego pola LI jest obliczana od góry do dołu; blok zawierający każdego pola LI jest ustalany przez element UL.
- Wysokość pola marginesu każdego pola LI zależy od wysokości treści powiększonej o dolne i górne dopełnienie, obramowanie i marginesy. Należy zauważyć, że pionowe marginesy między polami LI zostały scalone.
- Szerokość prawego dopełnienia pól LI została ustawiona na 0 (własność ‚padding’). Efekt tego jest widoczny na drugiej ilustracji.
- Marginesy pól LI są przezroczyste — marginesy są zawsze przezroczyste — dzięki czemu prześwituje przez nie żółty kolor tła dopełnienia i obszaru treści elementu UL.
- Drugi element LI ma ustawione obramowanie przerywane (własność ‚border-style’).
8.3 Własności marginesów: ‚margin-top’, ‚margin-right’, ‚margin-bottom’, ‚margin-left’ oraz ‚margin’
Własności marginesu określają szerokość obszaru marginesu pola. Własność zbiorcza ‚margin’ służy do ustawiania marginesów z wszystkich czterech stron, podczas gdy pozostałe własności marginesów służą tylko do definiowania marginesu z jednej strony. Własności te mają zastosowanie do wszystkich elementów, ale marginesy pionowe nie działają na niezastępowane elementy śródliniowe.
Własności zdefiniowane w tym podrozdziale odnoszą się do typu wartości <margin-width>, który może przyjąć jedną z następujących wartości:
- <length>
- Określa stałą szerokość.
- <percentage>
- Procent jest obliczany na podstawie szerokości bloku zawierającego generowane pole.
Należy zauważyć, że dotyczy to zarówno własności ‚margin-top’ jak i ‚margin-bottom’. Jeśli szerokość bloku zawierającego zależy od tego elementu, w takiej sytuacji zgodnie z CSS 2.1 wynik jest nieokreślony. - auto
- Zobacz podrozdział o obliczaniu szerokości i marginesów.
Wartości określające szerokość marginesów mogą być ujemne, ale mogą istnieć pewne ograniczenia implementacyjne.
- ‚margin-top’, ‚margin-bottom’
-
Wartość: <margin-width> | inherit Wartość domyślna: 0 Zastosowanie: wszystkie elementy z wyjątkiem elementów z ustawionym typem wyświetlania tabelarycznego innym niż ‚table-caption’ lub ‚inline-table’ Dziedziczenie: nie Wartości procentowe: odnoszą się do szerokości bloku zawierającego Media: wizualne Wartość obliczana: procent zgodnie z podaną wartością lub jednostka bezwzględna
Te własności nie działają na niezastępowane elementy śródliniowe.
- ‚margin-right’, ‚margin-left’
-
Wartość: <margin-width> | inherit Wartość domyślna: 0 Zastosowanie: wszystkie elementy z wyjątkiem elementów z ustawionym typem wyświetlania tabelarycznego innym niż ‚table-caption’ lub ‚inline-table’ Dziedziczenie: nie Wartości procentowe: odnoszą się do szerokości bloku zawierającego Media: wizualne Wartość obliczana: procent zgodnie z podaną wartością lub jednostka bezwzględna
Te własności ustawiają górny, prawy, dolny i lewy margines pola.
h1 { margin-top: 2em }
- ‚margin’
-
Wartość: <margin-width>{1,4} | inherit Wartość domyślna: zobacz indywidualne własności Zastosowanie: wszystkie elementy z wyjątkiem elementów z ustawionym typem wyświetlania tabelarycznego innym niż ‚table-caption’ lub ‚inline-table’ Dziedziczenie: nie Wartości procentowe: odnoszą się do szerokości bloku zawierającego Media: wizualne Wartość obliczana: zobacz indywidualne własności
‚margin’ to własność zbiorcza służąca do ustawiania własności: ‚margin-top’, ‚margin-right’, ‚margin-bottom’ oraz ‚margin-left’ w jednym miejscu.
Jeśli jest tylko jedna wartość, dotyczy ona wszystkich stron. Jeśli są dwie wartości, pierwsza określa wartości górną i dolną, a druga — prawą i lewą. Jeśli są trzy wartości, pierwsza określa wartość górną, druga — lewą i prawą, a trzecia — dolną. Jeśli są cztery wartości, ustawiają one odpowiednio wartości: górną, prawą, dolną i lewą.
body { margin: 2em } /* Wszystkie marginesy zostały ustawione na 2em */
body { margin: 1em 2em } /* góra i dół = 1em, prawa i lewa = 2em */
body { margin: 1em 2em 3em } /* góra=1em, prawa=2em, dół=3em, lewa=2em */
Ostatnia reguła w powyższym przykładzie jest równoważna z poniższą:
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* Wartość skopiowana z przeciwnej strony (prawej) */
}
8.3.1 Scalanie marginesów
W tej specyfikacji pojęcie scalanie marginesów oznacza, że przylegające marginesy (nie oddzielone żadną pustą treścią, dopełnieniem, obramowaniem lub odstępem izolującym) dwóch lub większej liczby pól (które mogą znajdować się obok siebie lub jedno wewnątrz drugiego) łączą się, aby utworzyć pojedynczy margines.
W CSS 2.1, marginesy poziome nie są scalane.
Marginesy pionowe mogą zostać scalone między określonymi polami:
- Dwa (lub więcej) przylegające marginesy pionowe pól blokowych w układzie normalnym są scalane. Powstały z tego margines ma szerokość równą szerokości najszerszego ze scalonych marginesów. W przypadku marginesów ujemnych wartość bezwzględna największego z przylegających marginesów odejmowana jest od największej wartości bezwzględnej dodatnich marginesów przylegających. Jeśli nie ma marginesów dodatnich, największa wartość bezwzględna z ujemnych marginesów przylegających jest odejmowana od zera. Uwaga: pola przylegające mogą zostać wygenerowane przez elementy nie będące rodzeństwem lub w relacji rodzic-przodek.
- Marginesy pionowe znajdujące się między polem pływającym a jakimkolwiek innym polem nie są scalane (dotyczy to także elementów pływających i ich dzieci należących do normalnego układu).
- Marginesy pionowe elementów stanowiących nowy kontekst formatowania blokowego (np. elementy pływające i elementy z własnością ‚overflow’ ustawioną na inną wartość niż ‚visible’) nie scalają się z marginesami swoich dzieci należących do normalnego układu.
- Marginesy pól pozycjonowanych bezwzględnie nie są scalane (nawet z marginesami swoich dzieci należących do normalnego układu).
- Marginesy bloków typu inline-block nie są scalane (nawet z marginesami swoich dzieci należących do normalnego układu).
-
Jeśli górny i dolny margines pola przylegają do siebie, inne marginesy mogą zostać poprzez nie scalane. Wówczas położenie tego elementu zależy od jego relacji z innymi elementami, których marginesy są scalane.
- Jeśli marginesy elementu zostaną scalone z marginesem górnym jego rodzica, krawędź górna obramowania tego pola staje się tym samym, co krawędź rodzica.
- W przeciwnym przypadku rodzic elementu nie bierze udziału w scalaniu lub udział bierze tylko jego dolny margines. Położenie górnej krawędzi obramowania tego elementu jest takie samo, jak gdyby element ten miał niezerowe obramowanie dolne.
Margines górny elementu, na rzecz którego została zastosowana własność ‚clear’ nigdy nie jest scalany z marginesem dolnym bloku jego rodzica.
Należy zauważyć, że położenie elementów, przez które nastąpiło scalenie nie ma wpływu na położenie innych elementów, z których marginesami się scaliły. Jest wymagane tylko położenie krawędzi górnego obramowania do rozmieszczenia potomków tych elementów.
- Marginesy pola elementu głównego nie są scalane.
Margines dolny blokowego elementu w normalnym układzie zawsze przylega do marginesu górnego znajdującego się za nim elementu brata w normalnym układzie, pod warunkiem, że element ten nie ma odstępu izolującego.
Margines górny znajdującego się w układzie elementu blokowego przylega do marginesu górnego jego pierwszego blokowego elementu dziecka znajdującego się w układzie, jeśli element ten nie ma górnego obramowania i dopełnienia oraz element dziecka nie ma odstępu izolującego.
Margines dolnym znajdującego się w układzie elementu blokowego o wysokości ‚auto’ przylega do marginesu dolnego swojego ostatniego elementu dziecka znajdującego się w układzie, jeśli element ten nie ma dopełnienia i obramowania dolnego.
Marginesy własne elementu przylegają do siebie, jeśli jego własność ‚min-height’ ma wartość zero, nie ma on górnego ani dolnego obramowania ani dopełnienia, ma własność ‚height’ ustawioną na 0 lub ‚auto’, nie zawiera pola śródliniowego oraz marginesy wszystkich jego dzieci należących do układu są przylegające.
Jeśli marginesy własne elementu zostaną scalone i na rzecz tego elementu został zastosowany odstęp izolujący, jego margines górny scala się z marginesami kolejnych elementów braci, ale tak powstały margines nie jest scalany z marginesem dolnym bloku rodzica.
W scalaniu wykorzystywana jest wartość używana własności ‚padding’, ‚margin’ i ‚border’ (tzn. wartość po obliczeniu wszystkich procentów). Margines scalony jest obliczany z wartości używanych różnych marginesów.
Przykład ilustrujący scalanie marginesów znajduje się w podrozdziale Przykład marginesów, dopełnienia i obramowania.
8.4 Własności dopełnienia: ‚padding-top’, ‚padding-right’, ‚padding-bottom’, ‚padding-left’ oraz ‚padding’
Własności dopełnienia określają szerokość obszaru dopełnienia pola. Własność zbiorcza ‚padding’ służy do ustawiania dopełnienia z wszystkich czterech stron, podczas gdy pozostałe własności dopełnienia służą tylko do definiowania dopełnienia z jednej strony.
Własności zdefiniowane w tym podrozdziale odnoszą się do typu wartości <padding-width>, który może przyjąć jedną z następujących wartości:
- <length>
- Określa stałą szerokość.
- <percentage>
- Procent jest obliczany na podstawie szerokości bloku zawierającego generowane pole. Dotyczy to także własności ‚padding-top’ i ‚padding-bottom’. Jeśli szerokość bloku zawierającego zależy od tego elementu, w takiej sytuacji zgodnie z CSS 2.1 wynik jest nieokreślony.
W przeciwieństwie do marginesów, wartości dopełnienia nie mogą być ujemne. Podobnie jak w przypadku marginesów, wartości procentowe własności dopełnienia odnoszą się do szerokości bloku zawierającego generowane pole.
- ‚padding-top’, ‚padding-right’, ‚padding-bottom’, ‚padding-left’
-
Wartość: <padding-width> | inherit Wartość domyślna: 0 Zastosowanie: wszystkie elementy z wyjątkiem table-row-group, table-header-group, table-footer-group, table-row, table-column-group oraz table-column Dziedziczenie: nie Wartości procentowe: odnoszą się do szerokości bloku zawierającego Media: wizualne Wartość obliczana: procent zgodnie z podaną wartością lub jednostka bezwzględna
Te własności ustawiają górne, prawe, dolne i lewe dopełnienie pola.
blockquote { padding-top: 0.3em }
- ‚padding’
-
Wartość: <padding-width>{1,4} | inherit Wartość domyślna: zobacz indywidualne własności Zastosowanie: wszystkie elementy z wyjątkiem table-row-group, table-header-group, table-footer-group, table-row, table-column-group oraz table-column Dziedziczenie: nie Wartości procentowe: odnoszą się do szerokości bloku zawierającego Media: wizualne Wartość obliczana: zobacz indywidualne własności
‚padding’ to własność zbiorcza służąca do ustawiania własności: ‚padding-top’, ‚padding-right’, ‚padding-bottom’ oraz ‚padding-left’ w jednym miejscu.
Jeśli jest tylko jedna wartość, dotyczy ona wszystkich stron. Jeśli są dwie wartości, pierwsza określa wartości górną i dolną, a druga — prawą i lewą. Jeśli są trzy wartości, pierwsza określa wartość górną, druga — lewą i prawą, a trzecia — dolną. Jeśli są cztery wartości, ustawiają one odpowiednio wartości: górną, prawą, dolną i lewą.
Obraz lub kolor powierzchni obszaru dopełnienia określany jest za pomocą własności ‚background’:
h1 {
background: white;
padding: 1em 2em;
}
Powyższy przykład ustawia szerokość dopełnienia pionowego (‚padding-top’ i ‚padding-bottom’) na ’1em’ i szerokość dopełnienia poziomego (‚padding-right’ i ‚padding-left’) na ’2em’. Jednostka ‚em’ jest zależna od rozmiaru pisma elementu: Wartość ’1em’ jest równa bieżącemu rozmiarowi pisma.
8.5 Własności obramowania
Własności obramowania służą do ustawiania szerokości, koloru i stylu obszaru obramowania pola. Własności te mają zastosowanie do wszystkich elementów.
Uwaga: aplikacje klienckie mogą prezentować obramowanie niektórych elementów interfejsu użytkownika (np. przycisków, menu itp.) w inny sposób niż "zwykłych" elementów. Dotyczy to przede wszystkim elementów języka HTML.
8.5.1 Szerokość obramowania: ‚border-top-width’, ‚border-right-width’, ‚border-bottom-width’, ‚border-left-width’ oraz ‚border-width’
Własności definiujące szerokość obramowania służą do określania szerokości obszaru obramowania. Własności zdefiniowane w tym podrozdziale odnoszą się do typu wartości <border-width>, który może przyjąć jedną z następujących wartości:
- thin
- Cienkie obramowanie.
- medium
- Obramowanie średniej grubości.
- thick
- Grube obramowanie.
- <length>
- Grubość obramowania jest określana za pomocą konkretnej wartości, która nie może być ujemna.
Sposób interpretowania pierwszych trzech wartości zależy od aplikacji klienckiej. Zawsze jednak muszą być spełnione następujące warunki:
‚thin’ <=’medium’ <= ‚thick’.
Ponadto szerokości te muszą być takie same w każdym miejscu dokumentu.
- ‚border-top-width’, ‚border-right-width’, ‚border-bottom-width’, ‚border-left-width’
-
Wartość: <border-width> | inherit Wartość domyślna: medium Zastosowanie: wszystkie elementy Dziedziczenie: nie Wartości procentowe: nie dotyczy Media: wizualne Wartość obliczana: wartość bezwzględna; ’0′, jeśli styl obramowania zostanie ustawiony na ‚none’ lub ‚hidden’
Te własności ustawiają górną, prawą, dolną i lewą część obramowania pola.
- ‚border-width’
-
Wartość: <border-width>{1,4} | inherit Wartość domyślna: zobacz indywidualne własności Zastosowanie: wszystkie elementy Dziedziczenie: nie Wartości procentowe: nie dotyczy Media: wizualne Wartość obliczana: zobacz indywidualne własności
Jest to własność zbiorcza służąca do ustawiania własności ‚border-top-width’, ‚border-right-width’, ‚border-bottom-width’ oraz ‚border-left-width’ w jednym miejscu.
Jeśli jest tylko jedna wartość, dotyczy ona wszystkich stron. Jeśli są dwie wartości, pierwsza określa wartości górną i dolną, a druga — prawą i lewą. Jeśli są trzy wartości, pierwsza określa wartość górną, druga — lewą i prawą, a trzecia — dolną. Jeśli są cztery wartości, ustawiają one odpowiednio wartości: górną, prawą, dolną i lewą.
W poszczególnych komentarzach do poniższego kodu wpisano ostateczne wartości szerokości obramowania:
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 thick */
8.5.2 Kolor obramowania: ‚border-top-color’, ‚border-right-color’, ‚border-bottom-color’, ‚border-left-color’ oraz ‚border-color’
Własności koloru obramowania służą do określania koloru obramowania pola.
- ‚border-top-color’, ‚border-right-color’, ‚border-bottom-color’, ‚border-left-color’
-
Wartość: <color> | transparent | inherit Wartość domyślna: wartość własności ‚color’ Zastosowanie: wszystkie elementy Dziedziczenie: nie Wartości procentowe: nie dotyczy Media: wizualne Wartość obliczana: gdy jest pobierana z własności ‚color’, jest to obliczona wartość tej własności; w pozostałych przypadkach wartość jest określona bezpośrednio
- ‚border-color’
-
Wartość: [ <color> | transparent ]{1,4} | inherit Wartość domyślna: zobacz indywidualne własności Zastosowanie: wszystkie elementy Dziedziczenie: nie Wartości procentowe: nie dotyczy Media: wizualne Wartość obliczana: zobacz indywidualne własności
Własność ‚border-color’ służy do ustawiania koloru wszystkich czterech krawędzi obramowania. Opis wartości:
- <color>
- Wartość określająca kolor.
- transparent
- Obramowanie jest przezroczyste (mimo to może mieć określoną szerokość).
Własność ‚border-color’ może przyjmować od jednej do czterech wartości. Przypisywanie tych wartości poszczególnym stronom odbywa się wg takich sam zasad, jak w przypadku własności ‚border-width’.
Jeśli kolor obramowania elementu nie zostanie ustawiony za pomocą służącej do tego własności, aplikacja kliencka musi użyć wartości własności ‚color’ tego elementu jako wartości obliczonej koloru obramowania.
Poniższa reguła ustawia obramowanie jako ciągłą czarną linię.
p {
color: black;
background: white;
border: solid;
}
8.5.3 Styl obramowania: ‚border-top-style’, ‚border-right-style’, ‚border-bottom-style’, ‚border-left-style’ oraz ‚border-style’
Własności stylu obramowania służą do określania stylu linii obramowania pola (ciągła, podwójna, przerywana itp.). Własności zdefiniowane w tym podrozdziale odnoszą się do typu wartości <border-style>, który może przyjąć jedną z następujących wartości:
- none
- Brak obramowania — wartość obliczona szerokości obramowania wynosi zero.
- hidden
- To samo, co ‚none’ z wyjątkiem przypadku rozstrzygania konfliktów obramowań w elementach tabeli.
- dotted
- Obramowanie składa się z kropek.
- dashed
- Obramowanie składa się z kresek.
- solid
- Obramowanie jest linią ciągłą.
- double
- Obramowanie składa się z dwóch linii ciągłych. Wartością własności ‚border-width’ jest suma tych dwóch linii i dzielącej je przestrzeni.
- groove
- Obramowanie wygląda, jakby było wyrzeźbione w kanwie.
- ridge
- Przeciwieństwo ‚groove’. Obramowanie wygląda, jakby było wypukłe.
- inset
- Obramowanie sprawia, że pole wygląda jakby było wbudowane w kanwę.
- outset
- Przeciwieństwo ‚inset’. Obramowanie sprawia, że pole wygląda jakby wychodziło z kanwy.
Wszystkie rodzaje obramowania są rysowane na tle pola. Kolor obramowań typu ‚groove’, ‚ridge’, ‚inset’ oraz ‚outset’ zależy od własności koloru obramowania elementu, chociaż aplikacje klienckie mogą stosować własne algorytmy do obliczania tego koloru. Jeśli np. własność ‚border-color’ ma wartość ‚silver’, aplikacja kliencka może zastosować gradient przechodzący od białego do szarego, aby wytworzyć wrażenie nachylenia.
- ‚border-top-style’, ‚border-right-style’, ‚border-bottom-style’, ‚border-left-style’
-
Wartość: <border-style> | inherit Wartość domyślna: none Zastosowanie: wszystkie elementy Dziedziczenie: nie Wartości procentowe: nie dotyczy Media: wizualne Wartość obliczana: jak określono
- ‚border-style’
-
Wartość: <border-style>{1,4} | inherit Wartość domyślna: zobacz indywidualne własności Zastosowanie: wszystkie elementy Dziedziczenie: nie Wartości procentowe: nie dotyczy Media: wizualne Wartość obliczana: zobacz indywidualne własności
Własność ‚border-style’ służy do ustawiania stylu wszystkich czterech krawędzi obramowania. Może przyjmować od jednej do czterech wartości. Przypisywanie tych wartości poszczególnym stronom odbywa się wg takich samych zasad, jak w przypadku własności ‚border-width’.
#xy34 { border-style: solid dotted }
Powyższa reguła ustawia poziome krawędzie obramowania na linie ciągłe, a pionowe — na linie przerywane.
Ponieważ wartość początkowa stylu obramowania to ‚none’, jeśli obramowanie nie zostanie ustawione bezpośrednio, nie będzie go widać.
8.5.4 Własności zbiorcze obramowania: ‚border-top’, ‚border-right’, ‚border-bottom’, ‚border-left’ oraz ‚border’
- ‚border-top’, ‚border-right’, ‚border-bottom’, ‚border-left’
-
Wartość: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit Wartość domyślna: zobacz indywidualne własności Zastosowanie: wszystkie elementy Dziedziczenie: nie Wartości procentowe: nie dotyczy Media: wizualne Wartość obliczana: zobacz indywidualne własności
Jest to własność zbiorcza służąca do ustawiania szerokości, stylu i koloru wszystkich czterech krawędzi obramowania pola.
h1 { border-bottom: thick solid red }
Powyższa reguła ustawia szerokość, styl i kolor dolnej części obramowania elementu H1. Wartości pominięte zostają ustawione na wartości początkowe. Poniższa reguła nie ustawia koloru obramowania, przez co obramowanie będzie miało kolor określony we własności ‚color’.
H1 { border-bottom: thick solid }
- ‚border’
-
Wartość: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit Wartość domyślna: zobacz indywidualne własności Zastosowanie: wszystkie elementy Dziedziczenie: nie Wartości procentowe: nie dotyczy Media: wizualne Wartość obliczana: zobacz indywidualne własności
Własność ‚border’ to własność biorcza służąca do ustawiania jednakowych wartości szerokości, koloru i stylu dla wszystkich części obramowania pola. W przeciwieństwie do własności ‚margin’ i ‚padding’, za pomocą własności ‚border’ nie można ustawić różnych wartości dla każdej części obramowania. W tym celu należy użyć odpowiednich innych własności obramowania.
Pierwsza z poniższych reguł jest równoważna drugiej:
p { border: solid red }
p {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Ze względu na fakt, że zakresy użycia niektórych tych własności częściowo się pokrywają, znaczenie ma kolejność ich występowania w arkuszu stylów.
Rozważmy poniższy przykład:
blockquote {
border: solid red;
border-left: double;
color: black;
}
Lewa krawędź obramowania będzie miała kolor czarny, a pozostałe — czerwony. Odpowiada za to własność ‚border-left’ ustawiająca szerokość, styl i kolor. Ponieważ własność ‚border-left’ nie określa koloru obramowania, wartość ta zostanie pobrana z własności ‚color’. Fakt, że własność ‚color’ została ustawiona później niż własność ‚border-left’ nie ma znaczenia.
8.6 Model polowy dla elementów śródliniowych w kontekście dwukierunkowym
W każdym polu liniowym aplikacja kliencka musi znaleźć pola śródliniowe wygenerowane dla wszystkich elementów i zwizualizować ich marginesy, obramowania oraz dopełnienie w kolejności wizualnej (nie logicznej).
Jeśli własność ‚direction’ elementu jest ustawiona na ‚ltr’, pierwsze z lewej wygenerowane pole pierwszego pola liniowego, w którym ten element się znajduje ma lewy margines, lewą krawędź obramowania i lewe dopełnienie, a ostatni z prawej — ma prawe dopełnienie, prawą krawędź obramowania i prawy margines.
Jeśli własność ‚direction’ elementu jest ustawiona na ‚rtl’, ostatnie z prawej wygenerowane pole pierwszego pola liniowego, w którym ten element się znajduje ma prawe dopełnienie, prawą krawędź obramowania i prawy margines, a pierwszy z lewej — ma lewy margines, lewą krawędź obramowania i lewe dopełnienie.
Wysyłam...
Dodaj komentarz