CSS - stylowanie stron (INF.03)

Trzy warstwy strony: HTML, CSS, JavaScript. Rola CSS w budowie wyglądu. Podgląd na żywo.

Zewnętrzny arkusz CSS, styl wbudowany i atrybut style. Kiedy co stosować.

Selektor, blok deklaracji, właściwość i wartość. Anatonia reguły krok po kroku.

Składnia /* */ komentarzy, dobre praktyki organizacji arkusza stylów.

Selektor elementu, klasy i ID. Kiedy używać każdego z nich.

Grupowanie selektorów przecinkiem, selektor potomka i dziecka.

Selektory [attr], [attr=value], [attr^=value] i inne. Zastosowania w formularzach.

:hover, :focus, :first-child, :nth-child - dynamiczne i strukturalne pseudoklasy.

::before, ::after, ::first-line, ::first-letter - tworzenie dekoracji bez dodatkowego HTML.

Jak przeglądarka rozstrzyga konflikty stylów. Punktacja specyficzności, !important, dziedziczenie.

Słowa kluczowe, notacja HEX, RGB, RGBA, HSL. Przezroczystość i opacity.

Właściwości color i background-color. Kontrast, czytelność, palety barw.

background-image, background-size, background-position, background-repeat. Gradient jako tło.

font-family, font-size, font-weight, font-style, font-variant. Stos czcionek.

text-align, text-decoration, text-transform, letter-spacing, line-height, word-spacing.

@font-face, Google Fonts @import. Formaty WOFF2. Właściwy fallback.

Cztery warstwy: content, padding, border, margin. Wizualizacja box modelu.

Właściwości width, height, min-width, max-width, min-height, max-height.

content-box vs border-box. Reset globalny box-sizing: border-box.

Właściwości border: width, style, color. Zaokrąglenia narożników border-radius.

Marginesy, scalanie marginesów (margin collapse), centrowanie bloku przez margin: 0 auto.

overflow: hidden/scroll/auto. box-shadow i text-shadow - właściwości i wartości.

px, pt, cm, mm. Kiedy piksel jest piksel. Różnica fizycznych i CSS px.

em, rem, %, vw, vh, vmin, vmax. Dziedziczenie em a rem. Elastyczne layouty.

Wartości block, inline, inline-block, none. Jak display zmienia zachowanie elementu.

static, relative, absolute, fixed, sticky. Kontekst formatowania pozycjonowania.

Kolejność warstw (stacking order). Kontekst nakładania. Kiedy z-index nie działa.

Opływanie elementów float: left/right. Clearfix. Kiedy nie używać float.

display: flex, flex-direction, flex-wrap. Oś główna i poprzeczna.

justify-content, align-items, align-content. Wyśrodkowanie elementów.

flex-grow, flex-shrink, flex-basis, skrótowe flex. Zamiana kolejności order.

Pasek nawigacyjny, karty, wyśrodkowany hero, galeria. Wzorce egzaminacyjne.

display: grid, grid-template-columns, grid-template-rows, gap.

Jednostka fr, repeat(), minmax(), auto-fill, auto-fit.

grid-column, grid-row, grid-area. Ręczne i automatyczne umieszczanie elementów.

justify-items, align-items, place-items, justify-content, align-content.

Responsive Web Design: viewport, fluid layouts, elastyczne obrazki. Dlaczego RWD jest ważne.

Składnia @media, breakpointy, warunki (width, height, orientation). Typowe breakpointy.

Podejście mobile-first: style bazowe dla małych ekranów, rozszerzanie na desktop.

Responsywna typografia: clamp(), vw w font-size. Obrazki: max-width: 100%, srcset.

Najczęstsze błędy: box-sizing, specyficzność, margin collapse, z-index bez position, brak viewport.

Symulacja zadania z arkusza INF.03. Odtwórz kompletną mini-stronę zgodną z makietą.