Co to jest CSS i do czego służy ? CSS - ogólne informacje

Co to jest CSS i do czego służy ?

CSS, czyli Cascading Style Sheets (po polsku: Kaskadowe Arkusze Stylów), to język, który pozwala nadawać stronom internetowym atrakcyjny wygląd. Dzięki CSS możemy w prosty sposób zmieniać kolory, czcionki, odstępy, rozmieszczenie elementów, a także dodawać efekty wizualne, takie jak animacje, przejścia czy responsywność - czyli dostosowanie strony do różnych urządzeń, np. telefonów, tabletów czy komputerów. HTML odpowiada za strukturę strony - mówi, co znajduje się na stronie (nagłówki, teksty, obrazy, formularze itd.), natomiast CSS odpowiada za to, jak te elementy wyglądają.
 

Gdzie i jak stosuje się CSS ?

CSS można stosować na kilka sposobów:

• bezpośrednio w kodzie HTML, np. wstawiając styl CSS bezpośrednio w kodzie - ale to mało praktyczne i trudne do zarządzania przy większych stronach
• w nagłówku dokumentu HTML, co pozwala już oddzielić wygląd od treści
• najlepszym rozwiązaniem jest użycie zewnętrznego pliku CSS, który można dołączyć do strony, dzięki temu możemy zmieniać wygląd całej strony (lub wielu stron jednocześnie) bez dotykania kodu HTML - takie rozwiązanie jest stosowane w oprogramowaniu shopGold

Do czego dokładnie wykorzystuje się CSS ?

CSS jest używany praktycznie wszędzie tam, gdzie mamy do czynienia ze stronami internetowymi. Kilka przykładów zastosowania:

• zmiana kolorystyki strony, tła, przycisków, linków itp.
• określanie rozmiarów i krojów czcionek
• ustawianie marginesów, odstępów między elementami, wyśrodkowanie tekstu
• tworzenie układów responsywnych, czyli takich, które dobrze wyglądają na różnych ekranach
• dodawanie efektów jak np. podświetlenie elementu po najechaniu myszką
• animacje - np. stopniowe pojawianie się tekstu, obracanie obrazków, zmiana kolorów itp.

Pliki CSS są plikami tekstowymi, które zawierają reguły stylów opisujące wygląd elementów strony internetowej. Pliki CSS są zapisywane z rozszerzeniem „.css”. Takie pliki znajdują się w oprogramowaniu sklepu i są używane do definiowania kolorów, czcionek, rozmiarów, układu elementów oraz innych właściwości wizualnych strony. W oprogramowaniu shopGold są one zapisane indywidualnie dla każdego szablonu w katalogu /szablonu/nazwa_uzytego_szablonu/css. Każdy szablon zawiera kilka plików css, podzielonych w zależności od tego gdzie są wyświetlane. Główny plik, który zawiera podstawowe i najważniejsze definicje wyglądu nazywa się style.css.

Kod CSS nie zawiera logiki programistycznej - zamiast tego składa się z zestawu reguł przypisanych do określonych selektorów, które wskazują, do jakich elementów HTML mają zostać zastosowane style. Każda reguła zawiera nazwę właściwości (np. color, font-size, margin) oraz jej wartość. Pliki CSS mogą zawierać również komentarze, które nie są interpretowane przez przeglądarkę, a służą jedynie jako informacja dla osoby edytującej kod.

Pliki CSS są przetwarzane przez przeglądarkę internetową użytkownika, co oznacza, że ich zmiany wpływają bezpośrednio na sposób wyświetlania strony, bez potrzeby wykonywania kodu na serwerze.  Pliki CSS można edytować za pomocą dowolnego edytora tekstowego, takiego jak Notepad++. Zaleca się korzystanie z edytora, który posiada funkcję podświetlania składni CSS, co ułatwia czytanie i edytowanie kodu.

Modyfikacji plików CSS należy dokonywać ostrożnie i najlepiej z podstawową znajomością zasad działania arkuszy stylów. Nieprawidłowe zmiany mogą spowodować błędy w wyglądzie strony lub jej nieczytelność dla użytkowników.

Jeżeli wprowadzasz zmiany w kodzie CSS i po zapisaniu danych nie widzisz zmian na stronie sklepu - oznacza to, że Twoja przeglądarka nie odświeżyła zapisanego w historii wyglądu. W takim przypadku odśwież/usuń zapisaną historię przeglądarki. Dla szablonów V2 dodatkowo po wprowadzeniu zmian w kodzie CSS trzeba odświeżyć cache sklepu poprzez kliknięcie w link "odśwież pamięć podręczną plików JavaScript oraz CSS wyglądu szablonu (cache)" na stronie głównej panelu zarządzania sklepu.