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
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