HTML & CSS dla początkujących (Część 31): Kolory i tła

Atrybut color opisuje kolor pierwszego planu (kolor tekstu) elementów. Określenie kolorów jest możliwe na wiele różnych sposobów. Klasycznie używa się wartości szesnastkowych. Te wartości zawsze zaczynają się od znaku krzyżyka. Następnie zazwyczaj następują trzy pary cyfr i/lub liter. Oznaczają one czerwień, zielony i niebieski. Określenia kolorów odbywają się zatem zawsze według tego schematu:

RRGGBB

Podanie #ffffff spowoduje pojawienie się koloru białego. Natomiast używając #000000, wyświetli się kolor czarny. W "rozsądnych" edytorach HTML istnieją odpowiednie wybieraki kolorów.

Za pomocą możecie określić kody szesnastkowe. Ponadto istnieją liczne strony internetowe (np. http://www.farbtabelle.net/) oferujące odpowiednie przeglądy kolorów.

W CSS istnieje możliwość skrócenia zapisu wartości kolorów szesnastkowych. To jednak działa tylko dla wartości składających się z trzech identycznych par. Typowymi przykładami są definicje kolorów czarnych i białych. Zazwyczaj zapisuje się je w ten sposób:

.schwarz {
   color: #000000;
}
.weiss {
   color: #ffffff;
}

Tę składnię można również skrócić.

.schwarz {
   color: #000;
}
.weiss {
   color: #fff;
}

W CSS są również dozwolone wartości RGB. Tutaj podaje się wartości dziesiętne od 0 do 255, które są oddzielone przecinkami. Kolejność podawania kolorów odpowiada kolejności wartości szesnastkowych.

a { 
color: rgb(100%, 100%, 100%); 
background: rgb(0, 0, 0); 
}

Jak pokazuje przykład, możliwe są także wartości procentowe, co jednak praktyce jest raczej rzadko spotykane.

Kolejną wariantą określania kolorów są słowa kluczowe kolorów. Oto kilka przykładów:

• black

• red

• blue

• yellow

• white

• green

Odpowiednie określenie mogłoby wyglądać następująco:

p { 
 color: white; 
 background: black; 
}

Zauważ, że w CSS3 paleta dostępnych słów kluczowych kolorów została znacząco poszerzona. CSS3 zaadoptował nazwy kolorów z specyfikacji SVG. Przegląd dostępnych nazw kolorów znajdziesz pod adresem http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Definiowanie tła

Przy użyciu atrybutu background można podać poniższe możliwe wartości, które zostaną szczegółowo omówione w dalszej części tego samouczka:

• background-attachment

• background-color

• background-image

• background-position

• background-repeat

Poszczególne wartości są oddzielane od siebie spacjami. Nie ma znaczenia kolejność, w jakiej są wpisywane. Nie trzeba podawać wszystkich wartości.

Przykład:

p { 
    background: transparent
    url(logo.jpg)
    scroll repeat 0% 0%; 
 }

Kolory tła

Aby przypisać elementowi kolor tła, używa się atrybutu background-color.

div { 
   background-color: #009999;
}

Jako wartość podaje się pożądany kolor.

Grafiki tła

background-image określa obraz jako tło. Jeśli ten atrybut jest zapisany w zewnętrznym arkuszu CSS, ścieżki względne odnoszą się do katalogu, w którym znajduje się plik CSS.

• none – brak obrazu tła

• URI – ścieżka do obrazu

Tutaj również przykład.

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Willkommen auf PSD-Tutorials.de!
</div>

Jednak proszę ostrożnie podchodzić do stosowania obrazów tła. Zbyt wyraziste obrazy tła nie ułatwiają czytelności tekstu.





Oczywiście istnieją strony internetowe, na których liczy się tylko wygląd. Tutaj na pewno można pracować z bardziej efektownymi tłami.

Scrollowane tła

Przy dłuższych elementach obraz tła przesuwa się wraz ze strzałkami na stronie. Atrybutem background-attachment można temu zapobiec.

• fixed – przewijanie razem

• scroll – obraz tła pozostaje nieruchomy i jest dostosowany do okna przeglądarki (widoku).

Atrybut background-attachment zazwyczaj jest używany w połączeniu z background-image.

Przykład:

div.fest {
    background-image: url(background.gif); 
    background-repeat: no-repeat;
 }

Pozycja tła

Przy użyciu właściwości background-repeat określa się, gdzie tło ma się zaczynać. Punkt odniesienia to element, dla którego zdefiniowano grafikę.

• Procent – jeden lub dwa wartości określające odległość grafiki od lewego górnego rogu elementu. W przypadku dwóch wartości pierwsza dotyczy odległości poziomej, a druga pionowej. Punkt odniesienia nie jest lewym górnym rogiem grafiki, lecz punkt wewnątrz grafiki, który również jest określony przez wartości x/y.

• Długość – określa odległość grafiki od jej lewego górnego rogu do lewego górnego rogu elementu. Dozwolone są jedna lub dwie wartości. W przypadku dwóch wartości pierwsza określa odległość poziomą, a druga pionową.

Oprócz tego możliwe są również następujące słowa kluczowe:

• left – wyrównanie horyzontalne do lewej

• center – wyśrodkowane

• right – wyrównanie horyzontalne do prawej

• top – wyrównanie wertykalne do góry

• bottom – wyrównanie wertykalne do dołu

Oto przykład, jak może to wyglądać:

p { 
   background-position: 8em top; 
}

Powtarzające się tła

Można określić, czy i w jaki sposób grafika tła ma się powtarzać, jeśli jest mniejsza niż obszar wyświetlany, za pomocą background-repeat.

• repeat – obraz tła jest powtarzany wertykalnie i horyzontalnie, wypełniając element.

• repeat-x – grafika jest powtarzana tylko w poziomie.

• repeat-y – grafika jest powtarzana tylko w pionie.

• no-repeat – grafika nie jest powtarzana.

Oto przykład:

body { 
   background-repeat: repeat-y; 
}

W tym przypadku obraz jest powtarzany tylko w pionie.

Jeśli zdecydujemy się na użycie repeat-y, powtórzenie będzie dotyczyło tylko poziomu.





Tutorial pokazał, jak potężne możliwości kryje w sobie CSS, jeśli chodzi o kolory i obrazy.