CSS – selektory, model pudełkowy, kolory i czcionki

Czego się nauczysz

HTML mówi, czym jest dany fragment strony. CSS mówi, jak ma wyglądać: kolor, czcionka, odstępy. Oddzielenie treści od wyglądu to jedna z podstawowych zasad nowoczesnych stron – i temat tej lekcji.

Po tej lekcji:

• podłączysz zewnętrzny plik CSS do dokumentu HTML,
• napiszesz selektor znacznika, klasy i id oraz wyjaśnisz różnicę między nimi,
• wymienisz cztery warstwy modelu pudełkowego w kolejności od środka,
• ustawisz kolor tekstu, kolor tła, krój i rozmiar czcionki.

Podłączenie pliku CSS

Najlepsza praktyka to osobny plik .css podłączony przez <link> w <head>. Wygląd całej strony zmieniasz wtedy w jednym miejscu.

<head>
    <meta charset="UTF-8">
    <title>Moja strona</title>
    <link rel="stylesheet" href="styl.css">
</head>

rel="stylesheet" mówi przeglądarce, że plik pod href to arkusz stylów. Znacznik <link> musi stać w <head>.

Selektory – kogo dotyczy reguła

h1 { color: darkgreen; }
.zaznaczony { background-color: yellow; }
#naglowek { font-size: 32px; }

• Selektor znacznika (h1) dotyczy wszystkich elementów tego typu.
• Selektor klasy (.nazwa) dotyczy elementów z class="nazwa". Klasę można nadać wielu elementom.
• Selektor id (#nazwa) dotyczy jednego elementu z id="nazwa". Id musi być unikalne na całej stronie.

Klasa i id w kodzie HTML

<h1 id="naglowek">Moja strona</h1>
<p class="zaznaczony">To jest ważny akapit.</p>
<p class="zaznaczony">To też jest ważne.</p>

class i id to atrybuty, tak samo jak href czy src. Ten sam element może mieć jednocześnie klasę i id. Klasa może się powtarzać, id – nie.

Model pudełkowy (box model)

Każdy element HTML to w CSS prostokątne „pudełko” zbudowane z czterech warstw, jedna wewnątrz drugiej. Od środka:

1. content – sama treść elementu: tekst, obraz,
2. padding – odstęp wewnątrz, między treścią a obramowaniem,
3. border – widoczna krawędź, czyli ramka,
4. margin – odstęp na zewnątrz, między elementem a sąsiadami.

.ramka {
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
    width: 300px;
}

Wartości podaje się zwykle w pikselach (px). Kolejność właściwości nie ma znaczenia – CSS to zestaw niezależnych par właściwość: wartość.

Kolory i czcionki

p {
    color: darkblue;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

• color to kolor tekstu, a background-color to kolor tła. To częsta pomyłka nazw.
• font-family przyjmuje listę krojów oddzieloną przecinkami. Przeglądarka próbuje kolejno, aż znajdzie dostępny.

Kolor można zapisać nazwą (darkblue) albo kodem szesnastkowym (#00008B). Obie formy są równoważne.

Spróbuj sam

Utwórz obok swojego pliku HTML plik styl.css, podłącz go i nadaj stronie kolory. Sprawdź, co się stanie, gdy tę samą klasę nadasz trzem akapitom.

Na karcie pracy do tej lekcji:

• zadania sprawdzające 1–3 – podłączenie pliku CSS, selektory klasy i id, box model,
• zadania domowe 1–5 – własne style kolorów, czcionek i ramek.

Sprawdź się

• Podłączę zewnętrzny plik CSS do dokumentu HTML.
• Napiszę selektor znacznika, klasy i id oraz wyjaśnię różnicę między nimi.
• Wymienię cztery warstwy modelu pudełkowego w kolejności od środka.
• Ustawię kolor tekstu, kolor tła, krój i rozmiar czcionki.

Na następnej lekcji: pozycjonowanie i wstęp do Flexboksa – jak układać elementy obok siebie, nie tylko jeden pod drugim.