W kursie tym zademonstrujemy jak łatwe jest projektowanie prostych arkuszy stylów. Do jego zrozumienia potrzebna jest podstawowa wiedza z zakresu języka HTML5 (zobacz [HTML5]) oraz znajomość najważniejszych pojęć z zakresu typografii komputerowej.
Zaczniemy od niewielkiego dokumentu HTML5:
Uwaga: Wygląd dokumentu określają reguły CSS zawarte w arkuszach domyślnych przeglądarki internetowej.
Do ustawienia koloru tekstu elementów <h1> na szary, można posłużyć się poniższą regułą:
h1 {
color: silver;
}
Reguła CSS3 składa się z dwóch zasadniczych części:
W języku HTML5 wielkość liter w nazwach elementów nie ma znaczenia. Dzięki temu <h1> niczym się nie różni od <H1>.
Deklaracja dzieli się na dwie części:
Mimo że powyższa reguła zmienia tylko jedną własność prezentowanego dokumentu HTML5, jest samodzielnym arkuszem stylów. Reguła ta w połączeniu z innymi arkuszami stylów (jedną z podstawowych cech technologii CSS3 jest to, że arkusze stylów można łączyć) będzie decydować o ostatecznej prezentacji dokumentu.
selektor {
deklaracja
}
własność: wartość [; własność: wartość ...] -
W specyfikacji HTML5 zdefiniowano następujące zasady dołączania reguł arkuszy stylów do dokumentów HTML5: można je wpisywać bezpośrednio w dokumencie HTML5 lub dołączać zewnętrzne pliki arkuszy. Do wstawiania arkuszy stylów bezpośrednionio w dokumencie HTML5 służy element <style>:
Jednak uzyskanie maksymalnej elastyczności możliwe jest dzięki stosowaniu zewnętrznych arkuszy stylów. Można je modyfikować nie edytując dokumentów HTML5 oraz można je dołączać do wielu dokumentów HTML5 na raz. Do dołączania zewnętrznych arkuszy stylów służy element <link>:
Element <link> dostarcza następujących informacji:
Aby pokazać bliski związek arkuszy stylów z kodem, w dalszej części tego kursu będziemy używać elementu <style>. Zdefiniujemy więcej kolorów:
Ten arkusz stylów zawiera cztery reguły:
Ponieważ dla elementu <p> nie został zdefiniowany żaden kolor, oddziedziczy on kolor po elemencie nadrzędnym <body>. Element <h1> również jest potomkiem elementu <body>, ale w tym przypadku wartość oddziedziczona zostanie przesłonięta przez drugą regułę CSS3. W CSS3 tego typu konflikty wartości zdarzają się często. W specyfikacji tej opisano sposób ich rozwiązywania.
własność 1: wartość 1; własność 2: wartość 2; ... własność n: wartość n[;] }
selektor 1 {
deklaracja 1
}
selektor 2 {
deklaracja 2
}
...
selektor n {
deklaracja n
}
W CSS3 jest ponad 100 własności, do których należy także 'color'. Zobaczmy jakie inne własności są dostępne:
Przede wszystkim należy zwrócić uwagę na zgrupowanie kilku deklaracji w bloku zamkniętym w nawiasach klamrowych ({...}). Poszczególne deklaracje są od siebie oddzielone średnikiem. Za ostatnią deklaracją również może znajdować się średnik.
Pierwsza deklaracja dla elementu <body> ustawia rodzinę fontów na "Arial Black". Jeśli ten font będzie niedostępny, aplikacja kliencka (często nazywana "przeglądarką") użyje rodziny 'sans-serif', która należy do grupy pięciu rodzin znanych wszystkim aplikacjom klienckim. Elementy potomne elementu <body> oddziedziczą tę wartość własności 'font-family'.
Druga deklaracja ustawia rozmiar pisma elementu <body> na 12 punktów. Jednostka "punkt" jest powszechnie stosowana w poligrafii do określania rozmiarów pisma i innych długości. Jest to jednostka bezwzględna, a więc nie zmieniająca rozmiaru w zależności od otoczenia.
W trzeciej deklaracji użyto jednostki względnej, która zmienia się zależnie od kontekstu. Wartość jednostki "em" jest wyznaczana na podstawie rozmiaru pisma elementu. W tym przypadku marginesy wokół elementu <body> będą trzykrotnie szersze niż wynosi rozmiar pisma.
Uwagi:
h1 {
color: silver
}