Teoria INF.03: CSS

Jak zapisać selektor klasy, a jak identyfikatora? #

Klasa: .nazwa. Identyfikator: #nazwa. Identyfikator musi być unikalny na stronie.

Co oznacza selektor nav a? #

Każdy odnośnik znajdujący się wewnątrz elementu nav — selektor potomka.

Która pseudoklasa reaguje na najechanie kursorem? #

:hover — najczęściej wymagana pseudoklasa w arkuszach INF.03.

Jak powiększyć pierwszą literę akapitu? #

p::first-letter { font-size: 200%; } — to pseudoelement, zapisywany dwoma dwukropkami.

Z czego składa się model pudełkowy? #

Od środka: treść (width/height), padding, border, margin

Czym różni się padding od margin? #

padding to odstęp wewnątrz elementu, między treścią a ramką. margin to odstęp na zewnątrz, między elementem a sąsiadami.

Jak wyśrodkować blok w poziomie? #

Ustalić szerokość i dodać margin: 0 auto

Jak zrobić płynną zmianę koloru w czasie 0,3 sekundy? #

transition: color 0.3s; na elemencie, a zmianę koloru w regule :hover

Która właściwość usuwa podkreślenie odnośnika? #

text-decoration: none;

Jaka jest kolejność ważności selektorów? #

Styl liniowy bije identyfikator, identyfikator bije klasę, klasa bije znacznik. Przy remisie wygrywa reguła zapisana później.

Czym różni się position: absolute od relative? #

relative przesuwa element względem jego pierwotnego miejsca i zachowuje je w układzie. absolute wyjmuje element z układu i pozycjonuje względem najbliższego przodka z pozycjonowaniem.

Jak ustawić trzy elementy obok siebie flexboksem? #

Na rodzicu: display: flex;. Odstępy: gap. Wyrównanie w poziomie: justify-content.

Jak zrobić siatkę o trzech równych kolumnach? #

display: grid; grid-template-columns: repeat(3, 1fr);

Jak zapisać zapytanie medialne dla ekranów do 768 pikseli? #

@media (max-width: 768px) { ... }

Czym różni się element blokowy od liniowego? #

Blokowy zajmuje całą szerokość i zaczyna się od nowej linii (div, p). Liniowy zajmuje tyle, ile treść (span, a).

Co zmienia box-sizing: border-box? #

Podana szerokość obejmuje treść, padding i border. Dzięki temu element o width: 300px nadal ma 300 pikseli, nawet po dodaniu wypełnienia i ramki.

Czym różni się overflow: auto od overflow: hidden? #

auto pokazuje paski przewijania tylko wtedy, gdy są potrzebne. hidden ucina zawartość wychodzącą poza element.

Jak wypełnić ramkę zdjęciem bez zniekształcania proporcji? #

Ustaw obrazowi wymiary i object-fit: cover. Obraz zachowa proporcje, ale jego brzegi mogą zostać przycięte.

Jak dopasować obraz tła tak, żeby zakrył cały blok? #

Użyj background-size: cover, zwykle razem z background-position: center i background-repeat: no-repeat.

Czym różni się display: none od visibility: hidden? #

display: none usuwa element z układu. visibility: hidden ukrywa go, ale pozostawia zajmowane miejsce.

Kiedy właściwość z-index zaczyna działać? #

Gdy element uczestniczy w warstwach, najczęściej ma pozycjonowanie inne niż static. Większa wartość ustawia go nad elementami z tego samego kontekstu.

Jak pozwolić elementom flex przechodzić do następnego wiersza? #

Na kontenerze ustaw flex-wrap: wrap. Bez tego elementy próbują zmieścić się w jednym wierszu.

Co najczęściej oznacza zapis flex: 1? #

Element może rosnąć i dzielić wolne miejsce z rodzeństwem. Kilka elementów z flex: 1 zwykle tworzy równe kolumny.

Dlaczego w flexboxie i gridzie warto używać gap? #

Tworzy odstęp wyłącznie między elementami, bez dokładania marginesu na zewnętrznych krawędziach kontenera.

Jak odróżnić działanie justify-content i align-items? #

justify-content wyrównuje na osi głównej, a align-items na osi poprzecznej. Kierunek osi głównej zależy od flex-direction.

Po co w siatce stosuje się minmax(0, 1fr)? #

Kolumna może się rzeczywiście zwężać poniżej szerokości długiej treści. To zapobiega częstemu przelewaniu tekstu poza responsywny grid.

Co wybiera selektor nav > a? #

Tylko odnośniki będące bezpośrednimi dziećmi elementu nav. Zwykły zapis nav a wybrałby też odnośniki zagnieżdżone głębiej.

Jak wybrać w CSS wszystkie pola typu e-mail? #

Selektorem atrybutu: input[type="email"].

Jak ostylować co drugi wiersz tabeli? #

Przykład: tbody tr:nth-child(even) { background: #eee; }. even oznacza parzyste, a odd nieparzyste.

Czym różni się opacity: .5 od półprzezroczystego koloru rgba? #

opacity osłabia cały element razem z dziećmi. Kolor rgba zmienia przezroczystość tylko danej warstwy, np. samego tła.

Jednostki CSS — względem czego liczą