Programowanie

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.

    * border-width
    * border-color
    * border-style
    * Przykłady definicji obramowań
    * border

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:

Przykłady szerokości obramowań
Kolor obramowań [border-color]

Kolory

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.

Różne typy obramowań
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;
}

    * Pokaż przykład

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;
}

    * Pokaż przykład

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.