Lekcja 11: Obramowania
Obramowania moża używać w wielu przypadkach, na przykład dekorując element lub podkreślając oddzielenie dwóch rzeczy. CSS daje ci nieskończoną możliwość wykorzystania obramowań na twojej stronie.
Szerokość obramowań [border-width]
Szerokość obramować definiujemy używając właściwości border-width,
która może otrzymać wartości thin, medium oraz thick, lub wartość numeryczną, określoną w pikselach. Poniższy rysunek przedstawia system:
Kolor obramowań [border-color]
Właściwość border-color definiuje jakiego koloru ma być obramowanie. Wartości dopuszczalne we właściwości to np: "#123456",
"rgb(123,123,123)" lub "yellow" .
Typy obramowań [border-style]
Istnieje wiele typów obramowań do wyboru. Poniżej przedstawiam 8 różnych typów obramowań i ich interpretacje w Internet Explorer 5.5. Wszystkie przykłady wykorzystują kolor złoty "gold"oraz grubość "thick" ale oczywiście można korzystać z innego koloru lub grubości obramowania.
Jeżeli nie chcesz wyświetlić żadnego obramowania użyj none lub hidden.
Przykłady definicji obramowań
Te trzy wyżej opisane właściwości można połączyć przez jeden element i produkować najróżniejsze obramowania. Aby zilustrować to przykładem, popatrzmy na dokument gdzie zdefiniowane są różne obramowania dla elementów <h1>, <h2>, <ul> and <p>. Rezultat może nie być zaskakujący ale przedstawia jak wiele możliwości jest do wykorzystania:
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
Możliwe jest ustawienie konkretnych właściwości oddzielnie dla górnej, dolnej, prawej oraz lewej strony obramowania. Kolejny przykład pokazuje jak skorzystać z tej możliwości:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Kompilacje [border]
Tak jak wiele innych właściwości, także ta może złączyć kilka cech związanych z obramowaniami w jedną właściwość. Popatrzmy na przykład:
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
Może być skompilowany w :
p {
border: 1px solid blue;
}
Podsumowanie
W tej lekcji nauczyłeś się o nieskończonych możliwościach jakie daje ci CSS w dziedzinie używania obramowań a stronie.
Następna lekcja wprowadzi cię w definiowanie rozmiarów w modelu blokowym - wysokości i szerokości.
