Wstęp do CSS - część szósta
Podstawowe własności - Tło
Znamy już selektory, znamy media, znamy używane w CSS jednostki. Czego teraz nam trzeba? Tylko własności ;-)
Dla (prawie) każdego elementu dokumentu hipertekstowego możemy zdefiniować tło. Definiowanie tła przy pomocy CSS daje nam sporo większe możliwości niż definiowanie tła w HTML i XHTML (XHTML tylko 1.0 Transistional i Frameset, w Strict użycie parametru background znacznika body jest zabronione.) Składnia własności background jest następująca: background: kolor obrazek powtarzalność sposób_wyświetlania pozycja;.
Kolor
Pierwszym argumentem jest kolor. Definiuje on kolor tła. Można tu wpisać jakiś kolor w akceptowalnym formacie, wartość transparent oznaczającą brak koloru - przezroczystość lub wartość inherit ustawiającą dziedziczenie koloru po rodzicu.
Obrazek
Drugi argument to adres obrazka, który ma być użyty jako tło (nadpisze on ustawienia koloru tła). Można tu wpisać wartość none oznaczającą brak obrazka lub zdefiniować adres (względny lub bezwzględny) pliku z obrazkiem przy pomocy: url(obrazek.png). Oczywiście można również "odziedziczyć" to ustawienie przy pomocy inherit.
Powtarzalność
Trzeci argument definiuje powtarzalność obrazka z tłem. Możemy zażyczyć sobie powtarzanie tła, czyli zapełnienie całej przestrzeni pod elementem tym obrazkiem, jeden pod drugim, jeden obok drugiego przy pomocy wartości repeat. Możemy również zażyczyć powtarzania sobie tylko w poziomie - repeat-x lub pionie - repeat-y lub brak powtarzania - no-repeat. Oczywiście tą wartość również można odziedziczyć.
Sposób wyświetlania
Czwarty argument to sposób wyświetlania. Można zażyczyć sobie aby tło przewijało się razem z tekstem - scroll lub pozostawało w miejscu, pomimo przewijania tekstu - fixed. Dziedziczenie wartości jest również możliwe.
Pozycja tła
Piąty, ostatni argument określa pozycję tła. Może składać się z jednej lub dwóch wartości. Definiuje pozycję tła względem lewego górnego rogu obszaru wyświetlania strony. Można określić tą pozycję przy pomocy wartości procentowych lub wartości słownych. Zarezerwowane wartości słowne to: left, right, center, top, bottom. Wartości left oraz right odnoszą się do pozycji w poziomie, top i bottom do pozycji w pionie, a center zarówno do pionu jak i poziomu.
Kondensacja własności
Własności tła, jak wiele, można kondensować. Taka właśnie kondensacja została zaprezentowana powyżej - wszystkie własności są opisane w jednej. Jednak każda z tych własności posiada własną nazwę i są to:
- background-color - kolor tła
- background-image - obraz tła
- background-repeat - powtarzalność tła
- background-attachment - sposób wyświetlania
- background-position - pozycja tła
Kiedy nie potrzebujemy ustawiać wszystkich parametrów, możemy skorzystać z tych bardziej konkretnych własności.
Jednak kondensacja ma nieco inne oblicze. Mianowicie każdy nieustawiony element przyjmuje wartość domyślną, więc nie wszystkie elementy muszą być wymienione. W ten sposób zarówno zapis:
background: blue url(obraz.png) repeat-x scroll right center;
jak i zapis:
background: url(obraz.png) scroll;
czy zapis:
background: blue;
są poprawne. W pierwszym przykładzie wszystkie własności składowe zostały ustawione. W drugim zostały ustawione obraz tła i sposób wyświetlania, a reszta przyjęła domyślne wartości. Trzeci przykład definiuje tylko kolor tła. Najlepiej, aby skondensowane w ten sposób własności zachowały swoją poprawną kolejność, czyli taką jaką wymieniłem wyżej. Własności, które mają zostać domyślne po prostu omijamy.
Domyślne wartości
- background-color - transparent
- background-image - none
- background-repeat - repeat
- background-attachment - scroll
- background-position - 0% 0%