Test HTML CSS - Egzaminy24

1. Który selektor ma najwyższą specyficzność (wagę)?

Pytanie 731

div#main .content body #main ul li:first-child .wrapper .nav .item

2. W CSS jednostka vh oznacza:

Pytanie 506

procent wysokości elementu wysokość widocznego obszaru przeglądarki szerokość widocznego obszaru przeglądarki siatkę widoku

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

Pytanie 562

fieldset optgroup summary option

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

Pytanie 615

em rem vw px

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

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

7. Jaka jest specyficzność (specificity) obliczana przez przeglądarkę dla następującego selektora CSS: 'nav ul.menu li a:hover'?

Pytanie 844

0,0,2,3 0,0,1,4 0,0,3,2 0,0,2,4

8. Jakiego atrybutu HTML użyjesz, by wymusić, że pole formularza musi być wypełnione?

Pytanie 481

checked required must validate

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

10. Jaka jest różnica między jednostkami vh i % przy określaniu wysokości?

Pytanie 738

vh odnosi się do rodzica, % do rzutni % odnosi się do rodzica, vh do wysokości całej strony (scrolla) vh odnosi się do wysokości okna przeglądarki, % do wysokości rodzica Nie ma żadnej różnicy

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

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

14. W CSS display: flex tworzy:

Pytanie 519

siatkę 2D kontener blokowy elastyczny układ 1-wymiarowy element inline

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

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

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

19. Mamy regułę: 'grid-template-columns: min-content 1fr;'. Czym różni się zachowanie kolumny zdefiniowanej jako 'min-content' od kolumny zdefiniowanej jako 'max-content' w sytuacji, gdy wewnątrz znajduje się tylko jeden długi ciąg tekstu (np. jedno słowo wielokrotnie złożone)?

Pytanie 868

min-content dopasuje się do szerokości najdłuższego niepodzielnego słowa/elementu w kolumnie, podczas gdy max-content rozciągnie kolumnę tak, aby cały tekst zmieścił się w jednej linii bez łamania min-content zmniejszy kolumnę do zera, a tekst zostanie ukryty max-content ignoruje marginesy wewnętrzne padding Obie wartości działają identycznie we wszystkich możliwych przypadkach struktur DOM

20. W języku CSS poniższy zapis oznacza, że: body { background-color: lightblue color: white text-align: center font-size: 20px } oznacza:

Pytanie 444

tekst na stronie jest w kolorze białym i wyświetlany jest z prawej strony. czcionka jest wielkości 20 pixeli, a kolor tła jest biały. zapis ten tyczy się sekcji body. tekst na stronie jest wyświetlany w kolorze białym i ma wielkość 200 pixeli.

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

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

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

24. 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()

25. Która jednostka CSS odnosi się do szerokości znaku '0' w bieżącej czcionce?

Pytanie 755

em ex rem ch

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

27. Załóżmy, że dla elementu html ustawiono 'font-size: 16px', a dla elementu div 'font-size: 2rem'. Wewnątrz div znajduje się paragraf p zdefiniowany jako 'padding: 1.5em'. Ile pikseli (px) będzie wynosił padding tego paragrafu?

Pytanie 846

24px 48px 32px 16px

28. Aby na stronie internetowej wszystkie elementy blokowe były wyśrodkowane w poziomie należy dla nich zdefiniować styl

Pytanie 561

text-align: center; display: block; margin: auto; padding: auto;

29. Przeglądarka parsuje następujący fragment kodu CSS: 'div { font-size: 10px; line-height: 2em; } p { font-size: 20px; }'. Paragraf <p> znajduje się wewnątrz tagu <div>. Jaka będzie obliczona i odziedziczona wartość 'line-height' dla tekstu wewnątrz paragrafu <p>?

Pytanie 864

20px 40px 2em Domyślna wartość systemu (normal)

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

Pytanie 145

method target enctype action

31. Który selektor CSS wybiera wszystkie elementy po danym elemencie rodzeństwa?

Pytanie 610

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

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

33. Jeśli do elementu blokowego zastosujesz właściwość 'transform: scale(1);', jaki ukryty wpływ wywrze to na elementy potomne o pozycjonowaniu stałym ('position: fixed')?

Pytanie 863

Elementy fixed znikną z ekranu, ponieważ transformacja redukuje ich wymiary do zera Elementy fixed zaczną pozycjonować się względem tego transformowanego rodzica, zamiast względem okna przeglądarki (viewportu) Właściwość transform zostanie zablokowana i nie wywoła żadnego skutku wizualnego Elementy fixed automatycznie zmienią swoją pozycję na 'position: absolute' bez zachowania współrzędnych

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

35. Co oznacza atrybut contenteditable w HTML

Pytanie 598

Element może być edytowany bezpośrednio przez użytkownika w przeglądarce Element jest widoczny tylko w trybie edycji strony Element jest automatycznie zapisywany do bazy danych Element jest ukryty w DOM

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

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

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

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

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

Pytanie 224

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

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ń