Тема 2.1.5 Каскадные таблицы стилей CSS

ЗАДАНИЕ 1

Выполните тест по правилам CSS.  Из предложенных ответов выберите правильный. Верных ответов может быть несколько.

 

Вопрос 1. Что делает следующий стиль?

OL LI:fist-letter {color:red}

а) Изменяет цвет текста всего списка

б) Изменяет цвет первой буквы элемента нумерованного списка

в) Изменяет цвет первой строки в нумерованном списке

г) Изменяет цвет первой буквы элемента маркированного списка

д) Изменяет цвет первой строки в маркированном списке

 

Вопрос 2. В какой строке содержится ошибка? 

а) H1 {margin-left: 20px}

б) body {font-size: 11pt; color:#aaa}

в) head {color:#rob}

г) p {margin-left: 20px; padding-left: 20px}

д) H2 {margin-right: 20px}

 

Вопрос 3. Какое выражение написано не корректно?

а) background: red

б) width: “auto”

в) font-size: blue (здесь должны указываться единицы измерения, а не цвет)

г) border: none

д) color: #fco (такого цвета Не существует)

 

Вопрос 4. Какая ошибка содержится в следующем стиле?

Img (float: left; border-width: 3; display: block)

а) Не хватает точки с запятой в конце записи

б) Значение block свойства display не допускается применять к изображениям

в) Не указаны единицы измерения свойства border-width

г) Свойства border-width не существует

д) Значения left и block написаны без кавычек

 

Вопрос 5. Как правильно вставить комментарий в CSS-файл?

а) <!-- комментарий -->

б) # комментарий

в) // комментарий

г) // комментарий //

д) /* комментарий */

Вопрос 6. Коля решил для своего сайта сделать версию для печати. Какую строку ему следует использовать в коде?

а) @media “palm.css” print

б) @import url(“printer.css”) printer;

в) @import “palm.css” print;

г) <link media="printer" rel="stylesheet" href="print.css">

д) <style meda=”print”>

 

Вопрос 7. Люба подключила к HTML-документ одновременно два стилевых файла – style1.css и style2.css. Причем в файле style2.css первой строкой импортируется еще один файл с именем style3.css. В файле style1.css цвет текста задается красным, в style2.css – синим, а в style3.css – зеленым. Какой цвет текста будет на странице?

а) Зелёный

б) Красный

в) Установленный в браузере по умолчанию

г) Синий

д) Чёрный

 

Вопрос 8. Какой цвет фона будет у элемента с классом button при включении приведенного стиля?

.bgzapas,.button h1 {

font-size: 1.2em; padding: 10px;

Background-color: #fcfaed

}

.bgzapas {

Backround-color: #e7f2d7

}

 .button, h2 {

Width: 95px; font-size: 11px; color: #f3fced; background-color: #5ca22e

}

.bgzapas.button{

Backround-color: #d9d7f2

}

а)#d9d7f2

б) #fcfaed

в) #f3fced

г) #e7f2d7

д) #5ca22e

 

Вопрос 9. Требуется задать цвет заголовка зеленым. Какое стилевое свойство подойдет для этой цели?

а) font-size

б) font-color

в) font-family

г) color

д) text

 

Вопрос 10. Какой стиль установит красный цвет текста в абзаце?

а) * HTML P { color: red; }

б) HTML * P { color: red; }

в) P * { color: red; }

г) BODY * P { color: red; }

д) BODY P * { color: red; }

Вопрос 11. К какому селектору следует применить свойство margin, чтобы изменить отступы на веб-странице?

а)!DOCTYPE

б) HEAD

в) BODY

г) HTML

д) TITLE

 

Вопрос 12. Как добавить фоновый цвет ко всем элементам <h1>?

а) h1 {background-color: white}

б) h1[all] {background-color: white}

в) h1:all {background-color: white}

г) h1#all {background-color: white}

д) h1.all {background-color: white}

 

Вопрос 13. В каких ситуациях имена идентификаторов и классов можно называть одинаково?

а) Никогда, это недопустимо.

б) Только, если они применяются к разным элементам

в) Только, если в коде они встречаются один раз

г) Только, они применяются к одному элементу

д) В любом случае.

Вопрос 14. Какой селектор написан с ошибкой?

а) p.new.back:after

б) p.new:before

в) abbr:first-line

г) a:hover:before

д) div:before:first-letter

Вопрос 15. Какое имя идентификатора написано неправильно?

а) a-a-a-1-1-1

б) krevedko

в) bla-bla

г) l0g0

д) id_1id1

 

Вопрос 16. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?

<div>

<h1><em>Lorem</em> ipsum</h1>

 <p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit.</p>

 <ul>

<li><em>Ut</em>wisis enim ad

<li>Quis <em><span>nostrud</span></em>exerci

<li>Tution ullamcorper suscipit

</ul>

<em>Nisl</em> ut aliquipexea commodo consequat.

</div>

а) nostrud

б) Nisl

в) Ut

г) consectetuer

д) Lorem

 

Вопрос 17. К каким элементам добавляет стиль следующая конструкция – A: link: visited: hover?

а) К посещенным ссылкам при наведении на них курсора мыши.

б) К посещённым ссылкам

в) Ни к одному элементу

г) К непосещённым ссылкам

д) К любым ссылкам при наведении на них курсора мыши.

 

Вопрос 18. Олег сделал ссылки, которые меняют цвет фона при наведении на них курсора мыши. Для этого он использовал следующий стиль:

A{ color: blue; background: orange}

A:hover {background: yellow; color:black}

A:visited {color: write}

A:active {color: red}

Однако некоторые ссылки при наведении на них курсора не меняли свой цвет на черный. Почему?

а) Неверное значение свойства color у А:hover

б) Код CSS не валидный.

в) Псевдокласс:active стоит после:visited.

г) К селектору А не добавлен псевдокласс:link

д) Псевдокласс:visited стоит после:hover.

 

Вопрос 19. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдет?

а):hover

б):focus

в):first-child

г):first

д):first-line

 

Вопрос 20. Какой псевдоэлемент позволяет добавить текст в начало предложения?

а):first-line

б):before

в):first-letter

г):after

д):first-text