Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

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 style="background-repeat:no-repeat;">
  </div>
  <div style="background-repeat:no-repeat;background-position: center top;">
  </div>
  <div style="background-repeat:no-repeat;background-position: left top;">
  </div>
  <div style="background-repeat:no-repeat;background-position: left;">
  </div>
  <div style="background-repeat:no-repeat;background-position: right;">
  </div>
  <div style="background-repeat:no-repeat;background-position: center center;">
  </div>
  <br />
  <div style="background-repeat:no-repeat;background-position: 10px 30px;">
  </div>
  <div style="background-repeat:repeat-x;background-position: 0px 30px;">
  </div>
  <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
  <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>
    <a href="http://validator.w3.org/" target="_blank"></a>
  </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:

Nowa właściwość definiująca zaokrąglenie obramowania border-radius:5px;, będzie omówiona na następnych zajęciach.

Zwróć uwagę, że po najechaniu wskaźnikiem myszki, przycisk zmienia kolor. Domyślasz się dlaczego? Wyjaśnienie jest proste - zwróć uwagę na styl div a:hover. Jak widać na początku wskazywania obrazka myszką, został on przesunięty o 40 pikseli w górę. Dleczego w górę? Przecież mamy -40px. Przypomnij sobie współrzędne ekranowe i wszystko będzie jasne. Tak więc zanim wskażemy myszką, widoczna jest tylko górna część obrazka, natomiast po wskazaniu myszką - część dolna. Cały obrazek wygląda tak:

Obrazek do ćwiczenia
Rysunek 3_2_6_1. Obrazek do ćwiczenia

Praca domowa

Wykonaj ponownie ćwiczenia z zajęć, stosując własne tła i własny odsyłacz.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.