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 wyglądała, z jakich elementów, kolorów będzie się składała. Tworzenie strony internetowej bez projektu jest dość ryzykowne a wyniki mogą być różne. W programie graficznym ustalamy i umieszczamy wszystkie element, które będą się znajdować na stronie głównej naszego serwisu internetowego. Oczywiście możemy pokusić się na stworzenie strony www bez projektu ale mówimy tu o profesjonalnym podejściu do tworzenia stron www. Zacznijmy od definicji ogólnej znacznika <body> naszej strony.

Omówię teraz znaczenie poszczególnych znaczników, których użyłem do opisania ogólnych stylów CSS naszej strony internetowej, a więc:

  • margin: 0px; – strona nie będzie posiadać marginesów;
  • padding: 0px; – brak marginesów, wolnej przestrzeni wewnątrz witryny;
  • width: 100%; – szerokość będzie wynosiła 100%, nie zależnie od rozdzielczości przeglądającego stronę www;
  • height: 100%; – wysokość 100%;
  • background:#eee; – kolor tła całej naszej strony internetowej będzie szary;
  • overflow-x: hidden; – jeżeli jakiś element będzie szerszy i nie będzie się mieścił na ekranie użytkownika, likwidujemy pasek przewijania na dole;
  • font-family: arial; – na każdej podstronie czcionką treści strony będzie arial;
  • text-align: justify; – wyrównanie tekstu będzie wyjustowane, a więc treść będzie się dopasowywać do szerokości elementów ją zawierających;
  • font-size: 12px; – rozmiar czcionki, na każdej tworzonej podstronie;
  • color: #222; – kolor czcionki;
  • line-height:17px; – rozmiar odstępu między liniami tekstu, warto przetestować najbardziej czytelną wielkość.

Te ustawienia pozwolą nam w każdej chwili zmienić wartości tych znaczników, będą one widoczne na każdej podstronie, która będzie opisywał arkusz stylów CSS, który właśnie tworzymy.

Kolejne znaczniki, które warto “wyczyścić” na początku tworzenia naszych stylów CSS i ogólnie opisać to:

Wyjaśnienie powyższego kodu CSS strony www:

  • img – opisujemy jak będzie wyświetlany, każdy obrazek na naszej stronie internetowej, będzie w obramowaniu, bez żadnych odstępów;
  • h1, h2, h3, h4, h5, h6 – ogólny wygląd naszych nagłówków;
  • a:link – każdy link na każdej podstronie będzie miał kolor czerwony;
  • a:hover – po najechaniu na link, będzie zmieniał się jego kolor na zielony;
  • p – opisujemy ogólny wygląd znacznika p, możemy to zastosować większe odstępy tak by tekst był bardziej czytelny;
  • ul – czyścimy wyświetlanie list na naszej stronie www, ułatwi nam to definiowanie list dla poszczególnych elementów.

I tak przygotowany wstęp kaskadowego arkuszu stylów CSS ułatwi nam przygotowanie i opisanie poszczególnych znaczników kodu HTML strony internetowej. Oczywiście całą listę możemy rozwijać i ogólnie opisywać większą ilość elementów w naszym arkuszu stylów CSS. Powstaje pytanie po co to robić? Pozwala nam to na ujednolicenie każdej podstrony serwisu internetowego a także ułatwia przypisać odpowiednie style dla danego znacznika, należy pamiętać, że czym prościej, czym mniej kodu tym lepiej. Czyszczenie stylów pozwala na zmniejszenie zawartości kodu arkuszu stylów CSS, który tworzymy na potrzeby strony internetowej.

Przykład:

Nagłówek h1 z przypisaną klasą .tytuł, nie musimy za każdym razem opisywać tak dokładnie znacznika h1, bo opisaliśmy ogólny wygląd tego znacznika w strefie “czyszczenia” a w klasie .tytul podajemy dodatkowe, znaczniki wyróżniające dany nagłówek. Nagłówek, z klasą .tytul będzie wyglądał identycznie jak inne lecz będzie większy, będzie miał kolor niebieski oraz będzie posiadał większy odstęp od treści strony www.

Zapraszamy do komentowania artykułu "Tworzenie pierwszego arkuszu CSS na potrzeby strony www" oraz odwiedzin strony www Olsztyn.
5 lipca, 2013
Powrót

Komentarze zostały wyłączone.

Dodaj komentarz do tego artykułu

Zobacz także

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

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

Czym są style CSS

Style CSS Cascading Style Sheets (Kaskadowe Arkusze Stylów), 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.

5 czerwca, 2013
więcej

Najnowsze na stronie

Kategorie

Tagi

Archiwum

Archiwa