CSS decyduje o wyglądzie Twojej strony. Kolory, czcionki, odstępy, układ: to wszystko CSS. Dowiedz się, czym jest, jak działa i dlaczego ma znaczenie dla Twojej marki.
Czy zdarzyło Ci się odwiedzić dwie strony z prawie taką samą treścią, które wyglądały zupełnie inaczej? Jedna jest dopracowana, czysta i łatwa do czytania. Druga sprawia wrażenie zagraconej, przestarzałej i trudnej w nawigacji. Treść może być identyczna. O różnicy w wyglądzie decyduje CSS.
W poprzednim rozdziale można było przeczytać, że HTML nadaje stronie strukturę. Mówi przeglądarce, czym jest wszystko: nagłówkiem, akapitem, obrazem, przyciskiem. Ale sam HTML nie ma stylu. Bez CSS każda strona wyglądałaby jak zwykły dokument tekstowy. CSS zamienia tę strukturę w wizualne doświadczenie.
Czym jest CSS?
CSS to skrót od Cascading Style Sheets (kaskadowe arkusze stylów). To język, który odpowiada za wizualną prezentację strony. Gdy HTML mówi „to jest nagłówek”, CSS mówi „ten nagłówek ma być ciemnoniebieski, mieć 32 piksele wysokości i używać tej konkretnej czcionki”. Gdy HTML mówi „to jest przycisk”, CSS mówi „ten przycisk ma być zielony, mieć zaokrąglone rogi i być 20 pikseli od tekstu nad nim”.
Każda decyzja wizualna na stronie, czyli kolory, czcionki, rozmiary, odstępy, układy, efekty po najechaniu myszą i tła, pochodzi z CSS. To warstwa projektu w sieci.
Jak działa CSS?
CSS działa, wskazując elementy HTML i stosując do nich reguły stylu. Mówisz CSS, który element ostylować, a potem opisujesz, jak ma wyglądać. Te reguły zapisane są w osobnym pliku, który przeglądarka ładuje razem z HTML. Gdy przeglądarka odczyta oba pliki razem, stosuje style do pasujących elementów i wyświetla gotową stronę.
Słowo „kaskadowe” w nazwie dotyczy tego, jak CSS radzi sobie z konfliktami. Jeśli do tego samego elementu pasuje wiele reguł, CSS stosuje określoną kolejność priorytetów, by zdecydować, która reguła wygrywa. Bardziej szczegółowe reguły nadpisują ogólniejsze. Ten system daje projektantom precyzyjną kontrolę nad wyglądem każdego elementu na całej stronie.
Rodzaje CSS
CSS można zapisać na trzy sposoby. Każdy działa, ale nie każdy równie dobrze pasuje do każdej sytuacji.
1. CSS w linii (inline)
CSS w linii zapisuje się bezpośrednio na pojedynczym elemencie HTML. Wpływa tylko na ten jeden element i nadpisuje inne style. Przydaje się do szybkich, jednorazowych zmian, ale na większą skalę staje się problemem. Jeśli chcesz zmienić kolor użyty w 50 elementach, musisz zmienić go w 50 miejscach zamiast w jednym.
2. CSS wewnętrzny
CSS wewnętrzny zapisuje się w znaczniku style w samym pliku HTML, zwykle blisko początku strony. Dotyczy tylko tej jednej podstrony. Jest w porządku dla pojedynczych podstron lub małych projektów, ale w całej witrynie oznacza powtarzanie tych samych stylów na każdej podstronie. Zmieniasz jedną rzecz i musisz zaktualizować każdy plik osobno.
3. CSS zewnętrzny
CSS zewnętrzny jest w osobnym pliku, powiązanym z Twoimi podstronami HTML. To standardowe podejście w każdej prawdziwej stronie. Definiujesz wszystkie style raz w jednym pliku, a każda podstrona, która go podłącza, dziedziczy te style. Zmieniasz kolor lub czcionkę w jednym miejscu i aktualizuje się wszędzie natychmiast. Jest czystszy, szybciej się ładuje i dużo łatwiej go utrzymać. Prawie każda dobrze zbudowana strona opiera się na CSS zewnętrznym.
Czym CSS steruje na Twojej stronie
CSS dotyka niemal każdego wizualnego aspektu Twojej strony. Oto główne obszary, którymi się zajmuje.
Kolory i tła
Każdy kolor na Twojej stronie, czyli kolor tekstu, tła, przycisku i obramowania, jest ustawiany przez CSS. Kolory Twojej marki są stosowane spójnie w całej witrynie, bo definiujesz je raz w CSS i używasz wszędzie.
Typografia
Czcionka używana na stronie, rozmiar nagłówków i tekstu, odstępy między wierszami, to, czy tekst jest pogrubiony lub pochylony: to wszystko CSS. Dobra typografia ułatwia czytanie treści i wzmacnia tożsamość marki.
Układ i odstępy
Jak są ułożone kolumny, ile miejsca jest między sekcjami, jak szeroki jest obszar treści, gdzie pojawia się pasek boczny: CSS kontroluje to wszystko. Reguły układu określają ogólną strukturę każdej podstrony poza tym, co daje HTML.
Zachowanie responsywne
CSS sprawia też, że działa projekt responsywny . Zapytania medialne (media queries) w CSS mówią przeglądarce, by stosowała inne style zależnie od rozmiaru ekranu. Na komputerze treść może być w trzech kolumnach. Na telefonie CSS ustawia te kolumny jedna pod drugą, tak by wszystko mieściło się na mniejszym ekranie.
Animacje i efekty
Efekty po najechaniu na przyciski, płynne przejścia między sekcjami, stopniowe pojawianie się treści przy przewijaniu: to wszystko CSS. Dodają ruchu i dopracowania, bez potrzeby użycia JavaScript.
Co to oznacza dla Twojej strony jako właściciela marki
Nie musisz pisać CSS, by mieć dobrze zaprojektowaną stronę. Kreatory stron robią to za Ciebie. Gdy wybierasz szablon, kolory marki i czcionki, platforma zamienia te wybory na reguły CSS za kulisami. Każda zmiana w wizualnym edytorze tworzy CSS, który przeglądarka odczytuje i stosuje.
Ważne dla Ciebie jest to, by CSS tworzony przez platformę był czysty i wydajny. Ciężki lub rozdęty CSS spowalnia ładowanie stron. Dobrze napisany CSS utrzymuje stronę szybką i spójną na każdej podstronie. W kreatorze stron WEMASY zoptymalizowany CSS powstaje automatycznie, więc Twoje wybory projektowe są stosowane czysto, bez dodawania zbędnego ciężaru do podstron. Aby zrozumieć, jak to wiąże się z wydajnością, przeczytaj artykuł czym jest szybkość strony i dlaczego ma znaczenie.
Najczęściej zadawane pytania
Czy muszę uczyć się CSS, by zbudować stronę?
Nie. Kreator stron pozwala kontrolować wygląd strony w wizualnym edytorze. Platforma pisze CSS za Ciebie. Znajomość podstaw CSS jest przydatna, jeśli chcesz zrozumieć, dlaczego rzeczy wyglądają tak, a nie inaczej, ale nie musisz pisać ani jednej linijki, by zbudować profesjonalną stronę w kreatorze stronWEMASY.
Czym różni się CSS od HTML?
HTML określa strukturę strony, czyli czym jest każdy fragment treści. CSS określa, jak to wygląda. HTML tworzy nagłówek. CSS nadaje temu nagłówkowi kolor, rozmiar i czcionkę. Działają razem: HTML dostarcza elementy, a CSS je stylizuje.
Czy CSS może wpływać na szybkość strony?
Tak. Duże, nieefektywne pliki CSS dodają ciężaru każdemu załadowaniu strony. Nieoptymalny CSS może też blokować przeglądarkę przed wyświetleniem strony, dopóki nie przeczyta wszystkich stylów, co opóźnia moment, w którym odwiedzający widzą treść. Czysty, minimalny CSS ładuje się szybciej. To jeden z powodów, dla których budowanie na dobrze napisanej platformie ma znaczenie dla szybkości strony.
Czym jest framework CSS?
Framework CSS to gotowy zbiór reguł CSS, którego programiści używają jako punktu wyjścia zamiast pisać wszystko od zera. Przyspiesza pracę i zapewnia spójne, przetestowane style od razu. Większość kreatorów stron używa wewnętrznie frameworka CSS, więc tworzone przez nie szablony są już dobrze ustrukturyzowane i niezawodne.
Czy CSS pozwala sprawić, by strona dobrze wyglądała zarówno na komputerze, jak i na telefonie?
Tak, i to jedno z najważniejszych zadań CSS. Dzięki zapytaniom medialnym CSS stosuje inne style zależnie od rozmiaru ekranu. Na szerokim ekranie komputera treść może być w kilku kolumnach z dużymi obrazami. Na telefonie te same kolumny układają się jedna pod drugą, rozmiary czcionek się dostosowują, a odstępy zmniejszają, by pasowały do mniejszego ekranu. Tak działa projekt responsywny i wszystko odbywa się przez CSS, bez potrzeby osobnej mobilnej wersji strony.
Co się stanie, jeśli CSS nie załaduje się na podstronie?
Jeśli plik CSS się nie załaduje, podstrona nadal się wyświetli, ale bez stylów. Zobaczysz zwykły tekst i obrazy bez kolorów, czcionek i układu. Wszystko ułoży się jedno pod drugim w kolejności z HTML. Wygląda to na zepsute, ale treść technicznie nadal jest. Na dobrze utrzymywanych platformach zdarza się to rzadko, ale to dobre przypomnienie, ile wizualnej pracy CSS po cichu wykonuje na każdej podstronie.