Kaskadowe arkusze stylów ułatwiają projektowanie stron internetowych. Wygląd tabeli czy listy ustawia się raz i dołącza plik z klasami wewnątrz znacznika <head>. Dzięki prawidłowemu wykorzystywaniu kaskadowych arkuszy stylów cały projekt zajmuje mniej miejsca i jednocześnie jest łatwiejszy do zarządzania. Obecnie zmiana w jednym miejscu pliku css wystarczy, aby zmienić np.: wygląd tabel w całym projekcie. Umieszczenie arkuszy stylów w osobnym pliku ułatwia projektowanie , jednak powoduje wolniejsze uruchomienie strony internetowej, ale tylko za pierwszym razem. Po załadowaniu strony plik css jest przechowywany w pamięci podręcznej przeglądarki (cache).
Drugi sposób powoduje szybkie uruchomienie strony, lecz trzeba poświęcić więcej pracy tworzeniu stylów, które występują w każdym pliku html. Jest to dobry pomysł dla stron informacyjnych, pomocy, przesyłanych najczęściej w formie spakowanej, dzięki czemu arkusze stylów zawsze zostaną odczytane. Kaskadowe arkusze stylów składają się z selektora posiadającego deklarację (właściwości i pary) np.:
p.tekst { text-align: center; }
Czyli:
selektor { /* deklaracja */
wartość:para;
}
Drugi sposób:
selektor { /* deklaracja */
wartość:para;
wartość:para;
wartość:para;
}
Linijka kodu, którą należy dodać między znacznikami aby korzystać z zewnętrznych plików to:
<link rel='stylesheet' href='user.css' type='text/css' />
Należy jeszcze dopisać nazwę klasy z pliku user.css dla wybranego fragmentu tekstu w dokumencie HTML np.:
<p class='tekst'>To jest tekst wyśrodkowany na stronie.</p>
Poniżej dodano style dotyczące jednego pliku:
<html>
<head>
<style type='text/css'>
p.kolor { color: red; }
</style>
</head>
<body>
<p class='kolor'>Zmienia kolor tekstu na czerwony</p>
</body>
</html>
Jeszcze inny sposób to ustawienie styli za pomocą atrybutów w elementach:
<html>
<head>
</head>
<body>
<p style='color: red; text-align: center;'>Tekst strony koloru czerwonego wyśrodkowany na
stronie.</p>
<p style='color: red; text-align:center;'>To jest przykładowy tekst wyglądający tak samo.</p>
</body>
</html>
Przy tworzeniu kaskadowych arkuszy stylów można definiować klasy i identyfikatory:
/* klasa */ .tabelka {
..........
}
/* identyfikator */
#nowy {
..........
}
Chcąc korzystać z identyfikatorów należy zamiast atrybutu class zastosować atrybut id. Klasy posiadają
właściwości dziedziczenia a identyfikatory nie.
Wybrane książki:
- Laura Lemay, Rafe Colburn, Jennifer Kyrnin: HTML, CSS i JavaScript dla każdego. Wydanie VII, Wydawnictwo Helion, 2016.
- Jon Duckett: HTML i CSS. Zaprojektuj i zbuduj witrynę WWW, Wydawnictwo Helion, 2014.