Kaskadowy arkusz stylów css

Arkusze stylów CSS (Cascading Style Sheets) pozwalają określać wygląd większości elementów strony www. Styl pozwala globalnie lub lokalnie zmieniać sposób formatowania wybranego elementu dokumentu HTML. Za pomocą arkusza stylów można formatować tekst, ustawiać rodzaj czcionki, jej kolor, rozmiar i inne własności, zmieniać tło strony, tabelki lub paragrafu, tworzyć obramowania, zmieniać kształt kursora, wygląd odsyłaczy, kolory suwaków, właściwości wykazów i wiele, wiele więcej. Nie ma już potrzeby ustawiać tych właściwości za pomocą atrybutów znaczników HTML. Niektóre z tych właściwości są praktycznie niemożliwe do osiągnięcia za pomocą znaczników języka HTML. Arkusze stylów w dużym stopniu rozszerzają skalę naszych możliwości, wprowadzają możliwości formatowania tekstu tak jak w zaawansowanych edytorach tekstowych.

Ważną zaletą stylów jest to, że niezwykle ułatwiają i przyspieszają pracę. Gdy chcemy zmienić wygląd wybranych elementów strony bądź całego serwisu wystarczy wykonać odpowiednie zmiany w arkuszu stylów, a efekt będzie widoczny od razu we wszystkich elementach oznaczonych tym stylem. Jakakolwiek zmiana wyglądu dokumentów formatowanych bezpośrednio poprzez znaczniki HTML wymagała dokonania poprawek na każdej stronie, w każdym elemencie z osobna.

Kolejna zaleta arkuszy css to możliwość oddzielenia układu strony od właściwości jej elementów. Za pomocą języka HTML tworzy się tylko strukturę dokumentu, a korzystając ze stylów odpowiednio się go formatuje, ustawia się np. kolor czcionki, tło, wielkość liter itp. W ten sposób nasz dokument staje się bardziej przejrzysty.

Osadzanie stylów na stronie

Kaskadowe arkusze stylów mogą być osadzone w dokumencie HTML na kilka sposobów. Specyfikacja przewiduje następujące rozwiązania:

  1. Style wewnętrzne
    • lokalne
    • zagnieżdżone
  2. Style zewnętrzne
    • dołączone
    • importowane

Style wewnętrzne

Styl lokalny - umieszczenie deklaracji stylu bezpośrednio w formatowanym znaczniku.

...
<body>
<p style="color:green; font-size:15pt;">Treść dokumentu</p>
<p>Treść dokumentu</p>
<p style="color:green; font-size:15pt;">Treść dokumentu</p>
<p>Treść dokumentu</p>
</body>

Przykład stylu umieszczonego w znaczniku, widoczny na powyższym listingu, uzmysławia nam, że taka konstrukcja opiera się na stosowaniu atrybutu style dla znacznika <p>. Wadą tego rozwiązania jest konieczność powielania tego samego stylu wiele razy, ponieważ działa on tylko dla znacznika, w którym został umieszczony.

Styl zagnieżdżony - Definicję stylu umieszczamy na początku strony w sekcji nagłówkowej, czyli pomiędzy znacznikami <HEAD> i </HEAD>, definiuje ona na cały dokument i wygląda na przykład tak:

<HEAD>
<STYLE TYPE="text/css">
<!--
P {font-size: 10pt; font-family: Arial, Verdana, Helvetica; }
-->
</STYLE>
</HEAD>

Gdy kilka stron jest formatowanych za pomocą tego samego zestawu stylów, lepiej stosować zewnętrzne arkusze stylów, co ułatwia dokonywanie zmian i zmniejsza wielkość plików.

Style zewnętrzne

Styl dołączony — style CSS można dołączyć z zewnętrznego pliku (*.css), a w dokumentach w sekcji <HEAD> wstawić odpowiednie odwołania do tego pliku. Są to odwołania do tzw. stylów zewnętrznych:

<HEAD>
...
<LINK rel="stylesheet" href="*.css">
</HEAD>

W tym przypadku należy utworzyć odrębny plik o nazwie *.css, np. styl.css lub mojstyl.css, plik ten powinien zawierać definicje stylów dla wszystkich elementów strony www, które chcemy odpowiednio sformatować. Ten sposób dołączania stylów jest bardzo wygodny, ponieważ tworzy się tylko jeden plik ze stylami. W tym pliku można trzymać definicje stylów nawet dla dużych serwisów internetowych, składających się z wielu stron.

Szczegółowy opis zewnętrznego arkusza stylów znajdziesz w kolejnych zakładkach.

Budowa arkusza stylów

Kaskadowy arkusz stylów to zwykły tekst - lista reguł ustalających sposób formatowania elementów treści.

Budowa reguły

Pojedyncza reguła może określać style dla jednego lub wielu elementów dokumentu. Każda reguła składa się z dwóch części:

Selektor [od ang. select] może wskazywać na jeden element lub grupę elementów albo na atrybut.
Deklaracja określa właściwość i jej wartość.

Ponieważ selektory mogą wskazywać na elementy bądź atrybuty wyróżniamy trzy typy selektorów:

Arkusze wewnętrzne i zewnętrzne

Arkusz stylów może być osadzony wewnątrz dokumentu za pomocą elementu <style> albo umieszczony w dołączonym pliku.

Swoje własne domyślne arkusze stylów mają również urządzenia odczytujące. Jeśli do dokumentu nie podpięto arkusza stylów lub jeśli arkusze stylów zostały wyłączone przez użytkownika, do prezentacji dokumentu wykorzystywane są domyślne arkusze stylów urządzeń odczytujących.

Kolejność stosowania reguł

Styl elementu może być określony w różnych miejscach:

Które reguły zostaną więc ostatecznie zastosowana? W jakiej kolejności?

Kolejność stosowania reguł wyznaczana jest przez trzy zasady: dziedziczenia, specyficzności i kaskadowości.

Dziedziczenie

Zasada dziedziczenia właściwości zakłada, że elementy potomne dziedziczą właściwości swoich ’rodziców’, czyli elementów nadrzędnych, obejmujących. Nie wszystkie jednak właściwości są dziedziczone. Informacje na ten temat znajdziesz w specyfikacji czy w podręcznikach CSS.

Kaskadowość

Sytuacje konfliktowe rozwiązywane są zgodnie z zasadą kaskadowości. Wedle tej zasady pierwszeństwo mają style zdefiniowane bliżej formatowanego elementu. Nadpisują one style zdefiniowane wcześniej. Im później w dokumencie lub w arkuszach stylów występuje deklaracja, tym jest ważniejsza. Kolejność interpretacji jest następująca:

W praktyce - gdy któryś z elementów formatowany jest w sposób nieoczekiwany, trzeba sprawdzić, czy został uwzględniony mechanizm dziedziczenia, przeanalizować wagę deklaracji, przyjrzeć się kolejności występowania reguł.

Grupowanie selektorów i deklaracji, skrótowe zapisy

Im zwięźlejszy kod CSS, im mniejsze pliki arkuszy stylów, tym lepiej. Zmniejszanie objętości kodu umożliwia grupowanie selektorów i deklaracji oraz skrótowe zapisywanie właściwości.

Grupowanie selektorów pozwala przypisywać wielu elementom te same właściwości, np.:

h1, h2, h3, h4, h5, h6 {color: blue;}

Grupowanie deklaracji natomiast pozwala w jednej regule umieścić wiele właściwości. Grupując deklaracje w pojedynczą regułę, należy pamiętać o oddzielaniu ich średnikami.

Przykład grupowania deklaracji:

h1 {
font-style: italic;
font-weight: bold;
font-variant: small-caps;
font-size: 12px;
line-height: 14px;
font-family: helvetica, sans-serif;
}

Tę regułę można zapisać znacznie krócej.

Skrócone właściwości

Wiele właściwości można wyrazić jednocześnie, w jednej deklaracji. Poniżej przedstawimy kilka najpopularniejszych przypadków.

Czcionki

Niekiedy, zamiast - jak widzieliśmy wyżej - sześciu deklaracji formatujących czcionkę, można użyć jednej, np.:

h1 {font: italic bold small-caps 12px/14px helvetica, sans-serif;}

Kolory

Jeśli określenie koloru zapisane w postaci szesnastkowej składa się z trzech par cyfr szesnastkowych, można w każdej parze ominąć jedną z nich:

#000000 można zapisać jako #000
#338855 można zapisać jako #385

Tło i podkład

Zamiast określania tła i obrazka podkładu w kilku deklaracjach (dla właściwości: color, image, repeat, attachment i position, wystarczy skorzystać z background, np.:

body {background:#fff url(../images/obrazek.png) no-repeat fixed 0 0;}

Obramowania [border]

Zamiast trzech deklaracji własności rozmiar, styl i color, można je umieścić w jednej deklaracji, np.:

div {border: 2px dashed blue;}

W skróconym zapisie musi być kolejność:   styl, variant, weight, size, line-height, rodzina. Niektóre własności można pominąć, konieczne jest określenie tylko rozmiaru i rodziny czcionki.

Listy

Zamiast deklarować   list-style-type, list-style-position, list-style-image   możesz użyć jednej, np.

ul {list-style-type:disc inside url(../images/punktor.png);

Wsparcie CSS przez przeglądarki

Przeglądarki w różnym stopniu wspierają obsługę CSS. Aktualnie najlepiej wspierają CSS przeglądarki oparte na silniku Gecko (Firefox, opera, Safari, Konqueror). IE 6 nawet w trybie zgodności ze standardami, nie obsługuje poprawnie CSS2, nie obsługuje wszystkich własności, sporo w niej błędów. W IE7 nastąpiła znaczna poprawa obsługi CSS2, aczkolwiek nadal nie jest kompletna.

Standard CSS 3 nie jest jeszcze całkowicie obsługiwany, najlepiej z niego korzystać z umiarem. Większość przeglądarek obsługuje już zaokrąglanie rogów.

Obsługa błędów w CSS

Przeglądarki mają obowiązek całkowicie ignorować fragmenty arkusza, których nie rozumieją. Jeśli nie rozumieją fragmentu selektora, ignorują całą regułę. Jeśli nie rozumieją którejkolwiek z wartości właściwości, ignorują całą właściwość, ale nie regułę.

W połączeniu z kaskadą pozwala to podać kilka wersji każdej reguły dla przeglądarek, które nie rozumieją tych bardziej zaawansowanych.

#foo {
color: rgb(,0,0);
color: rgba(,0,0,0.5);
}

Jeśli przeglądarka nie rozumie rgba to zignoruje tę właściwość i pozostawi wcześniej ustawiony nieprzezroczysty kolor. W przeciwnym wypadku druga reguła nadpisze pierwszą.

a, b, c[%%%] {color: red}

Reguła nie zostanie zastosowana do żadnego elementu, ponieważ nieprawidłowy selektor c[%%%] powoduje jej całkowite zignorowanie (czyli selektory a i b też nie zostaną wzięte pod uwagę).

a {border: 2px; border: 1px 0 0 7foo;}

Cała ramka będzie dwupixelowa, ponieważ nieprawidłowa jednostka 7foo powoduje zignorowanie całej drugiej właściwości.

Przy ignorowaniu przeglądarki przeskakują klamry, nawiasy i cudzysłowy parami. Oznacza to, że niedomknięcie któregoś z tych elementów może spowodować zignorowanie nawet całego arkusza.

Częstym błędem jest dostawienie średnika za klamrą kończącą regułę CSS. Średnik jest traktowany jako część nieprawidłowego selektora i powoduje zignorowanie całej kolejnej reguły.

Wykaz właściwości (cech) CSS

Jednostki w CSS

W definicjach własności mogą mieć określony rozmiar, wyrażany za pomocą liczby i dwuliterowego identyfikatora jednostki.

Jednostki kolorów

Kolory mogą być określone imiennie: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

...lub jako kombinacje kolorów RBG (red, green, blue):

Dodatkowo, CSS2 pozwala wykorzystać specjalne nazwy kolorów, które odnoszą się do odpowiednich elementów w systemie operacyjnym czytelnika strony. Są one przydatne wtedy, gdy zależy nam, aby dokument zawierał kolory odpowiadające schematowi kolorów używanych przez czytelnika.