Jak łatwo i przyjemnie zarządzać oprawą graficzną strony czyli CSS

Do tej pory nigdy nie napisałem posta o CSSie, a że jest to bardzo ważny element tworzenia stron www (i nie tylko) to dziś postanowiłem kilka słów w tym temacie napisać. CSS (Cascading Style Sheets) czyli kaskadowe arkusze styli służą do oddzielenia warstwy wizualnej od struktury dokumentu.  Style można wykorzystać na wiele sposobów od określenia parametrów czcionek jak wielkość, kolor… po rozmieszczenie elementów na stronie. CSS został opracowany przez organizację w3c w 1996r więcej informacji. „Kilka lat temu” strony budowano w oparciu o tabele. Tworzyło się tabele w niej zagnieżdżone kolejne i w ten sposób rozmieszczano elementy na stronie. Stosowanie tabel po pierwsze nie dawało takiej władzy nad elementami jak CSS, a do tego powodowało, że kod stron dla przeglądarek był mało nieczytelny. Efektem tego jest np. zajmowanie przez takie strony niższych pozycji w wyszukiwarkach. Sam także zaczynając projektować strony www budowałem je w oparciu o tabele jednak to już zamierzchłe czasy. Bardzo duży nacisk w tworzonych stronach stawiam na łatwość ich pozycjonowania w związku z czym poprawny kod, zgodny ze standardami w3c jest dla mnie bardzo ważny. CSS mimo, że jest tak wygodny ma swoje wady. Zmorą webmasterów jest brak zgodności przeglądarek w interpretacji kodu css. Główne problemy stwarzają przeglądarki Internet Explorer niestety, ale Microsoft za nic ma sobie standardy i webmasterzy często muszą się głowić, aby strona wyświetlała się poprawnie we wszystkich przeglądarkach. Nowsze wersje IE7 czy IE8 są już wolne od wielu błędów aczkolwiek IE6, który stwarza największe problemy cały czas jest na rynku obecny. Mimo tych trudności warto tworzyć strony w oparciu o „divy” (warstwy). Dla wprawnych webmasterów nie są to wielkie problemy. Nie korzystając z css za każdym razem gdy w dokumencie mieliśmy link tekstowy koloru pomarańczowego, pogrubiony wpisywaliśmy: <a href=”http://tutajlink” font color=”red” font size=”14px”><b>link</b></a> wyobraź sobie ile razy trzeba byłoby wpisać tę definicję na większej stronie internetowej, aby zachować jej spójność graficzną.

Jak to działa w CSS? Definicje css można umieszczać w polu head strony, lub w plikach zewnętrznych. Ja preferuję raczej w plikach zewnętrznych to pozwala zachować większy porządek i witryna ładuje się szybciej. W przypadku powyższego linku zapisalibyśmy go następującą: w pliku html <a href=”http://” class=”link”></a> w pliku CSS .link{color:red; font-weight:bold; font-size:14px;} Powyższy zapis powoduje, że w pliku html mamy bardzo prosty zapis, a jego definicję zapisujemy w oddzielnym pliku CSS. Tej klasy css możemy użyć w setkach dokumentów html naszej strony. Zmieniając definicję klasy czyli np. kolor z czerwonego na zielony zmieniamy go na wszystkich podstronach. Nie wykorzystując CSS’a musielibyśmy zmiany wprowadzić we wszystkich dokumentach html. Przy większej ilości podstron byłoby to niemalże niemożliwe. Tak jak wcześniej wspominałem to tylko definicja czcionki, a za pomocą CSS’a możemy zmieniać np. miejsce położenia menu na stronie czy innych elementów zmieniając tylko i wyłącznie CSS nie ingerując w strukturę dokumentu. Dość dobrze mogłem to zaobserwować pracując w firmie Perspektywy na CMSie Joomla. Wszystkie strony tworzyliśmy w tym CMSie wraz z programistą i redaktorem. Co ciekawe każdy pracował zupełnie niezależnie od siebie. Ja tworzyłem grafikę głównie opartą o CSS, on programował, a redaktor wpisywał teksty. Sam CMS jest o tyle kiepski, że mimo wstawianego kodu opartego o divy generuje tabele (być może to się już zmieniło). Tak naprawdę możemy mieć jeden kod strony i za pomocą samego CSS’a wdrażać różne projekty graficzne. Jeśli szef w firmie uzna, że grafika obecnej strony „jest słaba” i zmieniamy ją to nie musimy angażować całego sztabu ludzi, a wystarczy sam grafik ze znajomością CSS’a. To co powyżej opisałem dobrze obrazuje strona www.csszengarden.com. Mając jeden kod html wielu projektantów pokazuje jak różne można tworzyć designy przy wykorzystaniu odpowiednio css’a. Zapraszam na tę stronę www.csszengarden.com. Poniżej kilka przykładów projektów.

Skąd czerpać wiedzę o CSS? Podstawowy i chyba najważniejszy adres internetowy z wiedzą o CSS to www.w3.org. Jest to adres strony www ogranizacji, która stoi za opracowaniem standardów w3c. Nie raz gdy chciałem upewnić się jakiś definicji korzystałem z tej strony. Po zakończeniu prac nad stroną warto skorzystać z validatora, który sprawdzi czy kod css został poprawnie napisany i czy strona nie zawiera błędów validator.w3.org. Sam podstawy CSS’a opanowałem czytając kilka książek z wydawnictwa helion. CSS według Erica Meyera. Sztuka projektowania stron WWW CSS według Erica Meyera. Kolejna odsłona CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie III CSS. Antologia. 101 wskazówek i trików Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS To kilka z tych, które przeczytałem, ale jest tego dużo więcej. Polecam książki Ericka Meyera, który jest guru w tej dziedzinie. Bardzo praktyczne są tablice informatyczne CSS kosztują nie wiele, a czasami są bardzo przydatne. Jest to taka ściągawka, na jednej dużej kartce mamy podane wszystkie podstawowe definicje css. Sporo informacji o CSS można znaleźć w kursach na stronach www. Poniżej lista kursów z których miałem okazję korzystać. Polecam pierwszy z nich nauczyłem się z niego najwięcej. kurs.browsehappy.pl www.signs.pl/html www.kurshtml.boo.pl webmade.org/kursy-online/kurs-css.php. Przydatne mogą być dla Ciebie gotowe struktury stworzone na divach. Pod poniższymi linkami znajdziesz setki gotowych układów stron www o różnej rozdzielczości, ilości szpalt… http://layouts.ironmyers.com http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts http://www.dynamicdrive.com/style/layouts/ http://www.barelyfitz.com/screencast/html-training/css/positioning/ Jeśli chcesz projektować strony www, a jeszcze nie poznałeś css’a zrób to czym prędzej, a szybko zobaczysz jak wiele czasu zaoszczędzisz. Jeśli zlecasz do zrobienia stronę internetową proponuję, żebyś sprawdził czy webmaster projektuje ją wykorzystując odpowiednio css. Warto sprawdzić stronę walidatorem css/html… Jak się jakiś czas temu przekonałem dobra struktura witryny może wpłynąć także na wycenę usług pozycjonerskich.

Jeśli ten artykuł pomógł Ci, masz co do niego jakieś wątpliwości lub pytania „Zostaw komentarz”, a na pewno na niego odpowiem.