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"?> a <!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="style.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> w <head>: 

 <style type="text/css">
 /* <![CDATA[ */
 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: 

 <?xml-stylesheet href="style.css" type="text/css"?>
 <?javascript
 //jakiś kod JavaScript
 ?>

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">/*<![CDATA[]]>*/</style>@H

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 "style.css" screen;
 Dołączy zawartość pliku styl.css do arkusza, w którym jest ta reguła.

 @media print { body {font-size:10pt;color:#000} }
 Reguły wpisane w środku @media print {} 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 Bug w IE

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. 

 @import "css/generalny.css" all;
 @import "css/kolorowy.css" screen;
 @import "css/dodruku.css" print;

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

Kaskada i dziedziczenie | Obsługa błędów
Zmodyfikowano: 30.08.2011, 10:12
submit