Pierwszą rzeczą, na którą zwraca uwagę użytkownik po uruchomieniu aplikacji lub wejściu na stroną internetową, jest jej wygląd. Od wyglądu zatem bardzo często zależy, czy internauta zostanie na naszej witrynie i będzie na nią wracał. Stąd też istnieje olbrzymia potrzeba tworzenia funkcjonalnych i miłych dla oka interfejsów czy szat graficznych. Na stronach internetowych od prawie samych początków istnienia HTML można było zmieniać wygląd poszczególnych elementów. Pojawił się jednak problem wynikający stąd, że dla każdego elementu tego samego typu trzeba było wpisać te same wartości - jeśli np. webmaster chciał, aby dwa przyciski wyglądały tak samo. Taki sposób zmiany wyglądu strony bardzo szybko przestaje być efektywny z powodu nadmiaru potrzebnego kodu, jego redundancji oraz przede wszystkim trudności w utrzymaniu. Rozwiązaniem tego problemu stały się kaskadowe arkusze stylów (w skrócie CSS - Cascading Style Sheets).

Kaskadowe Arkusze Stylów jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. CSS nie może zatem istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak (X)HTML. CSS daje możliwość globalnego zarządzania formą prezentacji całej witryny internetowej. Pomysł ten nie jest wcale nowy. Style formatujące są wbudowane od dawna w praktycznie każdy bardziej zaawansowany edytor tekstu. Posiada je np. MS Word i Open Office.

Niestety część poleceń stylów nie jest interpretowana przez niektóre przeglądarki internetowe lub jest obsługiwana odmiennie. Dlatego zawsze należy sprawdzać efekty w praktyce - jeśli to możliwe, to najlepiej w kilku najbardziej popularnych przeglądarkach: Microsoft Internet Explorer, Netscape/Mozilla/Firefox (czyli przeglądarki oparte na silniku Gecko), Opera. Absolutnie nie trzeba się jednak obawiać stosowania CSS, ponieważ nie powodują one błędów w przeglądarkach, które ich nie obsługują. Nigdy nie zdarzy się tak, aby strona w ogóle nie została wyświetlona, ponieważ korzysta z CSS. Jeżeli przeglądarka nie obsługuje stylów, po prostu je pominie.

Najważniejszym powodem wprowadzenia stylów było rozdzielenie struktury i prezentacji dokumentów. Język HTML wywodzi się od SGML (Standard Generalized Markup Language - Standardowy Uogólniony Język Oznaczania). SGML miał opisywać ogólną strukturę strony: nagłówek oraz ciało dokumentu, w którym mogły znajdować się akapity z tekstem, wykazy, tabele i inne elementy. SGML odpowiada tylko za wstawienie tych elementów, ale nie określa ich wyglądu. Jak łatwo się domyślić, szybko przestało to wystarczać - dlatego wprowadzono HTML. Zawarcie poleceń formatujących w samym HTML spowodowało jednak, że modyfikacja wyglądu elementów strony stała się bardzo żmudna (atrybuty i znaczniki które za to odpowiadają, są porozrzucane w różnych miejscach kodu, mieszając się ze strukturą dokumentu). Dzięki wprowadzeniu stylów CSS, wszystkie polecenia dotyczące formatowania można umieścić w jednym miejscu (tzw. arkuszu) i powiązać je z konkretnymi elementami, wstawionymi za pomocą czystego (X)HTML. Taka koncepcja sprawia, że modyfikacja wyglądu stron może przebiegać dużo sprawniej.

Dlaczego warto używać CSS?

1. Style stały się już praktycznie podstawowym narzędziem formatującym. Jeśli poważnie myślisz o zajęciu się projektowaniem stron WWW, koniecznie musisz je poznać.

2. Przestarzałe atrybuty i znaczniki, znajdujące się bezpośrednio w składni HTML, które dotyczą formatowania (zobacz: Elementy zdeprecjonowane), będą stopniowo wycofywane przez producentów przeglądarek internetowych, na rzecz rekomendowanych analogicznych deklaracji CSS. Widać już nawet różnice pomiędzy MSIE 4 a MSIE 5!

3. Dokumenty pisane z wykorzystaniem arkuszy stylów są zwykle bardziej przejrzyste i krótsze.

4. Style pozwalają w łatwy sposób zarządzać całą serią dokumentów, poprzez stosowanie zewnętrznych arkuszy stylów. Dzięki temu w łatwy i wygodny sposób, można dokonać modyfikacji rodzaju formatowania jednocześnie we wszystkich dokumentach, zmieniając dane tylko w jednym pliku!

5. Dzięki możliwości stosowania klas selektorów, znacznie oszczędzamy sobie pisania. W jednym miejscu określamy wszystkie atrybuty formatowania (których może być bardzo dużo), odnoszące się do wielu elementów, które mają wyglądać tak samo. Bezpośrednio przy elemencie wystarczy podać tylko nazwę klasy i nie musimy już wypisywać "litanii" poleceń. Znacznie przyspiesza to późniejszą modyfikację strony, ponieważ zmian dokonujemy tylko w jednym miejscu, a wpływają one na wiele elementów jednocześnie.

6. Możliwość stosowania różnorodnych jednostek oraz sposobów definiowania kolorów.

7. Style dają autorowi możliwości, które do tej pory były praktycznie niemożliwe do osiągnięcia:

• różne wartości pogrubienia czcionki (9 rodzajów),

• dodatkowe możliwości formatowania tekstu,

• nowe własności tła,

• obramowanie,

• dodatkowe właściwości wykazów (list),

• nowy model obramowania tabeli,

• pozycjonowanie,

• zmiana kształtu kursora,

• zmiana wyglądu odsyłacza, po wskazaniu go myszką,

• kolor suwaków (interpretuje MSIE 5.5),

• efektowne filtry graficzne (MSIE 4.0+),

• dodatkowe możliwości określenia wyglądu dokumentów podczas ich drukowania,

• i wiele innych. Dodatkowo w ciągłym opracowaniu są style poziomu trzeciego (CSS 3), które oferują jeszcze więcej rozwiązań.

Należy zapamiętać prostą zasadę: za pomocą języka (X)HTML wstawia się znaczniki do kodu źródłowego strony, a następnie dzięki CSS można nadać im potem określony sposób wyświetlania.

Sposoby wstawiania stylów do gotowych dokumentów są różne. Nie znaczy to, że jedne są lepsze od drugich. Każdy sposób jest przydatny w innych sytuacjach. Większość witryn stosuje jednocześnie wszystkie z przedstawionych metod osadzania CSS - w zależności od konkretnej potrzeby.

Jaka jest budowa stylów?

Ogólny schemat klasy CSS - selektor {właściwość: wartość; właściwość: wartość;}. Każda klasa stylu składa się z następujących elementów:

• selektor - informuje przeglądarkę, do jakich znaczników strony odnosi się styl,

• blok deklaracji - to kod po selektorze znajdujący się pomiędzy nawiasami klamrowymi; są to różne deklaracje stylów,

• deklaracje - są to pary typu „właściwość: wartość”,

• właściwość - jedno lub wiele słów oddzielonych myślnikami, odnoszące się do konkretnej właściwości, np. koloru, wielkości czcionki, szerokości itd.,

• wartość - nadaje konkretny efekt wizualny wybranym elementom strony.

Selektory

Istnieje kilka grup selektorów:

1. selektory znaczników - odnoszą się do każdego wystąpienia wybranego znacznika. Ich nazwy są takie same jak nazwy znaczników, do których są stosowane, jednak bez znaków „<” i „>”. Mają niestety pewne ograniczenie: ich zastosowanie dotyczy wszystkich wystąpień znacznika, zatem jeżeli chcemy zastosować styl tylko do części znaczników, musimy użyć bardziej precyzyjnych selektorów.

Przykłady:

p {background-color: #CCCCFF; text-align: center; } - style dla wszystkich akapitów,

h1{ font-family: Arial; margin-top: 10px; } - style dla wszystkich nagłówków 1. stopnia.

2. selektory klas - umożliwiają nadanie utworzonego stylu dla dowolnego znacznika na stronie. Wystarczy utworzyć taką klasę i zastosować ją dla wybranych elementów, nie stylizując pozostałych. Selektor taki rozpoczyna się kropką, dalej jest nazwa klasy, w której można używać jedynie liter, cyfr, łączników i znaków podkreślenia, z tym że bezpośrednio po kropce musi być litera. Rozróżniane są małe i wielkie litery.

Przykłady:

.images { width: 100px; height: 100px;} - elementy, do których zostanie przypisana ta klasa, będą miały wymiary 100x100px,

.specialText { font-size:18px; font-style:italic; } - tekst wyróżniony tym stylem będzie pochylony, a czcionka będzie wielkości 18px.

Po utworzeniu takiego stylu musimy go jeszcze dołączyć do wybranych elementów na stronie. Dokonamy tego poprzez wpisanie w kodzie HTML nazwy naszej klasy pod wartość atrybutu class wybranego znacznika. Użyta tu nazwa klasy powinna być już bez kropki.

Przykłady:

<img class="images" title="Mój Obrazek" src="../Picture.png" alt="Obrazek uszkodzony"/>

<span class=”specialText”>Tekst ten będzie wyróżniony dołączonym stylem.<span/>

3. selektory ID - nadają się idealnie do podpięcia stylu do pojedynczego elementu strony, dzięki czemu identyfikują niepowtarzalne części witryny. W przeciwieństwie do selektora klasy, możemy użyć takiego stylu tylko raz na stronie. Znak rozpoczynający selektor klasy to „#”. Po nim bezpośrednio jest nazwa identyfikatora elementu, do którego będzie zastosowany. Zasady tworzenia nazwy są takie same jak w przypadku klas.

Przykłady:

#header{ height:auto; background-color:#9ED4FF;} - wysokość dostosowuje się do zawartości i posiada określone tło,

Styl ten będzie użyty do elementu na stronie, który będzie posiadał atrybut:

id = #header, np.: <div id="header"></div>

4. selektor uniwersalny - jest dostępny wszystkim znacznikom na stronie, niezależnie od ich typu. Na przykład selektor * { font-weight: italic; } sprawi, że cały tekst na stronie będzie pochylony.

5. selektory zagnieżdżone, czyli selektory potomka. Przy tych selektorach należy omówić parę niezbędnych pojęć:

• drzewo HTML - to hierarchiczny układ elementów HTML, gdzie każdy element strony ma dokładnie jednego rodzica (oprócz elementu HTML),

• przodek - element będący o jeden lub więcej poziomów wyżej w drzewie hierarchii niż dany element, czyli znacznik, zawierający ten element,

• potomek - element będący o jeden lub więcej poziomów niżej w drzewie hierarchii w stosunku do danego elementu, czyli znaczniki będące w danym znaczniku.

• rodzic - jest najbliższym przodkiem danego znacznika, czyli jest dokładnie jeden poziom wyżej w drzewie HTML,

• dziecko - znacznik, który znajduje się bezpośrednio w danym elemencie,

• brat - znacznik będący na tym samym poziomie w drzewie hierarchii.

Drzewo HTML umożliwia tworzenie selektorów potomka zagnieżdżonego w różnym stopniu w innych znacznikach. Selektory takie tworzy się według reguły: przodek potomek { }, gdzie przodków może być więcej niż jeden, np. #content ul a { } oznacza wybór tylko tych znaczników <a>, które znajdują się w liście niepunktowanej, a która z kolei znajduje się wewnątrz elementu o id content. Selektor znacznika, który zamierzamy sformatować, znajduje się zawsze na końcu.

• selektor dziecka rodzic > dziecko { }

Tak utworzony selektor nada styl elementom będącym dokładnie o jeden poziom niżej w drzewie hierarchii niż jego rodzic. W przeciwieństwie do selektorów potomka, selektor ten pozwala dokładnie określić dziecko, do którego chcemy zastosować styl. W tym celu używamy znaku „>”.

• selektor brata brat1 + brat2 { }

Selektor ten umożliwia nadanie stylów sąsiadującym ze sobą elementom o tym samym rodzicu, dokładniej - elementowi znajdującemu się po prawej stronie znaku „+”.

• selektor atrybutu

Umożliwia on formatowanie elementu na podstawie jego atrybutów, dzięki czemu możemy nadać styl wyłącznie elementowi o określonych atrybutach, a nawet o określonych wartościach tych atrybutów. Można je stosować zarówno do znaczników, jak i klas, np.:

a[href="startStrony"] { color:Green;} - wyróżni wszystkie linki odnoszące się do startu strony,

input[type="text"] - odniesie się do wszystkich pól tekstowych formularza.

W przypadku wystąpienia konfliktu stylów wygrywa ten, który jest bardziej precyzyjny. Nazywamy to kaskadą.

Istnieje kilka sposobów aplikacji stylów na strony internetowe. Są to:

• styl lokalny (inline) - umożliwia on nadanie wartości atrybutom wybranym, pojedynczym elementom bezpośrednio w znacznikach kodu HTML;

• wewnętrzne arkusze stylów - są to style będące częścią kodu strony. Należy go zawsze umieszczać pomiędzy znacznikami <style> </style> w nagłówku strony. Warto zwrócić uwagę, iż znacznik ten jest częścią kodu HTML. Informuje on jednak przeglądarkę o tym, że zawarty w nim kod to CSS, a nie HTML;

• zewnętrzny arkusz stylów - możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie. Dzięki temu, za pomocą tego jednego arkusza, wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy. Dodatkowo jeśli w ostatniej chwili zdecydujemy się zmienić np. rodzaj czcionki na wszystkich stronach, możemy to zrobić, modyfikując jedynie zewnętrzny arkusz stylów, bez konieczności zmiany każdej strony osobno. Pozwala to zaoszczędzić mnóstwo czasu. Wstawienie takiego zewnętrznego arkusza stylów jest bardzo proste. Wystarczy wpisać w treści nagłówkowej każdego z dokumentów (pomiędzy znacznikami <head> a </head>), przedstawioną powyżej linijkę. Deklaracje stylów zawarte w zewnętrznym arkuszu, zostaną automatycznie przeniesione do podanej strony (podczas jej wyświetlania);

• wydzielone bloki - fragment dokumentu wydzielony za pomocą bloku <div>...</div> możemy swobodnie formatować. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy uzyskać. Metoda ta jest bardzo podobna do SPAN, lecz obejmuje zwykle większe fragmenty dokumentu (może zawierać w sobie różne znaczniki jak również inne bloki);

• alternatywny arkusz stylów - pozwala udostępnić użytkownikowi kilka wersji wyglądu strony do wyboru. Projektuje się wtedy kilka zewnętrznych arkuszy CSS, a następnie osadza w specjalny sposób, dzięki czemu w przeglądarce użytkownika pojawi się możliwość wyboru jednego spośród przygotowanych wyglądów. Jest to namacalny dowód potęgi języka CSS. Nie trzeba tworzyć, a potem aktualizować kilku wersji witryny, aby zapewnić użytkownikom możliwość dopasowania jej do własnych oczekiwań. Aby dodać nowy wygląd, wystarczy tylko przygotować dodatkowy plik *.css, a zmiana treści serwisu nie będzie wymagała żadnych modyfikacji wyglądu poszczególnych stylów;

• import arkusza stylów - polecenie można wstawić zarówno w wewnętrznym jak i zewnętrznym arkuszu stylów. Pozwala wczytać zewnętrzny arkusz stylów, przy czym może się on znajdować na tym samym serwerze (wtedy można podać względną ścieżkę dostępu) lub w dowolnym miejscu w obrębie całego Internetu (wtedy podajemy adres internetowy). Po wczytaniu, zostanie on automatycznie dołączony do strony.

Kaskadowość stylów - określa sposób rozwiązywania sytuacji, kiedy do jednego elementu na stronie przypisanych jest kilka różnych stylów. Oto kilka zasad ułatwiających określenie, który styl będzie zastosowany:

• zawsze zostanie zastosowany styl bezpośrednio określony dla danego znacznika,

• jeżeli znacznik nie posiada bezpośrednio stylu, to pierwszeństwo ma styl najbliższego przodka,

• w przypadku zastosowania stylów mających różne selektory i nie kolidujących ze sobą - są one zwyczajnie łączone, jednak w przeciwnym przypadku stosujemy formułę umożliwiającą określenie precyzji stylu - przypisuje ona dla poszczególnych stylów określone wagi:

selektor znacznika, w tym pseudoelementy: 1

selektor klasy, w tym pseudoklasy: 10

selektor identyfikatora: 100

styl wpisany: 1000

W przypadku kilku selektorów precyzja jest sumą wszystkich wartości. Style dziedziczone nie są brane tu pod uwagę.

• jeżeli kolidują ze sobą style o takiej samej precyzji, wygrywa ten styl, który został dodany jako ostatni.

8

---