linkedin-skill-assessments-quizzes

CSS

Q1. Який із цих селекторів має найвищий рейтинг специфічності для вибору елемента прив’язки?

ul li a
a
.example a
div a

Q2. Використовуючи селектор атрибутів, як би ви вибрали елемент <a> з атрибутом “title”?

Примітка: альтернатива наведеному нижче питанню.

Q3. Що таке селектор CSS для тегу <a>, що містить атрибут title?

Примітка: альтернатива питанню вище.

Q4. Grid CSS і flexbox тепер стають все більш популярними способами створення макетів сторінок. Однак числа з плаваючою точкою все ще широко використовуються, особливо при роботі зі старішою базою коду або якщо вам потрібно підтримувати старішу версію браузера. Які дві дійсні техніки використовуються для очищення floats?

Q5. Яким елементам(ам) відповідають наступні селектори?

1) .nav {
  ...;
}
2) nav {
  ...;
}
3) #nav {
  ...;
}

 1. Елемент з ідентифікатором "nav"
 2. nav елемент
 3. Елемент з класом "nav"

 1. Елемент з класом "nav"
 2. nav елемент
 3. Елемент з ідентифікатором "nav"

 1. Елемент з класом "nav"
 2. nav елемент
 3. Div з ідентифікатором "nav"

Q6. Під час додавання стилів прозорості, яка різниця між використанням властивості opacity та властивості background зі значенням rgba()?

Q7. Що стосується block і inline елементів? (Альтернатива: Яке твердження щодо block і inline елементів вірне?)

Q8. CSS grid представила нову одиницю вимірювання довжини, fr, для створення гнучких доріжок сітки. Звертаючись до прикладу коду нижче, якою буде ширина трьох стовпців?

.grid {
  display: grid;
  width: 500px;
  grid-template-columns: 50px 1fr 2fr;
}

Примітка: альтернатива запитанню нижче.

Q9. Якщо ширина контейнера становить 500 пікселів, якою буде ширина трьох стовпців у цьому макеті?

.grid { display: grid; grid-template-columns: 50px 1fr 2fr; }

Примітка: альтернатива до запитання вище.

Q10. Для чого використовується властивість line-height?

Q11. Три з цих варіантів вірні щодо селекторів класів. Що НЕ вірно?

Примітка: альтернатива запитанню нижче.

Q12. Що неправда щодо селекторів класів?

Примітка: альтернатива до запитання вище.

Q13. Є багато властивостей, які можна використовувати для вирівнювання елементів і створення макетів сторінок, таких як float, position, flexbox і grid. Яку з цих чотирьох властивостей слід використовувати для вирівнювання глобальної панелі навігації, яка залишається нерухомою у верхній частині сторінки?

Q14. У наведеному нижче скороченому прикладі, які окремі властивості фону представлено?

background: blue url(image.jpg) no-repeat scroll 0px 0px;

background-color: blue;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px 0px;

background-color: blue;
background-img: URL(image.jpg);
background-position: no-repeat;
background-scroll: scroll;
background-size: 0px 0px;

background-color: blue;
background-src: URL(image.jpg);
background-repeat: no-repeat;
background-wrap: scroll;
background-position: 0px 0px;

background-color: blue;
background-src: URL(image.jpg);
background-repeat: no-repeat;
background-scroll: scroll;
background-position: 0px 0px;

Q15. У цьому прикладі, згідно з правилами каскадування та специфічності, якого кольору буде посилання?

.example {
  color: yellow;
}
ul li a {
  color: blue;
}
ul a {
  color: green;
}
a {
  color: red;
}

<ul>
  <li><a href="#" class="example">link</a></li>
  <li>list item</li>
  <li>list item</li>
</ul>

Q16. Коли елементи перекриваються, вони впорядковуються на осі z (тобто, який елемент покриває інший). Властивість z-index можна використовувати для визначення z-порядку елементів, що перекриваються. Який набір тверджень щодо властивості z-index є істинним?

Примітка: альтернатива запитанню нижче.

Q17. Коли елементи всередині контейнера перекриваються, властивість z-index можна використовувати, щоб вказати, як елементи розташовані один на одному. Який набір тверджень є істинним?

 1. Більші значення z-index відображаються поверх елементів із нижчим значенням z-index.
 2. Можна використовувати від’ємні та додатні числа.
 3. Z-index можна використовувати лише для позиціонованих елементів.

 1. Менші значення z-index відображаються поверх елементів із більшим значенням z-index.
 2. Можна використовувати від’ємні та додатні числа.
 3. Z-index можна використовувати з або без позиціонованих елементів.

 1. Менші значення z-index відображаються поверх елементів із більшим значенням z-index.
 2. Можна використовувати від’ємні та додатні числа.
 3. Z-index також необхідно використовувати з позиціонованими елементами.

 1. Більші значення z-index відображаються поверх елементів із нижчим значенням z-index.
 2. Можна використовувати лише додатне число.
 3. Z-index також необхідно використовувати з позиціонованими елементами.

Примітка: альтернатива до запитання вище.

Q18. Яка різниця між наведеними нижче налаштуваннями висоти рядків?

line-height: 20px;
line-height: 2;

Q19. У наступному прикладі якого кольору буде абзац перший і абзац другий? (Альтернатива: у цьому прикладі, якого кольору будуть абзаци перший і другий?)

<section>
  <p>paragraph one</p>
</section>

<p>paragraph two</p>

section p {
  color: red;
}
section + p {
  color: blue;
}

Q20. Які існують три способи додавання CSS до HTML-сторінки?

 1. Зовнішній; CSS записується в окремому файлі.
 2. Внутрішньорядний; CSS додається до <head> сторінки HTML.
 3. Внутрішній; CSS включено в теги HTML.

 1. Зовнішній; CSS записується в окремому файлі та містить посилання в елементі <header> файлу HTML.
 2. Внутрішньорядний; CSS додається до тегу HTML.
 3. Внутрішній; CSS включено в елемент <header> файлу HTML.

 1. Зовнішній; CSS записується в окремому файлі та містить посилання в елементі <head> файлу HTML.
 2. Внутрішній; CSS включено в елемент <header> файлу HTML.
 3. Внутрішній; CSS додається до тегу HTML.

 1. Зовнішній; CSS записується в окремому файлі та містить посилання в елементі <head> файлу HTML.
 2. Внутрішньорядний; CSS додається до тегу HTML.
 3. Внутрішній; CSS включено в елемент <head> файлу HTML.

Q21. Яке твердження вірне для формату зображення SVG?

Q22. У наведеному нижче прикладі, коли буде застосовано рожевий колір до опорного елемента?

a:active {
  color: pink;
}

Q23. Яка властивість використовується, щоб змінити колір SVG за допомогою CSS?

Q24. Якщо використовувати position: fixed, відносно чого завжди буде позиціонуватися елемент?

Q25. За замовчуванням фонове зображення повторюватиметься _

Q26. Під час використання медіа-запитів типи медіа використовуються для націлювання на категорію пристрою. Який варіант містить поточні дійсні типи носіїв?

Q27. Як би ви зробили першу літеру кожного абзацу на сторінці червоною?

Q28. У цьому прикладі, що таке селектор, властивість і значення?

p {
  color: #000000;
}

 "p" - селектор
 "#000000" - властивість
 "color" - значенням

 "p" - селектор
 "color" - властивість
 "#000000" - значення

 "color" - селектор
 "#000000" - властивість
 "#p" - значення

 "color" - селектор
 "p" - властивість
 "#000000" - значення

Q29. На чому ґрунтується одиниця вимірювання rem?

Q30. Який варіант дасть блоковому елементу округлені кути?

Довідка:

Q31. У наведеному нижче прикладі медіа-запиту на які умови націлено?

@media (min-width: 1024px), screen and (orientation: landscape) { … }

Q32. Властивості transform CSS використовуються для зміни форми та положення вибраних об’єктів. Властивість transform-origin визначає місце початку перетворення елемента. За замовчуванням, яке розташування початкової точки?

Довідка:

Q33. Що з наведеного нижче не є дійсним значенням кольору? (Альтернатива: Який варіант не є дійсним значенням кольору?)

Q34. Який вертикальний проміжок між двома елементами внизу?

<div style="margin-bottom: 2rem;">Div 1</div>
<div style="margin-top: 2rem;">Div 2</div>

Довідка MDN

Q35. Під час використання методу Flexbox, яка властивість і значення використовуються для відображення flex елементів у стовпці?

Q36. Який тип декларації матиме перевагу?

Q37. Властивість flex-direction використовується для визначення напрямку, у якому відображаються flex елементи. Які значення використовуються для визначення напрямку елементів у наведених нижче прикладах?

quote

Q38. Є два братських комбінатори, які можна використовувати для вибору елементів, що містяться в одному батьківському елементі; загальний однорідний комбінатор (~) і суміжний однорідний комбінатор (+). Звертаючись до прикладу нижче, до яких елементів будуть застосовані стилі?

h2 ~ p {
  color: blue;
}
h2 + p {
  background: beige;
}

<section>
  <p>Абзац 1</p>
  <h2>Заголовок</h2>
  <p>Абзац 2</p>
  <p>Абзац 3</p>
</section>

Примітка: варіант питання нижче.

Q39. Який(і) елемент(и) буде синім?

h2 ~ p {
  color: blue;
}

<section>
  <p>P1</p>
  <h2>H2</h2>
  <p>P3</p>
  <p>P4</p>
</section>

Довідка

Q40. Під час використання Flexbox властивість «justify-content» можна використовувати для розподілу простору між елементами flex уздовж головної осі. Яке значення слід використовувати для рівномірного розподілу flex елементів у показаному нижче контейнері?

quote

Q41. Використання піктограм має багато переваг. Яка одна з цих переваг?

Q42. Яка різниця між display:none і visibility:hidden?

Q43. Який селектор і властивість ви б використали, щоб масштабувати елемент на 50% менше при наведенні?

Q44. Яке твердження щодо піктограм вірне?

Q45. Значеннями властивості font-weight можуть бути ключові слова або числа. Для кожного пронумерованого нижче значення, яке пов’язане ключове слово?

font-weight: 400;
font-weight: 700;

Q46. Використовуючи псевдоклас :nth-child, яким буде найефективніший спосіб стилізувати кожен третій елемент у списку, незалежно від кількості присутніх елементів, починаючи з елемента 2?

li:nth-child(3 + 2n) {
  margin: 0 5 px;
}

li:nth-child(3n + 2) {
  margin: 0 5 px;
}

li:nth-child(2),
li:nth-child(5),
li:nth-child(8) {
  margin: 0 5 px;
}

li:nth-child(2n + 3) {
  margin: 0 5 px;
}

Q47. Який селектор вибере лише внутрішні посилання на поточній сторінці?

Q48. Яка різниця між властивостями margin і padding?

Q49. Що не є дійсним способом оголошення значення відступу 10 пікселів зверху та знизу та 0 пікселів ліворуч і праворуч?

Q50. Чи є в цьому коді помилка? Якщо так, знайдіть найкращий опис проблеми

@font-face {
  font-family: 'Avenir', sans-serif;
  src:
    url('avenir.woff2') format('woff2'),
    url('avenir.woff') format('woff');
}

Q51. Який стиль розміщує елемент у фіксованому місці в його контейнері?

Q52. Функція CSS calc() часто використовується для обчислення відносних значень. У прикладі нижче, що таке вказане значення margin-left?

.example {
  margin-left: calc(5% + 5px);
}

Q54. У цьому прикладі якого кольору буде абзац 1?

p:first-of-type {
  color: red;
}
p {
  color: blue;
}
.container {
  color: yellow;
}
p:first-child {
  color: green;
}

<div class="container">
  <h1>Заголовок</h1>
  <p>Абзац1</p>
  <p>Абзац2</p>
</div>

Q55. Для чого використовується псевдоелемент ::placeholder?

Q56. Яке твердження є вірним для позначення з одинарною двокрапкою (:) або подвійною двокрапкою (::) для псевдоелементів, наприклад, ::before і :before?

Q57. Який варіант не є дійсним значенням властивості font-style?

Q58. Коли слід використовувати метод @font-face?

Q59. У вас є велике зображення, яке має поміститися в область розміром 400 x 200 пікселів. До якого розміру слід змінити розмір зображення, якщо ваші користувачі використовують дисплеї Retina?

Q60. Де перераховані стилі за замовчуванням у вікні інструментів розробника Chrome?

Q61. Тоді як HTML керує структурою документа, CSS контролює ___.

Q62. Яку рекомендовану назву слід дати папці, яка містить зображення вашого проекту?

Q63. У чому перевага використання вбудованого CSS?

Q64. Який код статусу W3C представляє специфікацію CSS, яка повністю реалізована сучасними браузерами?

Q65. Чи є якісь із наведених нижче заяв недійсними?

color: red; /* заява A */
font-size: 1em; /* заява B */
padding: 10px 0; /* заява C */

Q66. Який CSS код призведе до того, що ваші посилання матимуть суцільний блакитний фон, який змінюється на напівпрозорий під час наведення курсора?

a:link {
  background: #0000ff;
}
a:hover {
  background: rgba(0, 0, 255, 0.5);
}

a {
  color: blue;
}
a:hover {
  background: white;
}

a:link {
  background: blue;
}
a:hover {
  color: rgba(0, 0, 255, 0.5);
}

a:hover {
  background: rgba(blue, 50%);
}
a:link {
  background: rgba(blue);
}

Q67. Яке правило CSS має пріоритет над іншими переліченими?

Q68. body вашої сторінки містить кілька розділів HTML. Як це виглядатиме із застосуванням наступного CSS?

body {
  background: #ffffff; /* white */
}
section {
  background: #0000ff; /* blue */
  height: 200px;
}

Q69. Яке ключове слово CSS можна використовувати для заміни стандартного порядку джерела та правил специфічності?

Q70. Ви можете використовувати псевдоклас ___, щоб встановити інший колір посилання, якщо воно було натиснуто.

Q71. Який колір виглядатиме найяскравішим на вашому екрані, якщо фон білий?

Q72. Який селектор CSS можна використати, щоб вибрати та очистити всі елементи на сторінці, пов’язані з класами header та clear?

Q73. Універсальний селектор визначається за допомогою (n) ___.

Q74. У наведеному нижче коді CSS «h1» — це «», а «color» — це «».

h1 {
  color: red;
}

Q75. Який альтернативний спосіб визначити наступне правило CSS?

font-weight: bold;

Q76. Ви хочете, щоб ваш стиль базувався на наборі, що складається з трьох шрифтів. Де має бути вказаний загальний шрифт для вашого сімейства шрифтів?

Q77. У якому порядку мають відображатися значення, якщо для оголошення сімейства шрифтів використовується стек шрифтів?

Q78. Який один із недоліків використання веб-шрифтів?

Q79. Як додати шрифти Google до проекту?

Q80. Використовуючи наступний приклад HTML і CSS, яким буде еквівалентне значення у px для елементів .em і .rem?

HTML {
  font-size: 10px;
}
body {
  font-size: 2rem;
}
.rem {
  font-size: 1.5rem;
}
.em {
  font-size: 2em;
}

<body>
  <p class="rem"></p>
  <p class="em"></p>
</body>

Q81. Яка властивість використовується для налаштування інтервалу між символами тексту?

Q82. Який правильний синтаксис для зміни курсору зі стрілки на вказівну руку, коли він взаємодіє з названим елементом?

Q83. Який ефект від цього стилю?

background-position: 10% 50%;

Q84. Як відображатимуться елементи сітки?

grid-template-columns: 2fr 1fr;

Q85. Яке правило зменшило б зображення на 50% під час наведення курсора?

<img id="photo" alt="" src="..." />

Q86. Які властивості CSS можна використовувати, щоб створити заокруглений кут лише у верхньому лівому та верхньому правому кутах елемента?

A. border-radius: 10px 10px 0 0;
B. border-top-left-radius: 10px; and border-top-right-radius: 10px;
C. border-radius: 10px 0;
D. border-top-radius: 10px;

Q87. Перегляньте приклад HTML нижче. Потім виберіть список селекторів, які вибирають <p>, від найнижчої до найвищої специфічності.

<section>
  <p class="example">...</p>
</section>

1. section \* {
  ...;
}
2. [class*='example'] {
  ...;
}
3. p.example {
  ...;
}
4. section p {
  ...;
}

1. p {
  ...;
}
2. p.example {
  ...;
}
3. section p {
  ...;
}
4. [class*='example'] {
  ...;
}

1. p.example {
  ...;
}
2. section p {
  ...;
}
3. [class*='example'] {
  ...;
}
4. section \* {
  ...;
}

1. p {
  ...;
}
2. section p {
  ...;
}
3. [class*='example'] {
  ...;
}
4. p.example {
  ...;
}

Q88. Яка властивість використовується для створення ефекту тіні на елементі HTML?

Q89. Який правильний селектор для націлювання на всі входження тексту, які не вимкнено?

input[type="text"] вибирає всі входження з типом text, а :not([disabled]) вибирає всі елементи, які не мають атрибута “disabled”. Поєднання обох вибирає лише елементи з атрибутом типу “text” і без атрибута “disabled”.

  1. Довідка attribute-selector
  2. Довідка link-:not()

Q90. Як можна створити напівпрозорий фоновий колір?

rgba — це функція в css. rgba означає червоний(Red), зелений(Green), синій(Blue) і альфа(Alpha). Значення альфа може бути від 0 до 1 включно, де 0 означає повністю прозорість, а 1 — повністю непрозорість.

Довідка-rgba

Q91. Використовуючи цю розмітку HTML, як би ви вибрали лише заголовки, що містяться в елементі <header>?

<header>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
</header>
<h2>Heading 2</h2>

Q92. Припустімо, що ви хочете, щоб список елементів (.item) відображався в рядку та у зворотному порядку за допомогою flexbox. Яка помилка в CSS нижче?

.container {
  display: flex;
}
.item {
  border: 1px solid red;
  flex-direction: row-reverse;
}

Q93. Який варіант не є дійсним переходом?

  1. MDN:
  2. MDM:
  3. W3s
  4. W3s

Q94. У цьому прикладі якого кольору будуть абзаци і чому?

article p {
  color: blue;
}
article > p {
  color: green;
}

<article>
  <p>Абзац 1</p>

  <aside>
    <p>Абзац 2</p>
  </aside>
</article>

Q95. Перегляньте декларацію стилю border, наведену нижче. Який відповідний довгий синтаксис?

border: 1px solid red;

border-size: 1px;
border-style: solid;
border-color: red;

border-size: 1px;
border-type: solid;
border-color: red;

border-width: 1px;
border-style: solid;
border-color: red;

border-width: 1px;
border-line: solid;
border-color: red;

Q96. Псевдокласи використовуються для _.

Q97. Які стилі будуть застосовані до яких елементів?

section {
  color: gray;
}

<section>
  <p>Абзац</p>
  <a href="#">Посилання</a>
</section>

Q98. Яка відповідь є прикладом type selector (також іноді називають element selector)?

Q99. Який правильний порядок переліку різних станів посилань на веб-сайті, щоб ці стани правильно відображалися на сторінці?

  a
  a:hover

  :link
  :visited
  :hover
  :active
  :focus

  :active
  :focus
  :hover
  :link
  :visited

  :link
  :visited
  :focus
  :hover
  :active

Q100. Який селектор використовується для вибору елемента p, який є прямим нащадком section?

Дочірній комбінатор

Q101. Який колір шрифту гіпертекстового посилання для цього коду?

ul {
  --color: red;
}
p {
  color: var(--color);
}
a {
  color: var(--color, orange);
}

<p>Paragraph</p>
<ul>
  <li>
    <a href="#">list item a link </a>
  </li>
  <li>list item</li>
</ul>

Довідка

Q102. Яке твердження не вірне?

Довідка

Q103. Яке на виході значення margin при використанні в цьому контексті, припускаючи, що елемент який його містить більше 800px?

.example {
  width: 800px;
  margin: 0 auto;
}

Джерело: SOW

Q104. Є чотири відносні види одиниць довжини, що можуть бути використані для визначення значення порівняно до розмірів viewport: vw, vh, vmin та vmax. Якщо поточний viewport має ширину 800px та висоту 600px, якими будуть еквіваленти цих значень в пікселях?

10vw = ?px
10vh = ?px
10vmin = ?px
10vmax = ?px

Q105. Звертаючись до наведеного нижче прикладу розмітки HTML і CSS, на які елементи буде націлено?

p:first-of-type:first-letter {
  color: red;
}

<body>
  <p>Абзац 1.</p>
  <p>Абзац 2.</p>

  <article>
    <h1>Заголовок</h1>
    <p>Абзац 3.</p>
    <p>Абзац 4.</p>
  </article>

  <section>
    <p>Абзац 5.</p>
    <p>Абзац 6.</p>
  </section>
</body>

Q106. Які п’ять особливостей стилю пов’язані з моделлю box?

Q107. Який варіант не призведе до того, що всі посилання, які включають domain.com, стануть рожевими?

a[href$='domain.com'] {
  color: pink;
}

a[href='*domain.com'] {
  color: pink;
}

a[href*='domain.com'] {
  color: rgba(255, 155, 155);
}

a[href*='domain.com'] {
  color: pink;
}

Довідка

Q108. Яку пару властивості та значення можна використати для застосування ефекту лінійного градієнта?

Q109. Ви хочете додати фонове коло за піктограмою. Яке оголошення стилю є правильним?

.glyphicon-bgcircle {
  circle-radius: 50%;
  margins: 50px;
  background-color: #fdadc6;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
}

glyphicon-bgcircle {
  border-circle: 50%;
  padding: 50px;
  background-color: #fdadc6;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
}

.glyphicon-bgcircle {
  border-radius: 50%;
  padding: 50px;
  background-color: #fdadc6;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
}

.glyphicon-bgcircle {
  radius-rounded: 50%;
  margins: auto;
  background-color: #fdadc6;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
}

Q110. Які варіанти є дійсними значеннями властивості font-size?

A. font-size: xsmall
B. font-size: 50%
C. font-size: 1em
D. font-size: 20px

Q111. На цьому зображенні синє поле та зразок тексту містяться в одному батьківському елементі. Синє поле плаває на лівому боці контейнера. Чому воно не міститься в контейнері?

Sample text

Q112. Враховуючи цей код, яка CSS-декларація .overlay охоплюватиме всю ширину та висоту свого контейнера?

<style>
.container {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid black;
}
</style>
<div class="container"><div class="overlay"></div></div>

.overlay {
  position: static;
  top: 200px;
  bottom: 200px;
  right: 200px;
  left: 200px;
  background-color: rgba(0, 0, 0, 0.5);
}

.overlay {
  position: absolute;
  top: 200px;
  bottom: 200px;
  right: 200px;
  left: 200px;
  background-color: rgba(0, 0, 0, 0.5);
}

.overlay {
  position: static;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

Q113. Який відсутній рядок коду розмістить текст поверх зображення?

<div class="container">
  <img src="grumpy-cat.gif" />
  <p>The z-index property is cool!</p>
</div>

img {
  position: absolute;
  left: 0px;
  top: 0px;
  // Відсутній рядок
}

Q114. Щоб зробити розмір шрифту елемента на один розмір меншим за розмір шрифту контейнера елемента, яку властивість стилю ви б застосували?

Q115. Враховуючи цю розмітку, який селектор призведе до виділення тексту жовтим кольором?

<span class="highlight">#BLM</span>

.highlight {
  background-color: yellow;
}

#highlight {
  background-color: yellow;
}

.highlight {
  color: yellow;
}

#highlight {
  color: yellow;
}

Highlight Background

Q116. Щоб запобігти мозаїці фонового зображення в будь-якому напрямку, яку властивість стилю ви б застосували?

background-repeat: no-repeat;

background-repeat: fixed;

background-repeat: none;

background-tile: none;

Q117. Щоб повернути об’єкт на 30 градусів проти годинникової стрілки, яку властивість стилю ви б застосували?

Довідка

Q118. Яке правило ви б застосували, щоб встановити фонове зображення для відображення вмісту файлу wood.png?

Q119. Яке правило встановлює колір шрифту лише другого абзацу на синій?

<section><p>paragraph one</p></section><p>paragraph two</p>

section > p {
  color: blue;
}

p {
  color: blue;
}

section + p {
  color: blue;
}

p + section {
  color: blue;
}

Довідка

Q120. Ви хочете перемістити елемент вгору на 100 пікселів. Яку властивість CSS ви б використали?

Q121. Який стиль горизонтально центруватиме внутрішній <div> у зовнішньому?

<div id="outer">
  <div id="inner">Center Me!</div>
</div>

#inner {
  width: 50%;
}

#outer {
  width: 100%;
}

#inner {
  left: 0;
  right: 0;
  position: center;
}

#inner {
  text-align: center;
}

#inner {
  width: 50%;
  margin: 0 auto;
}

Q122. У якому кутку опиниться цуценя після застосування цих правил CSS?

.pen {
  height: 100px;
  width: 100px;
  border: 2px dashed brown;
  position: relative;
}

#puppy {
  position: absolute;
  right: 80px;
  bottom: 0px;
}

<div class="pen">
  <span id="puppy">:dog:</span>
</div>

Q123. Який варіант використовує правильний синтаксис для додавання псевдокласу наведення до елемента <a>?

Довідка

Q124. Який відсутній код дасть тінь “Дверям підвалу”?

  <style>
    #cellar-door {
      box-shadow: 3px 5px 10px #000;
    }
    .text-shadow {
      text-shadow: 3px 5px 10px #000;
    }
  </style>

  <h1 _____> Двері підвалу</h1>

Довідка

Q125. Який варіант є дійсним прикладом коментаря в CSS?

Довідка

Q126. Який(і) елемент(и) відображатиме(у)ться синім кольором?

    h2 ~ p {
      color: blue;
    }
  <section>
    <p>P1</p>
    <h2>H2</h2>
    <p>P3</p>
    <p>P4</p>
  </section>

Довідка

Q127. Коли ці селектори псевдокласів застосовуються до посилання, до яких станів будуть застосовані стилі?

a:visited {
  ...;
}
a:active {
  ...;
}
a:hover {
  ...;
}
a:focus {
  ...;
}

Довідка

Q128. Яке правило слід використовувати для відображення червоним шрифтом усіх елементів, які не пройшли валідацію?

input.valid[false] {
  color: red;
}

input:invalid {
  color: red;
}

input.not(valid) {
  color: red;
}

input.invalid {
  color: red;
}

Довідка

Q129. Яке правило слід застосувати до елемента img, щоб відобразити елемент у відтінках сірого без кольору?

img {
  transform: grayscale(1);
}

img {
  filter: grayscale(0);
}

img {
  transform: grayscale(0);
}

img {
  filter: grayscale(1);
}

Довідка

Q130. Чому ви можете створити таблицю стилів скидання?

Довідка

Q131. Який варіант є недійсним способом оголошення значення відступу 10 пікселів зверху та знизу та 0 пікселів ліворуч і праворуч?

Довідка

Q132. Як би ви абсолютно позиціонували елемент класу logo всередині відносно розташованого контейнера?

.logo {
  position: absolute;
  padding-left: 100px;
  padding-top: 150px;
}

.logo {
  position: absolute;
  left: 100px;
  top: 150px;
}

.logo {
  position: absolute;
  left-padding: 100px;
  top-padding: 150px;
}

.logo {
  position: absolute;
  margin-left: 100px;
  margin-top: 150px;
}

Q133. Як <div> з класом .child буде позиціонуватися у своєму контейнері?

<style>
  .container {
    height: 200px;
    width: 200px;
  }
  .child {
    margin: auto 0;
    height: 100px;
  }
</style>
<div class="container">
  <div class="child">...</div>
</div>

Довідка

Q134. За замовчуванням перехід в CSS це __

Довідка

Q135. Яке правило розширить елемент заголовка на весь рядок сітки від першого стовпця до останнього?

header {
  grid-column: 1 / auto;
}

header {
  grid-column: 1/-1;
}

header {
  grid-column: -1/1;
}

header {
  grid-column: 1/100%;
}

Довідка

Q136. Яке правило потрібно застосувати, щоб відцентрувати вміст клітинки сітки по горизонталі та вертикалі всередині клітинки?

align-items: start;
justify-items: end;

align-items: center;
justify-items: center;

align-items: middle;
justify-items: middle;

align-items: stretch;
justify-items: stretch;

Довідка по align-items Довідка по justify-items

Q137. Яке правило слід використовувати для відображення червоним шрифтом усіх введених елементів, які не пройшли перевірку?

input.valid[false] {
  color: red;
}

input:invalid {
  color: red;
}

input.not(valid) {
  color: red;
}

input.invalid {
  color: red;
}

Довідка

Q139. Яке правило слід використовувати, щоб додати файл зовнішньої таблиці стилів в інший файл таблиці стилів?

Довідка по import

Q140. З урахуванням цього коду, якої висоти буде наступний елемент у пікселях?

<style>
  #tall-text {
    display: inline;
    font-size: 20px;
    height: 200px;
  }
</style>

<p id="tall-text">Did I grow?</p>

Довідка

Q141. Яке правило розмістить X у сітці, щоб виграти гру?

A

Довідка

Q142. Яка властивість CSS використовується для створення відображення зображення?

Q143. Який загальний синтаксис запису функції var()?

Q143. Скільки режимів макета було до того, як у CSS було представлено модуль макета Flexbox?

Q144. Які з наведених нижче компонентів box моделі CSS є transparent?

Q145. Як користувацькі шрифти визначаються за допомогою CSS?

Q146. Яка з наведених нижче властивостей CSS встановлює, які види прикрас ліній додаються до елемента, як-от підкреслення, накладання тощо?

Q147. Яка з наведених нижче властивостей CSS встановлює порядок укладання розташованих елементів?

Q148. Яка з наведених нижче властивостей дозволяє використовувати рамку в разі переповнення тексту?

Q149. Який з наступних каскадних порядків має найвищий пріоритет?

Q150. Каскад CSS призначає вагу кожному правилу стилю.

Q151. **____** представляє результат каскаду: це оголошене значення, яке виграє каскад.

Q152. Використання негативного текстового відступу також відоме як _?

Q153. Використання margin також відоме як _?

Q154. Якщо конкретне правило ніколи не замінюється іншим правилом, слід використовувати вказівку **____**.

Q155. Що означає CSS?

Довідка

Q156. Який колір дасть rgb(255,0,0)?

Q157. Який правильний HTML для посилання на зовнішню таблицю стилів?

Q159. Що таке CSS, визначене в HTML?

Q160. Яке з наведених нижче тверджень є ІСТИННИМ для CSS?

Q161. У CSS згортання поля відбувається лише з?

Q162. Який із наведених нижче селекторів CSS вибирає всі елементи <p>, які є прямими дочірніми елементами <div>?

Q163. У CSS властивість box-sizing використовується для контролю того, як обчислюється загальна ширина та висота елемента. Яке значення параметра box-sizing включає відступ і рамку елемента в межах його загальної ширини та висоти?

Q164. У CSS, що з наведеного НЕ є ефектом інертного атрибута?

Q165. На які елементи спрямована властивість accent-color?

Q164. Чим у CSS керує властивість line-height?

Q165. Яке призначення властивості visibility CSS?

Q166. Яка властивість CSS використовується для зміни стилю курсора, коли він наводиться на елемент?

Q167. Яке призначення властивості outline CSS?

Q168. Які дійсні значення властивості text-align?

Q169. Яка різниця між visibility: hidden та display: none?

Q170. Що з наведеного НЕ є дійсним CSS-селектором?

Q171. Яка різниця між класом та ідентифікатором у CSS?

This site is open source. Improve this page.