Kolor tła Właściwości tła

Fragment strony:
Wprowadzenie - http://www.webinside.pl/css/kursy/1
(przystosowano do przygotowania zadań szkolnych)
Tło
Mam nadzieję, Ŝe umiesz juŜ wszystko co pokazałem Ci w poprzedniej lekcji. JeŜeli tak to
Twoja strona na pewno wygląda coraz lepiej. Jednak gdyby się tak zastanowić to na pewno
brakuje jeszcze czegoś. Fajnie by było gdyby nasz tekst umieścić na jakimśtle, tak Ŝeby strona
wyglądała jeszcze lepiej :)
HTML umoŜliwia nam ustalenie koloru lub obrazka jako tło strony. Jednak my potrzebujemy
czegoś co umoŜliwi nam większe moŜliwości kontrolowania tła. Na szczęście CSS oferuje
nam naprawdę duŜy wahlarz właściwości, które moŜemy bez Ŝadnych kłopotów wykorzystać
na naszej stronie.
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;
}
Zadanie:
Utwórz styl o nazwie tlo.css, który ustawi jako tło strony dowolnie przez ciebie wybrany obrazek,
który umieszczony będzie na środku strony oraz będzie się przesuwał razem z przewijanym tekstem.
Przygotuj przykładową stronę, w której zastosowany będzie ten styl.