Prawidłowe wprowadzanie treści na stronę internetową związane jest z poprawnym osadzeniem tekstu w kodzie. Formatując treści na bloga lub opisy produktów warto znać podstawy HTML, jednak co zrobić, gdy artykuł na blogu nie wyświetla się prawidłowo, litery są za małe, a nagłówki w nieciekawym kolorze? Nauczyć się CSS!
Co to jest CSS?
Kaskadowy arkusz styli, czyli CSS, odpowiada za wizualną część strony internetowej – to w nim zapisane są informacje na temat kolorów, wielkości i układu napisów oraz obrazków, czcionek użytych na stronie i wielu innych elementów. To dzięki niemu Twoja strona wygląda super lub jej wygląd „kuleje”.
Gdzie znaleźć pliki CSS na stronie?
Zaglądając w zaplecze strony można znaleźć szablon, a w nim szereg plików z rozszerzeniem .css, są to pliki szablonu i dodatków zainstalowanych na stronie. Im bardziej rozbudowany system, tym więcej plików. Jak odnaleźć ten, w którym chcemy coś zmienić?
W Joomla najczęściej jest to plik o nazwie template.css, zaś w WP – style.css. Jednakże, trzeba pamiętać, że wszystko zależy od dodatkowych wtyczek, które zostały zainstalowane na stronie i np. jeśli chcesz zmienić coś na blogu w Joomla z K2, konieczne może być edytowanie szablonów dotyczących K2, a nie głównego szablonu strony.
Dlaczego warto znać CSS?
Co jeśli chcesz, aby wszystkie śródtytuły w artykułach były w kolorze niebieskim albo na różowym tle?
Możesz dokonywać zmian w każdym artykule podczas wprowadzania treści na stronę, lecz możesz to zrobić raz, a dobrze – zmienić style CSS odpowiadające za te elementy.
Znajomość CSS przyspiesza prace na stronie, to dzięki niemu można ustawić standardową wielkość i kolor nagłówków, jak mają wyglądać linki, jakie mają być odstępy między wierszami tekstu itd.
Dlaczego style powinno się zmieniać globalnie w plikach CSS?
Strona internetowa powinna być spójna, czyli poszczególne jej elementy powinny mieć podobny styl. Współcześnie budowane strony składają się z wielu modułów, które łączy się w jedną całość. Każdy dodatek ma swój styl domyślny, który trzeba zmienić, aby upodobnić go do szaty graficznej szablonu. Co to oznacza?
Jeżeli masz blog i chcesz, aby lista wyświetlanych artykułów była widokiem z obrazkiem 400x600 px, tytułem w H2, fragmentem wstępu o wielkości 10 px, musisz to wszystko zapisać w arkuszu styli, czyli w CSS.
Poprawnie zapisane style w plikach CSS ułatwiają dokonywanie zmian globalnych, wystarczy wejść do pliku odpowiadającego za daną sekcję na stronie, aby np. zmienić kolory wszystkich nagłówków albo zwiększyć odstępy między wierszami tekstu.
Dlaczego zmienianie styli w każdym artykule na blogu to zły pomysł?
Zmienianie stylu tekstu w każdym artykule z osobna nie jest dobrym pomysłem. Minusem takiego działania jest ograniczenie się do tu i teraz strony internetowej. Wszystko może fajnie wyglądać na obecnym szablonie, lecz w momencie, gdy postanowisz przenieść się na nowy szablon albo inny CMS, "domek z kart" się posypie.
Zwykle dokonuje się migracji, aby unowocześnić wygląd strony, dodać więcej funkcjonalności i dostosować się do obecnie panujących standardów w webmasteringu. Może to być również spowodowane rebrandingiem. Nowa szata graficzna będzie odbiegała od tego co widniało na starej stronie i wszystko to, co jest ustawione globalnie, dostosuje się do nowego stylu, lecz wstawione ręcznie style elementów np. na blogu lub w opisach produktów, niestety nie.
Konieczne będzie poświęcenie czasu na usunięcie z tekstów niechcianych fragmentów kodu, ponieważ będą one powodowały nieprawidłowe wyświetlanie treści w nowym szablonie. I co teraz?
Musisz ręcznie usunąć wszystkie niechciane fragmenty z HTML, które odpowiadały za to, że w starym szablonie np. nagłówek H2 był niebieski. Jeżeli umiesz poruszać się w SQL, możesz te operacje wykonać poleceniami na bazie. Jeśli taka informacja byłaby od początku zapisana zgodnie ze sztuką, czyli podana w arkuszu .css, nie byłoby dodatkowej pracy.
Wiesz już dlaczego warto znać CSS? Koniecznie naucz się edytować kod strony, aby wprowadzać zmiany globalnie!