Struktura CSS i formatowanie

Przeglądarka zrozumie regułę CSS zapisaną nawet w jednej, zbitej linii, ale człowiek już nie - dlatego sposób zapisu kodu jest prawie tak samo ważny jak jego działanie.

Wyobraź sobie papirus, na którym skryba pisał raz drobnymi znakami, raz ogromnymi, bez odstępów między wersami. Treść ta sama, a czytanie to męka. Dobrego developera można poznać nie tylko po umiejętnościach, ale również po czytelności jego kodu.

Ta sama reguła, dwa zapisy

Spójrz na dwie wersje tej samej reguły. Pierwsza wygląda tak jak kod "zminifikowany", czyli pozbawiony zbędnych spacji, żeby plik był mniejszy:

h1{color:red;background-color:gold}

Działa, ale trudno w niej szybko znaleźć konkretną deklarację, zwłaszcza gdy jest ich dziesięć, a nie dwie. A oto dokładnie ta sama reguła, sformatowana zgodnie z zasadami, których trzymamy się w całym kursie:

h1 {
  color: red;
  background-color: gold;
}

Przeglądarka potraktuje oba zapisy identycznie - spacje, wcięcia i nowe linie między częściami reguły nie zmieniają jej działania. Zmienia się tylko to, jak szybko przeczyta ją człowiek, na przykład Ty za miesiąc.

Zasady czytelnej reguły

Co to znaczy, że kod jest czytelny? Na chwilę obecną wystarczy, że pilnujesz wcięć w HTML i CSS. Każda reguła CSS powinna być zbudowana w ten sam sposób:

h1 {
  color: red;
}
p {
  color: blue;
}

Sposób tworzenia reguły CSS:

1. Selektor zawsze na początku linii, spacja i otwarcie nawiasu klamrowego.
2. Wcięcie, które jest równe w każdej deklaracji. Ważne, żeby linia deklaracji wyglądała w następujący sposób - właściwość: wartość;. Pamiętamy o spacji po dwukropku i średniku na końcu.
3. Domknięcie nawiasu klamrowego.

Wcięcie to zwykle dwie spacje, tak jak w naszych przykładach, albo cztery - wybierz jedno i trzymaj się go w całym pliku.

Kolor tekstu i tło

Skoro reguła może mieć wiele deklaracji, poznajmy dwie właściwości, które przydadzą Ci się od razu. Kolor tekstu ustawia color, a kolor tła - background-color:

p {
  color: #1E90FF;
  background-color: #FFD700;
}

Tekst akapitu będzie niebieski jak Nil, a tło złote. Kolory możesz podawać nazwą (red, gold) albo kodem szesnastkowym zaczynającym się od krzyżyka, np. #FFD700 - to dokładnie ten sam złoty co gold, tylko zapisany liczbami. Istnieją też zapisy rgb() i hsl(), które opisują kolor liczbami jego składowych. W rgb(205, 133, 63) trzy liczby od 0 do 255 mówią, ile w kolorze jest czerwieni, zieleni i niebieskiego; kod #CD853F zapisuje te same liczby szesnastkowo, parami znaków (CD to 205).

Tło ustawia również krótsza właściwość background. To tzw. skrót (ang. shorthand): oprócz koloru możesz w niej podać między innymi obrazek tła. Na początek polecam background-color - od razu widać, że zmieniasz wyłącznie kolor.

W najbliższym ćwiczeniu przydadzą się jeszcze trzy rzeczy. padding to odstęp wewnątrz elementu, a margin - odstęp na zewnątrz. Wpisujesz je jak każdą inną deklarację, a dokładnie omówimy je w lekcji o box modelu. Selektor może też wskazywać klasę: .gold, z kropką na początku, trafi tylko do elementów z atrybutem class="gold", który znasz z pierwszego modułu.

Przyda się też jeszcze jedna rzecz: tekst między /* a */ to komentarz, który przeglądarka pomija. "Odkomentować" regułę znaczy usunąć te znaki wokół niej, żeby przeglądarka znów ją czytała.

Styl dla kilku elementów

W przykładzie z zasadami czytelnej reguły nagłówek dostał kolor czerwony, a akapit niebieski - każdy we własnej regule. A co, jeśli ten sam kolor ma trafić do wielu elementów naraz?

Odpowiedź jest prosta - możesz podać selektory jeden po drugim i oddzielić je przecinkami:

h1, p {
  color: blue;
}

Kolor niebieski zostanie zastosowany do elementów h1 i p. Pozostałe elementy, np. h2, zachowają swój dotychczasowy kolor, bo reguła trafia tylko do selektorów z listy. Uważaj na przecinek: zapis h1 p, ze spacją zamiast przecinka, wybiera akapity umieszczone wewnątrz h1 - takie selektory poznasz w lekcji o zaawansowanych selektorach. Przy dłuższej liście polecam pisać każdy selektor w osobnej linii, zakończony przecinkiem.

Praktyka

W edytorze poniżej grupowanie działa w praktyce: h1 i h2 dzielą kolor i krój pisma, a div i span - tło i odstępy. Zwróć uwagę, że div i span mają potem jeszcze własne, osobne reguły:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS - Formatowanie i grupowanie</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Główny nagłówek</h1>
    <p>To jest paragraf który będzie stylowany.</p>
    <h2>Drugi nagłówek</h2>
    <p>Kolejny paragraf z tekstem.</p>
    <div>To jest div - element kontenerowy</div>
    <span>To jest span - element inline</span>
</body>
</html>

Grupa ustala wspólną bazę, a osobne reguły dodają różnice. Dobrego skryby poznaje się po równych liniach, więc buduj każdą regułę zawsze tak samo - selektor, wcięte deklaracje w formacie właściwość: wartość zakończone średnikiem, klamra domykająca - a gdy kilka elementów ma dzielić ten sam wygląd, wypisz ich selektory po przecinku zamiast powielać kod.