6. KOLOR, TŁO I ŚCIEśKI DOSTĘPU Zanim przejdziemy do praktyki, zajmijmy się nazywaniem kolorów. Są cztery znane mi sposoby wyraŝania kolorów w języku CSS. Pierwszym z nich i jednocześnie najtrudniejszym są nazwy kolorów w języku angielskim. Kod koloru w zapisie szesnastkowym Programiści bardzo precyzyjnie nazwali niektóre kolory więc nawet w najlepszym słowniku moŝemy ich nie znaleźć [np. lekkopociemniały (nawet MS Word podkreślił :)]. Zalecam pamiętać kilka podstawowych barw takich, których nazwy za moment się pojawią... Drugim sposobem jest uŝywanie wartości szesnastkowych. Szesnastkowe nie oznacza, Ŝe maksymalnie za ich pomocą moŝemy utworzyć szesnaście barw (chociaŝ tyle jest barw podstawowych), tylko, Ŝe do ich stworzenia wykorzystujemy szesnaście znaków, którymi są wszystkie cyfry oraz litery od A do F. Przed wartością szesnastkową umieszcza się znak hash - #. Szesnaście podstawowych barw zarówno w wartościach szesnastkowych, jak i w angielskich wyrazach umieszczam poniŝej: black #000000 navy #000080 maroon #800000 purple #800080 fuchsia #FF00FF silver #C0C0C0 green #008000 gray #808080 lime #00FF00 polive #808000 yellow #FFFF00 red #FF0000 blue #0000FF teal #008080 aqua #00FFFF
white #FFFFFF Kod koloru w zapisie RGB Jak widać, nie wszystkie znaki zostały uŝyte. Jakiekolwiek malutkie zmiany są dosyć trudne więc CSS pozwala nam zastosować opis koloru RGB, czyli opisanie natęŝenia barw kolejno: czerwonej, zielonej i niebieskiej. Kolor RGB moŝna stosować na dwa sposoby określając dawkę pojedynczego koloru w zakresie 256 moŝliwości (od 0 do 255), a takŝe w procentach, jednakŝe za kaŝdym razem wzór jest taki sam: rgb(r,g,b) (uwaga: często pojawia się błąd, poniewaŝ mylimy nawias zwykły z klamerką, błędu moŝna szukać godzinami i, chociaŝ jest on taki prosty nie moŝemy go znaleźć. Kolor RGB dość łatwo jest edytować i łatwo robić jego odcienie słabsze i mocniejsze barwy. Kilka kolorów takŝe umieszczę w tabelce wraz z kolorami własnego pomysłu: czarny rgb(0,0,0) rgb(0%,0%,0%) czerwony rgb(255,0,0) rgb(100%,0%,0%) zielony rgb(0,255,0) rgb(0%,100%,0%) niebieski rgb(0,0,255) rgb(0%,0%,100%) średnioczerwony rgb(128,0,0) rgb(50%,0%,0%) ćwierćczerwony rgb(64,0,0) rgb(25%,0%,0%) średnioergiebowy rgb(128,128,128) rgb(50%,50%,50%) ćwierćergiebowy rgb(64,64,64) rgb(25%,25%,25%) ergiebowy na 3/4 (192,192,192) rgb(75%,75%,75%) Zmiana koloru tekstu - deklaracja color: Poznaliśmy właśnie wartości, którymi będziemy wypełniać kilka deklaracji, które właśnie poznamy. Na początku deklaracja color. Jest ona bardzo wszechstronna i w większości przypadków oznacza kolor tekstu, niezaleŝnie, czy umieścimy ją wewnątrz selektora, czy p. Oczywiście pamiętajmy, Ŝe umieszczając kolor tekstu w, tak samo jak i inne deklaracje tekstu nie zawsze będą działać. Jak wsadzimy je w komórki tabel, pola tekstowe itp. jest małe prawdopodobieństwo zadziałania deklaracji. Oto prosty przykład zmiany koloru paragrafu na zielony:
p color: green <P>Treść akapitu..., treść akapitu...</p> Ustawianie tła strony Kolor tekstu to nie wszystko. MoŜemy takŝe zmienić kolor tła strony. SłuŜy do tego deklaracja background (dokładnie background-color, ale oby dwie wersje działają, jak najbardziej poprawnie). Po dwukropku nadajemy nazwę koloru. Aby tło było jednolitego koloru czarnego musimy selektorowi, nadać wyŝej wymienioną deklaracją, z wartością koloru np. background: rgb(0,0,0) Precyzowanie lokacji pliku Zanim stworzymy teksturę musimy nauczyć pisać się ścieŝki dostępu. Ułatwieniem będzie znajomość systemu MD DOS, w którym wiele elementów jest podobnych. ŚcieŜkę podaję się biorąc pod uwagę plik HTML. JeŜeli plik HTML leŝy luźno z jakimś plikiem, do którego chce się napisać ścieŝkę (leŝą w tym samym miejscu), ścieŝka to tylko nazwa danego pliku np. plik.roz. JeŜeli z plikiem HTML sąsiaduje folder, wewnątrz którego jest dany plik, ścieŝka to nazwa folderu oddzielona od nazwy pliku slashem np. folder/plik.roz. JeŜeli plik, do którego chcemy napisać ścieŝkę sąsiaduje z folderem, wewnątrz którego jest plik HTML ścieŝka to dwie kropeczki i nazwa pliku np.../plik.roz. JeŜeli w folderze ze stroną umieszczone są dwa foldery, w pierwszym jest plik graficzny, a w drugim jest plik HTML ścieŝka to dwie kropeczki, oddzielona od nazwy foldera z grafiką
slashem, oddzielona od nazwy pliku slashem. Warto zapamiętać, Ŝe ścieŝka do folderu, w którym znajduje się źródłowy kod to jedna kropka -. (przyda się to w wielu skryptach wykonujących się po stronie serwera). JeŜeli podajemy ścieŝkę do zasobów internetu innego serwera pamiętajmy o protokole np. http://witryna.pl. Mniej więcej technikę pisania ścieŝek dostępu juŝ opanowaliśmy, przejdźmy teraz do konkretów. Umieszczenie obrazka powtarzającego się w tle strony moŝe być ciekawym, ale takŝe zbędnym efektem. Najlepiej, aby był to taki obrazek, który nie wygląda dziwnie na powtórzeniach. Najlepiej uŝywać specjalnie przygotowanych do tego tzw. tekstur, albo obrazków z jednolitym tłem z napisem (często tak wygląda reklama). Deklaracja odpowiadająca za pojawienie się obrazka na witrynie to takŝe background (dokładnie background-image, ale oby dwa przypadki działają bezproblemowo). Po dwukropku nie umieszczamy samej ścieŝki dostępu, ale podobnie jak w przypadku kolorów RGB, ścieŝka umieszczona jest w nawiasach zwykłych poprzedzona wyraŝeniem url np.: background: url(http://www.webdiary.pl/modules/technologie/plik.gif) Mocowanie tekstury - background-attachment: fixed Pamiętajmy, Ŝe zgodnie ze specyfikacją na witrynach mogą pojawić się pliki graficzne o rozszerzeniach gif, jpg i png. Samo umieszczenie obrazka w tle dokumentu to nie wszystko, moŝna z nim zrobić jeszcze wiele ciekawych rzeczy. Pierwszą rzeczą kwalifikującą się do ciekawych rzeczy to tzw. wbudowanie tekstury, czyli ustawienie trzymające teksturę na tej samej pozycji, niezaleŝnie od przewijania dokumentu. SłuŜy do tego deklaracja wraz z wartością background-attachment: fixed np.:
background: url(plik.gif); background-attachment: fixed Ustalanie powtórzeń tła - background-repeat: Drugą z ciekawostek jest deklaracja, pozwalająca na powtarzanie obrazka według naszego gustu. Być moŝe oglądając przykłady na własnych komputerach nie będziecie pełni zachwyty, to w połączeniu z trzecią ciekawostką moŝe być całkowicie odwrotnie... Deklaracja ta, to background-repeat. Pierwszą wartość jaką poznamy to nie powtarzanie obrazek powinien być umieszczony tylko raz w lewym górnym rogu. Efekt ten uzyskujemy za pomocą wartości background-repeat: no-repeat: background: url(http://www.webdiary.pl/modules/technologie/plik.gif); background-repeat: no-repeat Są jeszcze dwie wartości deklaracji background-repeat. Pozwalają one na powtarzanie tekstury zgodnie z matematycznymi wykresami. JeŜeli nie pamiętamy nic z młodości, to przypomnę, Ŝe oś pozioma to x, a pionowa to y. Litery te wykorzystuje się uŝywając deklaracji repeat-z, gdzie w miejsce duŝego zet umieszczamy jedną z tych dwóch liter. PoniŜszy przykład prezentuje powielenie tekstury w poziomie:
background: url(plik.gif); background-repeat: repeat-x Wyznaczanie pozycji tła Trzeci element jak juŝ powiedziałem najlepiej wygląda w połączeniu z poprzednim elementem, w szczególności z wyłączeniem powtarzania (background-repeat: no-repeat) z obrazkiem większych rozmiarów. Jest to deklaracja background-position. Jak nie trudno się domyślić, słuŝy ona do określania pozycji tekstury. UŜywamy do tego jednego, lub więcej określeń nie oddzielonych od siebie Ŝadnym selektorem, takim jak przecinek itp. Te określenia (wartości) to: left - lewo, right - prawo, top - góra, bottom - dół i center - centrum (środek). Pierwsze dwa określenia definiują wartość poziomą górną, ale w pionie obrazek jest na środku. Kolejne dwa określają połoŝenie w pionie, ale w poziomie obrazek jest na środku. Ostatnie określenie umieszcza obrazek w środku oby dwóch osi. JeŜeli nie odpowiada nam umieszczenie obrazka zawsze w środku jakiejś osi musimy uŝyć dwóch określeń naraz. PoniŜszy przykład prezentuje umieszczenie tekstury w prawym dolnym rogu, a ostatni przykład z tej lekcji umieszczenie centralne. background: url(http://www.webdiary.pl/modules/technologie/plik.gif); background-position: bottom right; background-repeat: no-repeat
background: url(plik.gif); background-position: center; background-repeat: no-repeat