Arkusze stylów są stosunkowo prostą koncepcją. Są to strony zawierąjce definicje stylów lub specyfikacje przekazujące instrukcje przeglądarkom odnośnie jak powinny wyświetlać poszczególne elementy strony. Pełna nazwa arkuszy pochodzi od angielskiego skrótu CSS (Cascading Style Sheets). Dlaczego ‘kaskadowe arkusze stylów? Do tego dojdziemy w kolejnych krokach tutorialu.

Dla ułatwienia, najpierw wbudujemy typowy arkusz stylów w naszą stronę a następnie umieścimy go w oddzielnym pliku, który będzie wywoływany przez wiele stron. Jest to rozwiązanie bardzo korzystne, ponieważ każda zmiana tylko w jednym pliku CSS będzie miała wpływ na wygląd kilku czy kilunastu tysięcy stron naszej witryny.

Style definiujemy w sekcji <head>…</head> w nastepujący sposób:

<head>

<style media=”all” title=”mojestyle” type=”text/css”>

<!–

–>

</style>

</head>

W powyższym przykładzie występuje jedynie para znaczników <style>…</style>, ale brakuje w nich jakichkolwiek definicji.

type=”text/css” mówi przeglądarce, że stosujemy zwykły tekst do opisu stylów.

title=”mojestyle” po prostu indetyfikuje nasze style dla naszych potrzeb. Tytuł jest opcjonalny i nie musimy go stosować. media=”all” jest czymś bardziej interesującym. Możesz określać jak strona ma wyglądać na monitorze komputerowym media=”screen”) lub w formacie przeznaczonym do druku
(media=”print”). Istnieją również inne typy mediów, takie jak: ‘projection’, ‘tv’,
‘braille’ i ‘aural’. Dla naszych potzreb zastosowaliśmy sobie ‘all’, które odnosi się do wszystkich rodzajów mediów.

Znaczniki <!–… –> są przeznaczone na komentarze, które widoczne są jedynie w kodzie strony. Komentarzy używamy do opisywania poszczególnych elementów dla naszych potrzeb. Ponieważ powyższe komentarze znajdują się w sekcji <head>…</head> i tak nie powinny być one widoczne w przeglądarce.

Pierwszą rzeczą jaką wykonamy będzie określenie stylów dla całej treści zawartej pomiędzy znacznikami <body>…</body> włącznie ze wszystkimi znacznikami zawartymi w środku.

Podstawowa definicja wygląda w nastepujący sposób:

body { }

Słowo body a za nim dwa nawiasy klamrowe.

Dodamy teraz kolo tła (po angielsku ” background color).

Domyślne ustawinia stylów w przeglądarkach
określają kolor czcionki na czarno na białym tle. Zmienimy to teraz i ustawimy kolor na szary, czyli zmienimy wartość właściwości koloru tła, jak to się fachowo określa. Na końcu zazwyszaj stawia się średnik. W naszym przypadku nie musimy tego robić, ponieważ definiujemy jedynie jedą właściowść.

body { background-color: #e8eae8 }

o to jest #e8eae8?

Kolory czcionek na stronach internetowych definiowane są mieszanką 256 odcieni czerwieni, szarości, zielenii i błękitu w różnych proporcjach. Posiadamy jedynie 10 palców rąk do naszej dyspozycji, na których możemy wykonywać różnego typu działania arytmetyczne. Komputery preferują system szenastkowy, ale przecież nie istnieją pojedycze cyfry określające numery 10, 11, 12, 13, 14, 15, 16, dlatego zastepujemy je literami a, b, c, d, e, f. W systemie szesnastkowym cyfra 10 wyrażona jest przez literę ‘a’, natomiast 15 lierą ‘f”. Cyfry powyżej 15 tworzy się poprzez dodanie kolejnej cyfry np.: dodając ‘0’ do ‘1’ czyli 10, daje nam cyfrę 16. Cyfra 17 wyrażona jest przez 11, a cyfra 18 przez 12, itp. Stosując tą metodę wszystkie liczby od 0 do 255 mogą zostać wyrażone kombinacją dwóch cyfr i liter – 255 to ff. Daltego #ffffff jest kolorem białym a #000000 kolorem czarnym.

Kolor nasze tła składa się z kombinacji trzech odcieni: czerwony e8(232), zielony ea(234), niebieski e8(232). Krzyżyk na samym początku oznacza, że używamy systemu szesnastkowego.

Czasami mogą pojawić się jedynie trzy znaki, np.: #2a0. Jest to skrót od #22aa00.

Jeśli znaki w parze są identyczne, można jeden pominąć, a przeglądarki i tak rozumieją o jaki kolor nam chodzi.

hexidecimal colours

Używając trzech cyfr można uzyskać jedynie 4096 kolorów, natomiast sześć daje nam w rezultacie ponad szesnaści milionów kolorów.

red green and blue

Zmieńmy teraz kolor czcionki w naszym arkuszu stylów. Kolory można kopiować z popularnych programów do malowania i obróbki zdjęć jak i edytorów tekstu, które posiadajakolory w zapisie szesnastkowym.

body { background-color: #e8eae8; color: #5d665b }

W powyższym przykładzie oddzieliliśmy poszczególne właściwości (background-color i color) średnikiem, który w tym przypadku musi być zastosowany.

Możemy teraz dodać margines zdefiniowany w pikselach. W naszym przykladzie bedzie on wynosił ‘margin: 50px’.

<head>

<style media=”all” title=”mojestyle” type=”text/css”>

<!–

body { background-color: #e8eae8; color: #5d665b; margin: 50px; }

–>

</style>

</head>

Nasza strona wygląda teraz następująco:

Nasza strona po zmianach »