Test HTML CSS - Egzaminy24

1. Mamy regułę CSS: 'content-visibility: auto;'. Jaki bezpośredni zysk wydajnościowy niesie ta nowoczesna właściwość wprowadzona do optymalizacji renderowania dużych dokumentów DOM?

Pytanie 879

Automatycznie konwertuje kod CSS do formatu binarnego skracając czas pobierania zasobów sieciowych Wymusza ładowanie obrazów przed tekstem strony internetowej Zezwala przeglądarce na całkowite pominięcie operacji renderowania (zarówno layoutu, jak i rysowania paint) dla elementów znajdujących się poza ekranem, drastycznie przyspieszając początkowe ładowanie strony Zmienia kolory witryny na tryb ciemny w zależności od preferencji systemowych użytkownika

2. Co się stanie, jeśli w formularzu użyjesz dwóch przycisków <button> bez określonego atrybutu 'type'?

Pytanie 626

Oba będą działać jak zwykłe przyciski (nie wyślą formularza) Tylko pierwszy wyśle formularz, drugi zostanie zignorowany Oba domyślnie będą działać jako przyciski wysyłające (submit) Przeglądarka wyświetli błąd składni

3. W specyfikacji HTML5, które z poniższych stwierdzeń dotyczących elementu <template> jest FAŁSZYWE?

Pytanie 869

Zawartość wewnątrz elementu <template> nie jest renderowana przez przeglądarkę Skrypty oraz zasoby (np. obrazy <img>) umieszczone wewnątrz <template> nie są uruchamiane ani pobierane dopóki szablon nie zostanie sklonowany w JS Element <template> jest widoczny w drzewie DOM, a jego bezpośrednie dzieci można odpytać standardową metodą document.getElementById() bez odwoływania się do właściwości pomocniczych Właściwość '.content' elementu <template> zwraca obiekt DocumentFragment zawierający strukturę szablonu

4. Mamy trzy selektory: 1) .header .nav, 2) #main-nav, 3) div.nav.active. Który z nich zostanie zastosowany, jeśli wszystkie odnoszą się do tego samego elementu?

Pytanie 763

Selektor 1 Selektor 2 Selektor 3 Wszystkie mają tę samą wagę

5. Kontener Flexbox ma orientację 'flex-direction: row' i zawiera trzy elementy potomne. Łączna suma ich bazowych szerokości (flex-basis) przekracza szerokość rodzica o 100px. Wszystkie potomki mają 'flex-shrink: 1', ale jeden z nich ma dodatkowo zadeklarowaną właściwość 'min-width: 300px'. Jak wpłynie to na proces redukcji rozmiaru (shrinking)?

Pytanie 870

Wszystkie elementy skurczą się proporcjonalnie o taką samą liczbę pikseli Silnik flexbox zignoruje właściwość min-width w fazie kurczenia Element z min-width przestanie się kurczyć w momencie, gdy jego szerokość osiągnie 300px, a pozostały nadmiar 100px (lub jego część) zostanie przerzucony i rozłożony na pozostałe dwa elementy Cały układ flexbox ulegnie awarii i elementy zostaną wyrzucone poza kontener rodzica

6. W CSS właściwość font-size: 150%; została nadana elementowi <p>, którego rodzic ma font-size: 20px. Następnie wewnątrz <p> znajduje się <span> z font-size: 2em. Jaka jest obliczona wielkość czcionki dla <span>?

Pytanie 760

30px 40px 60px 45px

7. W specyfikacji HTML5, które z poniższych zachowań charakteryzuje znacznik <script> z atrybutem 'defer'?

Pytanie 845

Skrypt jest pobierany asynchronicznie i wykonywany natychmiast po pobraniu, przerywając parsowanie dokumentu HTML Skrypt jest pobierany i wykonywany równolegle z parsowaniem kodu HTML, blokując renderowanie strony Skrypt jest pobierany asynchronicznie, ale jego wykonanie następuje dopiero po zakończeniu całkowitego parsowania dokumentu HTML, zachowując kolejność skryptów Skrypt jest wykonywany dopiero po wyemitowaniu zdarzenia window.onload

8. Który zapis CSS ustawi element na stałe przyklejony do górnej krawędzi ekranu podczas przewijania?

Pytanie 72

position: absolute; top: 0; position: fixed; top: 0; position: sticky; position: relative;

9. Który z poniższych jest prawidłowym kolorem HTML?

Pytanie 230

Apple Bannana Tomato Berry

10. Który z poniższych zapisów w HTML5 jest poprawny semantycznie i zgodny z zasadą dostępności (Accessibility) do osadzenia grafiki pełniącej rolę czysto dekoracyjną (np. tło ozdobne pod tekstem), która nie niesie żadnej treści?

Pytanie 849

11. Która jednostka w CSS jest zależna od szerokości widoku (viewport)?

Pytanie 615

em rem vw px

12. Mamy kod: <div style='display: flex;'><span style='float: left;'>Tekst</span></div>. Jak silnik CSS zinterpretuje właściwość 'float: left' na elemencie <span>?

Pytanie 876

Span zostanie przesunięty do lewej krawędzi okna z pominięciem Flexboxa Właściwość 'float' zostanie zignorowana i unieważniona (przyjmie wartość compute 'none'), ponieważ element staje się bezpośrednim potomkiem (flex item) kontenera Flexbox Element span zmieni typ na display: block i wywoła błąd krytyczny układu Cały kontener div straci właściwości flex na rzecz układu blokowego

13. Co dokładnie opisuje pojęcie 'Layout Thrashing' w kontekście optymalizacji działania aplikacji webowych i wydajności renderowania (Critical Rendering Path)?

Pytanie 866

Sytuację, gdy arkusze CSS ładują się zbyt wolno w stosunku do kodu HTML Błąd polegający na pętli animacji CSS powodującej zawieszenie karty przeglądarki Serię naprzemiennych operacji zapisu i odczytu właściwości geometrycznych DOM (np. offsetHeight) z poziomu JavaScriptu, zmuszającą przeglądarkę do wielokrotnego, synchronicznego przeliczania układu strony (Reflow) Konflikt specyficzności selektorów uniemożliwiający poprawne zaaplikowanie kaskady

14. Właściwość 'pointer-events: none;' sprawia, że:

Pytanie 757

Kursor myszy zmienia się w rączkę Element staje się 'przezroczysty' dla kliknięć myszką Nie można kopiować tekstu z elementu Element zostaje zablokowany do edycji

15. Do czego służy właściwość clip-path w CSS?

Pytanie 609

Przycina element według kształtu Tworzy tło gradientowe Zmienia przezroczystość elementu Dodaje marginesy

16. Do czego służy pseudo-klasa :nth-child(n) w CSS?

Pytanie 605

Wybiera elementy według klasy Wybiera n-ty element spośród rodzeństwa Ukrywa n-ty element Zmienia kolor n-tego elementu

17. W kontenerze Flexbox ustawiono 'flex-wrap: wrap'. Jeden z elementów potomnych ma właściwość 'flex-basis: 100%'. Jak zachowa się ten element w strukturze układu?

Pytanie 854

Zajmie 100% wysokości kontenera, niezależnie od kierunku osi głównej Wymusi złamanie linii i zajmie całą szerokość wiersza (lub kolumny) w osi głównej, działając podobnie do elementu blokowego Zostanie całkowicie usunięty z kontenera z powodu braku miejsca Zmniejszy swoją szerokość do zera, dając pierwszeństwo innym elementom

18. Które definicje znacznika input języka HTML zastosowano do wygenerowania przedstawionego na ilustracji zestawu kontrolek formularza (w kodzie podano jedynie znaczniki input, pomijając inne ewentualne znaczniki)?

Pytanie 577

Kod 4. Kod 3. Kod 2. Kod 1.

19. Element <div> ma nadane: width: 200px; padding: 10px; border: 5px solid black; box-sizing: content-box;. Jaka jest jego całkowita szerokość w rzutni?

Pytanie 730

200px 215px 230px 185px

20. Co oznacza flex-shrink w modelu Flexbox?

Pytanie 600

Określa minimalną szerokość elementu Określa stopień zmniejszania elementu wzdłuż osi głównej Określa stopień zwiększania elementu wzdłuż osi głównej Blokuje zmianę rozmiaru elementu

21. Mamy regułę CSS: 'contain: paint;'. Jaki jest główny cel stosowania tej właściwości w zaawansowanej architekturze nowoczesnych stylów CSS (CSS Containment Specification)?

Pytanie 871

Wymuszenie na przeglądarce renderowania wszystkich kolorów w przestrzeni barw CMYK Zapewnienie, że potomkowie elementu nie będą renderowani poza jego granicami geometrycznymi, co pozwala przeglądarce na pominięcie operacji rysowania (paint) tego elementu, jeśli znajduje się on poza ekranem (viewportem) Włączenie sprzętowej akceleracji 3D dla transformacji liniowych Zablokowanie możliwości modyfikowania stylów elementu przez skrypty JavaScript

22. Dany jest element z regułą: 'opacity: 0.99; position: static; z-index: 9999;'. Wewnątrz niego znajduje się absolutnie pozycjonowany potomek z 'z-index: -1'. Jak silnik przeglądarki wyrenderuje tego potomka w relacji do elementów znajdujących się na zewnątrz i pod rodzicem?

Pytanie 860

Potomek schowa się pod rodzicem i pod wszystkimi elementami tła strony zewnętrznej Potomek będzie widoczny nad elementami tła zewnętrznego, ponieważ rodzic tworzy nowy kontekst warstwowy (Stacking Context) przez wartość opacity mniejszą od 1 Właściwość opacity zostanie zignorowana, a z-index spowoduje błąd krytyczny parsowania CSS Potomek zostanie całkowicie wycięty z drzewa renderowania (Render Tree)

23. Która pseudoklasa pozwala na ostylowanie elementu <label> lub kontenera tylko wtedy, gdy znajdujący się wewnątrz niego element <input> jest aktywny (focus)?

Pytanie 768

:focus :active-within :focus-within :has-focus

24. Zastosowano właściwość 'columns: 3 200px;'. Co to oznacza dla układu tekstu?

Pytanie 767

Tekst zostanie podzielony na dokładnie 3 kolumny o szerokości 200px każda Tekst zostanie podzielony na maksymalnie 3 kolumny, o ile każda będzie miała co najmniej 200px szerokości Tekst będzie miał 200 kolumn o szerokości 3px Powstanie tabela o 3 kolumnach i 200 wierszach

25. Co oznacza overflow: hidden w CSS?

Pytanie 612

Zawartość jest przewijana Zawartość wychodzi poza kontener Ukrywa zawartość wychodzącą poza kontener Dodaje marginesy wewnętrzne

26. Do czego służy atrybut 'rel="noopener"' dodawany do linków z 'target="_blank"'?

Pytanie 621

Przyspiesza ładowanie nowej strony w tle Poprawia bezpieczeństwo, uniemożliwiając nowej stronie dostęp do obiektu window.opener strony źródłowej Służy do informowania robotów Google, by nie indeksowały linku Wymusza otwarcie linku w tym samym oknie, jeśli przeglądarka jest stara

27. Który selektor CSS wybiera elementy bezpośrednio potomne danego elementu?

Pytanie 604

element element element &gt element element + element element ~ element

28. Który zapis w CSS poprawnie wybiera każdy element <a>, którego atrybut 'href' kończy się rozszerzeniem '.pdf'?

Pytanie 759

a[href='.pdf'] a[href^='.pdf'] a[href$='.pdf'] a[href*='.pdf']

29. Element ma nadaną właściwość 'vertical-align: middle;'. Wokół jakiego punktu odniesienia silnik przeglądarki wyrówna ten element w kontekście linii tekstu (Inline Formatting Context)?

Pytanie 878

Względem górnej krawędzi najwyższego elementu w całym rzędzie Względem linii bazowej (baseline) rodzica powiększonej o połowę wysokości małej litery 'x' (x-height) tego rodzica Względem dolnej linii spodu liter z ogonkami (descent line) Dokładnie pośrodku między elementami html a body

30. Dany jest element z regułą 'display: inline; width: 200px; height: 200px; padding: 20px; margin: 50px; border: 1px solid black;'. Które z tych właściwości zostaną w pełni zignorowane przez silnik renderujący przeglądarki?

Pytanie 865

Wszystkie właściwości zostaną zignorowane Tylko padding i border Tylko width i height Width, height oraz pionowe (top/bottom) wartości margin i padding

31. Który atrybut znacznika <link> pozwala na wstępne pobranie zasobów (np. czcionek), które będą potrzebne na kolejnych podstronach, w celu przyspieszenia nawigacji?

Pytanie 765

rel="preload" rel="prefetch" rel="prerender" rel="import"

32. Jak działa minmax() w CSS Grid?

Pytanie 618

Określa minimalną i maksymalną wartość dla wiersza lub kolumny Tworzy maksymalną szerokość elementu Ukrywa kolumny przekraczające rozmiar Ustawia odstępy między elementami

33. Zastosowano następującą regułę: 'filter: blur(5px);'. Jak wpływa ta właściwość na pozycjonowanie elementów potomnych o wartości 'position: absolute' lub 'position: fixed' wewnątrz tego elementu?

Pytanie 875

Elementy potomne zostaną ukryte za pomocą właściwości display: none Właściwość filter nie wywiera żadnego wpływu na mechanizm pozycjonowania Zastosowanie dowolnego filtru (poza none) powoduje, że element staje się nowym punktem odniesienia (containing block) dla potomków absolute oraz fixed, podobnie jak przy właściwości transform Wszystkie elementy potomne natychmiast tracą efekt rozmycia (blur)

34. W języku HTML 5 do grupowania powiązanych ze sobą elementów formularza używa się znacznika

Pytanie 562

fieldset optgroup summary option

35. Co robi właściwość justify-content w Flexbox?

Pytanie 614

Ustawia wyrównanie elementów wzdłuż osi głównej Ustawia wyrównanie elementów wzdłuż osi poprzecznej Tworzy odstępy między wierszami Ukrywa elementy poza kontenerem

36. Co zwróci przeglądarka gdy element ma ustawione hidden w znaczniku <div hidden>

Pytanie 590

Element nie zostanie wyrenderowany ale pozostanie w DOM Element zostanie wyrenderowany ale niewidoczny Element zostanie usunięty z DOM Element będzie widoczny tylko w trybie debug

37. Zastosowano zapis: .box { width: 50vw; margin-left: calc(50% - 25vw); }. Jeśli okno przeglądarki ma 1000px, a rodzic elementu .box ma 800px, jaka będzie wartość marginesu lewego?

Pytanie 761

150px 250px 100px 50px

38. Co robi właściwość object-fit w CSS?

Pytanie 603

Ustawia szerokość obiektu Kontroluje dopasowanie zawartości do kontenera Zmienia kolejność elementów Dodaje marginesy

39. Co robi display: grid-template-areas?

Pytanie 608

Ustawia nazwy obszarów w siatce grid Zmienia kolejność wierszy Ukrywa elementy grid Tworzy animację siatki

40. W jaki sposób za pomocą czystego CSS (bez JS) można sprawić, by przewijanie strony do kotwic (<a href="#sekcja">) było płynne?

Pytanie 769

transition: scroll 1s; behavior: smooth; scroll-behavior: smooth; scrolling: animate;

Inne
Inne pliki cookie to te, które są analizowane i nie zostały jeszcze przypisane do żadnej z kategorii.
Niezbędne	Niezbędne
Niezbędne pliki cookie są absolutnie niezbędne do prawidłowego funkcjonowania strony. Te pliki cookie zapewniają działanie podstawowych funkcji i zabezpieczeń witryny. Anonimowo.
Reklamowe
Reklamowe pliki cookie są stosowane, by wyświetlać użytkownikom odpowiednie reklamy i kampanie marketingowe. Te pliki śledzą użytkowników na stronach i zbierają informacje w celu dostarczania dostosowanych reklam.
Analityczne
Analityczne pliki cookie są stosowane, by zrozumieć, w jaki sposób odwiedzający wchodzą w interakcję ze stroną internetową. Te pliki pomagają zbierać informacje o wskaźnikach dot. liczby odwiedzających, współczynniku odrzuceń, źródle ruchu itp.
Funkcjonalne
Funkcjonalne pliki cookie wspierają niektóre funkcje tj. udostępnianie zawartości strony w mediach społecznościowych, zbieranie informacji zwrotnych i inne funkcjonalności podmiotów trzecich.
Wydajnościowe
Wydajnościowe pliki cookie pomagają zrozumieć i analizować kluczowe wskaźniki wydajności strony, co pomaga zapewnić lepsze wrażenia dla użytkowników.

Test HTML i CSS – 40 pytań