Informatyka · klasa 7 · dalszy ciąg strony o Spocku

Ubieramy stronę w kolory i efekty. CSS

Masz już nagłówki, tekst, zdjęcie i linki. Teraz sprawimy, żeby strona była czytelna i miała własny charakter. Zmienisz jedną regułę, zobaczysz efekt i dopiero wtedy dołożysz następną. Poznamy najwyżej 15 właściwości.

15 właściwości CSS
Ta sama strona o Spocku
Tła · tekst · odstępy · ruch

Po tej lekcji: połączysz HTML z plikiem CSS, wybierzesz właściwy element i nadasz mu kolory, tło, odstępy oraz prosty efekt reagujący na użytkownika.

Zakres podstawowy · materiał otwarty

HTML daje treść. CSS nadaje jej wygląd.

W HTML zapisaliśmy: „to jest nagłówek”, „tu jest zdjęcie”, „to jest link”. CSS (kaskadowe arkusze stylów) określa, jak te elementy wyglądają. Ten sam HTML może mieć jasne tło, ciemne tło, większe litery albo inne odstępy.

Nie będziemy zmieniać wszystkich ustawień naraz. Najpierw połączymy pliki i poznamy regułę CSS. Potem przejdziemy od kolorów do tekstu i pudełek, a na końcu dodamy hover oraz krótki ruch zdjęcia.

Dwa pliki, dwie role: index.html i style.css

Otwórz folder strony z poprzedniej lekcji. index.html to treść. Obok niego utwórz w Notatniku nowy plik style.css (typ Wszystkie pliki, UTF-8). Do pliku CSS wpisujesz same reguły — bez znaczników style.

W head pliku HTML dodaj pokazane niżej link. W tym projekcie plik uklad.css przechowuje znany układ kolumn z poprzedniej lekcji, a my edytujemy tylko style.css. Paczki startowej i gotowej użyjesz w warsztacie na końcu. Jeśli przenosisz własny projekt, usuń stare reguły z elementu style, żeby nie nadpisywały nowego arkusza.

Po zmianie zapisz CSS przez Ctrl+S i odśwież przeglądarkę. Jeśli nic się nie zmienia, sprawdź nazwę pliku, folder oraz href.

Te linie umieść w head.

index.htmlhtml

<link rel="stylesheet" href="uklad.css">
<link rel="stylesheet" href="style.css">

rel="stylesheet" mówi przeglądarce, że podłączamy arkusz stylów.
href="style.css" wskazuje nasz plik w tym samym folderze. To zastosowanie link do arkusza, a nie odnośnik a, który klikasz.

Trzy części

Do kogo mówimy, co zmieniamy i na jaką wartość?

Selektor: który element?

h1 wybiera główne nagłówki. Reguła .karta wybrałaby elementy z class="karta".

To nie jest tekst, który ma pojawić się na stronie.

Sprawdź w działaniu

Wskaż element, zanim zmienisz kolor.

Porównaj selektor elementu, klasy i identyfikatora. Sprawdź też celowy błąd: karta bez kropki.

Te 15 właściwości wystarczy na tę lekcję.

To nasza ściąga. Nie ucz się jej na pamięć — wracaj do niej przy kolejnych próbach. Pseudoklasy :hover i :focus-visible opisują stan, a @keyframes plan animacji; nie są dodatkowymi właściwościami. Znany układ kolumn w uklad.css zostawiamy bez zmian.

Właściwość	Co robi?	Przykład
`color`	Kolor liter.	`color: #17233b;`
`background-color`	Jednolity kolor tła.	`background-color: #edf4fa;`
`background-image`	Obraz jako dekoracyjne tło.	`background-image: url("kosmos.svg");`
`background-size`	Dopasowanie obrazu tła; cover wypełnia pole, czasem przycinając obraz.	`background-size: cover;`
`font-family`	Krój pisma i krój zapasowy.	`font-family: Arial, sans-serif;`
`font-size`	Wielkość liter.	`font-size: 18px;`
`text-align`	Wyrównanie tekstu wewnątrz elementu.	`text-align: center;`
`line-height`	Wysokość wiersza; 1.6 to 1,6 wielkości czcionki.	`line-height: 1.6;`
`margin`	Odstęp na zewnątrz obramowania.	`margin: 24px;`
`padding`	Odstęp między treścią a obramowaniem.	`padding: 20px;`
`border`	Obramowanie: grubość, styl i kolor.	`border: 2px solid #c8dced;`
`border-radius`	Zaokrąglenie rogów.	`border-radius: 16px;`
`transform`	Przekształcenie: np. powiększenie lub przesunięcie, bez przeliczania układu sąsiadów.	`transform: scale(1.05);`
`transition`	Płynne przejście między wartościami, gdy zmieni się stan.	`transition: color 0.3s;`
`animation`	Uruchomienie nazwanej animacji z czasem i liczbą powtórzeń.	`animation: unoszenie 3s ease-in-out 2;`

Najpierw tło kolorystyczne, potem obrazkowe.

background-color wypełnia tło kolorem. background-image dokłada na nim dekoracyjny obraz. Obie reguły mogą działać naraz: kolor pozostaje pod obrazem i przydaje się, gdy obraz nie zostanie wczytany.

background-size: cover wypełnia cały obszar, czasem przycinając część obrazu. contain pokazuje cały obraz, ale może pozostawić miejsce i przy domyślnych ustawieniach powtarzać tło. Nie zmienia to treści HTML. Ważne zdjęcie bohatera zostaje w img z opisem alt; obraz tła jest dekoracją.

Sprawdź w działaniu

Zrób z nagłówka kosmiczny baner.

Porównaj sam kolor, obraz i jego dopasowanie. Kosmos to osobny plik kosmos.svg, który musi leżeć obok style.css. Ścieżkę url w zewnętrznym CSS liczymy względem pliku CSS.

Tekst ma być przede wszystkim wygodny do czytania.

color ustala kolor liter. font-family wybiera krój pisma, font-size jego wielkość. line-height ustawia wysokość wiersza, a text-align wyrównanie tekstu w elemencie.

Porównaj akapit ciasny i swobodniejszy. Sam duży napis nie oznacza nowego poziomu nagłówka: role h1 i h2 nadal wynikają z HTML. Zostaw czytelny kontrast między literami a tłem.

Sprawdź w działaniu

Ustaw tekst tak, żeby dało się go czytać.

Zmieniaj rozmiar, krój, kolor, wyrównanie i wysokość wiersza. Treść akapitu pozostaje identyczna.

Margin jest na zewnątrz. Padding — wewnątrz.

Każdy element zajmuje na stronie pewien obszar. padding daje oddech między treścią a obramowaniem. border rysuje obramowanie. margin zostawia odstęp na zewnątrz. border-radius zaokrągla narożniki.

Jeśli tekst przykleja się do ramki, zacznij od padding. Jeśli dwie karty są za blisko siebie, sprawdź margin. Nie próbuj naprawiać obu sytuacji losowym powiększaniem liter.

Sprawdź w działaniu

Rozsuń karty, a potem odsuń tekst od ramki.

Kolorowe oznaczenia pomagają odróżnić obszar zewnętrzny od wnętrza. Zmień osobno margin, padding, border i border-radius.

Hover: zmiana po najechaniu. Transition: sposób przejścia.

Zapis .akcja:hover oznacza regułę działającą po najechaniu wskaźnikiem. .akcja:focus-visible daje czytelny efekt podczas obsługi klawiaturą. Na telefonie nie zakładamy dostępności hover — przycisk nadal musi działać po dotknięciu.

transform: scale(1.05) powiększa wygląd elementu do 105%, ale nie rezerwuje mu większego miejsca w układzie. transition sprawia, że zmiana np. koloru lub transform odbywa się przez określony czas, zamiast przeskakiwać. Sam transition nie wymyśla nowego stanu: musimy określić, co zmienia się przy hover.

Sprawdź w działaniu

Najedź, użyj Tab albo włącz próbny stan.

Przycisk zmienia kolor i lekko się powiększa. Wyłącz płynne przejście i porównaj. Próbny stan pozwala obejrzeć efekt także bez myszy; kliknięcie nadal ma własne działanie.

Krótka animacja zdjęcia: plan ruchu i odtworzenie.

@keyframes opisuje etapy ruchu. W 0% zdjęcie jest na początku, w 50% lekko uniesione, a w 100% wraca. animation podaje nazwę tego planu, czas i liczbę powtórzeń.

Tu uruchamiamy tylko dwa powtórzenia, z możliwością zatrzymania. Ruch ma być dodatkiem do treści. Systemowa opcja ograniczenia ruchu wyłącza animację. W gotowej stronie ruszamy ramką zdjęcia, a powiększamy samo img — efekty nie walczą o transform tego samego elementu.

Sprawdź w działaniu

Odtwórz ruch zdjęcia i zmień jego tempo.

To rzeczywista animacja CSS na zdjęciu Spocka. Wybierz unoszenie lub delikatny obrót, ustaw czas i uruchom. Przycisk stop przerywa ruch.

Taki zapis tworzy łagodne unoszenie.

style.csscss

.ramka-zdjecia { animation: unoszenie 3s ease-in-out 2; }
@keyframes unoszenie {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .ramka-zdjecia { animation: none; }
}

Połączmy poznane reguły w jedną stronę.

Zacznij od paczki startowej z warsztatu poniżej. Otwórz index.html oraz style.css. Pozostaw uklad.css — to znane kolumny, nie nowy temat.

Oczekiwany wynikMasz oddzielny plik własnych reguł.
Najpierw dodaj tło body, kolor liter i krój pisma. Zapisz i odśwież. Potem ustaw tło nagłówka z kosmos.svg i background-size:cover.

Oczekiwany wynikHTML jest ten sam, a wygląd się zmienia.
Nadaj aside i main odstępy, ramkę i zaokrąglenie. Ustaw czytelne nagłówki i wysokość wiersza.

Oczekiwany wynikTekst nie przylega do obramowania.
Dodaj kolor odnośnika dla :hover i :focus-visible oraz transition. Zdjęciu dodaj transform:scale(1.05) przy hover.

Oczekiwany wynikStan i płynne przejście są osobnymi regułami.
Na końcu dodaj krótką animację ramki zdjęcia, najwyżej dwa powtórzenia, oraz regułę prefers-reduced-motion. Sprawdź klawiaturę i telefon.

Oczekiwany wynikEfekty nie utrudniają czytania ani obsługi.

Przykładowy style.css — porównaj ze swoim.

To omawiane 15 właściwości. Reguły układu z poprzedniej lekcji są w osobnym, dołączonym uklad.css. Nie musisz ich tu przepisywać.

style.csscss

/* Kolory i tekst */
body {
  background-color: #edf4fa;
  color: #17233b;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}
header, footer {
  background-color: #102944;
  color: white;
  padding: 24px;
}
.baner {
  background-image: url("kosmos.svg");
  background-size: cover;
  text-align: center;
}
h1 { font-size: 36px; }
h2 { color: #155d9b; }
.uklad { margin: 24px auto; padding: 16px; }
aside, main {
  background-color: white;
  padding: 20px;
  border: 2px solid #c8dced;
  border-radius: 16px;
}
.portret { border-radius: 16px; transition: transform 0.4s; }
a { color: #155d9b; transition: color 0.3s; }
a:hover, a:focus-visible { color: #7b237d; }
.portret:hover { transform: scale(1.05); }

/* Ruch ramki nie koliduje z powiększaniem samego zdjęcia. */
.ramka-zdjecia { animation: unoszenie 3s ease-in-out 2; }
@keyframes unoszenie {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .ramka-zdjecia { animation: none; }
  .portret, a { transition: none; }
  .portret:hover { transform: none; }
}

Sprawdź w działaniu

Twój arkusz, Twoja wersja strony.

Pisz albo wklej CSS i odśwież podgląd. Możesz pobrać samo style.css, paczkę startową lub gotowy przykład. Podgląd ma zdjęcie i kosmos z tej lekcji; nie pobiera zewnętrznych zasobów.

Sprawdź te cztery rzeczy, zanim zaczniesz od nowa.

Plik CSS nie jest podłączony

Tak nie

<link href="style.css">

Bez właściwej relacji arkusz nie jest podłączony jako CSS.

Tak

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

Sprawdź też, czy plik faktycznie leży w tym folderze i czy nie ma końcówki .txt.

Klasa bez kropki

Tak nie

karta { color: navy; }

karta wybiera typ elementu, a nie class="karta".

Tak

.karta { color: navy; }

Klasę wybieramy kropką. Identyfikator wybieramy znakiem #.

Właściwość bez jednostki

Tak nie

p { font-size: 20; }

Niezerowa długość font-size potrzebuje jednostki. Przeglądarka zignoruje tę deklarację.

Tak

p { font-size: 20px; }

W tej lekcji długości zapisujemy w px; line-height:1.6 jest celowo liczbą bez jednostki.

Transition bez zmiany stanu

Tak nie

.portret { transition: transform 0.4s; }

Pierwsza reguła określa czas, ale nie mówi, jaki nowy transform ma się pojawić.

Tak

.portret { transition: transform 0.4s; }
.portret:hover { transform: scale(1.05); }

Potrzebujesz wartości docelowej, np. w stanie hover.

Podsumowanie

Zmieniaj jedną rzecz i rozumiej jej efekt.

Selektor wybiera element, właściwość i wartość opisują zmianę.
Tło obrazu jest dekoracją. Zdjęcie bohatera nadal jest w img z alt.
Margin odsuwa element, padding odsuwa treść od jego brzegu.
Hover jest stanem, transition przejściem, a animation odtwarzaniem planu z @keyframes.
Efekty mają pomagać. Zachowaj czytelność, działanie klawiatury i ograniczenie ruchu.

Po zalogowaniu zobaczysz dodatkowe lekcje i materiały oznaczone jako rozszerzenie. Podstawowe quizy i zadania pozostają dostępne w biurku.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →

Źródła i dalsza nauka