Jak zmienić wygląd strony internetowej czyli absolutne podstawy CSS

Jak zmienić wygląd strony internetowej czyli absolutne podstawy CSS

Mamy już za sobą podstawy dotyczące definiowania struktury strony internetowej, którą jak już wiesz tworzy się za pomocą tagów w plikach html. Możemy więc powoli zacząć przechodzić do wizualnej części naszej strony www. Jeśli nie zapoznałeś się jeszcze z poprzednim artykułem i nie jesteś na bieżąco to możesz nadrobić materiał  tutaj.

Budowa strony internetowej

Kiedy szczegółowo spojrzymy na budowę każdej strony internetowej to uda nam się wyróżnić w niej 3 warstwy:

  1. warstwę struktury oraz treści
  2. warstwę zachowania
  3. warstwę prezentacji – wizualną

Warstwa struktury oraz treści jak już wcześniej zaznaczyłem znajduje się w plikach html. Większość treści w dzisiejszych stronach internetowych to tekst, ale może być ona dostarczana także w postaci obrazów, filmów, dźwięków itp.

Warstwa zachowania opisuje to w jaki sposób przebiega interakcja strony z odbiorcą i przeważnie odbywa się ona z wykorzystaniem języka javascript, o którym także wspomnę w innych artykułach.

Warstwa prezentacji, którą zajmujemy się w tym artykule definiuje w jaki sposób treść jest przedstawiana dla jej odbiorcy.

Co to jest CSS?

CSS czyli tzw. kaskadowe arkusze stylów są rekomendowanym sposobem kontroli sposobu tworzenia warstwy prezentacyjnej strony internetowej. Główną zaletą wykorzystania plików CSS do opisu wizualnych aspektów strony jest możliwość trzymania ich w osobnych plikach. Bardzo istotne jest byś stosował zasadę oddzielania struktury strony od opisu jej prezentacji. Właśnie po to, aby ułatwić Ci to zadanie powstał CSS.

Przejdźmy więc do konkretów i zobaczmy jak szybko można za pomocą CSS zmienić wygląd strony internetowej. Utwórz najpierw przykładowy plik index.html. Jeśli masz zapisane kody źródłowe z poprzedniej lekcji to możesz je oczywiście tutaj wykorzystać. Jeśli nie to wklej do pliku index.html poniższy kod.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
 <head>
  <title>Moja strona www</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="main.css" type="text/css" />
 </head>
 <body>
  <p>Akapit</p>
 </body>
</html>

Jak widzisz w sekcji head strony pojawił się nowy znacznik:

<link rel="stylesheet" href="main.css" type="text/css" />

Właśnie w taki sposób „doklejasz” do pliku html arkusze css. Parametr rel, „mówi” przeglądarce, że będziemy dołączać plik arkusza stylów, a href wskazuje gdzie znajduje się ten plik i jaką ma nazwę. Jako, że nie wpisaliśmy w tym miejscu żadnego katalogu to musimy utworzyć plik main.css w tym samym katalogu w jakim znajduje się nasz plik index.html. Utwórz więc plik main.css i otwórz go za pomocą Notepad2. Następnie wklej tam poniższy kod i zapisz plik.

p { color: red; }

Otwórzy plik index.html i zobacz efekt w przeglądarce. Jak widzisz kolor tekstu w akapicie zmienił się z czarnego (domyślnego) na czerwony. W bardzo prosty sposób za pomocą jednej linijki w pliku css zmieniliśmy kolor wszystkich akapitów na stronie. Jeśli chcesz zobaczyć, że działa to także dla innych akapitów to po prostu dopisz kolejny tag <p> poniżej tego, który już znajduje się w pliku index.html. Zauważ, że dzięki temu, że definicja koloru elementów znajduje się w osobnym pliku możemy bardzo łatwo i szybko zmienić kolor wszystkich elementów danego typu zamiast definiować kolor dla każdego z nich z osobna w pliku html.

Teraz w skrócie opiszę z czego składają się definicje zawarte w plikach css

  1. selektor – jest to wzór, dzięki któremu przeglądarka posiada informację do jakich elementów ma stosować reguły zawarte w tej definicji. W naszym przypadku zastosowaliśmy selektor ogólny (p), który oznacza nic innego jak zastosuj reguły do wszystkich elementów <p> na stronie. Istnieje wiele sposobów tworzenia selektorów, które pozwalają nam z bardzo dużą dokładnością wybierać cele działania danej definicji. Za pomocą odpowiednich selektorów możemy wybrać konkretny obiekt, listę obiektów itp. W kolejnych artykułach będę opisywał dokładniej działanie różnych selektorów.
  2. w nawiasach klamrowych lista deklaracji oddzielonych od siebie znakiem średnika poszczególne deklaracje składają się z właściwości i przypisanych do nich wartości. W naszym przypadku właściwość color (kolor tekstu) ma wartość red (czerwony) co oczywiście powoduje, że kolor tekstu zmienia się na czerwony. Istnieje masa właściwości oraz wiele sposobów na opisanie wartości (poprzez słowa kluczowe, jednostki takie jak piksele itp.) Ten artykuł ma oczywiście na celu tylko wstępne zapoznanie Cię z zasadą działania CSS, a nie przedstawienie wszystkich właściwości i parametrów. Wiedz też, że wcale nie musisz znać wszystkich tajników CSS, aby z powodzeniem budować zaawansowane strony internetowe.

W kolejnych wpisach w miarę postępów będę opisywał wybrane parametry i ich szczegółowe działanie potrzebne do rozwiązania konkretnych problemów, które możesz napotkać podczas budowy strony www. Zachęcam także do pobrania ściągi css, która zawiera wszystkie najważniejsze właściwości CSS. Ściągę CSS, a także HTML możesz pobrać na górze po prawej stronie bloga. Jak zwykle Twój komentarz oraz pytania są mile widziane.

<link rel=”stylesheet” href=”main.css” type=”text/css” />

Autor: