| Syntaks: | font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] |
|---|---|
| Możliwe wartości : | <family-name>
<generic-family>
|
| Początkowa wartość: | Określa przeglądarka |
| Zastosowanie: | wszystkie elementy |
| Dziedziczność: | tak |
Typowa deklaracja font-family wyglada następująco:
P { font-family: “New Century Schoolbook”, Times, serif }
Arkusze stylów istnieją już od dawna ale ich sila i waga pozostawały niezauważone ze względu na nieliczne implementacje. W przeszlości projektanci stron używali wykorzystywali rozszrzenia Netscapa zamiast arkuszy stylów. Było to procesem naturalnym, ponieważ wiekszość użytkowników widziała te rozszerzenia.
Obecnie coraz więcej przeglądarek implementuje arkusze stylów pozwalając projektantom oddzielić prezentację od platformy i treści. Zalety arkuszy CSS stały się tak oczywiste jak wady tworzenia coraz to nowszych znaczników HTML.
Atrybuty właściwości BODY Netscapa zostały powszechnie zaakceptowane i ustandaryzowane w HTML 3.2. Jednak BGCOLOR, TEXT i inne znaczniki nie są wystarczająco elastyczne dla arkuszy CSS. Większość obrazów tła uniemożliwiłoby przeglądanie stron na monitorach szesnastokolorowych lub z 256 kolorami. Z konwencjonalnymi atrybutami właściwości BODY projektanci mieli ciężki orzech do zgryzienia: czy stosować obrazy tła czy raczej skoncentrować się na czytelności strony. Arkusze stylów pozwoliły na selekcję właściwego arkusza w zależności od właściwości monitora: “24-bitwy arkusz stylów” lub “8-bitowy”. Jeśli użytkownikowi nie podobają się style dostarczone przez projektantów, mogą oni je zignorować w swojej przeglądarce.
Arkusze stylów moga ułatwić życie projektana stron. Można zdefiniować zasady typu <HR WIDTH=”75%” SIZE=5 ALIGN=center> na każdej podstronie witryny ale jest to bardzo uciążliwe. W arkuszach stylów definiuje sie je tylko raz w w jednym miejscu. Zasady te dotyczą wtedy każdej strony witryny do której podłaczymy dany arkusz. Jeśli projektant zdecyduje się zmienić szrokość na WIDTH=”50%”, edytuje jedynie jeden plik CSS zamiast zmieniać tą regułę na wszystkich podstronach witryny. To nie jedyna zaleta. Arkusze znacznie obniżają czas ładowania strony.
Arkusze CSS są ogromnym krokiem naprzód w rozwoju internetu. Separacja treści i prezentacji, tzn. HTML od CSS pozwala uzyskać niezależność platformy. Projektanci mogą mieć wpływ na edycję prezentacji nie zakłucając czytelności strony.
Arkusz stylów składa się z reguł, które mówią przeglądarkom jak mają wyświetlać dany dokument. Istnieje kilka sposobów łaczenia tych reguł z dokumentami HTML, ale najprostrzym jest zastosowanie elementu STYLE w HTML. Element ten jest umieszczony w sekcji HEAD i zawiera reguły jedynie dla danej strony.
Element STYLE może być jedynie medodą eksperymentacji z CSS, ponieważ posiada on wiele wad. Wady takowe opisane są w innej sekcji niniejszego tutorialu.
Każda reguła składa się z selektora - zazwyczaj elementu HTML np.: BODY, P lub EM–i stylu jaki powinien dany element używać.
Istnieje wiele właściwości definiujących dany element. Każda właściwość zawiera w sobie wartość, które razem z właściwością pokazuja jak dany selektor ma być prezentowany.
Reguły stylów tworzy się w nastepujący sposób:
selector { property: value }
Kilka deklaracji dla pojedynczego selektora oddziela się średnikiem:
selector { property1: value1; property2: value2 }
Poniższy przykład definiuje właściwości color i font-size dla elementów H1 oraz H2:
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE=”text/css”>
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
Powyższy arkusz stylów mówi przeglądarce, że nagłówek H1 ma być większy i w kolorze czerwonym, natomiast H2 ma być duży i niebieski. Specyfikacja CSS definiuje właściwości i wartości, które są dostępne.
Niniejszy tutorial jest jedynie wprowadzenie do arkuszy CSS, ale dostracza informacji, które pozwolą na eksperymentowanie z sama ideą CSS.