Test HTML CSS - Egzaminy24

1. 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

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

Pytanie 562

fieldset optgroup summary option

3. 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

4. Co to jest CSS Flexbox?

Pytanie 33

Metoda tworzenia dynamicznych baz danych Narzędzie do analizy ruchu internetowego Sposób układania elementów na stronie w sposób elastyczny, zależny od rozmiaru ekranu Program do tworzenia aplikacji webowych

5. Jakie jest znaczenie atrybutu crossorigin w znaczniku <script>

Pytanie 592

Określa politykę CORS dla ładowanego skryptu Określa język skryptu Blokuje ładowanie z innych domen Automatycznie szyfruje skrypt

6. 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;

7. 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

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

Pytanie 604

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

9. 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)

10. Który atrybut formularza HTML określa adres docelowy przesyłanych danych?

Pytanie 145

method target enctype action

11. 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

12. Deweloper używa jednostki 'ch' w CSS (np. 'width: 40ch;'). Co dokładnie określa ta jednostka i od czego zależy jej rzeczywista wielkość w pikselach?

Pytanie 877

Odpowiada 1% wysokości aktualnego okna przeglądarki (viewportu) Jest równa szerokości znaku zero ('0') w kroju pisma (font-family) i rozmiarze zastosowanym dla danego elementu Jest stałą miarą odpowiadającą dokładnie 14 pikselom Zależy od gęstości pikseli ekranu (współczynnika DPI) i nie ma związku z czcionką

13. 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

14. Jak działa atrybut loading lazy w znaczniku <img>

Pytanie 594

Obraz ładuje się dopiero gdy zbliży się do obszaru widocznego w przeglądarce Obraz ładuje się tylko po kliknięciu użytkownika Obraz ładuje się po załadowaniu całej strony Obraz nigdy się nie ładuje

15. W CSS zdefiniowano: p { color: blue; } oraz div &gt p { color: red; }. Jaki kolor będzie miał paragraf w strukturze: <div><article><p>Tekst</p></article></div>?

Pytanie 620

Czerwony Niebieski Czarny Przezroczysty

16. Co oznacza atrybut rel noopener w linku <a>

Pytanie 596

Zapobiega dostępowi nowej strony do obiektu window opener Automatycznie zamyka nowe okno po załadowaniu Blokuje przekierowania HTTP Zmienia styl linku

17. 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

18. Jakie znaczenie ma atrybut async w <script> w HTML?

Pytanie 606

Skrypt wykonuje się po załadowaniu całej strony Skrypt wykonuje się równolegle z parsowaniem HTML Skrypt jest blokowany do czasu wczytania CSS Skrypt wykonuje się po kliknięciu użytkownika

19. Który znacznik HTML5 służy do wyświetlenia paska postępu (np. stopień ukończenia zadania)?

Pytanie 737

20. 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

21. Do czego służy atrybut defer w znaczniku <script> w HTML

Pytanie 589

Opóźnia wykonanie skryptu aż do zakończenia parsowania dokumentu HTML Wykonuje skrypt przed parsowaniem HTML Ładuje skrypt tylko w trybie offline Uniemożliwia wykonanie skryptu

22. Do czego służy element <template> w HTML

Pytanie 595

Przechowuje fragment HTML który nie jest renderowany dopóki nie zostanie użyty w JavaScript Służy do tworzenia formularzy Automatycznie generuje styl CSS Tworzy dynamiczne komponenty bez JavaScript

23. Selektor .box p:first-of-type wybierze:

Pytanie 739

Pierwszy paragraf w każdym divie na stronie Tylko pierwszy paragraf, który jest dzieckiem .box Pierwszy paragraf wewnątrz .box, nawet jeśli przed nim są inne znaczniki (np. h1) Pierwszy element wewnątrz .box, pod warunkiem że jest paragrafem

24. W specyfikacji CSS, czym różni się zachowanie wartości 'will-change: transform;' od bezpośredniego przypisania transformacji np. 'transform: translateZ(0);'?

Pytanie 873

will-change informuje przeglądarkę z wyprzedzeniem o planowanej animacji, pozwalając na optymalizację alokacji zasobów (np. utworzenie nowej warstwy kompozytora) przed rozpoczęciem ruchu, minimalizując ryzyko przeskoków obrazu will-change działa wyłącznie na urządzeniach mobilnych z systemem iOS translateZ(0) usuwa element z drzewa DOM na czas trwania renderowania will-change pobiera dodatkowe zewnętrzne biblioteki JavaScript do obsługi animacji

25. 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"

26. W CSS, aby zastosować styl tylko do elementów w klasie content, piszemy:

Pytanie 224

p.content {} .content p {} #content p {} p#content {}

27. Który z poniższych selektorów (pseudoklas) w specyfikacji CSS Selectors Level 4 NIE podnosi specyficzności (wagi) całego wyrażenia o specyficzność selektorów przekazanych w argumencie (w nawiasie)?

Pytanie 862

:is() :has() :not() :where()

28. 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

29. 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

30. W CSS selektor #id1 .class1 oznacza:

Pytanie 516

element z id class1 w elemencie class1 element z klasą class1 w elemencie o id id1 element z id id1 w klasie class1 wszystkie elementy class1

31. Która właściwość CSS pozwala na zachowanie proporcji elementu (np. 16/9) bez konieczności ręcznego obliczania wysokości względem szerokości?

Pytanie 762

ratio-box aspect-ratio box-proportion image-orientation

32. 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;

33. Właściwość 'isolation: isolate;' w CSS jest używana głównie do:

Pytanie 764

Blokowania dziedziczenia stylów z rodzica Tworzenia nowego kontekstu stosu (stacking context) bez konieczności używania pozycji i z-index Ukrywania elementu przed czytnikami ekranu Zapobiegania nachodzeniu na siebie marginesów (margin collapse)

34. 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

35. Jakie znaczenie ma display: contents w CSS?

Pytanie 601

Element zachowuje się jak normalny blok Element jest całkowicie ignorowany wizualnie, ale dzieci są renderowane Ukrywa element i jego dzieci Zmienia element w inline-block

36. Jakie jest przeznaczenie znacznika <address> w HTML5?

Pytanie 623

Służy do oznaczania dowolnego adresu fizycznego w tekście (np. siedziby firmy) Służy do podania informacji kontaktowych do autora lub właściciela dokumentu/artykułu Służy do integracji z Mapami Google Jest to kontener dla pól formularza typu 'email'

37. 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

38. 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

39. 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

40. 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)

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ń