Projektowanie stron i frontend (HTML5 i CSS3)

Question 1

Element ma reguły: width: 300px; padding: 20px; border: 5px solid #333333; margin: 10px; przy domyślnej wartości box-sizing. Jaka będzie widoczna szerokość elementu na ekranie?

Accepted Answer

Domyślny content-box odnosi zadeklarowaną szerokość wyłącznie do obszaru treści, więc dopełnienie i obramowanie doklejane są na zewnątrz: 300 + 2 razy 20 + 2 razy 5 = 350. Wynik 370 kusi, bo dolicza marginesy, a te nigdy nie wchodzą w szerokość pudełka — powiększają jedynie miejsce zajmowane w układzie.

Question 2

Element ma ustawione box-sizing: border-box, width: 300px, padding: 25px oraz border: 5px. Ile pikseli zostanie dla samego obszaru treści?

Accepted Answer

Przy border-box deklarowana szerokość obejmuje treść, dopełnienie i obramowanie razem, więc pudełko nie rośnie — kurczy się treść: 300 minus 2 razy 25 minus 2 razy 5 daje 240. Odpowiedź 360 to wynik liczony odruchowo jak w modelu content-box, a 300 opisuje całe pudełko, a nie jego wnętrze.

Question 3

Do tego samego odnośnika pasują cztery reguły ustawiające kolor tekstu. Która z nich zadecyduje o wyglądzie odnośnika?

Accepted Answer

Punkty sumuje się ze składników selektora: cztery elementy dają 4, klasa z elementem 11, trzy elementy z klasą 13, a identyfikator z elementem aż 101. Jeden identyfikator przebija dowolną liczbę klas i elementów, dlatego ocenianie specyficzności po długości zapisu prowadzi do wskazania najdłuższego selektora zamiast najsilniejszego.

Question 4

Do akapitu pasują cztery deklaracje koloru: p { color: green; }, dalej w tym samym pliku p { color: navy; }, styl inline w atrybucie style ustawiający kolor pomarańczowy oraz reguła .tresc p { color: teal !important; }. Jaki kolor zobaczy użytkownik?

Accepted Answer

Dopisek !important przebija całą kaskadę, łącznie ze stylem inline, który normalnie ma najwyższy priorytet wyceniany na 1000 punktów — i to on kusi jako odpowiedź. Gdyby !important usunąć, wygrałby styl inline, a spośród dwóch identycznych reguł p wybrana zostałaby ta zapisana później, bo przy równej specyficzności rozstrzyga kolejność w arkuszu.

Question 5

Na stronie serwisu trzeba oznaczyć pojedyncze ogłoszenie, które zachowuje pełny sens po wyjęciu ze strony i opublikowaniu osobno. Który znacznik jest właściwy?

Accepted Answer

Test na article brzmi: czy da się tę treść opublikować samodzielnie. Section to tematycznie spójny fragment większej całości, zwykle z własnym nagłówkiem, aside oznacza treść poboczną, czyli znaczenie, a nie położenie przy prawej krawędzi, natomiast div nie niesie żadnego znaczenia i służy wyłącznie do grupowania oraz stylowania.

Question 6

Element html ma domyślny rozmiar pisma 16 px, a kontener .karta ustawia font-size: 20px. Jaki rozmiar dostanie akapit leżący w tym kontenerze przy font-size: 1.5em, a jaki przy font-size: 1.5rem?

Accepted Answer

Jednostka em liczy się od rozmiaru pisma rodzica, czyli 1,5 razy 20 daje 30 px, a rem zawsze od elementu html, czyli 1,5 razy 16 daje 24 px. Zamiana obu wartości miejscami to typowa pomyłka; dodatkowo przy zagnieżdżaniu em mnoży się poziom po poziomie, przez co tekst niepostrzeżenie rośnie, a rem takiego efektu kuli śnieżnej nie ma.

Question 7

Pole tekstowe zapisano jako input z atrybutami type='text' oraz id='mail', bez atrybutu name. Co stanie się z jego zawartością po wysłaniu formularza metodą POST?

Accepted Answer

O wysłaniu decyduje wyłącznie atrybut name i to on staje się kluczem tablicy odbieranej przez skrypt. Identyfikator id służy do powiązania etykiety, bo atrybut for wskazuje właśnie id, oraz do stylów i skryptów — stąd złudzenie, że wystarczy. Objaw jest klasyczny: przeglądarka nie zgłasza błędu, a skrypt nie dostaje żadnych danych.

Question 8

Formularz ma przesłać plik wybrany polem input type='file'. Jakie ustawienia musi mieć znacznik form?

Accepted Answer

Przesyłanie plików wymaga kodowania multipart/form-data razem z metodą POST, ponieważ GET dokleja dane do adresu i ma ograniczoną długość, więc zawartości pliku nie przeniesie. Atrybut novalidate jedynie wyłącza wbudowaną walidację przeglądarki, a target decyduje o oknie z odpowiedzią — żaden z nich nie wpływa na sposób wysyłki.

Question 9

Nagłówek strony ma być przyklejony do górnej krawędzi okna i pozostać widoczny przez całe przewijanie, już od pierwszego piksela dokumentu. Które ustawienie to realizuje?

Accepted Answer

Tylko fixed pozycjonuje względem okna przeglądarki i nie przewija się razem ze stroną. Relative przesuwa element względem jego pierwotnego miejsca, zostawiając po nim pustą lukę, absolute odnosi się do najbliższego przodka o pozycjonowaniu innym niż static i wędruje z dokumentem, przy static wartości top oraz z-index są ignorowane, a sticky przykleiłby się dopiero po osiągnięciu progu.

Question 10

Kontener ma ustawione display: flex oraz flex-direction: column. Która właściwość wyśrodkuje elementy potomne w pionie?

Accepted Answer

Justify-content zawsze steruje osią główną, a align-items osią poprzeczną. Po ustawieniu wartości column oś główna biegnie pionowo, więc role się zamieniają i to justify-content odpowiada za pion — odruchowe wskazanie align-items działa tylko dla domyślnego kierunku row. Właściwość vertical-align dotyczy elementów liniowych i komórek tabeli, nie kontenera flex.

To nie koniec powtórki