Zrozumieć arkusze stylów przy projektowaniu stron internetowych

Zrozumieć arkusze stylów
Oczywiście jeden styl nie przekształci strony w dzieło sztuki. Można za jego pomocą zmienić kolor akapitów na czerwony, ale aby nadać stronie wspaniały wygląd, trzeba użyć wielu stylów. Ich zbiór tworzy arkusz stylów.

Arkusz stylów
może być wewnętrzny lub zewnętrzny w zależności od tego, gdzie został umieszczony - w kodzie samej strony internetowej czy w oddzielnym pliku do niej dołączonym.
Styl wewnętrzny czy zewnętrzny
W większości przypadków najlepszym wyborem są zewnętrzne arkusze stylów,
ponieważ ułatwiają one projektowanie stron internetowych i przyspieszają aktualizację całej witryny.
Wszystkie style znajdują się w jednym pliku. Wystarczy tylko jeden wiersz kodu,
aby taki plik ze stylami dołączyć do strony HTML i całkowicie zmienić jej wygląd.
Wygląd całej witryny można zmienić, edytując tyko jeden plik - arkusz stylów.
Po stronie użytkownika zewnętrzne arkusze stylów pomagają w szybszym otwieraniu stron. Przy użyciu zewnętrznego arkusza stylów strony zawierają tylko
podstawowy kod HTML - żadnych „bajtożernych” tabel czy znaczników "font"
ani też kodu stylów wewnętrznych. Ponadto gdy przeglądarka pobierze zewnętrzny
arkusz stylów, to przechowuje go na dysku komputera użytkownika (w niewidocznym folderze o nazwie cache), zapewniając sobie do niego szybki dostęp.
Kiedy użytkownik przejdzie na inną stronę witryny, na której wykorzystano ten
sam zewnętrzny arkusz stylów, przeglądarka nie musi pobierać go ponownie,
tylko używa tego, który zapisała w pamięci podręcznej (cache). Daje to znaczne
oszczędności, jeśli chodzi o czas pobierania strony
Zewnętrzny arkusz stylów to nic innego jak zwykły plik tekstowy zawierający
wszystkie reguły CSS. Nigdy nie zawiera kodu HTML, więc nie należy w nim
umieszczać znacznika "style", i zawsze ma rozszerzenie .css. Można mu nadać
dowolną nazwę, ale opłaci się stosować nazwy opisowe. Na przykład arkusz stylów dotyczących całej witryny może mieć nazwę global.css, a arkusz stylów tylko
dla formularza może nosić nazwę form.css. Strony internetowe mogą być powiązane z arkuszami stylów na kilka sposobów.
Jedną z metod dodawania zewnętrznych arkuszy stylów do stron jest użycie
znacznika HTML "link". Jego wygląd różni się nieznacznie w zależności od tego,
czy jest on stosowany na stronie HTML, czy XHTML.
Jedyna różnica widoczna jest na końcu znacznika. Znacznik "link" to element
pusty, ponieważ ma tylko znacznik otwierający i nie istnieje odpowiadający mu
znacznik zamykający "/link". W XHTML-u konieczne jest dodanie zamykającego ukośnika (/>), aby oznaczyć, że znacznik w tym miejscu się kończy.
W HTML-u ukośnik ten nie jest wymagany.
Pozostałe części znacznika "link" są takie same zarówno w HTML-u, jak
i XHTML-u. Wymaga on podania trzech atrybutów:
• rel - oznacza typ łącza - w tym przypadku jest to łącze do arkusza stylów,
• type - informuje przeglądarkę, jakiego typu danych może się spodziewać -
plik tekstowy zawierający kod CSS,
• href - wskazuje lokalizację zewnętrznego pliku arkusza stylów. Wartością
tego atrybutu jest adres URL i działa on podobnie jak atrybut src używany
przy dodawaniu obrazów do strony lub atrybut href wykorzystywany przy
tworzeniu łączy do innych stron.