Vademecum INF.03

Menu-new
  • To przerób jako drugie

CSS 3 – wygląd i położenie

Samo potrzebne mięso do egzaminu, nic więcej.​

  • Układ strony
  • Selektory
  • Kolory
  • Właściwości

Opanuj wizualną stronę tworzenia witryn: definiuj kolory, czcionki, układy i proste animacje, aby Twoje strony były estetyczne i czytelne na każdym urządzeniu.

Czas na magię! Stylowanie strony

 poprzedniej lekcji stworzyliśmy solidny, ale surowy szkielet naszej strony w HTML. Teraz nauczymy się, jak nadać mu wygląd, charakter i profesjonalny szlif. Witaj w świecie Kaskadowych Arkuszy Stylów (CSS)!

Ciekawostka

Zastanawiałeś się kiedyś, co dokładnie znaczy słowo "Kaskadowe" w nazwie CSS?
Nazwa pochodzi od kaskadowego systemu priorytetów. Twórca CSS, Håkon Wium Lie (1994 r.), założył, że nie tylko projektant strony będzie definiował jej wygląd. Swój własny arkusz stylów może mieć też przeglądarka, a nawet sam użytkownik (np. aby powiększyć czcionki na wszystkich stronach).
"Kaskada" to inteligentny mechanizm, który działa jak sędzia – gdy dochodzi do konfliktu (np. strona ustawia czcionkę na 12px, a użytkownik na 16px), to właśnie kaskada decyduje, który styl ma pierwszeństwo i zostanie wyświetlony. To ta zdolność do "spływania" stylów z różnych źródeł i ustalania ich hierarchii dała nazwę całej technologii.

1. Podstawy

1.1. Czym jest CSS i jak go podłączyć?

CSS to język, za pomocą którego opisujemy, jak mają wyglądać elementy HTML. To on decyduje o kolorach, czcionkach, odstępach, a nawet animacjach. Podstawową zasadą jest oddzielenie struktury (HTML) od prezentacji (CSS).

Na egzaminie INF.03 najważniejszą i wymaganą metodą jest dołączenie zewnętrznego arkusza stylów.

  1. Utwórz nowy plik w tym samym folderze co Twój plik index.html i nazwij go styl.css.

  2. W pliku index.html, w sekcji <head>, dodaj znacznik <link>, aby połączyć oba pliki:

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

Gotowe! Od teraz wszystkie style, które zapiszesz w pliku styl.css, będą miały wpływ na Twoją stronę.

Reguła CSS jest bardzo prosta i logiczna. Składa się z selektora i deklaracji (która zawiera właściwość i wartość).

/* To jest komentarz w CSS */

selektor {
    właściwość: wartość;
}
  • Selektor – mówi, który element (lub elementy) chcemy ostylować.
  • Właściwość – cecha, którą chcemy zmienić (np. color – kolor tekstu).
  • Wartość – jak chcemy zmienić tę cechę (np. blue – na niebieski).

2. Składnia i selektory

2.1. Podstawowe selektory

Oto najważniejsze selektory, które musisz znać:

  • Selektor elementu (typu): Styluje wszystkie elementy danego typu.
    /* Wszystkie paragrafy na stronie będą miały rozmiar czcionki 16px */
p {
    font-size: 16px;
}
  • Selektor klasy (.nazwa-klasy): Styluje wszystkie elementy z atrybutem class="nazwa-klasy". Możesz używać tej samej klasy wielokrotnie.
    /* Element z class="wyróżniony" będzie miał żółte tło */
.wyróżniony {
    background-color: yellow;
}
  • Selektor ID (#nazwa-id): Styluje jeden, unikalny element z atrybutem id="nazwa-id". ID nie może się powtarzać na stronie.
    /* Element z id="naglowek" będzie wyśrodkowany */
#naglowek {
    text-align: center;
}

2.2. Stylizowanie tekstu i kolorów

To właśnie tutaj zaczyna się prawdziwa „magia” CSS. Odpowiedni dobór kolorów i czytelna typografia to 80% sukcesu wizualnego każdej strony. Skupmy się na najważniejszych właściwościach, które pozwolą Ci w pełni kontrolować wygląd tekstu.

Zarządzanie czcionkami (font-family)

Rzadko kiedy ograniczamy się do jednej czcionki. Dobrą praktyką jest podanie tzw. „stosu czcionek” (font stack). Przeglądarka spróbuje użyć pierwszej z listy, a jeśli jej nie znajdzie na komputerze użytkownika, przejdzie do następnej.

body {
    /* Przeglądarka najpierw spróbuje wczytać nowoczesną czcionkę 'Roboto'. */
    /* Jeśli się nie uda, użyje standardowej 'Arial'. */
    /* W ostateczności, użyje dowolnej dostępnej czcionki bezszeryfowej. */
    font-family: 'Roboto', Arial, sans-serif;
}
  • Czcionki szeryfowe (serif): Posiadają ozdobne „ogonki” (np. Times New Roman, Georgia). Uważane za bardziej klasyczne, idealne do długich bloków tekstu drukowanego.
  • Czcionki bezszeryfowe (sans-serif): Proste, bez ozdobników (np. Arial, Helvetica, Verdana). Uważane za nowocześniejsze i bardziej czytelne na ekranach.

Definiowanie kolorów (nie tylko color!)

W CSS kolor możemy zdefiniować na kilka sposobów. Najpopularniejsze to:

  1. Nazwy angielskie: red, green, blue, lightgray (proste, ale ograniczony wybór).
  2. HEX (szesnastkowe): #RRGGBB – najpopularniejszy zapis. Dwie pierwsze cyfry/litery to składowa czerwona, dwie kolejne zielona, a dwie ostatnie niebieska.
    • #FFFFFF – biały
    • #000000 – czarny
    • #FF0000 – czerwony
  3. RGB (Red, Green, Blue): rgb(0, 0, 0) – wartości od 0 do 255 dla każdej ze składowych.
  4. RGBA (Red, Green, Blue, Alpha): rgba(0, 0, 0, 0.5) – to samo co RGB, ale z dodatkowym kanałem przezroczystości (alpha) od 0 (całkowicie przezroczysty) do 1 (w pełni widoczny).

Właściwości związane z kolorem:

  • color: Ustala kolor samego tekstu (czcionki).
  • background-color: Ustala kolor tła elementu.
.alert-box {
    /* Ciemnoniebieski tekst */
    color: #004085;
    /* Jasnoniebieskie tło z 30% przezroczystości */
    background-color: rgba(0, 123, 255, 0.3);
    border: 1px solid #004085;
}

Rozmiary i wagi czcionek (font-size, font-weight)

  • font-size: Określa wielkość liter. Możemy używać różnych jednostek:

    • px (piksele): Wartość absolutna. Najprostsza do zrozumienia.
    • em: Jednostka względna, odnosi się do rozmiaru czcionki rodzica. 1.2em to 120% rozmiaru czcionki rodzica.
    • rem (root em): Jednostka względna, ale odnosi się zawsze do rozmiaru czcionki elementu <html>. To najlepsza praktyka dla skalowalnych i dostępnych stron.

  • font-weight: Określa „grubość” czcionki.

    • normal (lub 400) – standardowa grubość.
    • bold (lub 700) – pogrubienie.

Dodatkowe właściwości tekstu (bardzo przydatne!)

  • font-style: Umożliwia włączenie pochylenia (italic).
  • text-decoration: Służy do dekorowania tekstu. Najczęściej używane do usuwania podkreślenia z linków.
  • text-transform: Pozwala na zmianę wielkości liter bez ingerencji w HTML.
  • line-height: Interlinia, czyli odstęp między liniami tekstu. Dla czytelności ustawia się ją zazwyczaj na 1.5 lub 1.6.
  • letter-spacing: Zwiększa lub zmniejsza odstęp między literami.
  • text-align: Wyrównuje tekst w poziomie (left, right, center, justify).

Kompletny przykład:

/* Styl dla linku w nawigacji */
.nav-link {
    color: #FFFFFF; /* Biały tekst */
    font-size: 1rem; /* 16px, jeśli domyślna czcionka to 16px */
    font-weight: 700; /* Pogrubiony */
    text-decoration: none; /* WAŻNE: Usuwa domyślne podkreślenie linku */
    text-transform: uppercase; /* Wszystkie litery wielkie */
    letter-spacing: 1px; /* Lekko zwiększony odstęp między literami */
    padding: 10px 15px; /* Dodajemy trochę "oddechu" wewnątrz linku */
    background-color: #007BFF; /* Niebieskie tło */
}

/* Dodajemy efekt po najechaniu myszką */
.nav-link:hover {
    background-color: #0056b3; /* Ciemniejszy odcień niebieskiego */
}

2.3. Model Pudełkowy (Box Model) – Architektura każdego elementu

Wyobraź sobie, że każdy element na Twojej stronie – czy to paragraf, nagłówek, czy obrazek – jest zamknięty w niewidzialnym, prostokątnym pudełku. Model pudełkowy to nic innego jak zbiór zasad opisujących budowę tego pudełka. Składa się ono z czterech warstw, licząc od wewnątrz:

  1. Content (Zawartość) – właściwa treść elementu: tekst, obraz, wideo.
  2. Padding (Dopełnienie) – przestrzeń wewnątrz pudełka, między zawartością a ramką. Działa jak margines wewnętrzny, który „odpycha” ramkę od treści.
  3. Border (Ramka) – linia obrysowująca pudełko wokół dopełnienia (paddingu).
  4. Margin (Margines) – przestrzeń na zewnątrz pudełka, która oddziela je od innych elementów. To niewidzialny bufor dookoła elementu.

Szczegółowe omówienie właściwości

Padding i Margin – skrócone zapisy (shorthand)

Zarówno padding jak i margin można zdefiniować na kilka sposobów. Znajomość skróconych zapisów oszczędza mnóstwo czasu i jest uznawana za dobrą praktykę. Zasada jest identyczna dla obu właściwości (na przykładzie margin):

  • Cztery wartości: margin: 10px 20px 30px 40px; (góra, prawo, dół, lewo – zgodnie z ruchem wskazówek zegara 🕛)
  • Dwie wartości: margin: 10px 20px; (góra/dół, prawo/lewo)
  • Jedna wartość: margin: 15px; (wszystkie cztery strony mają tę samą wartość)

Można też używać pojedynczych właściwości, np. padding-left: 20px; lub margin-bottom: 30px;.

Border – więcej niż tylko linia

Ramkę również definiujemy za pomocą skróconego zapisu, podając trzy wartości: jej grubość, styl i kolor.

border: grubość styl kolor;

  • Grubość: np. 1px, 2px.
  • Styl: solid (ciągła), dotted (kropkowana), dashed (przerywana), double (podwójna).
  • Kolor: np. black, #ccc, rgb(50, 50, 50)
.card {
    /* Ramka o grubości 1px, ciągła, w kolorze jasnoszarym */
    border: 1px solid #ccc;
    /* Możemy też stylizować tylko jedną krawędź */
    border-bottom: 3px solid #007BFF;
}

Klucz do sukcesu: box-sizing: border-box

To prawdopodobnie najważniejsza pojedyncza reguła CSS, jaką powinieneś znać.

Domyślnie przeglądarka używa box-sizing: content-box. Oznacza to, że jeśli ustawisz elementowi width: 200px;, to padding i border zostaną do tej szerokości dodane.

  • Przykład (bez border-box): width: 200px + padding: 20px (z obu stron) + border: 2px (z obu stron) = 244px całkowitej szerokości. To koszmar przy tworzeniu layoutów!

Ustawienie box-sizing: border-box; zmienia to zachowanie. Padding i border są wtedy wliczane w zadeklarowaną szerokość, a nie do niej dodawane.

  • Przykład (z border-box): width: 200px = 200px całkowitej szerokości. Padding i ramka „wciskają” zawartość do środka, ale samo pudełko nie rośnie.

Dlatego na samym początku każdego pliku CSS umieść tę magiczną regułę, aby zastosować ją do wszystkich elementów:

* {
    box-sizing: border-box;
}

Praktyczny przykład

Zobaczmy dwa pudełka obok siebie, aby zrozumieć interakcję między marginesem a dopełnieniem.

To jest pudełko z wewnętrznym dopełnieniem (padding).
Margines zewnętrzny (margin) tworzy odstęp między tym a poprzednim pudełkiem.

HTML:

<div class="box">
    To jest pudełko z wewnętrznym dopełnieniem (padding).
</div>
<div class="box">
    Margines zewnętrzny (margin) tworzy odstęp między tym a poprzednim pudełkiem.
</div>

CSS:

* {
    box-sizing: border-box; /* Nasz superbohater! */
}

.box {
    width: 300px;
    background-color: #e9f5ff;

    /* Dopełnienie WEWNĄTRZ pudełka */
    padding: 20px;

    /* Ramka dookoła */
    border: 2px solid #007BFF;

    /* Margines NA ZEWNĄTRZ pudełka (tworzy odstęp) */
    /* Ustawiamy tylko margines dolny, aby oddzielić pudełka */
    margin-bottom: 25px;
}

W tym przykładzie padding tworzy „oddech” dla tekstu wewnątrz niebieskiej ramki, a margin-bottom tworzy 25-pikselową przerwę pomiędzy pierwszym a drugim pudełkiem. Proste i przewidywalne!

2.4. Układ Strony i Pozycjonowanie – Ustawianie elementów na swoim miejscu

Teraz, gdy wiemy, jak zbudowane jest każde „pudełko” na naszej stronie, nauczymy się je układać. Domyślnie elementy HTML układają się jeden pod drugim (jak div i p) lub jeden obok drugiego (jak a i span). CSS daje nam potężne narzędzia, by w pełni to kontrolować.

Właściwość display – Jak zachowuje się element?

Właściwość display to absolutna podstawa kontroli nad layoutem. Decyduje ona o tym, jak element jest renderowany i jak wchodzi w interakcje z innymi.

  • display: block;

    • Zachowanie: Element blokowy. Zaczyna się w nowej linii i zajmuje całą dostępną szerokość, wypychając inne elementy pod siebie.
    • Można mu nadać: width, height, margin, padding.
    • Przykłady: <h1>, <p>, <div>, <ul>, <li>.

  • display: inline;

    • Zachowanie: Element liniowy. Ustawia się w jednej linii z innymi elementami inline i zajmuje tylko tyle szerokości, ile potrzebuje jego zawartość.
    • Nie można mu nadać: width, height ani margin-top/margin-bottom.
    • Przykłady: <a>, <span>, <strong>, <img>.

  • display: none;

    • Zachowanie: Całkowicie ukrywa element. Element nie tylko staje się niewidoczny, ale jest usuwany z przepływu strony, tak jakby go nigdy nie było w kodzie HTML.

Właściwość position – Precyzyjne pozycjonowanie

Gdy domyślny przepływ strony to za mało, z pomocą przychodzi właściwość position. Pozwala ona na „wyjęcie” elementu z normalnego toku i umieszczenie go w bardzo konkretnym miejscu.

  • position: static; – To domyślna wartość. Element znajduje się w normalnym przepływie strony.
  • position: relative; – Element pozostaje w normalnym przepływie, ale możemy go teraz przesuwać za pomocą właściwości top, right, bottom, left względem jego pierwotnej pozycji. Co najważniejsze, staje się on punktem odniesienia dla swoich „absolutnie” pozycjonowanych dzieci.
  • position: absolute; – Element jest całkowicie wyjmowany z normalnego przepływu strony. Jego pozycję ustalamy za pomocą top/right/bottom/left, ale względem najbliższego przodka, który ma pozycję inną niż static (najczęściej relative). Jeśli takiego nie znajdzie, pozycjonuje się względem <body>.
  • position: fixed; – Działa podobnie do absolute, ale element jest pozycjonowany względem okna przeglądarki. Oznacza to, że pozostanie on w tym samym miejscu na ekranie, nawet gdy użytkownik przewija stronę. Idealne do tworzenia stałych nagłówków, stopek czy przycisków „Wróć na górę”.

Klasyczny przykład relative + absolute: Chcemy umieścić ikonkę w prawym górnym rogu obrazka.

HTML:

<div class="image-container">
    <img src="krajobraz.jpg" alt="Piękny krajobraz">
    <span class="icon">IKONA</span>
</div>

CSS:

.image-container {
    position: relative; /* Ten kontener jest teraz punktem odniesienia */
    width: 400px;
}

.icon {
    position: absolute; /* Wyjmujemy ikonę z normalnego przepływu */
    top: 10px;          /* 10px od górnej krawędzi kontenera */
    right: 10px;        /* 10px od prawej krawędzi kontenera */
    background-color: red;
    color: white;
    padding: 5px;
}

Flexbox (display: flex) – Nowoczesny standard layoutów

To obecnie najpopularniejszy i najważniejszy moduł do tworzenia jednowymiarowych layoutów (wierszy lub kolumn). Jego znajomość jest niezbędna na egzaminie. Flexbox rozwiązuje problemy z wyrównywaniem i rozmieszczaniem elementów w kontenerze.

Podstawowa koncepcja: Aby zacząć, kontenerowi (rodzicowi) nadajemy display: flex;. Wszystkie jego bezpośrednie dzieci stają się wtedy elastycznymi elementami (flex items).

Najważniejsze właściwości dla KONTENERA (rodzica):

  • flex-direction: Określa kierunek głównej osi.
    • row (domyślnie): Elementy układają się w poziomie, od lewej do prawej.
    • column: Elementy układają się w pionie, od góry do dołu.
  • justify-content: Wyrównuje elementy wzdłuż osi głównej.
    • flex-start: Do początku.
    • flex-end: Do końca.
    • center: Na środku.
    • space-between: Równe odstępy między elementami (pierwszy na początku, ostatni na końcu).
    • space-around: Równe odstępy dookoła elementów.
  • align-items: Wyrównuje elementy wzdłuż osi poprzecznej.
    • stretch (domyślnie): Rozciąga elementy na całą wysokość/szerokość.
    • flex-start: Do początku osi poprzecznej.
    • center: Na środku.
    • flex-end: Na końcu.

Praktyczny przykład – tworzenie nawigacji:

HTML:

<nav class="main-nav">
    <a href="#">Strona Główna</a>
    <a href="#">O nas</a>
    <a href="#">Galeria</a>
    <a href="#">Kontakt</a>
</nav>

CSS:

.main-nav {
    display: flex; /* Włączamy magię Flexboxa! */
    justify-content: center; /* Wyśrodkowujemy linki w poziomie */
    background-color: #333;
    padding: 15px;
}

.main-nav a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
}

/* Efekt po najechaniu, żeby było ładniej */
.main-nav a:hover {
    background-color: #555;
}

Dzięki display: flex i justify-content: center stworzenie idealnie wyśrodkowanego, poziomego menu stało się banalnie proste. To potęga Flexboxa!

3. Responsywność (RWD) i Media Queries – Strona idealna na każdym urządzeniu

W dzisiejszych czasach użytkownicy przeglądają internet na przeróżnych urządzeniach: ogromnych monitorach, laptopach, tabletach i małych smartfonach. Responsive Web Design (RWD) to technika projektowania stron w taki sposób, aby ich układ automatycznie dostosowywał się do rozmiaru ekranu, zapewniając czytelność i wygodę obsługi w każdych warunkach. Na egzaminie INF.03 często pojawia się zadanie stworzenia responsywnego layoutu.

Krok 1: Meta tag viewport – Absolutna podstawa

To najważniejszy i pierwszy krok. Bez tej jednej linijki w kodzie HTML, przeglądarki mobilne będą próbowały wyświetlić naszą stronę tak, jakby była oglądana na dużym ekranie, co sprawi, że tekst będzie malutki i nieczytelny.

Wklej tę linijkę do sekcji <head> w swoim pliku HTML. Musisz to zrobić, aby RWD zadziałało.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja Responsywna Strona</title>
    <link rel="stylesheet" href="styl.css">
</head>
  • width=device-width: Mówi przeglądarce, aby szerokość strony była równa szerokości ekranu urządzenia.
  • initial-scale=1.0: Ustawia początkowy poziom powiększenia na 100%, bez zbędnego zoomu.

Krok 2: Media Queries – Magiczne reguły CSS

Media Queries to specjalne reguły w CSS, które pozwalają na stosowanie określonych stylów tylko wtedy, gdy spełniony jest dany warunek – najczęściej jest to szerokość ekranu.

Podstawowa składnia wygląda tak: @media (warunek) { /* Twoje style CSS, które zadziałają, gdy warunek jest spełniony */ }

Najczęściej używamy warunków max-width (maksymalna szerokość) i min-width (minimalna szerokość).

  • @media (max-width: 768px) { ... } – te style zadziałają na ekranach o szerokości 768 pikseli lub mniejszej (idealne dla tabletów i smartfonów).
  • @media (min-width: 769px) { ... } – te style zadziałają na ekranach o szerokości 769 pikseli lub większej (idealne dla laptopów i desktopów).

Miejsca, w których zmieniamy style (np. 768px, 480px), nazywamy punktami granicznymi (breakpoints).

Praktyczny przykład: responsywna kolumna

Stwórzmy prosty, dwukolumnowy layout (np. główna treść i panel boczny) i sprawmy, by na mniejszych ekranach kolumny ułożyły się jedna pod drugą.

HTML:

<div class="container">
    <main class="main-content">
        <h1>Główna treść artykułu</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </main>
    <aside class="sidebar">
        <h2>Panel boczny</h2>
        <ul>
            <li>Reklama 1</li>
            <li>Reklama 2</li>
        </ul>
    </aside>
</div>

CSS (style dla dużych ekranów):

/* Podstawowe style */
* { box-sizing: border-box; }
body { font-family: sans-serif; }

.container {
    display: flex; /* Używamy Flexboxa do stworzenia układu kolumnowego */
    width: 90%;
    max-width: 1000px; /* Ograniczamy szerokość na dużych ekranach */
    margin: 20px auto; /* Wyśrodkowanie kontenera */
}

.main-content {
    flex: 3; /* Główna treść zajmuje 3/4 dostępnego miejsca */
    padding-right: 20px;
}

.sidebar {
    flex: 1; /* Panel boczny zajmuje 1/4 miejsca */
    background-color: #f0f0f0;
    padding: 15px;
}

Teraz dodajemy Media Queries na końcu pliku CSS, aby obsłużyć mniejsze ekrany:

/* --- MEDIA QUERIES --- */

/* Dla tabletów i mniejszych urządzeń (ekrany do 768px) */
@media (max-width: 768px) {
    .container {
        /* Zmieniamy kierunek Flexboxa na pionowy */
        flex-direction: column;
    }

    .main-content {
        /* Usuwamy prawy padding, bo nie ma już kolumny obok */
        padding-right: 0;
    }

    .sidebar {
        /* Dodajemy margines na górze, żeby oddzielić panel od treści */
        margin-top: 20px;
    }
}

Co się stało? Na dużych ekranach (>768px) layout jest dwukolumnowy dzięki display: flex. Gdy szerokość ekranu spadnie poniżej 768px, aktywuje się nasz media query. Zmienia on flex-direction na column, co powoduje, że panel boczny (sidebar) ląduje grzecznie pod główną treścią (main-content). Właśnie stworzyłeś w pełni responsywną stronę!

Dodatkowe wskazówki RWD:

  • Responsywne obrazy: Zawsze dodawaj do obrazków ten styl, aby nie „wystawały” poza swój kontener na małych ekranach:
    img {
    max-width: 100%;
    height: auto;
}
  • Używaj jednostek względnych: Tam, gdzie to możliwe, zamiast sztywnych px używaj jednostek procentowych (%) lub rem dla czcionek. Ułatwia to skalowanie layoutu.

Lecimy dalej?

arrow-icon-size3 JavaScript
Close

KURS