# Własności koloru i tła

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

- Kolor (color)
- Kolor tła (background color)
- Grafika jako tło (background image)
- Powtarzanie tła (background repeat)
- Zaczepienie tła (background attachment)
- Pozycja tła (background position)
- Mieszane atrybuty tła (background)

### Kolor

Kolor możemy przypisywać dowolnym elementom. Kilka przykładów:

<h2 style="color: #FF0000">Czerwony tytuł drugiego stopnia</h2>

## Czerwony tytuł drugiego stopnia

<p style="color: #FF00FF">Akapit w kolorze Fuchsia</p>

Akapit w kolorze Fuchsia

<table border>
<tr>
<td style="color: #808000">Komórka tabeli z oliwkowym tekstem</td>
</tr>
</table>

Komórka tabeli z oliwkowym tekstem

Numerowany wykaz w kolorze niebieskim
<ol style="color: blue">
<li>punkt pierwszy
<li>punkt drugi
<li>punkt trzeci
</ol>

1. punkt pierwszy
2. punkt drugi
3. punkt trzeci

### Kolor tła

Wiele elementów może mieć przypisany kolor tła. Przykłady (IE i NN wyświetlają je nieco odmiennie):

<h2 style="background-color: yellow">Tytuł stopnia drugiego na żółtym tle</h2>

## Tytuł stopnia drugiego na żółtym tle

<p style="background-color: blue">Akapit na tle Aqua</p>

Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua.

<table border>
<tr>
<td style="background-color: #808000">Komórka tabeli z zielonym tłem</td>
</tr>
</table>

Komórka tabeli z zielonym tłem

Specyfikacja CSS2 wprowadza 28 kolorów systemowych (pochodzących z systemu operacyjnego), które integrują się z kolorami środowiska użytkownika. Ich rolę widać np. wyraźnie po zmianie schematu odpowiedzialnego za wyświetlanie środowiska Windows. Niniejszy akapit jest wyświetlany przy użyciu stylu <p style="color:background">, a więc za pomocą koloru pulpitu Windows. Każdy czytelnik widzi więc ten kolor, który ma na swoim własnym pulpicie.

Są to następujące kolory (według specyfikacji CSS2):

- ActiveBorder - Active window border.
- ActiveCaption - Active window caption.
- AppWorkspace - Background color of multiple document interface.
- Background - Desktop background.
- ButtonFace - Face color for three-dimensional display elements.
- ButtonHighlight - Dark shadow for three-dimensional display elements (for edges facing away from the light source). Shadow color for three-dimensional display elements.
- ButtonShadow - Shadow color for three-dimensional display elements.
- ButtonText - Text on push buttons.
- CaptionText - Text in caption, size box, and scroll bar arrow box.
- GrayText - Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
- Highlight - Item(s) selected in a control.
- HighlightText - Text of item(s) selected in a control.
- InactiveBorder - Inactive window border.
- InactiveCaption - Inactive window caption.
- InactiveCaptionText - Color of text in an inactive caption.
- InfoBackground - Background color for tooltip controls.
- InfoText - Text color for tooltip controls.
- Menu - Menu background.
- MenuText - Text in menus.
- Scrollbar - Scroll bar gray area.
- ThreeDDarkShadow - Dark shadow for three-dimensional display elements.
- ThreeDFace - Face color for three-dimensional display elements.
- ThreeDHighlight - Highlight color for three-dimensional display elements.
- ThreeDLightShadow - Light color for three-dimensional display elements (for edges facing the light source).
- ThreeDShadow - Dark shadow for three-dimensional display elements.
- Window - Window background.
- WindowFrame - Window frame.
- WindowText - Text in windows.

### Grafika jako tło

Rozmaitym elementom możemy przypisywać grafikę jako tło. Przykłady:

<h1 style="background-image: url(canvas2.gif)">Tytuł stopnia pierwszego na tle płótna</h1>

# Tytuł stopnia pierwszego na tle płótna

<table border>
<tr>
<td style="background-image: url(greendot.gif)>Komórka tabeli z zieloną kropką jako tłem</td>
</tr>
</table>

Komórka tabeli z zieloną kropką jako tłem

### Powtarzanie tła

Tło dokumentu może się powtarzać tylko w pionie, tylko w poziomie, w obu kierunkach lub nie powtarzać się w ogóle. Definiując w stylach ciało dokumentu (BODY), możemy podać następujące, przykładowe polecenie:

<style type="text/css">
<!--
BODY { background: #C0C0C0 url(greendot.gif);
background-repeat: repeat-y }
-->
</style>

Inne wartości to repeat-x, repeat, no-repeat.

Przykłady:

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

### Zaczepienie tła

Tłem strony może być grafika. Wystarczy podać w stylu definicję BODY {background: url(nazwa_obrazka)}, aby obrazek pojawił się w tle dokumentu. Obrazek może się przesuwać w miarę przewijania dokumentu (czyli tkwić w miejscu w stosunku do treści) lub pozostawać nieruchomo (tkwić w miejscu w stosunku do ekranu). W tym drugim przypadku powinniśmy podać definicję:

BODY {background: url(nazwa_obrazka); background-attachment: fixed}

Proszę porównać dwa przykłady, przesuwając pionowy suwak przeglądarki (IE4, Opera 7):

obrazek przesuwa się na ekranie | obrazek tkwi nieruchomo na ekranie

### Pozycja tła

Tło może mieć różną pozycję. Najbardziej typowym przykładem jest tło strony, którym jest obrazek.

Przykład: tło na środku strony

W tym akurat przykładzie zdefiniowaliśmy tło jako pojedynczy obrazek na środku ekranu, czyli za pomocą polecenia BODY {background: url(pcq.gif) fixed no-repeat center}. Najważniejszy jest tutaj parametr center.

To było tzw. polecenie mieszane, natomiast pełna składnia dla pozycji tła wygląda następująco (realizuje ją IE4):

background-position: wartość

W przykładowej tabeli (z jedną komórką) możemy wstawić grafikę jako tło, bez definiowania pozycji.

bez definiowania pozycji bez definiowania pozycji bez definiowania pozycji

Możemy jednak określić pozycję tła:

background-position: top

pozycja top pozycja top pozycja top pozycja top

background-position: center

pozycja center pozycja center pozycja center pozycja center

background-position: bottom

pozycja bottom pozycja bottom pozycja bottom

W powyższych przykładach grafika ustawiała się domyślnie na środku, jeśli chodzi o położenie poziome. Możemy jednak definiować także wartości dla położenia poziomego:

background-position: left

pozycja left pozycja left pozycja left

background-position: center

pozycja center pozycja center pozycja center

background-position: right

pozycja right pozycja right pozycja right

Zauważmy, że parametr center daje ten sam wynik w pionie i poziomie.

Możemy mieszać wartości pozycji pionowej i poziomej, na przykład top left czy bottom right:

background-position: top right

pozycja top right pozycja top right pozycja top right

background-position: bottom left

pozycja bottom left pozycja bottom left pozycja bottom left

Możliwe jest wreszcie podanie wartości liczbowych, np. background-position: 1cm 2cm, czyli 1 centymetr od lewego brzegu i 2cm od prawego.

background-position: 1cm 2cm

pozycja 1cm 2cm pozycja 1cm 2cm pozycja 1cm 2cm

background-position: 20% 80%

pozycja 20% 80% pozycja 20% 80% pozycja 20% 80%

### Mieszane atrybuty tła

Najwygodniejszym sposobem definiowania tła jest oczywiście wykorzystanie tzw. definicji mieszanej, w której nie powtarza się całego zestawu "zaklęć" background-repeat, background-position itd. Wykorzystujemy tu polecenie:

background: kolejne wartości

Na przykład, polecenie dla komórki tabeli:

<td style="background: url(obrazek) no-repeat bottom right>

spowoduje, że w komórce pokaże się dany obrazek (url), nie będzie się powtarzał (no-repeat) i będzie umieszczony w dolnym prawym rogu (bottom right).

Pokazana wyżej strona z pojedynczym obrazkiem jako tłem ma mieszaną definicję:

BODY {background: url(pcq.gif) fixed no-repeat center}

Dzięki takiej definicji strona ma tło w postaci pojedynczego (no-repeat) obrazka (url), który jest umieszczony na środku ekranu i nie porusza się (center fixed).