Jeszcze kilka lat temu, do rozmieszczenia elementów na stronach www, webmasterzy namiętnie wykorzystywali tabele. Zostały one stworzone do prezentowania danych tabelarycznych - podobnie jak arkusz Excela. Jakiś spryciarz doszedł do wniosku, że nadają się świetnie do kształtowania wyglądu strony - wystarczy uczynić linie tabel niewidocznymi ...i poszły za nim miliony.
Sielanka trwała kilka ładnych lat, do czasu aż jakiś geniusz-legat postanowił ułatwić sobie pracę i wymyślił CSS. Tym „leniwym” geniuszem był Hakon Wium Lie (1994), który pierwszy zaproponował zarysy tego języka. W 1996 organizacja W3C opracowała i wprowadziła CSS.
Każdy, kto chociaż raz był zmuszony do edycji swojej witryny www, np. zmiany czcionki, koloru nagłówków, lub innych elementów - powinien oprawić zdjęcie Hakona w ramki i codziennie rano oddawać mu cześć i palić kadzidła ;)
Przypuśćmy. Budzisz się któregoś pięknego poranka, włączasz komputer i dochodzisz do wniosku, że Twój serwis internetowy wyglądałby lepiej gdybyś użył czcionki Verdana.
Co robisz? Odpalasz edytor HTML i mozolnie zmieniasz wszystkie znaczniki <font>, których jest od kilku do kilkudziesięciu na każdej z dziesięciu podstron serwisu. Łatwo policzyć, że daje to od kilkudziesięciu do kilkuset znaczników, które musisz poddać edycji. No to masz ładną część dnia z głowy. Nie wspomnę o tych których serwis www składa się z kilkudziesięciu, a nawet kilkuset podstron!
Co natomiast robi ktoś kto, do formatowania wyglądu swojej witryny internetowej używa stylów CSS? Odpala edytor HTML, lub nawet notatnik. Zmienia jedną linijkę tekstu i ...zapomina o sprawie.
CSS: (Cascading Style Sheets) - kaskadowe arkusze stylów. Jest to język służący do opisu wyglądu witryny www.
Brzmi skomplikowanie? W rzeczywistości jest to najprostsze i najwygodniejsze narzędzie dla programistów www :)
Porównam go do ściągi dla przeglądarki internetowej. Piszesz w niej jak mają wyglądać elementy Twojej strony. Np. chcesz aby wszystko było napisane czcionką Verdana. Otwierasz czysty dokument tekstowy (nawet w notatniku) i piszesz w nim:
body {font-family: Verdana;}
Zapisujesz go dodając rozszerzenie (.css). Następnie w kodzie HTML strony, w nagłówku <head> podrzucasz informację gdzie jest ściąga i jak się wabi (bo można mieć kilka). Wygląda to tak:
<link rel="stylesheet" href="jakas_nazwa.css" type="text/css" />
Przeglądarka - zanim wyświetli treść strony w swoim oknie, czyta jej kod źródłowy w dokumencie HTML. Widząc w jego nagłówku informację o ściądze i miejscu jej spoczynku - ochoczo z niej korzysta. Zanim cokolwiek wyświetli - przeczyta ją, a że łeb niekiepski - zapamięta całą. Następnie wyświetli stronę korzystając ze wskazówek zawartych w ściądze.
W opisanym wcześniej przypadku - całą treść wyświetli za pomocą czcionki Verdana.
Jeżeli dojdziesz do wniosku, że Verdana jest OK, ale nagłówki <h1> lepiej wyglądałyby pisane czcionką Arial w kolorze czerwonym o wysokości 14 pikseli. Nic prostszego. Otwierasz swój wcześniej utworzony dokument css i dopisujesz kolejną linijkę:
body {font-family: Verdana;}
h1 {font-family: Arial; color: #CC0000;}
Od tej pory cała treść Twojego serwisu wyświetlana jest za pomocą czcionki Verdana, a wszystkie nagłówki pierwszego poziomu - czcionką Arial, koloru czerwonego. Proste?
Do nauki CSSa polecam książkę: Rachel Andrew - "101 wskazówek i trików. CSS. Antologia" (wydawnictwo Helion).
© copyright: www-4u.pl
