Właściwości koloru i tła

W jakich jednostkach miary w których wyraża się kolory powiedzieliśmy wcześniej. Teraz uzupełnimy te wiadomości o kilka elementów oraz powiemy o tle, które w CSS pełni bardzo ważną rolę.

Właściwość kolor - color

Kilka uwag na temat koloru:

Atrybut color definiuje kolor czcionki. Zapamiętaj, że nie font-color ani nie text-color, tylko po prostu color.
Jest dziedziczny.
Posiada wartość inherit.
Brak koloru - przeźroczystość, to color:transparent;.

Wielokrotnie w ćwiczeniach stosowaliśmy i będziemy stosować ten atrybut, dlatego nie będzie ćwiczenia specjalnie poświęconego temu zagadnieniu.

Właściwość tło - background

Tło wypełnia w elemencie zawartość (content) wraz z marginesami wewnętrznymi (padding). Tło nie jest dziedziczone. Stosujemy:

Wypełnienie kolorem na przykład background-color:green; przy czym domyślnie tło jest przeźroczyste background-color:transparent;.
Wypełnienie obrazkiem background-image:url('ścieżka do pliku obrazka ujęta w apostrofy');, przy czym w tym przypadku ważne są dodatkowe właściwości sterujące wyświetlaniem obrazka:
- Powtarzanie tła - background-repeat może przyjmować wartości:
  - powtarzaj aż do całkowitego wypełnienia - background-repeat:repeat; (wartość domyślna),
  - nie potarzaj, wyświetl pojedynczy obrazek - background-repeat:no-repeat;,
  - powtarzaj tylko w poziomie - background-repeat:repeat-x;,
  - powtarzaj tylko w pionie - background-repeat:repeat-y;,
  - przyjmij tę właściwość od rodzica - background-repeat:inherit.;
- Pozycja tła - background-position: x y (domyślnie 0 0), mówi w którym miejscu wyświetlony będzie pierwszy obrazek; x y są współrzędnymi lewego górnego rogu obrazka podanymi w jednostkach długości. Możliwe jest również określenie położenia obrazka poprzez podanie jedej z wartości: left, top, right, bottom, albo poprzez podanie dwóch z wymienianych wartości np. left top. Polecenie to ma sens, jeżeli jednocześnie ograniczymy powtarzanie tła poprzez no-repeat, repeat-x lub repeat-y.
- Zaczepienie tła - background-attachment, definiuje czy tło przewija się razem ze stroną czy jest nieruchome. Przyjmuje wartości:
  - background-attachment:scroll; - przewijanie tła (wartość domyślna),
  - background-attachment:fixed; - tło nieruchome względem okna przeglądarki.

Możliwa jest skrócona forma deklarowania wszystkich właściwości tła jednocześnie, w sposób następujący: bacground:color image repeat attachment position;, gdzie poszczególne wartości oddzielone są spacjami.

Wypełnienie elementu tłem - ćwiczenie 3_2_6_1

Wykonaj stronę pokazującą różne wypełnienie elementu tłem. Do wykonania zadania zastosuj obrazek oraz następujący kod HTML:

<body>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<br />

</div>

</div>

<div>

</div>

</body>

Kod CSS w zewnętrznym arkuszu stylów:

body

{

background-image:url('bg.jpg');

background-repeat:repeat-x;

background-position:left 300px;

background-attachment:fixed;

}

div

{

display:inline-block;

width:200px;

height:200px;

border:1px solid black;

background-color:green;

background-image:url('bg.jpg');

}

Tak powinna wyglądać wykonana strona:

Przeanalizuj różne układy tła w poszczególnych elementach div. Zwróć uwagę na background-attachment:fixed; taką właściwość ustalono dla body - pasek tła pozostaje nieruchomy podczas przewijania okna przeglądarki.

Zastosowanie tła obrazkowego do utworzenia przycisku - ćwiczenie 3_2_6_2

Wykonaj stronę pokazującą przycisk z obrazkiem, kierujący na stronę walidatora W3C. Do wykonania zadania zastosuj następujący kod HTML:

<body>

<div>

</div>

</body>

Kod CSS w zewnętrznym arkuszu stylów:

div a

{

display:block; width:70px;

height:40px;

background-image:url('bg.png');

background-position:0 0; border:2px solid blue;

border-radius:5px;

}

div a:hover

{

background-position:0 -40px;

}

Tak powinna wyglądać wykonana strona: