Kolor tlo i sciezki dostepu\374

Transkrypt

KURS HTML
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
www.INFORMATYKA.cba.pl
KURS HTML
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 body,
czy p. Oczywiście pamiętajmy, Ŝe umieszczając kolor tekstu w body, 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:
KURS HTML
<STYLE TYPE="text/css">
p
{
color: green
}
</STYLE>
<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 body, nadać wyŜej wymienioną deklaracją, z wartością
koloru np.
body
{
background: rgb(0,0,0)
}
</STYLE>
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ą
KURS HTML
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.:
body
{
background: url(http://www.webdiary.pl/modules/technologie/plik.gif)
}
</STYLE>
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.:
KURS HTML
body
{
background: url(plik.gif);
background-attachment: fixed
}
</STYLE>
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:
body
{
background: url(http://www.webdiary.pl/modules/technologie/plik.gif);
background-repeat: no-repeat
}
</STYLE>
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:
KURS HTML
body
{
background-repeat: repeat-x
}
</STYLE>
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.
body
{
background: url(http://www.webdiary.pl/modules/technologie/plik.gif);
background-position: bottom right;
}
</STYLE>
KURS HTML
body
{
background-position: center;
}
</STYLE>

Kolor tlo i sciezki dostepu\374

Transkrypt

Podobne dokumenty

Led pasek LEDS-3PRO/RGB, zestaw diodowy RGB z pilotem

cennik RGB elite

test3

Komputer

• Parkiet taneczny o wymiarach 24m x 12m • Profesjonalne

PX229 karta katalogowa