W każdym arkuszu INF.03 jest lista wymagań dla arkusza stylów – zwykle kilkanaście punktów, a każdy z nich to osobne kryterium. CSS jest więc jednym z najłatwiejszych źródeł punktów: polecenia się powtarzają, a sprawdzenie efektu zajmuje sekundę.
Arkusz wymaga, żeby styl był zdefiniowany w całości w zewnętrznym pliku (najczęściej styl.css) podłączonym w sekcji head. Atrybut style w HTML albo znacznik <style> zwykle oznaczają utratę punktów.
<link rel="stylesheet" href="styl.css">Selektory: kogo stylujesz
| zapis w arkuszu | selektor |
|---|---|
| „dla nagłówka pierwszego stopnia” | h1 { … } |
| „dla bloku o identyfikatorze baner” | #baner { … } |
| „dla elementów klasy produkt” | .produkt { … } |
| „dla odnośników w bloku nawigacji” | nav a { … } |
| „dla nagłówka i stopki” | header, footer { … } |
| „po najechaniu kursorem na obraz” | img:hover { … } |
| „dla co drugiego wiersza tabeli” | tr:nth-child(even) { … } |
Gdy arkusz mówi „selektor znacznika”, użyj samej nazwy znacznika (table), a nie klasy ani identyfikatora.
Słownik „język arkusza → CSS”
| polecenie w arkuszu | właściwość |
|---|---|
| kolor tła | background-color: #F1FAEE; |
| kolor czcionki | color: white; |
| krój czcionki | font-family: Arial, sans-serif; |
| rozmiar czcionki | font-size: 120%; |
| pogrubienie / pochylenie | font-weight: bold; / font-style: italic; |
| wyrównanie tekstu do środka | text-align: center; |
| margines wewnętrzny | padding: 10px; |
| margines zewnętrzny | margin: 20px; |
| obramowanie | border: 1px solid black; |
| zaokrąglenie narożników | border-radius: 10px; |
| cień | box-shadow: 0 0 5px gray; |
| szerokość / wysokość | width: 30%; / height: 400px; |
| odstęp między wierszami | line-height: 1.5; |
| bez podkreślenia odnośnika | text-decoration: none; |
| styl listy (punktor) | list-style-type: square; |
| krawędzie tabeli pojedyncze | border-collapse: collapse; |
| przezroczystość | opacity: 0.7; |
Układ bloków obok siebie
Arkusze opisują stronę jako zestaw bloków: baner, panel lewy, panel główny, panel prawy, stopka. Bloki ustawia się obok siebie przez float (gdy arkusz mówi o „opływaniu”) albo przez flex.
<style>
* { box-sizing: border-box; }
header, footer { background: #1E3A8A; color: white; text-align: center; padding: 10px; }
#lewy, #prawy { float: left; width: 25%; height: 120px; background: #A0C4FF; }
main { float: left; width: 50%; height: 120px; background: #E0E7FF; }
footer { clear: both; }
</style>
<header>BANER</header>
<section id="lewy">LEWY 25%</section>
<main>GŁÓWNY 50%</main>
<section id="prawy">PRAWY 25%</section>
<footer>STOPKA</footer>Gdy bloki mają obramowanie albo padding, dodaj box-sizing: border-box. Inaczej suma wyjdzie ponad 100% i ostatni blok spadnie pod spód.
Efekty, które często wracają
/* zmiana wyglądu po najechaniu kursorem */
img:hover { border: 2px solid blue; opacity: 0.8; }
/* co drugi wiersz tabeli w innym kolorze */
tr:nth-child(even) { background-color: #F1FAEE; }
/* tabela z pojedynczymi krawędziami */
table, td, th { border: 1px solid #666; border-collapse: collapse; }
/* własna czcionka z pliku w folderze */
@font-face { font-family: 'MojaCzcionka'; src: url('czcionka.ttf'); }
h1 { font-family: 'MojaCzcionka'; }Jak sprawdzać CSS na egzaminie
- Przejdź po liście wymagań z arkusza punkt po punkcie i odhaczaj zrobione długopisem.
- Po każdych kilku regułach odśwież stronę w przeglądarce (Ctrl + F5).
- Gdy coś nie działa, otwórz narzędzia deweloperskie (F12) i sprawdź, czy reguła jest przekreślona albo czy selektor trafia w element.
- Kolory przepisuj dokładnie – w formacie z arkusza (
#F1FAEE,DimGray,rgb(…)).
Każda właściwość z tego poradnika ma opis, przykład i podgląd efektu w słowniku składni CSS. O tym, jak HTML, CSS i PHP współpracują, przeczytasz w darmowej lekcji Jak HTML, CSS, PHP, SQL i JS łączą się w jedną stronę.