Kolor tła
Aby tekst na stronie był czytelny należy użyć koloru tła, który będzie kontrastował z kolorem tekstu. Najlepszym połączeniem jest oczywiście białe tło i czarne litery. Odradzam wykorzystywanie różnych kolorowych tapet ze wzorkami, które zazwyczaj jedynie przeszkadzają w czytaniu.
Ciekawą możliwością CSS jest, nie tylko określanie tła całej strony, ale także jej poszczególnych elementów.
Aby określić tło używamy właściwości background-color a jako wartość przypisujemy dowolny kolor. Dla przykładu określimy tło dla akapitu (!) oraz całej strony:
P{background-color: #FFFFFF;}
BODY{background-color: red;}
No właśnie. CSS pozwala określić tło nawet dla fragmentu tekstu. Możliwości są ograniczone tylko przez Twoją wyobraźnię. Aby poćwiczyć zdefiniuj tło najpierw dla całej strony, później dla każdego z elementu (podobnie jak powyżej).
Właściwości tła
background-color Czyli kolor tła. Najczęściej określamy go za pomocą ogólnie przyjętych nazw (np. red) lub zapisu szesnastkowego (np. #FFFFFF).
background-image Tło to nie tylko sam kolor ale także obrazki. Aby wstawić jakiś obrazek w tle całej strony lub niektórych jej elementów wykorzystujemy tą właściwość. Wartościami może być none lub url(źródło obrazka).
background-repeat
Tej właściwości używamy, aby określić sposób powtarzania się tła. Wartości tego elementu to:
|
repeat - pozwala na powtarzanie się obrazka jako tła
no-repeat - obrazek nie jest powtarzany
repeat-x - obrazek powtarzany jest poziomo
repeat-y - obrazek powtarzany jest pionowo
background-attachment (tylko IE)
Przy pomocy tej właściwości możemy rozwiązać czasami denerwujący problem: czy tło ma się przesuwać wraz z tekstem czy ma być nieruchome? Właściwośc ta jest znana pod nazwą "znaku wodnego". Możemy ją zdefiniować używając wartości:
scroll - tło będzie przesuwane wraz z tekstem
fixed - tło nie będzie przesuwane
background-position
Możemy również określić położenie tła będącego obrazkiem. Właśnie do określenia położenia używamy właściwości background-position przypisując mu dowolną wartość:
top
bottom
left
right
center
dowolna długość podana w pikselach lub procentach. W ten sposób określamy odstęp obrazka według lewego górnego rogu dokumentu.
Trochę praktyki
Teraz wystarczy, że stworzysz dowolny dokument html. Używając rożnych właściwości tła, poćwicz to, co poznałeś dzisiaj. Pobaw się ze złożonymi formułami np.
BODY {
background-color:red;
background-image:url(.../.../nazwa.gif);
background-repeat:no-repeat;
background-attachment:scroll;
}
H1 {
background-color:FFCC00;
background-position:30px 40px;
}
|
|
