Niedziela 19 Maj 2024r. Godz 00:00:00      
Postów: 251      

Arkusze stylów i media CSS

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.).

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

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

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>

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

 @import "styl.css";
 Dołączy zawartość pliku styl.css do arkusza, w którym jest ta reguła.

 @media print { reguły }
 Reguły wpisane w środku zostaną zaaplikowane jedynie do 
drukowanych dokumentów (media print).

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.

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.