WŁASNOŚCI KOLORU I TŁA

Na początku powtórzę tylko to, co napisałem w poprzednim artykule. Przykłady będę zapisywał za pomocą parametru style="tutaj_wpisz_style", a Wy oczywiście możecie zapisać to w takiej formie, w jakiej chcecie...

Kolor tekstu

Kolor tekstu przypisujemy za pomocą: color: kolor. Przykładzik:
<p style="color:red">Tekst o kolorze czerwonym</p>

Tekst o kolorze czerwonym

<p style="color:#00FFFF">Tekst o kolorze cyan</p>

Tekst o kolorze cyan

Kolor tła

Natomiast do ustalenia koloru tła używamy konstrukcji: background-color: kolor. Jak zwykle przykładzik:
<p style="background-color:aqua">Tekst na tle koloru aqua</p>

Tekst na tle koloru aqua

<p style="background-color:#FFD700">Tekst na tle koloru złotego</p>

Tekst na tle koloru złotego

Grafika w tle

Jak pewnie zauważyliście już, to za bardzo sie nie rozpisywałem przy poprzednich zagadnieniach związanych kolorem. Wydaje mi się to raczej logiczne i zrozumiałe. To samo w tym przypadku... Aby wstawić grafikę na tło wystarczy użyć: background-image: url(jakis_plik.jpg). Example:
<p style="background-image:url('../gfx/marble.gif')">Tekst na tle kulek</p>

Tekst na tle kulek (dla przejrzystości dodałem color:white)

Powtarzanie tła

Tło strony może się powtarzać w pionie, w poziomie, w obu kierunkach lub nie powtarzać się wcale... Powtarzanie tła dotyczy tylko BODY. Zapisuje się przez background-repeat: sposob. Wartości mogą być równe: repeat (powtarzanie w obu kierunkach), repeat-y (powtarzanie w pionie), repeat-x (powtarzanie w poziomie), no-repeat (nie powtarza się). Przykłady:

|:. repeat .:|:. repeat-x .:|:. repeat-y .:|:. no-repeat .:|

Zaczepienie tła

Zaczepienie tła, czyli instrukcja: background-attachment: typ, umożliwia to, że przewijając stronę, obrazek będący w tle, będzie tkwił nieruchomo, zawsze w tym samym miejscu. Ten parametr odnosi się także do BODY. Przykład (tylko IE):

|:. obrazek tkwi nieruchomo na ekranie .:|:. obrazek nie tkwi nieruchomo na ekranie .:|

Pozycja tła

Pozycja tła dotyczy już nie tylko BODY, ale także komórek tabeli (dla zapominalskich - TD :)). Pozycję definiujemy za pomocą: background-position: pozycja. Wartości mogą być równe: center (wycentrowane), top (wyrównane do górnego brzegu), bottom (wyrównane do dolnego brzegu), left (wyrównane do lewego brzegu), right (wyrównane do prawego brzegu). Dopuszczalne są też wartości mieszane, takie jak: top left (góra-lewo), bottom right (dół-prawo), itd...

In the end... :)

Jak pewnie zauważyliście, w tej edycji omawiania CSS, nie zamieszczałem za dużo przykładów... Po prostu chciałbym, żebyście czasem sami coś spróbowali... :) Myślenie nie boli (cóż, są wyjątki, ale nie o wyjątkach mówimy :P)... To tyle na dziś. Za miesiąc omówimy sobie marginesy i obramowania... Howgh!

PELE