Artykuł
06/03/2011

Kurs CSS - Formatowanie wyglądu strony: kolory i marginesy

Autor: Karol Stoiński

Opublikowano: 2011-05-24

Dobra strona internetowa to nie tylko dobra merytorycznie treść. Wielu internautów zwraca uwagę też na to, jak ta treść jest im przedstawiona. Dlatego warto przyjrzeć się temu, co w kwestii poprawiania wyglądu naszej strony oferuje nam CSS.

W tym artykule zaprezentujemy sposoby urozmaicenia strony ramkami. Przyjrzymy się także, jak reprezentowane są kolory w CSS. Wiedza ta z pewnością przyda się niejednokrotnie.

Po przeczytaniu tego artykułu będziesz:

wiedział, jak używać ramek (ang. border),
znał sposoby zapisu kolorów w arkuszach stylów,
potrafił zmieniać właściwości poszczególnych elementów ramek.

Kolory

Na wstępie przyjrzyjmy się, w jaki sposób możemy zapisywać kolory w arkuszach stylów. Jest to ważne zagadnienie, gdyż często będziemy korzystać z możliwości zmiany koloru poszczególnych elementów, jakie występują na naszej stronie.

Warto wiedzieć, że istnieją aż trzy możliwe sposoby zapisu kolorów. Pierwszym z nich jest podanie ich angielskiej nazwy, np. blue (niebieski), red (czerwony) itd.

Drugim jest zapis heksadecymalny, poprzedzony znakiem #. Składa on się z trzech połączonych ze sobą liczb szesnastkowych, które reprezentują poszczególne składowe koloru: czerwony, zielony, niebieski. Przykładem takiego zapisu jest #0000FF, odpowiadający kolorowi niebieskiemu.

Obszerną listę zawierającą angielskie nazwy kolorów, które rozróżnia CSS, wraz z ich heksadecymalnymi odpowiednikami, znajdziemy pod adresem http://www.w3schools.com/css/css_colornames.asp.

Ostatnim sposobem zapisu koloru jest stosowanie zapisu RGB. Polega on na wpisaniu słowa „RGB” i podaniu w nawiasie za nim trzech liczb z zakresu 0-255, odpowiadającym kolorom składowym: czerwonemu, zielonemu i niebieskiemu. Przykładowo kolor czerwony w tym zapisie to rgb(255,0,0).

Ramki

Wstęp

Każdy element naszej strony możemy wyposażyć w obramowanie. Ułatwia to czytelnikom chociażby rozróżnienie bloków tekstu. Aby tego dokonać, musimy użyć atrybutów CSS z rodziny border. Zapoznamy się teraz z tym, co charakteryzuje ramki i jak możemy modyfikować ich wygląd.

Zacznijmy od przykładu i przyjrzyjmy się poniższemu stylowi:

#element {
border-width: 1px;
border-style: solid;
}

Definiuje on obramowanie wokół bloku o id „element”, którego szerokość (border-width) wynosi jeden piksel (1px), a rodzajem obramowania (border-style) będzie linia ciągła (solid).

Border-style

Na szczęście CSS nie ogranicza nas do prostych, czarnych ramek. Ich właściwości możemy edytować na wiele sposobów. Jedną z najciekawszych jest ta reprezentowana przez argument border-style, który pozwala na zmianę wyglądu obramowania. Poniżej przykłady:

Można by pomyśleć, że używanie border-style: none jest bezcelowe. Jednak warto zauważyć, że czasem możemy chcieć pozbyć się ramki ze stylu, który dziedziczymy. Wtedy właśnie użycie atrybutu border-style: none jest jak najbardziej uzasadnione.

Border-width

Rodzaj obramowania to nie jedyna rzecz, jaką możemy edytować. Kolejnym argumentem powiązanym z ramkami jest border-width. Jest on bardzo prosty – definiuje wielkość ramki. i Wyrażona może być ona w pikselach (px) bądź za pomocą jednego z trzech słów kluczowych, tj. thin (cienki), medium (średni) oraz thick (gruby).

Przykłady:

Border-color

Kolejną właściwością ramek, którą możemy edytować, jest ich kolor. Atrybutem CSS odpowiadającym za kolor jest border-color. Kolor możemy podać jako jego angielską nazwę, odpowiedni zapis heksadecymalny bądź RGB.

Przykłady:

Edycja każdej ze stron obramowania

Każdą ze stron obramowania możemy edytować oddzielnie, tj. wpływać na jej atrybuty niezależnie od pozostałych stron. Aby tego dokonać, wystarczy przy wybranym przez nas atrybucie po słówku border dodać angielską nazwę strony. Do dyspozycji mamy oczywiście cztery wartości: top (góra), bottom (dół), left (lewo), right (prawo). Na przykład, chcąc zmienić kolor górnej części obramowania, korzystamy z atrybutu border-top-color.

Zapis skrótowy

Zapis każdej z właściwości ramki w oddzielnych atrybutach może i jest przejrzysty, gdyż dokładnie opisuje co dany atrybut robi. Dzięki czemu nawet laik znający tylko podstawy języka angielskiego będzie w stanie zrozumieć czego dotyczy dany styl. Niestety, taki zapis zajmuje dużo miejsca, a co za tym idzie – wymaga więcej wysiłku przy pisaniu.

Twórcy języka CSS dodali do niego także skrótową postać zapisu atrybutów ramek, która przyspiesza proces pisania oraz nie wymaga tworzenia bardzo długich stylów. Chcąc zdefiniować ramkę, która miałaby 5px szerokości, była ramką podwójną koloru niebieskiego, nie musimy wcale używać atrybutów border-width itd. Spójrzmy na poniższy styl:

#element {
border: 5px doubleblue;
}

Atrybuty podajemy w kolejności: szerokość, rodzaj, kolor. Wynik zastosowania tego stylu prezentuje się następująco:

Skrótowy zapis dotyczy także edycji każdej ze stron z osobna. Przykład z podpunktu „Edycja każdej ze stron obramowania” moglibyśmy zapisać jako:

#element {
border-top: 1px solid red;
border-right: thindottedgreen;
border-bottom: medium dashed #3300AA;
border-left: thickdoublergb(255,235,0);
}

Podsumowanie

Dzięki atrybutom z rodziny border możemy tworzyć ciekawie wyglądające i urozmaicone obramowania. Możemy zmieniać ich kolory, style oraz grubość.

W poniższej tabeli zebrano wszystkie atrybuty CSS odpowiedzialne za wyświetlanie ramek:

Atrybut	Opis
Border	Zapis skrótowy dotyczący całego obramowania.
Border-bottom	Zapis skrótowy odnoszący się do dolnej części obramowania.
Border-bottom-color	Kolor dolnej części obramowania.
Border-bottom-style	Styl dolnej części obramowania.
Border-bottom-width	Grubość dolnej części obramowania.
Border-color	Kolor całego obramowania.
Border-left	Zapis skrótowy odnoszący się do lewej części obramowania.
Border-left-color	Kolor lewej części obramowania.
Border-left-style	Styl lewej części obramowania.
Border-left-width	Grubość lewej części obramowania.
Border-right	Zapis skrótowy odnoszący się do prawej części obramowania.
Border-right-color	Kolor prawej części obramowania.
Border-right-style	Styl prawej części obramowania.
Border-right-width	Grubość prawej części obramowania.
Border-style	Styl całego obramowania.
Border-top	Zapis skrótowy dotyczący górnej części obramowania.
Border-top-color	Kolor prawej części obramowania.
Border-top-style	Styl prawej części obramowania.
Border-top-width	Grubość prawej części obramowania.
Border-width	Grubość całego obramowania.

Na zakończenie

Z tego artykułu dowiedzieliśmy się, jak w kaskadowych arkuszach stylów zapisywane są kolory. Poznaliśmy także sposób dodawania ramki do elementów oraz jakie właściwości mają ramki. Nauczyliśmy się jak je edytować, aby uzyskać ciekawy efekt.

Udostępnij za pośrednictwem