Prawo Murphy'ego: Natura zawsze stoi po stronie Zła.
CSS - kaskadowe arkusze stylów

CSS - Kaskadowe arkusze stylów - to język opisu stylu dokumentów XHTML/XML i HTML. Dzięki niemu można oddzielić treść - zachowanej w pliku (X)HTML - od prezentacji, opisanej przez plik CSS. Dzięki kaskadowym arkuszom stylu możemy zmodyfikować wygląd każdego elementu (X)HTML a także iść dalej - zdefiniować własne klasy stylów, tak, że w zależności od nich dany element będzie prezentował się w różny sposób. Do dyspozycji mamy szeroką gamę środków - od zmiany czcionki, koloru, tła po dodanie obramowania, ustalenie pozycji elementu względem strony czy innych elementów. Stosując zaawansowane sztuczki można uzyskać zaskakujące efekty, przypominające użycie JavaScript, jednak pozbawione wad takiego wyjścia (możliwość wyłączenia przez użytkownika, rozbieżności w działaniu u różnych przeglądarek).

Obecnie nadal obsługa standardu CSS przez przeglądarki internetowe nie jest doskonała, ale systematycznie poprawia się. Mimo wszystko, nawet przeglądarki stare i nieaktualne, jak Internet Explorer i Netscape Communicator (w wersji starszej niż 6), będą mogły skorzystać z większości dobrodziejstw CSS. Warto włożyć nieco pracy w naukę kaskadowych arkuszy stylu, gdyż jest to krok w stronę tworzenia stron nowoczesnych, o łatwo modyfikowalnym wyglądzie (nie trzeba zmieniać każdego pliku, gdyż styl mamy zapisany w jednym miejscu) a zatem będących dłużej w użyciu.

Osadzanie stylów na stronie

Style wewnętrzne

  1. Umieszczenie deklaracji stylu bezpośrednio w formatowanym znaczniku, np.:

         <p style="color:red; font-size:14px;">Treść dokumentu</p>

    Wadą tego rozwiązania jest konieczność powielania tego samego stylu wiele razy, gdyż działa tylko dla znacznika, w którym został umieszczony. Powoduje to stratą czasu i zwiększa objętość kodu HTML. Podczas zmian takiego kodu, wymaga to dużego nakładu pracy.
     
  2. Umieszczenie deklaracji stylu w nagłówku strony, np.:

    <head>
    <style type="text/css">
    p {
         color:red;
         font-size:14px;
    }

    </style>
    </head>
    <body>
         <p>Treść dokumentu</p>
    </body>

    Ta metoda działa na wszystkie elementy znajdujące się w dokumencie. Przy tej konstrukcji zmiana prowadząca do modyfikacji wyglądu strony nie jest już problemem. Wystarczy wprowadzić modyfikacje tylko w nagłówku dokumentu, by cały dokument zmienił się zgodnie z nową wizją.
     

Style zewnętrzne

Najlepiej jest zebrać wszystkie style i umieścić w osobnym pliku opatrzonym rozszerzeniem .css. Taki arkusze stylów załącza się do pliku HTML za pomocą kodu:

     <link rel="stylesheet" type="text/css" href="moje_style.css">

umieszczonym w sekcji HEAD dokumentu.

Korzystanie z arkuszy stylów w samym kodzie HTML odbywa się poprzez dodanie do elementu np. <p> atrybutu class lub id np.:

     <p class="zielony">
lub
     <p id="zielony">

Gdzie wartościami są zdefiniowane przez nas wcześniej w pliku CSS klasy stylów.

W przypadku wielu dokumentów składających się na stronę ta metoda jest najmniej pracochłonna i najłatwiejsza do wprowadzania wszelkich modyfikacji.

Typy selektorów

Selektor uniwersalne

Selektor definiuje styl dla wszystkich elementów w dokumencie.
	* {
		background-color : white;
	}

Selektor elementu

Selektor definiuje styl dla wszystkich elementów danego typu.
	p {
		font-size : 12px;
	}
	td, th {
		color : #ff0000;
	}

Selektor potomka

Selektor definiuje styl dla elementów typu podanego jako ostatni znajdującego wewnątrz elementu(-ów) poprzedzającego definicję.
	/* styl dla elementów SPAN wewnątrz akapitu (P) */
	p span {
		color : blue;
	} 

	/* styl dla elementów SPAN wewnątrz akapitu znajdującego się wewnątrz bloku (DIV) */
	div p span {
		color : blue;
	} 

Selektor atrybutu

Każdy tag może posiadać atrybutami zgodne ze specyfikacją HTML.
Dzięki temu możemy tak skonstruować selektor, aby odnosił się on do konkretnego tagu i jego atrybutu.
	/* styl dla elementów A posiadających atrybut TITLE */
	a[title] {
		color : red; 
	} 

	/* styl dla elementów A posiadających atrybut TITLE o wartości ops_linku */
	a[title=ops_linku] { 
		color : red; 
	} 

Identyfikatory

Selektor definiuje styl dla elementów o podanym identyfikatorze. Definicja musi zaczynać się od znaku #.
	/* styl dla elementów posiadających ID = POGRUBIONY */
	#pogrubiony	{
		font-weight : bold;
	}
	
	/* styl dla akapitów posiadających ID = POGRUBIONY */
	p#pogrubiony {
		font-weight : bold;
	}

Klasy

Selektor definiuje styl dla elementów posiadających atrybut CLASS identyczny z definicją stylu. Definicja musi zaczynać się od kropki.
	/* styl dla elementów posiadających CLASS = POGRUBIONY */
	.pogrubiony	{
		font-weight : bold;
	}
	
	/* styl dla akapitów posiadających CLASS = POGRUBIONY */
	p.pogrubiony {
		font-weight : bold;
	}

Pseudoklasy

CSS pozwala na dodatkowe formatowanie niektórych elementów dokumentu. Najczęściej używane są pseudoklasy linków.
	/* styl zwykłego nieodwiedzonego linku */
	A:link {
		color : #990000;
    }

	/* styl odwiedzonego linku */
	A:visited {
		color : #990000;
    }

	/* styl linku po najechaniu na niego myszką */
	A:hover {
		color : #990000;
    }

	/* styl aktywnego - w momencie kliknięcia -  linku */
	A:active {
		color : #990000;
    }
« wstecz   dalej »