Arkusze stylów i media

Łączenie wielu arkuszy stylów

Istotną cechą CSS jest możliwość łączenia wielu arkuszy stylów. Można do strony „podpiąć” wiele arkuszy stylów, a także same arkusze łączyć ze sobą.

Dzięki temu możesz rozbić reguły CSS na kilka arkuszy, podzielonych np. wg funkcji (układ strony, formularze, itp.) lub sekcji strony (główna, forum, galeria, itd.).

Xml-stylesheet

W językach opartych na XML można osadzać arkusze stylów w ten sposób: <?xml-stylesheet href="adres" type="typ_MIME"?> Zalecam stosowanie właśnie tej metody. Aby powyższe polecenie zadziałało, należy je umieśćić pomiędzy <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">. Nie polecam stosowania tej metody. Metoda ta została zastosowana tutaj.

Zazwyczaj łączy się dokument z arkuszami za pomocą elementów <link> umieszczonych w <head>:

 <link rel="stylesheet" href="arkusz.css" type="text/css"/>

Style

Jeśli arkusz jest używany wyłącznie przez jeden plik XHTML, to można go osadzić bezpośrednio w nim za pomocą elementu <style><head>:

 <style type="text/css">
 tutaj {reguły: css;}
 </style>

Umieszczaj zawsze odwołania do arkuszy stylów przed odwołaniami do skryptów (<script src="">), lub bezpośrednio przed skryptami — zyskasz kilka cennych sekund wczytywania strony.

Style + Xml-stylesheet

Przy używaniu metody Style lepsza jest ta metoda. Do znacznika <style> dodaj identyfikator id np. internalStyle a potem użyj też jednocześnie tej metody, wpisując zamiast adresu identyfikator elementu <style /> poprzedzony znakiem #. W ramach HEAD: <style type="text/css" id="identyfikator"></style> Przed DOCTYPE: <?xml-stylesheet href="#identyfikator" type="text/css"?>

Importowanie arkusza w arkuszu

Dodatkowo można łączyć arkusze ze sobą. Reguły @import mogą wystąpić tylko na początku arkusza, przed innymi regułami.

 @import url("styl.css") screen;
 Dołączy zawartość pliku styl.css do arkusza, w którym jest ta reguła (media screen — nie trzeba umieszczać).

 @media print { body {font-size:10pt;color:#000} }
 Reguły wpisane w środku zostaną zaaplikowane jedynie do drukowanych dokumentów (media print).

Media

Strony internetowe są używane nie tylko na ekranie komputera, ale także drukowane i przeglądane na różnych innych urządzeniach jak np. telefony komórkowe.

CSS pozwala jeden i ten sam dokument XHTML dopasować do wymogów tych różnych mediów. Wersja na ekran może być kolorowa, wersja do druku uproszczona, czarnobiała i pozbawiona linków nawigacyjnych, a wersja dla telefonów komórkowych bez grafiki i w jednej kolumnie.

Wybór mediów

Ponieważ aural to na razie tylko ciekawostka — pomijamy.

Przy osadzaniu arkuszy w XHTML można dodać atrybut media zawierający rozdzieloną przecinkami listę mediów, dla których arkusz się nadaje. Wartość all oznacza, że dla wszystkich. Pozostałe wartości to Screen — ekran, print — druk, handheld — małe urządzenia przenośne, projection — pokaz slajdów na pełnym ekranie.

 <link rel="stylesheet" media="all" href="generalny.css" type="text/css"/>
 <link rel="stylesheet" media="Screen,projection" href="kolorowy.css" type="text/css"/>
 <link rel="stylesheet" media="print" href="dodruku.css" type="text/css"/>

Pamiętaj, że kolejność osadzania arkuszy ma znaczenie. Reguły z później osadzonych arkuszy nadpiszą reguły z wcześniejszych, dlatego najlepiej jest najpierw osadzić arkusze uniwersalne, a potem modyfikujące je arkusze dla konkretnych mediów.


Zmodyfikowano: 17.02.2015, 12:49
submit