CSS w kwalifikacji INF.03: najważniejsze zasady, przykłady i powiązane pytania w banku. Skrót działu, który otwiera dziewięć lekcji o CSS.
CSS odpowiada za wygląd i układ dokumentu HTML. Pytania obejmują selektory, kaskadę, model pudełkowy, pozycjonowanie oraz reguły, które dostosowują stronę do różnych szerokości ekranu.
Kaskada i specyficzność
Gdy kilka reguł ustawia tę samą właściwość, przeglądarka rozpatruje pochodzenie deklaracji, ważność, specyficzność selektora i kolejność w arkuszu.
#identyfikator
najwyższa z trzech
Na jednym akapicie widać cały porządek:
/* <p id="opis" class="uwaga">tekst</p> */
p { color: red; } /* najslabszy */
.uwaga { color: green; } /* mocniejszy od elementu */
#opis { color: blue; } /* wygrywa: tekst bedzie niebieski */
Przy tej samej specyficzności wygrywa reguła zapisana później. Nie naprawiaj każdego konfliktu przez !important, bo utrudnia dalsze nadpisywanie: lepiej używać prostych selektorów i świadomie kontrolować kolejność.
Model pudełkowy
Każdy widoczny element tworzy pudełko: treść, padding, obramowanie i margin. Domyślnie podana szerokość dotyczy SAMEJ treści, więc pudełko na ekranie jest szersze:
.karta {
width: 200px;
padding: 20px;
border: 2px solid black;
}
/* 200 + 2*20 + 2*2 = 244 px na ekranie */
.karta {
box-sizing: border-box;
}
/* teraz 200 px obejmuje padding i obramowanie: rowno 200 px */
Margines leży na zewnątrz i tworzy odstęp od sąsiadów. Rozkład pudełka obejrzysz na żywo w narzędziu model pudełkowy CSS. Procentowa szerokość odnosi się zwykle do bloku zawierającego, nie do treści elementu. Flexbox i Grid
Flexbox układa elementy w jednym wymiarze, w wierszu albo kolumnie:
flex-direction
wybiera oś główną
justify-content
rozmieszcza na osi głównej
align-items
rozmieszcza na osi poprzecznej
flex-wrap
pozwala przenieść elementy do następnego wiersza
Grid pracuje jednocześnie z kolumnami i wierszami:
.siatka {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* trzy rowne kolumny; 1fr to jedna czesc wolnego miejsca */
Pozycjonowanie zmienia to, względem czego liczą się przesunięcia:
position: relative; /* zostaje w ukladzie, moze byc punktem odniesienia */
position: absolute; /* WYJMUJE z ukladu, wzgledem rodzica z position */
position: fixed; /* wzgledem okna przegladarki, nie przewija sie */
Responsywność i media queries
Responsywny układ zaczyna się od elastycznych wymiarów, a nie od progów:
img { max-width: 100%; }
/* obraz nigdy nie wyjdzie poza kontener */
.siatka {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* liczba kolumn dobiera sie SAMA, bez zadnego @media */
Jednostki rem, %, vw i funkcja clamp() pomagają uniknąć sztywnego układu opartego na pikselach. Dopiero gdy to nie wystarcza, wchodzi próg szerokości:
@media (min-width: 768px) {
.uklad { grid-template-columns: 1fr 1fr; }
}
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, żeby szerokość odpowiadała urządzeniu: jego zapis znajdziesz w artykule o HTML. Zadania z układem strony wracają w każdym arkuszu praktycznym: przećwicz je na arkuszach INF.03. Lekcje działu
Strukturę, którą te style ubierają, buduje dział HTML: skrót o HTML.