O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

O co chodzi z tym CSSem

CSSOd pewnego czasu (by nie powiedzieć od dawna) HTML przestał być nośnikiem wyglądu. Owszem w najbardziej podstawowym znaczeniu tylko HTML decyduje o wyświetlaniu najistotniejszej części strony czyli jej treści. Wyobraźcie sobie ceramiczny balon z otworem a w środku herbatę. Napój to nasza treść, ceramiczna obła forma to HTML ale aby ten niby-czajniczek wyglądał potrzebujemy CSS, który określi jego kształt, kolor i całą tą wizualną formę. Bo korzystać możemy z niego od samego początku, herbatę zaparzymy i nalejemy nawet do kubka ale czy będzie nam wygodnie to zrobić to już inna sprawa.

Za wygląd strony odpowiedzialny jest CSS czyli kaskadowe arkusze stylów (ang. Cascading Style Sheets). Jest to język służący do opisu sposobu prezentowania informacji na stronach WWW. CSS nie może istnieć samodzielnie, gdyż jest ściśle powiązany z językiem opisu struktury dokumentów takim jak (X)HTML. Czyli HTML określa istnienie i funkcję elementu, mówi to jest tytuł, to jest tabela, to jest link. CSS natomiast mówi linki mają być podkreślone, tytuły mają mieć dwukrotną wielkość tekstu a tabele mają mieć ramki ale jeżeli nie będzie tych tabel, linków i tytułów to co z tego, że CSS powie gdzie mają być kreseczki? Abstrahując od rozważań filozoficznych, kolor różowy nie ma znaczenia dopóki nie pomalujesz nim ściany.

Za pomocą CSS można opisać wszystkie pojęcia odpowiedzialne za wygląd poszczególnych elementów dokumentu (rodzina czcionek, kolor tekstu, marginesy, odstęp między wierszami, pozycja danego elementu względem innych elementów bądź okna przeglądarki). Podkreślam jednak pamiętać że Kaskadowe Arkusze Stylów definiują jedynie sposób formatowania (wygląd) elementów dokumentu, ale same ich nie tworzą. Tak więc za pomocą języka (X)HTML wstawia się znaczniki do kodu źródłowego strony, a następnie dzięki CSS można nadać im potem określony sposób wyświetlania.

Wstawianie stylów na stronie

Są cztery podstawowe sposoby umieszczania stylów na stronie: lokalny, zagnieżdżony, zewnętrzny i importowany. Kolejność, w której wpisałam te style ma znaczenie bo im styl bliżej ciała tym bardziej definitywną odgrywa rolę. Jest to o tyle istotne, że można w zasadzie wykorzystywać wszystkie cztery rodzaje implementacji na raz. Na bloksie możemy skorzystać tylko z dwóch sposobów umieszczania stylu ale w dziedzinie wyglądu zapewnia to wystarczający stylowy dostęp. Zacznę wyliczanie od opisu implementacji, która jest najdalej od ciała.

  • importowany - do każdej strony może zostać przypisany styl importowany czyli pochodzący z innej strony
  • zewnętrzny - znajdujący się w innym dokumencie niż strona i wywoływany odpowiednim zapisem w nagłówku (head) strony 
  • wewnętrzny zagnieżdżony - znajduje się bezpośrednio na stronie w jej nagłówku (head)
  • lokalny - zostaje przypisany bezpośrednio przy elemencie który opisuje

Jeżeli jesteście laikami to zapewne nie macie zielonego pojęcia o czym piszę tutaj. Jeżeli trochę znacie się na HTML to pewnie coś wam świta ale nie za każdym razem potraficie sobie wyobrazić różnicę. Postaram się więc na przykładach opisać jakie są zalety konkretnych rozwiązań.

Przypominam, że implementacja ma swoja hierarchię. Lokalne są ważniejsze od zagnieżdżonych, zagnieżdżone od zewnętrznych a zewnętrzne od importowanych. Oczywiście nie oznacza to, że lokalne są najlepszym rozwiązaniem. Wprost przeciwnie. Najlepiej wszystko umieszczać jak najwyżej. Im bliżej ciała tym bardziej w drodze wyjątku.

Style importowane

Pochodzą z innej strony niż ta, której wygląd opisują. Umożliwia to dodanie jednego szablonu, dokładnie takiego samego na wielu różnych stronach. Wywołuje się je przez polecenie @import, po którym podany jest adres url, umieszczone w nagłówku (head) strony.

style importowane przykładowy kod

Wyobrażam sobie, że takie style świetnie sprawdziłyby się w większym serwisie blogowym. Są najdalsze od ciała jak to chyba tylko możliwe a więc w razie zaistnienia konkurencji liczą się w najmniejszym stopniu. Mogą jednak umożliwić sprawne dodanie nowości na wielu stronach na raz. Wystarczy zmianę opisać w jednym arkuszu, do którego odwołanie będzie na każdej stronie. Zakładam jednak, że jest coś wielce kłopotliwego w takim rozwiązaniu bo nie zetknęłam się z nim jeszcze (tzn. nie zauważyłam jeżeli się jednak zetknęłam co nie jest wcale takie dziwne). Możliwe, że koszty/wady nie są warte zalet takiego rozwiązania.

Style zewnętrzne

Ten rodzaj implementacji działa na bloksie. Każdy blog ma swój własny arkusz stylów, który znajduje się w osobnym/zewnętrznym dokumencie i jest tylko wywoływany w nagłówku (head) każdej strony bloga (jeden arkusz dla wszystkich podstron bloga). Powinien to być dokument tekstowy z rozszerzeniem css.

przykładowy kod stylów zewnętrznych

Takie style są podstawą bloksowych szablonów. Wygląd wszystkich podstron opisany jest w jednym dokumencie wspólnym dla wszystkich podstron. Chcąc zmienić cokolwiek w wyglądzie blogu wystarczy wpisać poprawkę w jednym miejscu.

Ciekawym rozwiązaniem może być dodanie kilku arkuszy zewnętrznych prezentujących alternatywną aranżację. Użytkownik będzie wtedy mógł sobie wybrać najbardziej odpowiadający mu wygląd strony.

Style zagnieżdżone

W tym sposobie implementacji style umieszcza się w nagłówku (head) strony, którą opisują. Zamiast wywołania dokumentu ze stylami mamy w kodzie HTML wpisaną całą jego treść.

przykładowy kod stylów zagnieżdżonych

Nie jest to złe rozwiązanie, każde style są dobre ale chcąc wprowadzić zmianę, która ma być uwzględniona na wielu stronach/podstronach trzeba by chyba było dodawać ja na każdej podstronce osobno. Oczywiście odpowiednie edytory mogą wszystko ułatwić. Na bloggerze w źródle strony (poza dziwnymi kodami z tamtejszego edytora szablonów) można zobaczyć kod css.

Style lokalne

Umieszczone są najbliżej ciała więc mają dla elementu największe znaczenie. Umieszcza się jej jako fragment kodu html bezpośrednio opisywanego elementu.

przykładowy kod stylów lokalnych

Takie style są dostępne na bloksie wszędzie tam gdzie jest dostęp do kodu HTML. Pisząc notkę, korzystając z zaawansowanego edytora, w ten właśnie sposób edytuje się jej wygląd. Gdy dodajesz do słowa podkreślenie edytor zamienia twoje polecenie w kod html ze stylami lokalnymi, który wyglądać będzie mniej więcej tak:

<span style="text-decoration: underline;">słowo</span>

Wadą tego rozwiązania jest problem wprowadzania zmian. Aby zmienić raz dodany styl lokalny trzeba dosłownie wejść do elementu przy którym jest on dodany i zmienić go, do każdego pojedynczego elementu. Oznacza to, że jeżeli zmieniałeś czcionkę czy kolor tekstu w każdej notce w zeszłym roku a teraz masz nowy szablon i krój tej czcionki czy kolor tekstu przestały Ci odpowiadać to aby się go pozbyć ze starych notek musisz  wejść do każdej z nich i przy każdym akapicie w którym zmieniłeś wygląd tekstu zrobić to na nowo. I tak za każdym razem gdy chcesz wprowadzić zmianę.

Dlatego lepszym rozwiązaniem od stylów lokalnych będzie wykorzystanie stylów zewnętrznych, nawet w przypadku zmiany wyglądu trzech zdań w każdej notce. Zdaję sobie jednak sprawę, że style lokalne dodaje edytor, nic prostszego niż kliknięcie guziczka ale zalety klas są naprawdę spore więc zaczynam wspominać temat. Z cała pewnością go rozwinę na razie jednak prosta ilustracja proponowanego rozwiązania.

zamiast stylów lokalnych

Jeżeli zależy Ci na tym aby dany fragment notki był pisany czerwoną czcionką to nie ma problemu. Style lokalne są dobrym wyborem. Jeżeli natomiast chcesz wyróżnić te try zdania z otaczającego je tekstu a samo pogrubienie wydaje ci się być za mało to zamiast zmieniać kolory, dodawać podkreślenie czy powiększać rozmiar kroju wykorzystaj możliwość dodania klasy. Stwórz styl wyróżnienia w arkuszu, nazwij go jakąś klasą i za każdym razem gdy będziesz chcieć coś wyróżnić zamiast tych wszystkich stylów wpisuj klasę.

Oczywiście czerwony, podkreślony i powiększony tekst rzeczywiście jest mega choć niekoniecznie już mega estetyczny. To tylko jaskrawy przykład.


Treść notki została zmieniona w październiku 2011. W sierpniu 2008, kiedy została po raz pierwszy opublikowana, w ogóle nie rozumiałam zależności między kodem HTML i CSS. Sam CSS był dla mnie językiem magicznym, który dopiero zaczynałam zgłębiać. Wiedziałam, że na bloksie szablony tworzy się edytując zewnętrzny arkusz stylów, wiedziałam, że użytkownik nie może sam dodać stylów w sposób wewnętrzny zagnieżdżony ale na czym polega ważkość różnicy pomiędzy tymi dwoma sposobami nie miałam najmniejszego pojęcia. Style lokalne były zaś niedostępne wręcz dla mojego pojmowania ze względu na moją zupełną ignorancję w dziedzinie HTML.

niedziela, 05 sierpnia 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
O co chodzi z tymi numerkami: CSS1, CSS2, CSS 2.1, CSS3, CSS4? z szablony katemac
CSS jest jeden i jest go cała masa. Te tajemnicze numerki to nic innego jak kolejne wersje. Ludzie co chwile wpadają na nowe pomysły, moda i gusta ulegają zmianie, technologie są stale rozwijane więc rosną możliwości... to wszystko sprawia, że z góry ... »
Wysłany 2012/01/17 22:35:45
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...