CSS na egzaminie INF.03

Gdy kilka reguł ustawia tę samą właściwość elementu, przeglądarka rozpatruje między innymi pochodzenie deklaracji, ważność, specyficzność selektora i kolejność w arkuszu. Selektor identyfikatora ma większą wagę niż selektor klasy, a klasa większą niż nazwa elementu. Przy tej samej specyficzności wygrywa reguła zapisana później.

Dla elementu <p id="opis" class="uwaga"> reguła #opis jest bardziej specyficzna niż .uwaga oraz p. Nie warto naprawiać każdego konfliktu przez !important, ponieważ utrudnia to dalsze nadpisywanie stylów. Lepiej używać prostych selektorów i świadomie kontrolować ich kolejność.

Każdy widoczny element tworzy pudełko z treścią, paddingiem, obramowaniem i marginesem. W domyślnym modelu width: 200px, padding: 20px i border: 2px zajmują razem 244px szerokości. Margines znajduje się na zewnątrz i tworzy odstęp od sąsiednich elementów.

Po ustawieniu box-sizing: border-box podana szerokość obejmuje padding i obramowanie, więc to samo pudełko nadal ma 200px. Trzeba też odróżniać margin od paddingu oraz pamiętać, że procentowa szerokość odnosi się zwykle do bloku zawierającego, a nie do szerokości treści elementu.

Flexbox układa elementy w jednym wymiarze, w wierszu albo kolumnie. flex-direction wybiera oś główną, justify-content rozmieszcza elementy na tej osi, a align-items na osi poprzecznej. flex-wrap pozwala przenieść elementy do następnego wiersza, gdy brakuje miejsca.

Grid pracuje jednocześnie z kolumnami i wierszami. Przykład grid-template-columns: repeat(3, 1fr) tworzy trzy równe kolumny. position: relative pozostawia element w normalnym układzie i może stanowić punkt odniesienia, absolute wyjmuje go z tego układu, a fixed pozycjonuje względem okna przeglądarki.

Responsywny układ zaczyna się od elastycznych wymiarów. Obraz z max-width: 100% nie wyjdzie poza kontener, a grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) sam dopasuje liczbę kolumn. Jednostki rem, %, vw i funkcja clamp() pomagają uniknąć sztywnego układu opartego wyłącznie na pikselach.

Media query wprowadza zmianę wtedy, gdy wymaga jej treść. Reguła @media (min-width: 768px) może na większym ekranie zamienić jedną kolumnę na dwie. W podejściu mobile-first style podstawowe obsługują wąski ekran, a kolejne reguły rozszerzają układ. Znacznik viewport w HTML jest potrzebny, aby szerokość odpowiadała urządzeniu.