HTML vs HTML+CSS
Do czego mi ten CSS?
- Dla własnej wygody.
- Optymalizacji stron pod kątem SEO.
- Stał się już standardem współczesnej webmasterki (w połączeniu z XHTML).
- … i jeszcze raz dla wygody.
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.
Co to jest ten CSS?
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).