Czym są style CSS

Style CSS Cascading Style Sheets (), to elementy strony internetowej określające nam wygląd, położenie a nawet animację danych elementów strony www, a dokładniej zdefiniowanych elementów kodu HTML. Dzięki CSS możemy określić np. kolor danego elementu, wielkość czcionki, animację po najechaniu czy kliknięciu, położenie względem innych elementów, wymiary i inne wartości budujące całą stronę internetową. Kod HTML buduje nam strukturę witryny a styl CSS określa właściwości tej struktury.

Istnieją dwie metody wdrażania stylów CSS, pierwszy to pisanie bezpośrednio w kodzie strony a drugi to umieszczania kody CSS w oddzielnym pliku i wczytywanie go na każdej stronie. Pierwszy sposób jest już praktycznie nie używany, tą metodę stosuje się wyłącznie przy budowie np. szablonów Allegro, gdzie nie mamy innego wyjścia. Przy tworzeniu strony internetowej o wiele lepszym sposobem jest metoda druga a więc umieszczania arkuszu stli w oddzielnym pliku. Robi się to dlatego, że wyobraźmy sobie rozbudowaną stronę www, która zawiera 1000 podstron. Zmiana stylu jednego elementu witryny wiązałaby się z wprowadzeniem poprawki na 1000 podstronach a tak mamy jeden plik który edytujemy i w którym wprowadzamy zmiany widoczne na wszystkich podstronach serwisu. Kolejnym atutem takiego rozwiązania jest wielkość plików. W pierwszym rozwiązaniu, każda z podstron zawierałaby powtórzenie kodu, a więc nasz arkusz CSS zajmowałby 1000 razy więcej pamięci. Tak więc wybór co do metody umieszczenia Kaskadowego Arkuszu Stylów na naszej stronie jest dość prosty.

Aby umieścić nasz arkusz stylów wystarczy jedna linijka kodu w sekcji head strony internetowej np.

W tym przypadku nasz plik stylów znajduje się w katalogu głównym naszej strony, jeśli chcemy go umieścić w jakimś podkatalogu to np.

gdzie css jest stworzonym podkatalogiem w którym znajduje się nasz arkusz.

Przy bardziej zaawansowanych projektach możemy podczepić dowolna ilość plików ze stylami CSS, odpowiedzialnymi za poszczególne elementy występujących na stronie internetowej, np.

Całość powinna wyglądać:

Istnieje wiele programów do tworzenia stylów CSS na potrzeby stron www, jednym z najlepszych jest Dreamweaver http://www.adobe.com/pl/products/dreamweaver.html lecz jest to dość drogie rozwiązanie. Istnieje wiele darmowych programów pozwalających pisać kod CSS na potrzeby naszej strony internetowej. Osoby dobrze obeznane z zagadnieniem CSS mogą je pisać w zwykłym notatniku.

Najważniejszymi zadaniami które spełniają Kaskadowe Arkusze Stylów to:

  1. szybkość ładowania strony;
  2. łatwość zmian każdego elementu na stronie internetowej;
  3. spójność witryny, np. wszędzie ta sama czcionka;

Tak naprawdę obecnie nie ma możliwości stworzenie poprawnej strony internetowej bez arkuszy stylów a więc jeśli chcesz budować witryny internetowe temat CSS nie może być Ci obcy. W czasach prehistorycznych (10 – 15  lat temu) strony opierały się na tabelach i wtedy style CSS nie były aż tak ważnym elementem składającym się na stronę internetową lecz obecnie to standard bez którego nasze strony nie będą funkcjonować poprawnie  a każda zmiana to szybki proces zmiany fragmentu kodu znajdującego się w jednym pliku.

Zapraszamy do komentowania artykułu "Czym są style CSS" oraz odwiedzin strony www Olsztyn.
5 czerwca, 2013
Powrót

Komentarze zostały wyłączone.

Dodaj komentarz do tego artykułu

Zobacz także

Tworzenie przycisku na potrzeby strony www

Nie od dzisiaj wiadomo, że czym mniej obrazków, czyli czym mniej “waży” nasza strona www, tym lepiej. Strona internetowa szybciej się ładuje jest przyjaźniejsza dla użytkowników jak i robotów wyszukiwarek. W tym artykule zaprezentuje metodę tworzenie fajnych przycisków na potrzeby stron internetowych bez użycia grafiki. Kolejnym atutem takiego rozwiązania jest ustawienie dowolnej wielkości takiego obiektu, czyli przycisk będzie wyglądał identycznie na telefonie, tablecie czy komputerze stacjonarnym. Nie będziemy potrzebować trzech …

31 sierpnia, 2013
więcej

Tworzenie pierwszego arkuszu CSS na potrzeby strony www

Od czego zacząć pisanie pierwszego kaskadowego arkuszu stylów CSS na potrzeby strony www, proponuję rozpocząć cały proces od ustawień ogólnych naszej strony internetowej. Wprowadzimy ustawienia ogólne dla wszystkich najpopularniejszych znaczników naszej stronie a później będziemy definiować precyzyjnie każdy z elementów. Ułatwi to nam cały proces tworzenia strony www. Nazywam ten proces “czyszczeniem”. Przed rozpoczęciem pracy powinniśmy mieć już  gotowy projekt strony internetowej, tak że widzimy jak nasza witryna internetowa będzie …

5 lipca, 2013
więcej

Dyrektywa stylu CSS !important

Chciałbym omówić dyrektywę !important w arkuszu stylów CSS. Jest to bardzo przydatny element pozwalający nam definiować elementy w CSS, które są opisane np. w HTMLu. W dobie responsive web design dyrektywa pozwala na zdefiniowanie wielkości danych elementów na stronie internetowej. W skrócie dyrektywa !important wskazuje na najważniejszy opis danego elementu, opis elementu w kodzie strony www, ważniejszy niż wynikałoby to z kolejności.

8 listopada, 2013
więcej

Archiwum

Archiwa