. - Wstep

Na początku był HTML - prosty język opisu stron. Z całą pewnością nie był on spełnieniem marzeń Webmasterów z powodu ograniczonych możliwości. Dopiero po wprowadzeniu przeglądarek graficznych W3 Consortium udostępniło CSS (kaskadowe arkusze stylów).

Głównym zadaniem HTMLa jest opis struktury strony, natomiast CSS odpowiada za określenie jej wyglądu. Stosując style zyskujemy bardzo duże możliwości wpływania na wygląd strony. Możemy określić niemal wszystko, zaczynając od wyboru koloru i rodzaju czcionki a kończąc na obramowaniu tabelek ! Jak zobaczysz w następnych lekcjach możliwości są ogromne. Jedną z ważniejszych funkcji CSS jest to, że wraz z JavaScriptem tworzy DHTML. <h3>Jak to wszystko działa?</h3>

Zasada działania CSS jest prosta. Wybranym elementom na stronie należy przypisać odpowiednie właściwości (np. kolor i wielkość czcionki). Powiedzmy, że chcemy aby w naszym serwisie każdy nagłówek pisany był czcionką Verdana i kolorem czerwonym. Wystarczy, że wybrane elementy nazwiemy np. "nagłówek" i przypiszemy im odpowiednie wartości {font-family: verdana; color: red;}. Łatwe, prawda ?

<h3>Jak zbudować styl</h3>

Chociaż style są integralną częścią HTML-a to jednak ich budowa nieco się różni. Podstawowa reguła CSS ma postać:


Selektor { 
	właściwość:wartość;  
	właściwość: wartość;  
	... 
}

np.


P { 
	font-size:10pt; 
	font-family:verdana; 
	color:green; 
}

Zacznijmy od początku. Co to właściwie jest ten selektor? Otóż jest to nazwa (elementu HTML lub dowolna) którą identyfikujemy regułę, w naszym przykładzie jest to P (nowy akapit). Dzięki selektorowi wiemy do którego elementu strony, przypisane są dane właściwości i wartości. Powyżej dla elementu P określiliśmy wielkość czcionki 10pt , kolor zielony oraz, że będzie pisana verdaną (czcionka). Zapytacie dlaczego piszemy P a nie jakąś inną literkę Wszystko zależy od tego jakiego rodzaju selektora użyjemy. Wyróżniamy trzy rodzaje selektorów:

<li><b>Selektor HTMLowy</b> - (poznałeś go powyżej) przypomina znacznik HTMLa, opuszczamy jedynie "klamerki" < i >. Selektorów tego typu używamy, do określenia właściwości konkretnego znacznika HTML.

<li><b>Selektor klas</b> - dzięki tym selektorom jesteśmy w stanie stworzyć niezależne style, które można dopasować do dowolnego znacznika HTML. Możemy stworzyć dowolną klasę np.

.mojaklasa{font-size:18pt; color:red;}
lub
DIV.klasa{font-size:18pt; color:red;}

W pierwszym przypadku stworzyliśmy klasę uniwersalną. Można wykorzystać ją w dowolnym znaczniku. Aby użyć tego rodzaju klasę, w znaczniku należy dopisać atrybut class="mojaklasa".

UWAGA: w definicji stylu przed selektorem klas wstawiamy kropkę, ale w znaczniku HTML NIE.

W taki oto sposób znacznikowi B dopisaliśmy właściwości "mojaklasa".

Z kolei w drugim przypadku stworzyliśmy klasę należącą do znacznika DIV. Jeżeli chcemy go użyć wystarczy, że we fladze DIV przypiszemy atrybut class="klasa".

Różnica polega tylko na tym, że pierwszy przykład możemy wykorzystać gdzie chcemy, natomiast drugi tylko w znaczniku DIV.

<li><b>Selektor identyfikatora</b> - zasada ich działania jest podobna jak w przypadku selektorów klas. Tutaj także mogą być wykorzystywane w dowolnych znacznikach HTMLa. Różnią się tylko tym, że wykorzystywane są tylko raz w dokumencie. Selektory zaczynają się zawsze od znaku # (hash) i dowolnej nazwy np.

#ident{font-family:tahoma; font-size:18pt;}

Selektory tego typu często wykorzystywane są w znacznikach <SPAN></SPAN> ponieważ nie posiadają one żadnych właściwości. Czyli, jeżeli stworzymy <SPAN id="ident">Tekst</SPAN> to tekst zawarty między tymi znacznikami będzie posiadał właściwości przypisane do selektora #ident.

<h3>Pseudoklasy</h3>

Najlepszym przykładem tutaj (i najczęściej wykorzystywanym) jest znacznik A (link). Taki element posiada kilka właściwości które mogą być opisywane jako osobne znaczniki. W tym przypadku jest to A:link (link nieodwiedzony) A:active (link aktywny) A:visited (link odiwedzony) oraz A:hover (gdy kursor myszy znajduje się nad linkiem). Każdemu z tych znaczników możemy dopisać osobne style, np.

A:active {color:blue;}
A:link {color:black;}
A:visited {color:green;}
A:hover {color:red; text-decoration:underline;}

Jest to bardzo znany sposób na atrakcyjne menu. Wypróbuj Uwaga pseudoklasa A: hover czytana jest dopiero przez przeglądarki IE 4.x i Netscape 6.

<h3>Grupowanie selektorów</h3>

Oczywiście dla wygody możemy pogrupować selektory posiadające te same właściwości. Wówczas wystarczy, że będziemy je wypisywać po przecinku.

P, B {font-size:10pt;}

Wiem, że wszystkie rodzaje selektorów wydają się trochę skomplikowane. Być może zastanawiasz się kiedy i jak ich użyć. Uwierz mi, że wystarczy trochę praktyki, żeby to wszystko bardzo szybko połapać Więcej na temat używania stylów w dokumencie dowiesz się poniżej.

<h3>Deklarowanie stylów</h3>

Teraz napiszę o umieszczaniu stylów w HTMLu. Wyróżniamy trzy sposoby deklarowania stylów. Reguły mogą być określane jako:

<li><b>Wpisane</b> - gdy umieszczane są wewnątrz znacznika HTML. Aby nam to wykonać, wystarczy, że w znaczniku zastosujemy atrybut STYLE. Wygląda to mniej więcej tak:

<B STYLE="font-size:10pt; background-color:yellow;">jakiś tekst</B>

Oznacza to, że jakiś tekst umieszczony pomiędzy znacznikami <B></B> jest pisany czcionką wielkości 10pt i tło tego tekstu jest koloru żółtego.

<li><b>Osadzone</b> - gdy wszystkie reguły stylu są umieszczone w nagłówku dokumentu <HEAD></HEAD> pomiędzy znacznikami <STYLE> i </STYLE>. Przykład:


 <HTML> 
 <HEAD> 
 <STYLE TYPE="text/css"> 
 <!-- 
 .klasa { 
 	font-size:12pt; 
 	font-family:verdana; 
 	color:red; 
 } 
 P { 
 	text-decoration:underline; 
 	color:blue; 
 } 
 --> 
 </STYLE> 
 </HEAD> 
 <BODY> 
 <SPAN class="klasa">Witaj na mojej stronie!</SPAN> 
 </BODY> 
 </HTML>

Jak powinieneś już pamiętać w pierwszej formule użyłem selektora klas a w drugiej HTMLowego.

<li><b>Zewnętrzne</b> - wszystkie reguły zapisywane są w pliku wewnętrznym o rozszerzeniu .css . Następnie plik taki dołączony zostaje do dokumentu HTML. Powiedzmy, że nasz plik będzie się nazywał style.css wówczas wystarczy w nagłówku dokumentu wpisać flagę:

REL="stylesheet" informuje, że nastąpi połączenie z arkuszem stylu, następnie przy pomocy HREF określamy śródło i na końcu typ pliku (text/css).

Teraz nasuwa się pytanie który rodzaj wybrać? Wszystko zależy od zakresu działania stylu. Jeżeli chcemy aby styl był przypisany tylko jednemu znacznikowi na konkretnej stronie wybierzemy reguły wpisane. Natomiast jeżeli chcemy określić styl dla powiedzmy wszystkich nagłówków na stronie, wykorzystamy reguły osadzone. Gdy przyjdzie nam ochota aby zapanować nad całym serwisem i na wszystkich stronach wykorzystać ten sam styl użyjemy stylu zewnętrznego.

Można łatwo się domyśleć, że najlepszym rozwiązaniem będzie chyba styl zewnętrzny. Załóżmy, że chcemy aby wszystkie nagłówki były pisane czcionką o jeden punkt mniejszą a cała reszta czcionką o jeden punkt większą. Wystarczy, że zmienimy to w pliku .css a cały serwis ulegnie zmianie! W ten sposób zaoszczędzimy mnóstwo czasu.

Przy wybieraniu rodzaju stylów należy się kierować także tym, że styl osadzony wygrywa ze stylem zewnętrznym. Natomiast styl wpisany wygrywa ze stylem osadzonym i zewnętrznym Jednym słowem element na stronie przyjmuje właściwości tego stylu który jest najbliżej.

Na tym zakończymy pierwszą lekcję. Miała ona za zadanie wprowadzić was w CSS. Wiem, że te wszystkie klasy, selektory, rodzaje stylów itp. itd. mogą Was odstraszyć ale to jest naprawdę banalne. Na pewno połapiecie przy następnej lekcji która będzie dotyczyła wszystkiego na temat tekstu (formatowanie, czcionki, kolor...).