Table of contents icon

Obserwuj @varjs

Zmień wygląd strony dzięki CSS3

Rozdział 5

Zapewne zauważyłeś, że oprócz zdjęć nasza strona nie wygląda zbyt interesująco. Czarny tekst na białym tle nie będzie zachęcający dla odwiedzających. Popracujmy więc nad wyglądem dzięki CSS (Cascading Style Sheets). Używając tego języka możemy zmienić na naszych stronach między innymi kolory i wielkości fontów. A to tylko początek długiej listy możliwości.

O ile HTML służy do opisania treści na stronie i podzieleniu jej na fragmenty według ich znaczenia, tak CSS odpowiada za wygląd naszych stron internetowych. Kod CSS można umieścić w oddzielnym pliku z rozszerzeniem .css i "wstawić" go poprzez specjalny tag HTML. Można też umieścić go bezpośrednio w dokumencie HTML. Nim pomówimy o różnych strategiach dołączenia "CSSów" do naszych stron, wyjaśnijmy najpierw na czym polega filozofia tego języka.

Załóżmy na chwilę, że składamy normalny dom, do którego musimy wybrać elementy, takie jak okna, drzwi, dach, ściany, rynny i tak dalej. Należy kupić w sklepie okna o różnej wielkości, ustalić, gdzie konkretnie będą zainstalowane drzwi, a gdzie rynny, pomalować niezbędne części. Gdybyś robił to w CSS, jedno z wielu rozwiązań tego zadania mogłoby wyglądać tak:

dach {
  background-color: green;
}

drzwi {
  background-color: yellow;
  width: 100px;
  height: 300px;
}

okno {
  border: 5px solid brown;
  width: 150px;
}

Analizując ten kod od góry do dołu (zauważ, że to już pewna reguła w czytaniu kodu, która nota bene nie dotyczy tylko HTML i CSS) napotykamy na poniższy fragment:

dach {
  background-color: green;
}

Przekładając ten przykład na ludzki język, wybraliśmy wszystkie elementy o nazwie "dach" i ustawiliśmy dla nich kolor tła ("background-color") na zielony ("green"). Reszta kodu wygląda podobnie. Na przykład okna:

okno {
  border: 5px solid brown;
  width: 150px;
}

Taki kod mówi: "dla wszystkich okien ustaw, co następuję: ramkę (border) o szerokości 5 pikseli (5px), zaznaczona ciągłą linią (solid) o kolorze brązowym (brown). Ponadto niech znalezione okna będą szerokości (width) 150 pikseli (150px). Zauważ, że zamiast pisać "tło: czerwone;", masz tutaj do czynienia z poleceniami w języku angielskim. Jak już pewnie wywnioskowałeś, jest to w tworzeniu stron i w ogóle w programowaniu kolejna reguła, której bezwzględnie należy się trzymać - używaj wszędzie języka angielskiego. HTML i CSS na szczęście to wymuszają ze względu na swoją składnię.

Jak zapewne zauważyłeś, jest w tym wszystkim pewien powtarzający się schemat. Najpierw podajemy nazwę elementu, a potem definiujemy dla niego pewne cechy wyglądu, które umieszczamy pomiędzy nawiasami klamrowymi ("{" oraz "}"). A więc używając języka opisowego, wygląda to mniej więcej tak:

nazwa elementu { nazwa_wlasciwosci: wartosc wlasciwosci wyglądu; }

Tego typu konstrukcja nazywa się fachowo regułą CSS. Reguła składa się z kolei z selektora (wszystko, co jest przed pierwszą klamrą) i listy właściwości, które piszesz pomiędzy nawiasami klamrowymi.

Istnieją też różne sposoby, by nasze wyszukiwanie było jeszcze bardziej konkretne. Powiedzmy, że interesują nas okna tylko na parterze. Co wtedy? Moglibyśmy napisać coś podobnego:

parter okno {
  border: 5px solid brown;
  width: 150px;
}

W zasadzie zmienił się tylko selektor - zamiast:

okno {

Mamy:

parter okno {

Taki kod czytamy od lewej następująco: "znajdź parter, a następnie poszukaj w nim okien i ustaw tym oknom następujące własności". Gdybyśmy mieli do czynienia z takim selektorem:

parter sciana okno {

Wtedy przeczytalibyśmy to tak: "znajdź parter, a w nim ściany, a w nich okna i oknom ustaw, co następuje". I tak dalej. Jeśli pamiętasz analogię, w której mówiliśmy o zagnieżdżonych tagach HTML jako o dzieciach i rodzicach, tutaj jest podobnie. Szukamy elementów, które znajdują się w innych elementach, a więc szukamy "dzieci rodziców".

Używając przeglądarki nie można niestety wybudować domu, a więc nasz powyższy, abstrakcyjny przykład niewiele nam powie, bo nie będziemy mogli tego zobaczyć na własne oczy. Gdyby jednak poszczególne części domu zastąpić tagami HTML? I tak, zamiast okien możemy szukać akapitów (<p>), a zamiast drzwi nagłówków pierwszego stopnia <h1>? Wyglądałoby to tak:

p {
}

h1 {
}

Tego typu kod nie zmieni jednak nic w wyświetlaniu strony, ponieważ pomiędzy nawiasami klamrowymi nie umieściliśmy żadnych właściwości - tła, wielkości i tak dalej. Możemy je dodać, jednak bardzo miło byłoby pracować z żywym organizmem, który wymaga naszej pomocy. Co Ty na to, by użyć strony z artykułem o Justinie Boberze i dodać tam nieco kolorów i życia?

Przypomnijmy, że kod wyglądał tak:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Justin Bober zafascynowany HTML-em</title>
  </head>
  <body>
    <article>
      <header>
        <h1>Justin Bober: Odkąd nauczyłem się HTML-a, moje życie zmieniło się o 360 stopni</h1>
        <p>Napisał: Damian Wielgosik</p>
      </header>
      <p>Justin Bober wyznał coś, czego nie spodziewaliby się nawet najwięksi fani tego zdolnego muzyka i eseisty. Młody rockendrolowiec przyznał, że odkąd postawił pierwszy znacznik title, jego życie stało się łatwiejsze. Ponoć prywatnymi mentorami Bobera stali się, jak donoszą osoby z otoczenia Kanadyjczyka, Ryan Losling i Nicolas Klatka. Często spacerują po Los Angeles i rozprawiają godzinami o tym, jak fajnym narzędziem jest walidator HTML.</p>
      <figure>
        <img src="cat.jpg" alt="Kot Justina Bobera jest zadowolony">
        <figcaption>Zadowolony kot Justina Bobera</figcaption>
      </figure>
      <p>Bober stworzył już kilka  stron i nie zamierza na tym poprzestać. <q>Prawdopodobnie zaśpiewam o HTML-u na mojej następnej płycie</q> - dodaje artysta.
      </p>
    </article>
  </body>
</html>

Przywołując na chwilę analogię budowy domu, tutaj – zamiast drzwi, okien i podobnych – mamy z kolei do czynienia z elementami takimi jak <article>, <p>, <header>, <body>, <figcaption> i tak dalej. To z tych tagów zbudowaliśmy tę stronę. To bardzo ważne porównanie, gdy będziemy próbować uzmysłowić sobie, jak działa CSS.

Przy okazji przygotowałem dla Ciebie zrzut z ekranu, ze wskazówką, jak powinna wyglądać strona po naszych modyfikacjach:

Jak widać, trzeba będzie nanieść trochę zmian - dodać proste kolory, tła, krój fonta i tak dalej. Odtwórzmy więc powyższą stronę krok po kroku!

Pierwsza czynność to oczywiście zapisanie całego kodu HTML do oddzielnego pliku. U mnie nazywa się on article.html. Następnie należy stworzyć plik, w którym przechowywać będziemy nasze reguły CSS. Niech to będzie main.css.

Tak prezentuje się to na moim komputerze:

Otwieram więc article.html w przeglądarce, a plik main.css za pomocą edytora tekstu - polecam tutaj Sublime Text Editor 2 lub TextMate. Po każdej zmianie w main.css będę odświeżał stronę, aby monitorować postępy, jeśli chodzi o jej wygląd. Muszę jedynie dodać do article.html polecenie, aby przeglądarka wczytywała również kod z main.css i stosowała się do tamtejszych reguł CSS. Robi się to w <head> dzięki tagowi <link>. Wystarczy dodać coś takiego:

<link rel="stylesheet" href="main.css">

Atrybut "href" wskazuje, w którym pliku mieści się kod CSS. "stylesheet" mówi nam z kolei, że chodzi o arkusz stylów CSS.

Na początek zajmijmy się nagłówkiem pierwszego stopnia, czyli tytułem artykułu. Analogicznie do okien i ścian, szukamy takiego elementu w CSS:

h1 { 
}

Brawo! Właśnie poprzez kod CSS powiedzieliśmy przeglądarce, by dla wszystkich elementów <h1> w HTML, zaaplikowała zdefiniowany przez nas wygląd. Problem w tym, że nie ustaliliśmy jaki, ponieważ pomiędzy nawiasami klamrowymi nie ma żadnego kodu. Jako że chcemy, by tekst tytułowy był koloru zielonego, zastosujmy specjalnie do tego stworzoną właściwość "color" ustawioną na "green" (czyli zielony po polsku):

h1 {
  color: green; 
}

Działanie tej reguły wytłumaczyłem jeszcze w postaci poniższego schematu:

Sprawdźmy teraz, jak wygląda nasza strona po zapisaniu zmian.

Tak jest! Tytuł został oznaczony kolorem zielonym! Pora teraz zająć się danymi o autorze. Tekst ma tutaj kolor biały, a tło jest czerwone. Znajdźmy ten fragment w kodzie HTML. Jak widać, informacja o autorze zawarta jest między tagiem <p>:

<article>
  <header>
    <h1>Justin Bober: Odkąd nauczyłem się HTML-a, moje życie zmieniło się o 360 stopni</h1>
    <p>Napisał: Damian Wielgosik</p>
  </header>

A więc przekładając to na język CSS, powinniśmy znaleźć wszystkie tagi p i nadać im biały kolor tekstu oraz czerwony kolor tła. Dodajmy więc stosowną linijkę do pliku main.css:

p {
    background-color: red;
    color: white;
}

Cała zawartość main.css wygląda w tej chwili tak:

h1 {
  color: green; 
}

p {
    background-color: red;
    color: white;
}

Jak widzisz, dodajemy reguły jedna pod drugą. Czas sprawdzić, jak wygląda teraz nasza strona:

Nie jest do końca tak, jak to sobie wyobrażaliśmy. Okazało się, że wszystkie inne akapity również zostały uwzględnione i teraz są wyświetlone na czerwonym tle. To nasza wina, ponieważ używając tego kodu:

p {
    background-color: red;
    color: white;
}

"powiedzieliśmy" przeglądarce mniej więcej tak: znajdź na stronie wszystkie elementy <p> i ustaw im czerwone tło, a kolor fontu biały. Nam z kolei zależy, by tylko jeden akapit miał takie właściwości, konkretnie ten, który znajduje się w nagłówku artykułu. Musimy więc zmodyfikować tak powyższy selektor, by znaleźć paragraf, który jest "dzieckiem" <header>, a ten z kolei niech będzie "dzieckiem" <article>:

article header p {
    background-color: red;
    color: white;
}

Sprawdźmy efekt tych zmian:

Znacznie lepiej! Wybrano właściwy akapit. Jak to się stało? Otóż przeglądarka przeczytała powyższy selektor CSS, aby wiedzieć, do których tagów zastosować zmianę wyglądu. Potem przeanalizowała kod HTML i znalazła wszystkie tagi pasujące do selektora, a więc znalazła <article> (u nas akurat jest tylko jeden), potem poszukała zagnieżdżonych w nich tagów <header>, a na końcu znalazła umieszczone w elementach <header> tagi <p> i zaaplikowała im wygląd, który zdefiniowaliśmy. CSS właśnie działa w ten sposób – w selektorach definiujesz jakich tagów chcesz "poszukać", odnosząc się do nich m.in. według hierarchii, jakiej użyłeś z kolei w kodzie HTML.

Zajmijmy się teraz zdjęciem do artykułu. Uznajmy, że załączniki do artykułu powinny mieć 600 pikseli szerokości. Jako że odpowiednikiem załącznika w naszym kodzie HTML jest tag <figure>, nadajmy mu szerokość 600px:

article figure  {
    width: 600px;
}

A więc każdy element <figure> w <article> będzie miał szerokość 600 pikseli. U nas jest tylko jeden, ale równie dobrze moglibyśmy mieć kilka zdjęć do artykułu. Następnie musimy ustawić obramowanie:

article figure  {
    width: 600px;
    border: 3px solid black;
}

Użyliśmy tutaj właściwości o nazwie "border". Po dwukropku podajemy szerokość obramowania, następnie styl obramowania, czyli "solid" (linia ciągła) i jego kolor - "black" (czarny). Zobaczmy, jak wygląda teraz nasz artykuł:

Niestety mamy problem. O ile obramowanie wyświetla się dobrze i kontener <figure> jest szeroki na 600 pikseli, tak obrazek w <img> wystaje poza obramowanie, a więc i poza <figure>. Dzieje się tak ponieważ ustaliliśmy szerokość dla elementu <figure>, jednak obrazek (w tagu <img>) nie ma ustalonej żadnej szerokości, a więc wyświetla się w oryginalnych rozmiarach. Fajnie byłoby, gdyby przyjął 100% szerokości swojego rodzica, czyli tagu <figure>. Robimy to w prosty sposób:

article figure img {
    width: 100%;
}

Wygląda to teraz tak:

Dla lepszego efektu wizualnego, dobrze byłoby dodać odstęp od krawędzi dla wszystkich elementów w <figure>. Robimy to dzięki właściwości "padding". Zmodyfikujmy więc selektor "article figure":

article figure  {
    width: 600px;
    border: 3px solid black;
    padding: 5px;
}

Efekt naszych zmian widać na obrazku poniżej:

Spróbuj zmodyfikować wartość "paddingu". Zobaczysz, jak zmienia się biała przerwa między obrazkiem na ramką.

Wygląda na to, że prawie udało nam się osiągnąć zamierzony cel. Dlaczego prawie? Zauważ, że tekst akapitów rozciąga się na całą szerokość okna przeglądarki. Może wypadałoby go jakoś ograniczyć z góry zdefiniowaną szerokością? Na przykład 800 pikseli. Wybierzmy więc specjalnym selektorem CSS sam artykuł i nadajmy mu szerokość 800px:

article {
    width: 800px;
}

Od razu lepiej!

Jeśli przyjrzysz się jeszcze początkowemu obrazkowi to zobaczysz, że mamy do dyspozycji tam nieco inny krój fonta. Tak jak w programach do edycji tekstu typu Microsoft Word możesz zmienić krój fonta, tak i w CSS da się to zrobić. Najlepiej ustawić globalny typ fonta dla wszystkich elementów. W CSS robi się to podając właściwość fonta dla tagu <body>. Wtedy wszystkie elementy "dzieci" zawarte w <body> zostaną również objęte tymi ustawieniami. W naszym przykładzie zastosowałem font o nazwie Verdana. Użyjmy go:

body {
    font-family: Verdana;
}

Możesz usunąć tę linijkę, by zobaczyć różnicę. Rzeczywiście. Dla nagłówka, jak i dla normalnych akapitów zmienił się krój fonta.

Ostatecznie nasz kod w main.css wygląda tak:

body {
    font-family: Verdana;
}

article {
    width: 800px;
}

article header h1 {
    color: green;
}

article header p {
    background-color: red;
    color: white;
}

article figure  {
    width: 600px;
    border: 3px solid black;
    padding: 5px;
}

article figure img {
    width: 100%;
}

Dobrym zwyczajem jest, by rozpoczynać od najogólniejszych selektorów, dlatego zacząłem od body, potem article i dalej, idąc od góry do dołu, umieściłem coraz bardziej szczegółowe i zagnieżdżone.