W trakcie tego cyklu wielokrotnie zwracano uwagę na arkusze stylów. Arkusze te pozwalają na ścisłe oddzielenie układu i designu. Dzięki CSS, elementy HTML są odpowiedzialne wyłącznie za logiczny lub semantyczny opis dokumentu internetowego.
Z doświadczenia wynika, że na początku pomocne jest poznanie struktury arkusza stylów. Przyjrzyjmy się pierwszemu przykładowi.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>W przeglądarce dokument wygląda tak:
W obszarze body pliku HTML zdefiniowano dwa elementy:
• nagłówek
• akapit tekstu
Poprzez CSS oba te elementy są formatowane. W tym celu w obszarze head zdefiniowano obszar arkusza stylów za pomocą style. Wewnątrz tego obszaru można formatować elementy.
Tutaj jeszcze raz definicja nagłówka h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Przez pokazaną składnię określane są dwa elementy:
• Określana jest rodzina czcionek.
• Definiowany jest rozmiar czcionki.
Na tym etapie chcemy skoncentrować się ogólnie na używanej składni. Każde polecenie CSS składa się zawsze z dwóch części – selektora i deklaracji CSS. Selektor określa element, który ma być sformatowany. Jak będzie ostatecznie wyglądać ta formatowanie, określa deklaracja CSS. Selektor jest zawsze po lewej, a deklaracja CSS po prawej, w klamrach.
Samo polecenie CSS składa się z dwóch elementów, mianowicie z właściwości i wartości. Właściwość i wartość są rozdzielane dwukropkiem. Po wartości następuje średnik.
Selektor {
Właściwość: Wartość;
}Integracja arkuszy stylów
Istnieje wiele różnych metod integracji arkuszy stylów w stronach internetowych. Po pierwsze, możesz przypisać instrukcje stylizacji bezpośrednio do tagu HTML. Przykład:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
W tym przykładzie nagłówek zostanie wyświetlony w niebieskim kolorze.
Możesz również dodać wiele instrukcji stylizacji do jednego tagu HTML.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Wystarczy po prostu zapisywać je jeden za drugim, rozdzielone średnikiem.
Zasadniczo te tzw. style inline są sensowne tylko wtedy, gdy poszczególne obszary na stronie mają być formatowane indywidualnie. Zwykle jednak powinieneś unikać tego rodzaju bezpośredniej stylizacji, ponieważ powoduje to nieuporządkowanie w kodzie HTML.
Centralna definicja w obszarze head
Możesz zdefiniować centralny arkusz stylów w obszarze nagłówka pliku HTML. Określa się w nim wszystkie style, które mają obowiązywać w danym pliku.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Zaletą tej wersji jest to, że w odróżnieniu od wersji inline, zdefiniowane formaty można wielokrotnie używać w dokumencie. W poprzednim przykładzie zdefiniowano klasę CSS text. (Szczegółowe informacje na temat selektorów, takich jak używana tutaj klasa, pojawią się w kolejnym samouczku). Tę klasę można teraz dowolną ilość razy umieścić w dokumencie.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Taka definicja ma oczywiście jeszcze jedną zaletę w porównaniu do wersji inline – pozwala szybko dokonywać zmian.
Wyodrębnianie instrukcji CSS
Najpraktyczniejszą metodą definiowania CSS jest wyodrębnienie stylów do zewnętrznego pliku. Dzięki temu wiele plików HTML może korzystać z tego samego pliku CSS. Umożliwia to łatwe uzyskanie spójnego formatowania wszystkich plików należących do projektu internetowego. Późniejsze zmiany, które mają wpływać na wszystkie strony, można łatwo wprowadzić.
<link rel="stylesheet" type="text/css" href="css/styles.css">
W sekcji nagłówkowej pliku HTML zdefiniowano element link. Wewnątrz link na początku podaje się parę atrybut-wartość rel="stylesheet". Następnie podaje się type="text/css". Atrybutowi href przypisuje się odpowiedni plik CSS. Należy zwrócić uwagę – podobnie jak przy dodawaniu obrazów – na poprawną ścieżkę dostępu. W tym przykładzie zakładam, że plik CSS styles.css znajduje się w katalogu css, który z kolei leży na tym samym poziomie co właściwy plik HTML.
Odwoływany plik CSS jest zwykłym plikiem tekstowym, który ma przyrostek css. W zewnętrznym pliku CSS definiuje się odpowiednie instrukcje CSS.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternatywnie do przedstawionej opcji z linkiem można również importować arkusze stylów. Tutaj również instrukcje CSS znajdują się w zewnętrznym pliku. Składnia jest następująca:
<style type="text/css">
@import url("css/styles.css");
</style>
Wewnątrz nawiasów podaje się ścieżkę do pliku CSS, który ma zostać zaimportowany. Zauważ, że @import to właściwie składnia CSS. Dlatego instrukcja @import może być również używana w plikach CSS. Dzięki temu możliwe jest wywoływanie innych arkuszy stylów z jednego arkusza stylów, co pozwala na lepszą organizację arkuszy stylów.
Oczywiście pojawia się pytanie, czy należy używać elementu link czy @import. Generalnie preferuję link, ponieważ ta opcja jest po prostu szybsza, dzięki czemu wydajność strony jest lepsza.
Arkusze stylów dla mediów
Można definiować arkusze stylów dla różnych mediów, takich jak drukarka czy ekran. Do tego służy atrybut media. Można również przypisać arkusz stylów do kilku różnych mediów, oddzielając je przecinkami.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
W tym przypadku wywołano dwa arkusze stylów, jeden dla ekranu, drugi dla przypadku, gdy strona zostanie wydrukowana. Plik CSS druck.css zostanie załadowany, gdy użytkownik wywoła funkcję drukowania w przeglądarce. Ogólnie dostępne są następujące wartości media:
• all – Dotyczy wszystkich mediów wyjściowych.
• aural – Plik CSS jest przeznaczony dla systemów wydających głosowo.
• braille – Plik CSS przeznaczony jest dla drukarek brajlowskich z informacją zwrotną dotykową, które mogą generować tzw. „alfabet Braille’a”.
• embossed – Wykorzystywane są tu drukarki brajlowskie do drukowania stron.
• handheld – Przeznaczone dla urządzeń przenośnych.
• print – Plik CSS dotyczy wydruku na papierze. Przeglądarki automatycznie powinny odwoływać się do tego pliku, gdy wywoływana jest funkcja drukowania.
• projection – Opcja ta jest przeznaczona dla projekcji prezentacji.
• screen – Przeznaczone do wyświetlania na ekranie.
• tty – Plik CSS jest dla mediów, które korzystają z ustalonej siatki znaków. Mogą to być na przykład teleprintery i terminale.
• tv – Określa urządzenia podobne do telewizorów. Przyjmuje się, że urządzenia te mają niską rozdzielczość i są ograniczone w przewijaniu.
Oprócz przedstawionej składni HTML za pomocą elementu link istnieją także specjalne warianty CSS. Oto przykłady użycia @import lub @media.
<style type="text/css">
@media screen, projection {
/* Style dla ekranu */
}
@media print {
/* Style dla druku */
}
</style>
Wewnątrz elementu style definiuje się za pomocą @media blok do definiowania formatów przeznaczonych dla określonego medium wyjściowego. Po @media należy podać jeden z wymienionych wcześniej typów mediów, oddzielając je spacjami. Jeśli jest ich więcej, należy je oddzielić przecinkami.
