Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Kolor i tło

Email Drukuj PDF

Tematy: Kolor | Kolor tła | Element graficzny jako tło | Zatrzymanie tła | Kontrola powielania tła | Pozycjonowanie tła | Zbiorczy zapis właściwości tła

Dotychczas zmienialiśmy rodzaj czcionki lub jej wielkość, formatowaliśmy punktory list oraz poznaliśmy budowę stylu. Teraz przyszła pora na to, by różnym elementom przypisać kolory oraz tło. Na początku kursu w podrozdziale „Nazewnictwo kolorów używane w CSS” opisałem, w jaki sposób definiujemy wartość koloru w poszczególnych stylach. Natomiast teraz przyszła pora na to, aby przypisać kolor konkretnym elementom.

Kolor

color

Dostępne wartości:

nazwa lub wartość koloru | inherit

Wartość domyślna:

black

Przykład:

p {color:#FF0000;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Definicja koloru może zostać przypisana dla dowolnych elementów tekstowych za pomocą polecenia color, zgodnie z poniższym przykładem.

<p style="color:red;">Blok tekstu w kolorze czerwonym.</p>

<h1 style="color:#FF0000;">Nagłówek stopnia pierwszego również w kolorze czerwonym.</h1>

<ul style="color:rgb(255,0,0);">

<li>Lista również w kolorze czerwonym</li>

<li>Lista również w kolorze czerwonym</li>

<li>Lista również w kolorze czerwonym</li>

</ul>

<<przykład>>

<div class="przyklad">

<p style="color:red;">Blok tekstu w kolorze czerwonym.</p>

<h1 style="color:#FF0000;">Nagłówek stopnia pierwszego również w kolorze czerwonym.</h1>

<ul style="color:rgb(255,0,0);">

<li>Lista również w kolorze czerwonym</li>

<li>Lista również w kolorze czerwonym</li>

<li>Lista również w kolorze czerwonym</li>

</ul>

</div>

<</przykład>>

Kolor tła

background-color

Dostępne wartości:

nazwa lub wartość koloru | transparent | inherit

Wartość domyślna:

transparent

Przykład:

p {background-color:#FF0000;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Prawie każdy element strony WWW może mieć przypisane tło. Najprostszym sposobem jest ustawienie wybranego koloru jako tła dla wskazanego elementu za pomocą polecenia background-color.

<div style="background-color:black;

<p style="background-color:red;">Czarny blok tekstu z tłem w kolorze czerwonym.</p>

<h1 style="background-color:#8080FF;">Czarny nagłówek stopnia pierwszego z tłem w kolorze fioletowym.</h1>

<ul style="background-color:rgb(255,255,255);">

<li>Czarna lista z tłem w kolorze białym</li>

<li>Czarna lista z tłem w kolorze białym</li>

<li>Czarna lista z tłem w kolorze białym</li>

</ul>

<a href="http://helion.pl" style="color:white;">Odsyłacz w kolorze białym.</a>

</div>

 

<<przykład>>

<div class="przyklad">

<div style="background-color:black;width:400px;">

<p style="background-color:red;">Czarny blok tekstu z tłem w kolorze czerwonym.</p>

<h1 style="background-color:#8080FF;">Czarny nagłówek stopnia pierwszego z tłem w kolorze fioletowym.</h1>

<ul style="background-color:rgb(255,255,255);">

<li>Czarna lista z tłem w kolorze białym</li>

<li>Czarna lista z tłem w kolorze białym</li>

<li>Czarna lista z tłem w kolorze białym</li>

</ul>

<a href="http://helion.pl" style="color:white;">Odsyłacz w kolorze białym.</a>

</div>

</div>

<</przykład>>

Definicja koloru może zostać również wykorzystana podczas określania tła wewnątrz tabeli. W tym przypadku tło może być przypisane niejako na dwa sposoby. Pierwszy z nich to zdefiniowanie tła dla selektora table.

<table style="background-color:black;">

<<przykład>>

<div class="przyklad">

<table width="200" height="200" border=1 style="background-color:black;color:white;">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

</div>

<</przykład>>

Drugim rozwiązaniem jest przypisanie koloru tła dla komórki tabeli, czyli selektora td.

<td style="background-color:silver;">

<<przykład>>

<div class="przyklad">

<table width="200" height="200" border="1">

<tr>

<td style="background-color:silver;">1</td>

<td style="background-color:silver;">2</td>

</tr>

<tr>

<td style="background-color:silver;">3</td>

<td style="background-color:silver;">4</td>

</tr>

</table>

</div>

<</przykład>>

Oczywiście nic nie stoi na przeszkodzie, aby połączyć definicje tła dla selektorów table i td.

<table width="200" height="200" style="background-color:black;">

<tr>

<td style="background-color:silver;">1</td>

<td style="background-color:silver;">2</td>

</tr>

<tr>

<td style="background-color:silver;">3</td>

<td style="background-color:silver;">4</td>

</tr>

</table>

<<przykład>>

<div class="przyklad">

<table width="200" height="200" style="background-color:black;">

<tr>

<td style="background-color:silver;">1</td>

<td style="background-color:silver;">2</td>

</tr>

<tr>

<td style="background-color:silver;">3</td>

<td style="background-color:silver;">4</td>

</tr>

</table>

</div>

<</przykład>>

Element graficzny jako tło

background-image

Dostępne wartości:

url | transparent | inherit

Wartość domyślna:

transparent

Przykład:

body {background-image:url(tlo.jpg);}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Tło dokumentu lub wybranego elementu nie musi być w jednolitym kolorze i zgodnie ze specyfikacją języka XHTML/HTML można użyć w tym celu obrazka w formacie jpg, gif lub png oraz polecenia background-image.

<body style="background-image:url(tlo.jpg);">

<<przykład>>

<div class="przyklad">

<div style="background-image:url(kolo.jpg);width:300px;height:300px;">

&nbsp;

</div>

</div>

<</przykład>>

Rysunek 7.1. Obrazek ustawiony jako tło dokumentu w powyższym przykładzie

Obrazek będący tłem (rysunek 7.1) został powielony tyle razy, ile wymagało tego zapełnienie okna przeglądarki. Innymi słowy, obrazek został powielony zarówno w poziomie, jak i w pionie.

Skoro obrazek powiela się w pionie i poziomie, to można skorzystać z tej właściwości, by uzyskać ciekawy efekt na stronie. Wystarczy w odpowiedni sposób przygotować obrazek wykorzystany jako tło (rysunek 7.2).

Rysunek 7.2. Przykład obrazka potrzebnego do utworzenia ciekawego tła wykorzystującego automatyczne powielanie

<<przykład>>

<div class="przyklad">

<div style="background-image:url(pasek.jpg);width:300px;height:300px;border:solid 1px black;">

&nbsp;

</div>

</div>

<</przykład>>

Przykładowe tło zostało powielone jedynie w pionie ze względu na to, że długość obrazka (1200 pikseli) była większa aniżeli szerokość okna przeglądarki.

Należy pamiętać, że za pomocą opcji background-image nie można ustawić dla elementu więcej niż jednego tła. Poniżej zamieszczam prosty przykład błędnego działania.

BODY

{

background-image:url(tlo.gif);

background-image:url(logo.gif);

}

W przypadku stylu widocznego powyżej pierwsza linijka zostanie zignorowana i jako tło dokumentu zostanie wyświetlone logo.gif z drugiego wpisu.

Oczywiście nic nie stoi na przeszkodzie, by przypisać kilka obrazków jako tła dla różnych elementów strony.

BODY

{

background-image:url(tlo.gif);

}

H1

{

background-image:url(logo.gif);

  }

<<przykład>>

<div class="przyklad">

<div style="background-image:url(pasek.jpg);width:300px;height:300px;border:solid 1px black;">

<h1 style="background-image:url(kolo.jpg);">Przykładowy nagłówek z obrazkiem w tle.</h1>

</div>

</div>

<</przykład>>

Ustawiając obrazek w tle, musimy pamiętać o tym, że na jego wczytanie przeglądarka potrzebuje czasu. Dlatego rozmiar obrazka wykorzystanego w tle powinien być jak najmniejszy. Dodatkowo koniecznie razem z tłem w formie obrazka należy zdefiniować kolor tła w takim odcieniu, by umożliwił przeczytanie zawartości strony, zanim pojawi się obrazek.

Zatrzymanie tła

background-attachment

Dostępne wartości:

scroll | fixed | inherit

Wartość domyślna:

scroll

Przykład:

body {background-attachment:fixed;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Przy tworzeniu stron WWW od czasu do czasu stajemy przed koniecznością umieszczenia zdjęcia w tle strony. Pomijam tutaj fakt, że takie rozwiązanie bardzo często powoduje, iż strona jest nieczytelna i wolno się ładuje. Wróćmy jednak do obrazu jako tła strony, który z założenia przesuwa się z całą zawartością strony WWW. Wygląda to tak, jakby na kartce papieru najpierw wydrukować zdjęcie, a na nim dowolny tekst. Zarówno tekst, jak i reszta kartki papieru stanowią całość i nie da się oddzielnie przesuwać samego tekstu.

Kaskadowe arkusze stylów pozwalają na oddzielenie zawartości strony od jej tła, dzięki czemu można uzyskać ciekawe efekty. Jeżeli ponownie sięgniemy po przykład z kartką papieru, to będzie to wyglądało tak, że na kartce papieru drukujemy obrazek, natomiast tekst na przezroczystej folii. Następnie kartkę papieru umieszczamy nieruchomo na dole, a na niej kładziemy folię, którą możemy przesuwać.

Za uzyskanie opisanego powyżej efektu odpowiada polecenie background-attachment.

BODY

{

background-image:url(tlo.jpg);

background-attachment:fixed;

}

<<przykład>>

<div class="przyklad">

<div style="background-image:url(kolo.jpg);background-attachment:fixed; width:400px;height:300px;border:solid 1px black;overflow:scroll;">

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. Sed eu mattis dolor. Donec in lacinia diam. Nulla felis risus, ultricies nec placerat vel, venenatis in purus. Sed sem nisl, scelerisque non accumsan a, dapibus ac lacus. Vivamus eu imperdiet ligula. Duis porttitor lacus et dui feugiat rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam posuere lacus et augue suscipit dignissim. Pellentesque sollicitudin dolor at massa sollicitudin non vulputate odio congue. Aenean eu justo sit amet augue accumsan aliquam. Nam scelerisque sodales odio. Vivamus ut mattis sapien. Sed rhoncus nisi nec arcu facilisis rhoncus.

</p>

<p>

Fusce porta nisl volutpat risus ultrices ac aliquet ipsum ultrices. Curabitur sed ullamcorper tellus. Nunc aliquam augue nec augue venenatis non varius urna semper. Mauris est risus, semper vel dictum sed, egestas id tellus. Ut lobortis elit nec dui venenatis blandit. Nam bibendum dui id diam feugiat dignissim. Quisque et tortor vitae quam molestie pharetra ac eu elit. Pellentesque nec risus feugiat lorem suscipit lobortis at quis risus. Aliquam elementum tincidunt imperdiet. Integer turpis odio, egestas a dapibus ac, ullamcorper eu nulla. Sed nibh augue, laoreet ac pharetra quis, mollis vitae ligula.

</p>

</div>

</div>

<</przykład>>

Kontrola powielania tła

background-repeat

Dostępne wartości:

repeat | repeat-x | repeat-y | no-repeat | inherit

Wartość domyślna:

repeat

Przykład:

body {background-repeat:repeat-x;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Element graficzny pełniący funkcję tła domyślnie jest powielany w pionie i poziomie. Przypomnę, że zjawisko to zostało opisane w punkcie „Element graficzny jako tło”. Teraz przyszła pora na poznanie funkcji kaskadowych arkuszy stylów, dzięki którym można wyłączyć powielanie tła w pionie lub poziomie, a nawet całkowicie. Kontrola powielania tła jest możliwa za pomocą polecenia background-repeat.

Zacznijmy od całkowitego wyłączenia powielania tła.

BODY

{

background-image:url(logo.gif);

background-repeat:no-repeat;

}

<<przykład>>

<div class="przyklad">

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

</div>

<</przykład>>

Teraz przyjrzyjmy się, w jaki sposób można częściowo wyłączyć powielania tła. Poniższy przykład prezentuje sposób na to, aby zachować powielanie tła jedynie w poziomie.

BODY

{

background-image:url(tlo1.jpg);

background-repeat:repeat-x;

}

<<przykład>>

<div class="przyklad">

<div style="background-image:url(kolo.jpg); background-repeat:repeat-x; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

</div>

<</przykład>>

Kolejny przykład pokazuje, w jaki sposób powielać tło jedynie w pionie.

BODY

{

background-image:url(tlo1.jpg);

background-repeat:repeat-y;

}

<<przykład>>

<div class="przyklad">

<div style="background-image:url(kolo.jpg); background-repeat:repeat-y; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

</div>

<</przykład>>

Aby przywrócić powielanie tła, należy skorzystać z następującej konstrukcji:

BODY

{

background-image:url(tlo1.gif);

background-repeat:repeat;

}

Pozycjonowanie tła

background-position

Dostępne wartości:

left | right | center | top | bottom | wartości liczbowe | wartości procentowe | inherit

Wartość domyślna:

0% 0%

Przykład:

body {background-position:center;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Położenie obrazka będącego tłem strony może być dowolnie sterowane za pomocą polecenia background-position. Aby efekt był widoczny, pozycjonować można tło, którego powielanie jest całkowicie lub częściowo wyłączone.

BODY

{

background-image:url(tlo1.jpg);

background-repeat:no-repeat;

background-position:center;

}

<<przykład>>

<h3>Przykład działania - background-position:center</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:center; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:left</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:left; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:right</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:right; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:top</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:top; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:bottom</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:bottom; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

</div>

<</przykład>>

Pozycja obrazka ustawionego jako tło może być również określana za pomocą połączonych definicji lokalizacji pionowych i poziomych.

BODY

{

background-image:url(tlo1.jpg);

background-repeat:no-repeat;

background-position:bottom right;

}

<<przykład>>

<div class="przyklad">

<h3>Przykład działania - background-position:bottom left</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:bottom left; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:bottom right</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:bottom right; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:bottom center</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:bottom center; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:top left</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:top left; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:top right</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:top right; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:top center</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:top center; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:center center</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:center center; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:center right</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:center right; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

<h3>Przykład działania - background-position:center left</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:center left; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

</div>

<</przykład>>

Kolejnym sposobem pozwalającym na określenie położenia obrazka będącego tłem jest podanie odległości, w jakiej ma się znaleźć w stosunku do lewego górnego narożnika okna przeglądarki. Dokładnie mówiąc, określamy współrzędne x i y lewego górnego narożnika obrazka.

BODY

{

background-image:url(tlo1.jpg);

background-repeat:no-repeat;

background-position:1cm 1cm;

}

<<przykład>>

<div class="przyklad">

<h3>Przykład działania - background-position:2cm 2cm</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:2cm 2cm; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

</div>

<</przykład>>

Pozycja obrazka będącego tłem może być również określana za pomocą wartości procentowych. Również tym razem określamy współrzędne x i y lewego górnego narożnika obrazka względem lewego górnego narożnika okna przeglądarki.

BODY

{

background-image:url(tlo1.jpg);

background-repeat:no-repeat;

background-position:15% 15%;

}

<<przykład>>

<div class="przyklad">

<h3>Przykład działania - background-position:15%m 15%</h3>

<div style="background-image:url(kolo.jpg); background-repeat:no-repeat; background-position:15% 15%; width:400px;height:300px;border:solid 1px black;">

&nbsp;

</div>

</div>

<</przykład>>

Zbiorczy zapis właściwości tła

background

Dostępne wartości:

background-color | background-image | background-repeat |  background-attachment | background-position

Wartość domyślna:

0% 0%

Przykład:

body {background: ;}

Dziedziczenie:

Nie

Obsługa:

Patrz: właściwości poszczególnych stylów

W trakcie tworzenia stron bardzo często stosowanie pełnego zapisu podczas określania stylu tła jest dość kłopotliwe, dlatego specyfikacja pozwala na użycie zbiorczego zapisu. Przyjrzyjmy się prostemu przykładowi pełnego zapisu.

BODY

{

background:#E7E7E7 url(tlo1.jpg) no-repeat 15% 15%;

}

Pomiędzy poszczególnymi wartościami znajduje się spacja, a na końcu powinien być średnik.

<<przykład>>

<div class="przyklad">

<h3>Przykład działania - background-position:2cm 2cm</h3>

<div style="width:400px;height:300px;border:solid 1px black;background:#E7E7E7 url(kolo.jpg) no-repeat 15% 15%;">

&nbsp;

</div>

</div>

<</przykład>>

 

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15276571