игра брюс 2048
Главная / Интернет-технологии / CSS2: основы / Тест 1

CSS2: основы - тест 1

Упражнение 1:
Номер 1 
Каким образом можно переопределить стиль отображения элемента разметки умолчания?

Ответ:

 (1) через атрибут style этого элемента разметки 

 (2) через имя-селектор элемента разметки в элементе style 

 (3) путем определения атрибутов стиля в селекторе-идентификаторе данного элемента 

 (4) через JavaScript описание CSS 

Номер 2 
Каким образом осуществляется ссылка на внешнее описание стиля?

Ответ:

 (1) в элементе LINK 

 (2) "@import(url) 

 (3) через атрибут style элемента разметки 

 (4) тегом <style> 

Номер 3 
Какая из записей верна?

Ответ:

 (1) <p style="text-align:justify;">...</p> 

 (2) <p class="text-align:justify;">...</p> 

 (3) <p id="text-align:justify;">...</p> 

 (4) <p class="text:justify;">...</p> 

Номер 4 
Какую проблему HTML-разметки решают CSS?

Ответ:

 (1) точное позиционирование блока текста 

 (2) типизация разметки HTML 

 (3) разделение логической структуры документа и формы его представления 

 (4) разметка страницы 

Номер 5 
Как убрать подчеркивание для всех ссылок?

Ответ:

 (1) a { underline: none; } 

 (2) a { text-decoration: free; } 

 (3) a { text-decoration: none; } 

 (4) a { underline: 0; } 

 (5) a { href: 0; } 

Номер 6 
Отметьте фрагмент правильный кода:

Ответ:

 (1) body { color: black } 

 (2) body { color=black } 

 (3) body: black 

 (4) body ( color: black ) 

 (5) body.color=black 

Упражнение 2:
Номер 1 
Какого цвета будет текст в ячейке таблицы при наличии в документе следующего фрагмента:
  
<style type="text/css">
td.red {color:red;}
#blue {color:blue;}
</style>
...
<table>
<tr><td class=red id=blue>text</td></tr>
</table>:

Ответ:

 (1) красный 

 (2) синий 

 (3) цвет умолчания 

 (4) белый 

Номер 2 
Какого цвета будет текст в ячейке таблицы при наличии в документе следующего фрагмента:
  
<style type="text/css">
td.red {color:;blue}
#blue {color:red;}
</style>
...
<table>
<tr><td class=red id=blue>text</td></tr>
</table> :

Ответ:

 (1) красный 

 (2) синий 

 (3) цвет умолчания 

 (4) белый 

Номер 3 
Какого цвета будет текст в ячейке таблицы при наличии в документе следующего фрагмента:
  
<style type="text/css">
td.green {color:green ;}
#blue {color:blue;}
</style>
...
<table>
<tr><td class=green id=blue>text</td></tr>
</table> :

Ответ:

 (1) синий 

 (2) красный 

 (3) белый 

 (4) цвет умолчания 

Номер 4 
Что означает запись вида:
  
i, em, u {color:navy;font-style:italic;}:

Ответ:

 (1) вложенный в элементы i и em элемент u будет отображен цветом navy и курсивом 

 (2) все перечисленные элементы будут отображаться цветом navy и курсивом 

 (3) для всех указанных элементов разметки параметры цвета и стиля отображения будут общими, а остальные параметры будут определены правилами умолчания 

 (4) вложенные в элемент i em и u будут отображены цветом navy и курсивом 

Номер 5 
Каково назначение точки в имени селектора описания CSS?

Ответ:

 (1) разделитель в имени селектора (отделяет имя класса от его модификатора) 

 (2) обязательный символ при обозначении селектора корневого класса 

 (3) опционный параметр, его использование жестко не регламентируется 

 (4) определяет идентификатор класса 

Номер 6 
Как правильно определить стиль отображения гипертекстовой ссылки внутри неупорядоченного списка?

Ответ:

 (1) ul.a {color:red;} 

 (2) ul,a {color:red;} 

 (3) ul a {color:red;} 

 (4) ul:a {color:red;} 

Упражнение 3:
Номер 1 
На какие теги действует содержимое тега <style>?

Ответ:

 (1) на все теги документа 

 (2) только на теги, находящиеся в одной таблице с ним 

 (3) только на первый тег, следующий за тегом <style> 

 (4) ни на какие 

Номер 2 
Эквивалентны ли способы присоединения внешних таблиц стилей с помощью директивы @import и тега link:

Ответ:

 (1) да 

 (2) ID 

 (3) нет 

 (4) с помощью @import нельзя присоединить 

Номер 3 
Среди возможных вариантов объявления стилей наибольший приоритет имеют:

Ответ:

 (1) внешние таблицы стилей 

 (2) таблицы стилей уровня документа 

 (3) внутренние стили 

 (4) стили с указанием !important 

 (5) стили с указанием !main 

Номер 4 
Каким тегом определяются стили на уровне документа?

Ответ:

 (1) <style> 

 (2) <head> 

 (3) <body> 

 (4) <css> 

Номер 5 
Где должна появляться команда import:?

Ответ:

 (1) до любых стилевых правил 

 (2) не имеет значение 

 (3) после стилевых правил 

 (4) в теге документа 

Номер 6 
Где должен находиться тэг <style>?

Ответ:

 (1) только внутри тега <head> 

 (2) только внутри тега <body> 

 (3) не имеет значения 

 (4) в теге <script> 

Упражнение 4:
Номер 1 
Как называется атрибут HTML-тега, с помощью которого можно задавать стиль непосредственно для конкретного элемента?

Ответ:

 (1) css 

 (2) stylesheet 

 (3) style 

 (4) inlineStyle 

 (5) styles 

Номер 2 
Какой из нижеприведённых вариантов не содержит ошибок?

Ответ:

 (1) body {color: red} 

 (2) body (color: red) 

 (3) {body: color=red} 

 (4) {body; color:red} 

 (5) body: color:red 

Номер 3 
Как в CSS-файле обозначаются комментарии?

Ответ:

 (1) <!-comment !--> 

 (2) 'comment 

 (3) /* comment */ 

 (4) // comment 

 (5) "// comment 

Номер 4 
Отметьте правильные описания стиля:

Ответ:

 (1) H1, H2, H3 { color: navy } 

 (2) TD STRONG { color: red } 

 (3) DIV.blue { color: #0000FF } 

 (4) #fruit { color: orange } 

 (5) p:hover { text-decoration: underline } 

Номер 5 
Найдите все ошибочные описания стиля:

Ответ:

 (1) A:active { color: green; font-weight: bold } 

 (2) .red { color: #FF0000 } 

 (3) *.red { color: #FF0000 } 

 (4) red:hover { color: #FF0000; text-decoration:none } 

 (5) A.red:hover { color: #FF0000;text-decoration:none } 

Номер 6 
Укажите, какая из единиц измерений не является абсолютной:

Ответ:

 (1) pt 

 (2) mm 

 (3) in 

 (4) px 

 (5) cm 

Упражнение 5:
Номер 1 
Какое значение не может приобретать свойство width?

Ответ:

 (1) Width: 77% 

 (2) Width: 40pt 

 (3) Width: none 

 (4) Width: inherit 

 (5) Width: auto 

Номер 2 
Какое значение не может приобретать свойство width?

Ответ:

 (1) width: 77% 

 (2) width: 40pt 

 (3) width: none 

 (4) width: inherit 

 (5) width: -50 

Номер 3 
Какое значение не может приобретать свойство width?

Ответ:

 (1) width: 77% 

 (2) width: none 

 (3) width: -20 

 (4) width: inherit 

 (5) width: auto 

Номер 4 
Свойства тега H2 объявлены во внешней таблице стилей следующим образом: h2 {text-indent: 3em}. необходимо изменить его в единственном месте одной страницы, переопределив значение text-indent на 1em.
  
Какая последовательность действий приведет к оптимальному решению поставленной задачи?

Ответ:

 (1) добавить к внешней таблице стилей новый класс для тега H2 (например, h2.new {text-indent: 0}) 

 (2) подключить еще одну внешнюю таблицу стилей и в ней определить необходимые параметры 

 (3) переопределить стиль в элементе разметки (H2) посредством атрибута style 

 (4) разместить описание стиля в заголовке документа в элементе style 

 (5) необходимо подключить новую таблицу стилей при помощи конструкции @import url 

Номер 5 
Свойства тега H3 объявлены во внешней таблице стилей следующим образом: h3 {text-indent: 4em}. Необходимо изменить его в единственном месте одной страницы, переопределив значение text-indent на 2em.
  
Какая последовательность действий приведет к оптимальному решению поставленной задачи?

Ответ:

 (1) добавить к внешней таблице стилей новый класс для тега H3 (например, h3.new {text-indent: 0}) 

 (2) подключить еще одну внешнюю таблицу стилей и в ней определить необходимые параметры 

 (3) переопределить стиль в элементе разметки (H3) посредством атрибута style 

 (4) разместить описание стиля в заголовке документа в элементе style 

 (5) необходимо подключить новую таблицу стилей при помощи конструкции @import url 

Номер 6 
В каких строках подключения внешней таблицы стилей к документу допущена ошибка?

Ответ:

 (1) <link href="css/stylesheet.css" rel="stylesheet"> 

 (2) <style> @import url("css/blue.css") </style> 

 (3) <link href="stylesheet" type="text/css" rel="style/style.css"> 

 (4) <link rel="stylesheet" type="text/css" href="style/style.css"> 

Упражнение 6:
Номер 1 
Необходимо вставить комментарий в таблицу стилей. Какой фрагмент кода позволит решить поставленную задачу?

Ответ:

 (1) \ комментарий \ 

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

 (3) " комментарий " 

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

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

Номер 2 
Какое из перечисленных ниже значений установлено для свойства display по умолчанию?

Ответ:

 (1) display: block 

 (2) display: marker 

 (3) display: inline 

 (4) display: inline-table 

 (5) display: none 

Номер 3 
Какое из перечисленных ниже значений установлено для свойства float по умолчанию?

Ответ:

 (1) left 

 (2) right 

 (3) none 

 (4) inherit 

Номер 4 
При обработке различными браузерами приведенного ниже фрагмента кода расстояние между первой и второй строкой не будет одинаковым.
  
<style> 
body{
margin: 0;
padding: 0
}
p:first-letter{
font-size: 400%;
..........: 0. 8em
}
</style>

Какое свойство позволит сделать межстрочное расстояние одинаковым?

Ответ:

 (1) Text-align 

 (2) Padding-top 

 (3) Margin-top 

 (4) Line-height 

 (5) Word-spacing 

Номер 5 
Какое из перечисленных ниже значений установлено для свойства visibility по умолчанию?

Ответ:

 (1) Visibility: visible 

 (2) Visibility: hidden 

 (3) Visibility: inherit 

 (4) Visibility: normal 

 (5) Visibility: collapse 

Номер 6 
Дан код: 
  
  <head>
  <style type="text/css">
   P.line {
    line-height: 2;
   }
   P {
    line-height: 1em;
   }
  </style>
 </head>
 <body>
  <p class="line">Строка 1...</p>
  <p>Строка 2...</p>
 </body>
  
В какой из строк установлен двойной межстрочный интервал?

Ответ:

 (1) только в первой 

 (2) только второй 

 (3) в обеих 

 (4) ни в какой, птому что второе правило перекрывает первое 

Упражнение 7:
Номер 1 
Выберите верный вариант объяснения следующей записи:
  
*{font-size:14px} :

Ответ:

 (1) звездочка перед селектором поставлена, чтобы данная строка стала комментарием, и не читалась браузером 

 (2) синтаксис CSS не допускает данную запись 

 (3) шрифт с кеглем 14 пунктов применяется ко всем, находящимся на странице тегам 

 (4) шрифт с кеглем 14 пунктов применяется ко всем классам 

Номер 2 
Отметьте псевдокласс, обозначающий ссылку, которую посетили:

Ответ:

 (1) a: visited 

 (2) a: link 

 (3) a: active 

 (4) a: hover 

Номер 3 
Какой отступ снизу задает следующий код:
  
p { padding: 10px 20px 30px 40px; }

Ответ:

 (1) 10 

 (2) 20 

 (3) 30 

 (4) 40 

Номер 4 
Выберите верные утверждения:

Ответ:

 (1) кегль шрифта влияет на межбуквенное расстояние 

 (2) атрибут float можно применить к строковому элементу разметки 

 (3) используя CSS, можно полностью переопределить форму представления элемента HTML-разметки 

 (4) для линии границы разных сторон прямоугольника блочного элемента разметки можно задать различный стиль 

 (5) атрибут border нельзя применить к строковому элементу разметки 

Номер 5 
Укажите правильный вариант размещения таблицы стилей в документе:

Ответ:

 (1) <style type="text/css"> H1 { color: blue } </style>  

 (2) <LINK rel="stylesheet" href="one.css" type="text/css">  

 (3) <style HR {width:250}>  

 (4) <style type="text/css" P { color: blue }>  

Номер 6 
Фон веб-страницы белый. Возможно ли не указывать для тега body свойство background: white в целях оптимизации кода и сокращения размера таблицы стилей?

Ответ:

 (1) нет, так как это необходимый атрибут, без которого остальные значения body будут проигнорированы 

 (2) нет, так как некоторые браузеры по умолчанию используют серый цвет 

 (3) да, белый фон установлен по умолчанию в всех браузерах 

 (4) нет, поскольку в случае, если пользователь изменил белый фон в свойствах системы, то будет указан именно цвет, определенный пользователем 

Упражнение 8:
Номер 1 
Какого эффекта можно добиться, применяя технику определения свойств идентификаторов, описанную в следующем фрагменте кода:
  
ul li a div.menu {background: Blue} :

Ответ:

 (1) div.menu приобретет указанное свойство лишь тогда, когда будет находится внутри конструкции <ul> <li><a...> 

 (2) селектор a приобретет свойство , описанное в таблице стилей лишь в том случае, когда он будет находится внутри такой конструкции <div class="menu"> <ul> <li>... 

 (3) все селекторы приобретут одинаковые свойства 

 (4) селекторы a, li, ul приобретут идентичные свойства вне зависимости от вложений и позиционирования 

 (5) данная техника не даст требуемого результата 

Номер 2 
Какое из приведенных ниже утверждений относительно приоритетов стилевых таблиц разработчика и пользовательских стилевых таблиц согласно спецификации CSS 2 Level, исключая установку "!important", является верным:

Ответ:

 (1) приоритет выше у стилевых таблиц разработчика, чем у пользовательских 

 (2) приоритет зависит от свойств браузера 

 (3) приоритет зависит от локальной политики безопасности 

 (4) приоритет выше у пользовательских стилевых таблиц, чем у таблиц разработчика 

 (5) данные приоритеты ничем не могут быть обозначены 

Номер 3 
Выберите верный синтаксис применения параметра ID:

Ответ:

 (1) #{color:red} 

 (2) #.my{color:red} 

 (3) #my{color:red} 

 (4) .#my{color:red} 

Номер 4 
Можно ли переопределить цвет текста следующего элемента через импортируемый стиль:
  
<p style="color:red;">...</p> :

Ответ:

 (1) можно переопределить 

 (2) нельзя переопределить 

 (3) можно через импорт файла во внешнее описание стиля из элемента разметки LINK 

Номер 5 
Какое значение не может приобретать свойство height?

Ответ:

 (1) inherit 

 (2) none 

 (3) 40pt 

 (4) auto 

 (5) 77% 

Номер 6 
Какое из приведенных ниже свойств, определяющих положение элемента, содержит ошибку?

Ответ:

 (1) Bottom: 5em 

 (2) Right: auto 

 (3) Left: 10% 

 (4) Top: absolute 

 (5) Position: inherit 

Упражнение 9:
Номер 1 
Как установить цвет фона для заголовка h1?

Ответ:

 (1) h1 (background-color:#FFFFFF) 

 (2) h1.background-color:#FFFFFF 

 (3) h1 * {background-color:#FFFFFF} 

 (4) h1 {background-color:#FFFFFF} 

 (5) h1=background-color:#FFFFFF 

Номер 2 
Как изменить цвет ссылки на красный при наведении на нее курсором?

Ответ:

 (1) a:linc {color:red;} 

 (2) a:hover {color:red;} 

 (3) a:active {color:red;} 

 (4) a:visited {color:red;} 

Номер 3 
Какой символ необходимо вставить вместо вопросительного знака для объединения одинаковых свойств, с целью сокращения длины представленного фрагмента кода:
  
h1 ?  h2  {
font-family:  Verdana,  Geneva, Arial, Helvetica,  sans-serif;
font-size:   1.2em;
} :

Ответ:

 (1) пробел 

 (2) знак равенства 

 (3) двоеточие 

 (4) точку с запятой 

 (5) запятую 

Номер 4 
На какой параметр указывает правило !important в приведенном ниже фрагменте кода?
  
P{font-size: 10px !important } :

Ответ:

 (1) это комментарий 

 (2) свойство идентификатора p имеет пониженный приоритет 

 (3) свойство идентификатора p имеет повышенный приоритет 

 (4) свойство идентификатора p не будет учитываться при выводе на монитор 

 (5) данная запись никак не влияет на свойства идентификатора p 

Номер 5 
Как обозначается универсальный селектор?

Ответ:

 (1) @ 

 (2) # 

 (3) * 

 (4) $ 

 (5) ! 

Номер 6 
Какое значение не может приобретать свойство border-width?

Ответ:

 (1) thin 

 (2) -5 

 (3) 10 

 (4) medium 

 (5) thick 

Упражнение 10:
Номер 1 
Какая единица измерения не применяется в CSS 2?

Ответ:

 (1) em 

 (2) pc 

 (3) inc 

 (4) ex 

 (5) % (проценты) 

Номер 2 
Отметьте псевдоселекторы:

Ответ:

 (1) p:first-letter 

 (2) a:link 

 (3) a 

 (4) a:visited 

 (5) a, p 

Номер 3 
Какого эффекта можно добиться, применяя технику определения свойств идентификаторов, описанную в следующем фрагменте кода:
  
div.menu ul li a {background: Yellow} :

Ответ:

 (1) div.menu приобретет указанное свойство лишь тогда, когда будет находится внутри конструкции <ul> <li><a...> 

 (2) селектор a приобретет свойство , описанное в таблице стилей лишь в том случае, когда он будет находится внутри такой конструкции <div class="menu"> <ul> <li>... 

 (3) все селекторы приобретут одинаковые свойства 

 (4) селекторы a, li, ul приобретут идентичные свойства вне зависимости от вложений и позиционирования 

Номер 4 
Какое значение не может приобретать свойство width?

Ответ:

 (1) inherit 

 (2) none 

 (3) 40pt 

 (4) auto 

 (5) 77% 

Номер 5 
В чём состоят отличия между примерами, представленными в следующем фрагменте кода
  
/* первый пример */
р, i {
font-family:  Verdana,  Geneva, Arial, Helvetica,  sans-serif
}
/* второй пример */
P    i {
font-family:  Verdana,  Geneva, Arial, Helvetica,  sans-serif} :

Ответ:

 (1) конструкция в первом примере содержит недопустимые синтаксические ошибки, и браузер будет игнорировать указанные свойства селекторов. Во втором примере селектор p приобретает указанные свойства лишь в случае позиционирования внутри селектора i 

 (2) в первом примере селектор i приобретает указанные свойства лишь в случае позиционирования внутри селектора p. Во втором примере свойства идентичны 

 (3) в первом примере свойства двух селекторов p и i идентичны, а во втором селектор i приобретает указанные свойства лишь в случае позиционирования внутри селектора p 

 (4) свойства идентичны, запятая используется лишь для удобства восприятия 

 (5) в первом примере свойства двух селекторов p и i идентичны. Во втором примере содержатся ошибки, браузер будет игнорировать данные строки 

Номер 6 
Задан фрагмент кода:

<div id="at">AspirantTest</div> 

Какой стиль будет применен к AspirantTest?

Ответ:

 (1) #at { position:relative; height:24px; } 

 (2) .at { position:relative; height:24px; } 

 (3) div.at { position:relative; height:24px; } 

 (4) #AspirantTest { position:relative; height:24px; } 

Упражнение 11:
Номер 1 
Что произойдет после обработки браузером следующего фрагмента кода:
  
<div style="width: 440px; height: 100px; overflow: auto">содержимое блока</div>

Ответ:

 (1) размеры блока будут увеличены в случае необходимости 

 (2) если содержимое блока превышает по размерам установленные величины, то нижняя часть обрезается 

 (3) если содержимое превышает размеры блока, то появляется элемент прокрутки 

 (4) содержимое автоматически будет прокручиваться, если не помещается в установленные рамки блока 

 (5) если содержимое блока занимает меньше места, чем обозначено, то блок будет уменьшен до меньших размеров 

Номер 2 
Каким будет значение отступа от левого края документа до первого символа заголовка (H1) после обработки браузером следующего фрагмента кода:
  
<html><head><tit1e></title>>
<style>
body {
margin:   0 0 0 100px;
padding: 0;
} 
#box{
margin: 0 0 0 50px;
padding: 0;
}
#container{
margin:  0 0 0 50px;
padding: 0;
}
hi {margin: 0 0 0 50px;
padding: 0;
}
</style>
</head>
<body>
<div id="container">/div>
<div id= "box"<hl>Text</hl></div>
</body>
</html> :

Ответ:

 (1) 200px 

 (2) 150px 

 (3) 250px 

 (4) 100px 

 (5) 50px 

Номер 3 
В чем разница между элементами разметки DIV и SPAN?

Ответ:

 (1) DIV - блочный элемент разметки, а SPAN - строковый элемент разметки 

 (2) между ними нет разницы 

 (3) разница определяется особенностями браузера 

 (4) SPAN - блочный элемент разметки, а DIV - строковый элемент разметки 

Номер 4 
Какой стиль имеет наивысший приоритет?

Ответ:

 (1) H1{font-weight:bold; font-size:12pt} 

 (2) <H1 style="font-weight:bold; font-size:12pt"> 

 (3) H1.style { font-weight:bold; font-size:12pt} 

 (4) P H1{font-weight:bold; font-size:12pt} 

Номер 5 
Какие из элементов разметки можно пересекать строковыми элементами разметки согласно DTD HTML 4.0:

Ответ:

 (1) I 

 (2) P 

 (3) B 

 (4) A 

 (5) TD 

Номер 6 
Каким будет порядок расположения слова "Box" и самого блока после обработки браузером следующего фрагмента кода:
  
<body style="margin: 0; padding: 0">
<div style="border: lpx solid;  clear:  both; float: right; position: static; left:  0; width: 50%;">Box</div>

Ответ:

 (1) блок прижат к левому краю страницы; слово "Box" - справа от блока 

 (2) блок прижат к левой части страницы; слово "Box" прижато к его правому краю 

 (3) блок занимает всю ширину страницы; слово "Box" прижато к правому краю 

 (4) блок прижат к правому краю страницы; слово "Box" прижато к левой границе блока 

 (5) блок расположен посередине страницы; слово "Box" прижато к его правому краю 

Упражнение 12:
Номер 1 
Эквивалентны ли следующие описания стилей?

a)


div {padding:10px;} 
p {margin:0px;}


б)


div {padding:0px;}
p {margin:10px;}:

Ответ:

 (1) эквивалентны 

 (2) описания неэквивалентные 

 (3) каждый браузер отображает по-своему 

 (4) описания ошибочны 

Номер 2 
Чему равно поле отступа текста от левой границы страницы в примере:
  
body {padding-left:20px;}
div {padding-left:0px;margin:5px;}
p {padding:5px;}
...
<body>
<div>
<p>
...
</p>
</div>
</body> :

Ответ:

 (1) 20px 

 (2) 10px 

 (3) 30px 

 (4) отступ умолчания 

Номер 3 
Какие из следующих атрибутов являются характеристиками границы блока?

Ответ:

 (1) border-top-width 

 (2) border-style 

 (3) border-bottom 

 (4) border-width 

 (5) border 

Номер 4 
Какие из следующих элементов разметки являются блоками?

Ответ:

 (1) DIV 

 (2) P 

 (3) A 

 (4) TD 

 (5) UL 

Номер 5 
Чем определяется ширина поля между границами вложенных друг в друга блоков?

Ответ:

 (1) атрибутами margin и padding охватывающего блока 

 (2) атрибутами margin и padding вложенного блока 

 (3) атрибутом padding охватывающего блока и атрибутом margin вложенного блока 

 (4) относительной позицией вложенного блока 

Номер 6 
Чему равен внешний отступ (margin) параграфа для следующего описания:
  
div {margin:20px;}
...
<div>
<p>
...
</p>
</div>

Ответ:

 (1) 20px 

 (2) отступ умолчания 

 (3) 20px+отступ умолчания 

 (4) 10px 

Упражнение 13:
Номер 1 
Для чего нужен атрибут clear?

Ответ:

 (1) запрещает обтекание плавающего блока 

 (2) запрещает обтекание данным блоком плавающего элемента разметки 

 (3) нет такого атрибута CSS 

 (4) очищает элемент 

Номер 2 
Какие из следующих атрибутов являются атрибутами управления цветом?

Ответ:

 (1) color 

 (2) text-color 

 (3) background-color 

 (4) border-top-color 

 (5) color-border 

Номер 3 
Укажите правильный вариант описания цвета границы блочного элемента:

Ответ:

 (1) border-color:#003366 

 (2) border-top-color:superlightblue 

 (3) color:navy 

 (4) text-color:#000fff 

Номер 4 
Какие из следующих атрибутов CSS описывают свойства блоков?

Ответ:

 (1) color 

 (2) background 

 (3) margin 

 (4) width 

 (5) padding 

 (6) text-decoration 

Номер 5 
Какой из атрибутов CSS определяет блочный элемент разметки как обтекаемый элемент разметки?

Ответ:

 (1) align 

 (2) float 

 (3) clear 

 (4) center 

Номер 6 
Какие значения может принимать атрибут float?

Ответ:

 (1) right 

 (2) left 

 (3) top 

 (4) bottom 

 (5) both 

Упражнение 14:
Номер 1 
Наследуется ли цвет текста охватывающего блока вложенным блоком?

Ответ:

 (1) наследуется 

 (2) не наследуется 

 (3) наследуется только у параграфа 

 (4) наследуется только у div 

Номер 2 
Какой из атрибутов определяет цвет фона блочного элемента разметки?

Ответ:

 (1) text-background-color 

 (2) background-color 

 (3) block-background 

 (4) text-background 

Номер 3 
В чем разница между установкой цвета фона для строкового элемента разметки и блочного?

Ответ:

 (1) разницы нет 

 (2) для блочного элемента заливается установленным цветом весь блок, а для строкового только фрагмент текста 

 (3) для строкового элемента заливается установленным цветом весь блок, а для блочного только фрагмент текста 

Номер 4 
Какая запись из ниже перечисленных отменяет наличие границы у блока?

Ответ:

 (1) border:none 

 (2) border-width:0px 

 (3) border-style:invisible 

 (4) border: 0 

Номер 5 
Какая из записей является аналогом следующего HTML-фрагмента?
  
<div><font color=navy>...</font></div>

Ответ:

 (1) #navy {color:navy;} ... <div><p id=navy>...</p></div>  

 (2) #navy {color:navy;} ... <div><i id=navy>...</i></div>  

 (3) <div><span style="color:navy;">...</span></div> 

 (4) <div><em style="color:navy;font-style:normal;">...</em></div> 

Номер 6 
Что определяет атрибут color?

Ответ:

 (1) цвет всех компонентов блочного элемента разметки 

 (2) цвет границы блочного элемента разметки 

 (3) цвет текста в блочном элементе разметки 

 (4) цвет текста в строковом или блочном элементе разметки 

Упражнение 15:
Номер 1 
С помощью какого свойства можно задать расстояние между областью содержания элемента и его рамкой?

Ответ:

 (1) padding 

 (2) margin 

 (3) field-size 

 (4) max-width 

 (5) border-space 

Номер 2 
Для задания промежутков между ячейкам таблицы используется свойство?

Ответ:

 (1) border-collapse 

 (2) border-size 

 (3) border-spacing 

 (4) caption 

 (5) empty-cells 

Номер 3 
Страница имеет активную полосу прокрутки. Каким будет поведение расположенного на странице элемента в случае, если он обладает свойством position: fixed?

Ответ:

 (1) элемент должен прокручиваться вместе с остальной частью страницы 

 (2) элемент не должен прокручиваться вместе с остальной частью страницы 

 (3) такое значение недопустимо 

 (4) данное свойство не указывает на поведение элемента в случае прокрутки страницы 

 (5) позиция элемента зависит от значения тега body 

Номер 4 
К какой группе атрибутов относятся атрибуты color и background-color?

Ответ:

 (1) text properties 

 (2) block properties 

 (3) color and background properties 

 (4) эти атрибуты относятся к различным группам атрибутов CSS 

Номер 5 

div #side {
border-color: green;
border-color-top: black;
}
  
  Какого цвета будет рамка со всех сторон элемента div?

Ответ:

 (1) все 4 стороны чёрные 

 (2) все 4 стороны зелёные 

 (3) три стороны зелёные, верхняя чёрная 

 (4) рамки вообще не будет из-за конфликта в CSS 

 (5) одна сторона зелёная, верхняя сторона чёрная 

Номер 6 

div #side {
border-color: red;
border-color-top: black;
}
  
  Какого цвета будет рамка со всех сторон элемента div?

Ответ:

 (1) все 4 стороны чёрные 

 (2) три стороны красные, верхняя чёрная 

 (3) все 4 стороны красные 

 (4) рамки вообще не будет из-за конфликта в CSS 

 (5) одна сторона красная, верхняя сторона чёрная 

Упражнение 16:
Номер 1 
Какие из перечисленных ниже определений свойства clip являются верными?

Ответ:

 (1) clip: inherit 

 (2) clip: auto 

 (3) clip: (0 0 0 0) 

 (4) clip: rect (20inc 25px) 

 (5) clip: rect (30px, 150px, auto, 2px) 

Номер 2 
Какая из приведённых ниже конструкций является верной для следующего фрагмента кода:
  
P#simple{ свойства } :

Ответ:

 (1) …<class p="simple"> … 

 (2) …<p id="simple"> … 

 (3) …<p class="simple"> … 

 (4) …<div p="simple"> … 

 (5) …<"simple" p> … 

Номер 3 
Какой декоративный эффект будет у текста Example после выполнения приведённого ниже фрагмента кода:
  
<body>
<div style="text-decoration:  underline">
First Element
<span style="text-decoration:  none">Example</span>
</div>
</body> :

Ответ:

 (1) отсутствие эффекта 

 (2) текст будет визуально скрыт 

 (3) декоративный эффект в виде зачеркивания 

 (4) декоративный эффект в виде надчеркивания 

 (5) декоративный эффект в виде подчеркивания 

Номер 4 
Укажите правильный способ задания фонового изображения:

Ответ:

 (1) background-image: url(pic.gif) 

 (2) background-image: pic.gif 

 (3) background-color: url(pic.gif) 

 (4) background-url: pic.gif 

 (5) все варианты неверны 

Номер 5 
Каким будет значение отступа от верхнего края страницы до верхнего края строки First после обработки браузером следующего фрагмента кода 
  
<style>
body { margin: 0;
padding:0 
}
.first {
background: Aqua;
position: absolute;
left: 100px;
top: 50px;
margin: 100px;
padding: 10px
}
</style>
<body>
<div class="first">First</div>
</body>
</html>

Ответ:

 (1) 150px 

 (2) 50px 

 (3) 100px 

 (4) 170px 

 (5) 160px 

Номер 6 
В каких из шести приведенных ниже строк кода допущены ошибки:
  
1: .box  {
2: topmargin: 10pх;
3: border-bottom-style: solid green lpx;
4: border-left: 0.05em dotted green; 
5: toppadding: 3cm;
6: }

Ответ:

 (1) 1 

 (2) 2 

 (3) 3 

 (4) 4 

 (5) 5 

 (6) 6 

Упражнение 17:
Номер 1 
Каким будет порядок расположения слоев после обработки браузером следующего фрагмента кода:
  
<style type="text/css">
div{
position:   static;
}
</style>
<body>
<div style="z-index: l; background: orange">l</div>
<div style="z-index: 2; background: Green;">2</div>
<div style="z-index: 3; background: Blue;">3</div>
</body> :

Ответ:

 (1) расположение слоев - по ширине одной строки: слева оранжевый, посередине синий, справа - зеленый 

 (2) первая строка - оранжевый слой, вторая - синий, третья - зеленый 

 (3) будет видна только первая строка с оранжевым фоном 

 (4) первая строка - оранжевый слой, вторая - зеленый, третья - синий 

 (5) будет видна только первая строка с синим фоном 

Номер 2 
В каких строках приведенного ниже фрагмента кода допущены ошибки:
  
1: #box{
2: text-align:  11%;
3: font-family:  Arial, Helvetica,  sans-serif;
4: font-size:  xxx-bold;
5: font-style:  none;
6: text-decoration:  underline;
}  :

Ответ:

 (1) 1 

 (2) 2 

 (3) 5 

 (4) 3 

 (5) 4 

 (6) 6 

Номер 3 
Каким будет порядок расположения слоев после обработки браузером следующего фрагмента кода:
  
<style type="text/css">
div{
position:   static;
}
</style>
<body>
<div style="z-index: 2; background: Green;">2</div>
<div style="z-index: l; background: orange">l</div>
<div style="z-index: 3; background: Blue;">3</div>
</body>:

Ответ:

 (1) расположение слоев - по ширине одной строки: слева оранжевый, посередине синий, справа - зеленый 

 (2) первая строка - синий слой, вторая - оранжевый, третья - зеленый 

 (3) будет видна только первая строка с оранжевым фоном 

 (4) первая строка - оранжевый слой, вторая - зеленый, третья - синий 

 (5) будет видна только первая строка с синим фоном 

Номер 4 
Какими свойствами будет обладать блочный элемент, определенный следующим образом
  
#bох{
text-align: right;
text-indent: 24px;
font: italic small-caps 1em Verdana; 
}

Ответ:

 (1) выравнивание абзаца по центру; межстрочное расстояние 24px; курсив; высота шрифта Verdana 1em 

 (2) выравнивание первой строки по правому краю; отступ от левого края 24px; курсив, высота первого абзаца 1em; шрифт Verdana; большие заглавные буквы 

 (3) выравнивание текста по правому краю; отступ первой строки 24px; курсив, размер шрифта Verdana 1em; малые заглавные буквы 

 (4) отступ от родительского элемента слева и справа по 24px; выравнивание текста - по умолчанию; курсив, размер шрифта Verdana 1em, малые прописные буквы 

 (5) обтекание шрифта с отступом 24px по левому краю; начертание - курсив; большие заглавные буквы; Шрифт - Verdana; размер 1em 

Номер 5 
В каких строках приведенного ниже фрагмента кода допущены ошибки
  
1: #box{
2: font-family:  Arial, Helvetica,  sans-serif;
3: font-size:  xxx-small;
4: font-style:  none;
5: text-decoration:  underline;
6: text-align:  25%
7: }

Ответ:

 (1) 5 

 (2) 2 

 (3) 3 

 (4) 1 

 (5) 4 

 (6) 6 

 (7) 7 

Номер 6 
Как будет располагаться блочный элемент на странице
  
<body style="margin: 2em 5em">
<div style="border: 1px solid black;
width: 10em; top: 1em; position: absolute;  right: 100px;">B0X</div>

Ответ:

 (1) отступ справа страницы 100px + 10em, отступ сверху 3em, ширина блока 20em 

 (2) отступ справа страницы 100px + 10em, отступ сверху 1em, ширина блока 10em 

 (3) отступ справа отсутствует. Отступ сверху 2em 

 (4) отступ справа страницы 100px+ 12em, отступ сверху отсутствует. Ширина блока 100px + 10em + 2em 

 (5) отступ справа страницы 100px, сверху 1em, ширина блока 10em 

Упражнение 18:
Номер 1 
Каким будет порядок расположения букв после обработки браузером следующего фрагмента кода:
  
<style type-"text/css">
div{position: absolute}
</style>
<body>
<div style="z-index:l; background:   orange">CCC</div>
<div style="z-index:2; background:   orange">BB</div>
<div style="z-index:3; background:   orange">A</div>
</body> :

Ответ:

 (1) слева направо ABC 

 (2) будет видна первая строка с одним символом A 

 (3) слева направо CCC 

 (4) первая строка CCC, вторая строка BB, третья - A 

 (5) слева направо CBA 

Номер 2 
Необходимо расположить один абзац (all, оранжевого цвета) рядом с правой частью блочного элемента. Какое свойство необходимо применить к блочному элементу all, что бы блок (right) был расположен справа от него:
  
<style>
body{margin:   0; padding:   0}
#all{
background:   orange;
width:   300рх;
............
}
</style>
<body>
<div id="all">all</div>
<div>right</div>

Ответ:

 (1) float: right 

 (2) clear: left 

 (3) float: left 

 (4) padding: left 

 (5) margin: right 

Номер 3 
Какое из перечисленных ниже средств предназначено для создания отступов между внешней границей блочного элемента и его содержанием?

Ответ:

 (1) Left 

 (2) Padding 

 (3) Border 

 (4) Margin 

 (5) Top 

Номер 4 
Какой порядок следования трех блочных элементов First, Second и Third в приведённых ниже фрагментах кода является верным 
  
ПЕРВЫЙ ПРИМЕР

  
<body>
<div style="display: inline;">First </div>
<div style="display: block;">Second </div>
<div sty1e=" display: inline;">Third</div>
</body>
  
  
ВТОРОЙ ПРИМЕР

  
<body>
<div style="display: block;">First </div>
<div style="display: inline;">Second </div>
<div style="display: block;">Third</div>
</body>

Ответ:

 (1) блоки будут располагаться на трех разных строках соответственно 

 (2) в первом примере First, Second и Third расположены каждый на новой строке; во втором примере все они расположены на одной строке 

 (3) в первом примере - First , на той же строке - Second и на следующей строке - Third; во втором примере - First, на следующей строке - Second и рядом - Third 

 (4) в первом примере First - на первой строке. Second и Third - на второй строке; на втором примере First и Second - на первой строке, Third - на второй 

 (5) оба примера одинаковы с точки зрения относительного расположения блочных элементов и будут располагаться на одной строке 

Номер 5 
Что произойдет после обработки браузером следующего фрагмента кода?
  
<div style="width: 440px; height: 100px; overflow: auto">содержимое блока</div>

Ответ:

 (1) если содержимое превышает размеры блока, то появляется элемент прокрутки 

 (2) если содержимое блока превышает по размерам установленные величины, то нижняя часть обрезается 

 (3) содержимое автоматически будет прокручиваться, если не помещается в установленные рамки блока 

 (4) если содержимое блока занимает меньше места, чем обозначено, то блок будет уменьшен до меньших размеров 

 (5) размеры блока будут увеличены в случае необходимости 

Номер 6 
Какое значение по умолчанию у margin-right :

Ответ:

 (1) auto 

 (2) 0 

 (3) 100% 

 (4) 10 

Упражнение 19:
Номер 1 
В каких строках в приведенном ниже фрагменте кода допущены ошибки:

.box {
topmargin: 10рх;
border-bottom-style:solid green 1px;
border-left:   0.05еm dotted green;
toppadding:   Зcm;
}

Ответ:

 (1) 1 

 (2) 2 

 (3) 3 

 (4) 4 

 (5) 5 

 (6) 6 

Номер 2 
Какое из свойств, определенных в следующем фрагменте кода, содержит ошибку:
  
<div style="position:   relative;
border:   1px solid red;
width:   10em;
margin:   10px 5px 10em;
top:   10px;
left:   50px 100px">5</div> :

Ответ:

 (1) Position 

 (2) Left 

 (3) Top 

 (4) все значения указаны корректно 

 (5) Border 

Номер 3 
Какой порядок следования списка свойств border в приведённом ниже фрагменте кода является верным:
  
border {medium outset #063} :

Ответ:

 (1) border-height, border-width, border-color 

 (2) border-style, border-color, border-length 

 (3) border-length, border-style, border-color 

 (4) border-width, border-style, border-color 

 (5) border-style, border-width, border-color 

Номер 4 
Какие из перечисленных ниже определений свойства clip являются верными?

Ответ:

 (1) Clip: inherit 

 (2) Clip: (0 0 0 0) 

 (3) Clip: rect (20inc 25px) 

 (4) Clip: rect (30px, 150px, auto, 2px) 

 (5) Clip: auto 

Номер 5 
Какая ошибка допущена в приведенном ниже фрагмента кода
  
div{
position:   absolute;
width:   15%;
height:   1em;
top:   0;
left:   auto;
z-index:   auto;
}

Ответ:

 (1) ошибок нет 

 (2) ошибки при указании значений свойств left и z-index 

 (3) неправильная величина при указании значения свойства width 

 (4) неверное значение свойства z-index 

 (5) неверно объявлено значение свойства left 

Номер 6 
Какой перечень свойств класса, описанного следующим фрагментом кода, является верным?
  
body{margin:   0;padding:   0;}
.test {
background-color:   orange;
background:   green;
margin-left:   50px;
margin:   0 0 0 100px;
border-left-raidth:   2px;
border-left:   solid white 4px;
border-left-style:   dashed;
}

Ответ:

 (1) фон - оранжевый, внешний отступ слева 50px, бордюр - сплошная линия 4px 

 (2) фон - оранжевый, внешний отступ слева 100px, бордюр - сплошная линия 2px 

 (3) все свойства - по умолчанию 

 (4) фон - зеленый, внешний отступ слева 150px, бордюр - 6px сплошная линия 

 (5) фон - зеленый, внешний отступ слева 100px, бордюр - пунктирная линия 4px 

Упражнение 20:
Номер 1 
Как будет располагаться блок со свойствами, определенными в следующем фрагменте кода: 
  
<body>
<div style="border:2px solid navy;
margin-left:   auto;
margin-right:   auto" align="right">simple text</div> 
</body> :

Ответ:

 (1) длина блока 300px; расположение - посередине страницы 

 (2) длина блока по ширине страницы; текст вправо 

 (3) отступы слева и справа одинаковой длины -50px, все остальное внутренне пространство займет содержимое блока 

 (4) отступы слева и справа отсутствуют; положение определяется родительским элементом 

Номер 2 
Имеется абзац, состоящий из нескольких строк. Как будет выглядеть первая строка данного абзаца, свойства которой определены следующим образом:

  
<style>
p:first-line{
background:  Blue;
font-size:   150%;
}
p:first-letter{
font-size:   200%;
}
p{
font-size:   100%; 
background:   Orange;
}
</style>

Ответ:

 (1) фон - голубой, размер шрифта первого символа в три раза превышает размер шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (2) фон первого символа - оранжевый; фон строки - голубой; размер шрифта первого символа в два раза больше шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (3) фон голубой , размер шрифта первого символа в два раза превышает размер шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (4) фон - по умолчанию, размер шрифта первого символа в три раза больше размер шрифта первой строки; шрифт первой строки по - умолчанию 

 (5) фон оранжевый, размер шрифта первого символа в полтора раза превышает размер шрифта первой строки; размер шрифта первой строки в 2 раза больше следующих 

Номер 3 
Что означает запись padding:2ex?

Ответ:

 (1) внутренний отступ равен двум высотам буквы х текущего шрифта элемента 

 (2) внешний отступ равен двум высотам буквы х текущего шрифта элемента 

 (3) внутренний отступ равен двум пикселям 

 (4) внутренний шрифт равен двум высотам буквы х текущего шрифта элемента 

Номер 4 
Каким атрибутом определяется внешний отступ от границы блочного элемента?

Ответ:

 (1) padding 

 (2) border 

 (3) margin 

 (4) shape 

Номер 5 
Какое из значений свойства background-position расположит фоновую картинку по центру и правому края заданного блока?

Ответ:

 (1) {background-position: left top;} 

 (2) {background-position: right center;} 

 (3) {background-position: right top;} 

 (4) {background-position: right middle;} 

 (5) {background-position: right bottom;} 

Номер 6 
Как будет располагаться блок со свойствами, определенными в следующем фрагменте кода:
  
<body>
<div style="border:2px solid navy;
width:   150px;
margin-left:   auto;
margin-right:  auto;" align="right">simple text</div> 
</body>

Ответ:

 (1) отступы слева и справа отсутствуют; длина блока 150px; положение определяется родительским элементом 

 (2) длина блока 300px; расположение - посередине страницы 

 (3) длина блока 150px; отступы слева и справа одинаковые; пространство между ними займет содержимое блока 

 (4) отступы слева и справа одинаковой длины -150px, все остальное внутренне пространство займет содержимое блока 

 (5) длина блока 150px; отступ слева занимает все свободное пространство; блок прижат к правому краю 

Упражнение 21:
Номер 1 
Какое из свойств, определенных в следующем фрагменте кода, содержит ошибку:
  
<div style="position:   relative;
border:   1px solid;
width:   100px 10em;
margin:   10px 5px 10em;
top:   10px;
left:   50px ">5</div> :

Ответ:

 (1) Position 

 (2) Left 

 (3) Width 

 (4) Top 

 (5) все значения указаны корректно 

 (6) Border 

Номер 2 
К какой группе шрифтов относится гарнитура Courier?

Ответ:

 (1) system 

 (2) serif 

 (3) monospace 

 (4) Helvetica 

 (5) такой гарнитуры нет 

Номер 3 
Во внешней таблице стилей определен шрифт идентификатора p, равный 14px; во внедренной таблице тот же идентификатор p со свойствами шрифта равен 2em; в элементе разметки все тот же идентификатор приобретает размеры шрифта 0.85em. Каким будет размер шрифта после применения описанной выше схемы форматирования?

Ответ:

 (1) 0.85em 

 (2) будет использован размер шрифта по умолчанию 

 (3) 14px 

 (4) 2em 

 (5) размер будет вычислен на основании среднего арифметического значений 14px, 2em и 0.85em 

Номер 4 
Какой из атрибутов стилей определяет гарнитуру шрифта?

Ответ:

 (1) font-family 

 (2) font-style 

 (3) font-variant 

 (4) font-align 

Номер 5 
Какой из перечисленных вариантов задает курсивный текст?

Ответ:

 (1) font-type: italic 

 (2) font-style:italic 

 (3) font-decoration:italic 

 (4) font-transform:italic 

 (5) font-glyph:italic 

Номер 6 
Какое из свойств, определенных в следующем фрагменте кода, содержит ошибку:
  
<div style="position:   normal;
border:   1px solid;
width:   10em;
margin:   10px 5px 10em;
top:   10px;
left:   50px ">5</div>

Ответ:

 (1) position 

 (2) border 

 (3) width 

 (4) margin 

 (5) top 

 (6) все значения указаны корректно 

Упражнение 22:
Номер 1 
Что произойдет после обработки браузером блочного элемента со свойством width 40em если текст, находящийся в нем, не будет помещаться по ширине?

Ответ:

 (1) появится возможность горизонтального скроллинга 

 (2) появится возможность вертикальной прокрутки 

 (3) часть текста будет обрезана 

 (4) данное свойство не влияет на поведение текста 

 (5) часть текста будет перенесена на следующую строку 

Номер 2 
Какой из атрибутов CSS определяет начертание шрифта?

Ответ:

 (1) font-family 

 (2) font-style 

 (3) font-size 

 (4) font-variant 

 (5) font-weight 

 (6) font-decoration 

Номер 3 
Какая группа шрифтов обычно используется для отображения текста в полях ввода?

Ответ:

 (1) system 

 (2) serif 

 (3) monospace 

 (4) Courier New 

Номер 4 
В каких единицах задается свойство шрифта x-height?

Ответ:

 (1) px 

 (2) % 

 (3) pm 

 (4) mm 

 (5) ex 

Номер 5 
При помощи какого свойства можно задать цвет фона?

Ответ:

 (1) background 

 (2) color 

 (3) bgcolor 

 (4) fon-color 

 (5) background-color 

Номер 6 
Каким будет порядок расположения слова "Box" и самого блока после обработки браузером следующего фрагмента кода
  
<body style="margin:   0; padding:   0">
<div style="border:   1px solid;  clear:  both; float:   right; position: static; left:   0; width:   50*;">Box</div>

Ответ:

 (1) блок прижат к правому краю страницы; слово "Box" прижато к левой границе блока 

 (2) блок занимает всю ширину страницы; слово "Box" прижато к правому краю 

 (3) блок прижат к левой части страницы; слово "Box" прижато к его правому краю 

 (4) блок прижат к левому краю страницы; слово "Box" - справа от блока 

 (5) блок расположен посередине страницы; слово "Box" прижато к его правому краю 

Упражнение 23:
Номер 1 
Какое значение не может приобретать свойство clear?

Ответ:

 (1) top 

 (2) left 

 (3) none 

 (4) right 

 (5) both 

Номер 2 
В чем отличие свойств описания блоков текста от свойств описания текста?

Ответ:

 (1) свойства описания блоков текста относятся только к блочным элементам разметки, а свойства текста, как к блочным, так и к строчным элементам разметки 

 (2) свойства блоков текста определяют свойства блока как целого, в то время как свойства текста определяют взаимное расположение букв и слов внутри блока текста 

 (3) между этими свойствами нет разницы 

Номер 3 
Какой из атрибутов CSS определяет размер шрифта?

Ответ:

 (1) font-family 

 (2) font-style 

 (3) font-size 

 (4) font-variant 

 (5) font-weight 

 (6) font-decoration 

Номер 4 
Какой элемент HTML-разметки используется для установки гарнитуры шрифта?

Ответ:

 (1) <span class=family>...</span> 

 (2) <font face=...>...</font> 

 (3) <p id=font_face>...</p> 

 (4) <font famaly=...>...</font> 

Номер 5 
Какое из следующих определений кегля верно?

Ответ:

 (1) font-size:12pt 

 (2) font-variant:small-caps 

 (3) font-size:10px 

 (4) font-size:60% 

Номер 6 
Имеется абзац, состоящий из нескольких строк
  
<style>
p:first-line{
background:  White;
font-size:   150%;
}
p:first-letter{
font-size:   200%;
}
p{
font-size:   100%; 
background:   Orange;
}
</style>

Как будет выглядеть первая строка данного абзаца, свойства которой определены следующим образом?

Ответ:

 (1) фон белый, размер шрифта первого символа в два раза превышает размер шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (2) фон - белый, размер шрифта первого символа в три раза превышает размер шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (3) фон первого символа - оранжевый; фон строки - белый; размер шрифта первого символа в два раза больше шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (4) фон - по умолчанию, размер шрифта первого символа в три раза больше размер шрифта первой строки; шрифт первой строки по - умолчанию 

 (5) фон оранжевый, размер шрифта первого символа в полтора раза превышает размер шрифта первой строки; размер шрифта первой строки в 2 раза больше следующих 

Упражнение 24:
Номер 1 
Укажите неверное значение свойств word-spacing и letter-spacing:

Ответ:

 (1) normal 

 (2) center 

 (3) mm 

 (4) inherit 

 (5) px 

Номер 2 
Какие из следующих атрибутов CSS вызывают преобразование шрифта?

Ответ:

 (1) text-decoration 

 (2) text-transform 

 (3) text-align 

 (4) font-family 

 (5) font-style 

Номер 3 
Какие из следующих атрибутов CSS влияют на межбуквенное расстояние?

Ответ:

 (1) letter-spacing 

 (2) font-size 

 (3) font-variant 

 (4) line-height 

 (5) text-indent 

Номер 4 
Какая из следующих записей соответствует элементу разметки EM?

Ответ:

 (1) <span style="font-style:italic;">...</span> 

 (2) <div style="font-variant:italic;">...</div> 

 (3) <span style="font-weight:bold;">...</span> 

 (4) <div style="font:italic bold;">...</div> 

Номер 5 
Укажите доступные значения свойства font-size:

Ответ:

 (1) 10% 

 (2) 10em 

 (3) large 

 (4) big 

Номер 6 
Что понимают под гарнитурой шрифта?

Ответ:

 (1) тип шрифта 

 (2) набор начертаний 

 (3) начертание 

 (4) размер шрифта 

Упражнение 25:
Номер 1 
Какое свойство задает размер шрифта для текста?

Ответ:

 (1) size-font 

 (2) text-size 

 (3) size 

 (4) font-size 

 (5) text-font-size 

Номер 2 
Какие атрибуты влияют на межстрочное расстояние?

Ответ:

 (1) font-family 

 (2) line-height 

 (3) p:first-letter 

 (4) font-size 

Номер 3 
Какой из вариантов - аналог следующего элемента разметки: <u>...</u>?

Ответ:

 (1) <div style="text-decoration:underline;">...</div> 

 (2) <span style="text-transform:underline;">...</span> 

 (3) <u style="text-decoration:line-throught;">...</u> 

 (4) <span style="text-decoration:underline;">...</span> 

Номер 4 
Одинаковое ли расстояние между буквами в шрифтах различных гарнитур при равных кеглях?

Ответ:

 (1) неодинаковое 

 (2) одинаковое 

 (3) все определяется версией браузера 

Номер 5 
Какие из следующих атрибутов CSS влияют на выравнивание текста в блоке?

Ответ:

 (1) font-align 

 (2) text-align 

 (3) float 

 (4) vertical-align 

Номер 6 
Кегль определяет:

Ответ:

 (1) межстрочное расстояние 

 (2) размер заглавной буквы 

 (3) расстояние между базовыми линиями шрифта 

 (4) размер "очка" шрифта 

Упражнение 26:
Номер 1 
Можно ли изменять кегль в строковом элементе разметки?

Ответ:

 (1) можно 

 (2) нельзя 

 (3) только в момент перезагрузки страницы 

 (4) изменение не будет отображено на странице 

Номер 2 
Если присвоить свойству overflow значение auto, то при выходе текста за рамку блока:

Ответ:

 (1) текст будет обрезан автоматически 

 (2) текст не выведется вообще 

 (3) появятся полосы прокрутки 

 (4) будут активны полосы прокрутки, которые в данном режиме есть всегда в блоке 

 (5) текст выйдет за пределы блока 

Номер 3 
Что определяет атрибут line-height?

Ответ:

 (1) высоту строки, равную заглавной букве шрифта 

 (2) расстояние между базовыми линиями строк, расположенных друг под другом 

 (3) расстояние от верхней кромки строки до нижней кромки выше расположенной строки 

 (4) высоту строки, равную прописным буквам шрифта 

Номер 4 
Что подразумевает следующее описание:
  
<span style="text-transform:capitalize;">...</span>

Ответ:

 (1) фрагмент текста будет отображаться только заглавными буквами 

 (2) все слова во фрагменте текста будут начинаться с заглавных букв, а остальные буквы будут преобразованы в строчные 

 (3) в этом определении есть ошибка, поэтому оно ничего не подразумевает 

 (4) все слова во фрагменте текста будут преобразованы в строчные 

Номер 5 
Какой из следующих селекторов описывает свойства первой строки параграфа?

Ответ:

 (1) text-indent 

 (2) p:first-line 

 (3) p:first-letter 

 (4) first-line 

Номер 6 
Какие из перечисленных атрибутов определяют свойства текста?

Ответ:

 (1) font-size 

 (2) text-align 

 (3) line-height 

 (4) color 

 (5) text-transform 

 (6) letter-spacing 

Упражнение 27:
Номер 1 
В чем отличие свойств описания шрифта от свойств описания текста?

Ответ:

 (1) отличий нет 

 (2) свойства текста относятся ко всему элементу, а свойства шрифта только к его части 

 (3) свойства шрифта определяют начертание букв, а свойства текста их взаимное расположение внутри элемента разметки 

Номер 2 
Во внешней таблице стилей определен шрифт идентификатора p, равный 14px; во внедренной таблице тот же идентификатор p со свойствами шрифта равен 2em; в элементе разметки все тот же идентификатор приобретает размеры шрифта 0.85em. Каким будет размер шрифта после применения описанной выше схемы форматирования?

Ответ:

 (1) будет использован размер шрифта по умолчанию 

 (2) 23.8 px 

 (3) 14px 

 (4) 2em 

 (5) размер будет вычислен на основании среднего арифметического значений 14px, 2em и 0.85em 

Номер 3 
Какое свойство может принимать значения (normal / italic / oblique / inherit)?

Ответ:

 (1) font-variant 

 (2) font-weight 

 (3) font-style 

 (4) font-type 

 (5) font-family 

Номер 4 
Можно ли, управляя межстрочным расстоянием, "наехать" строкой на строку?

Ответ:

 (1) нельзя, т.к. не существует отрицательного межстрочного расстояния 

 (2) можно, задав отрицательное межстрочное расстояние 

 (3) можно, задав значение атрибута line-height меньше, чем значение атрибута font-size 

Номер 5 
Найдите неверное описание:

Ответ:

 (1) H1 { font-size: 24px; color: red; border: black thin dotted } 

 (2) BODY { font-size=12px } 

 (3) H1 { color: red } 

 (4) H2 { font-size: 24px;} 

Номер 6 
Какой из вариантов - аналог следующего элемента разметки:
  
<p align=justify>...</p>

Ответ:

 (1) <span style="text-align:justify;">...</span> 

 (2) <p style="align:justify;">...</p> 

 (3) <div style="text-align:justify;">...</div> 

 (4) <p style="text-align:justify;">...</p> 

Упражнение 28:
Номер 1 
Можно ли использовать атрибут text-align в элементе разметки SPAN?

Ответ:

 (1) нельзя 

 (2) можно, но выглядит это не очень логично 

 (3) такого атрибута нет 

 (4) можно 

Номер 2 
Что задает следующий код:
  
<style type="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  </style>
</HEAD>
<BODY>
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
</BODY>

Ответ:

 (1) сделает начальную заглавную букву в два раза больше строки 

 (2) сделает начальную заглавную зависающую букву, захватывающую две строки 

 (3) сделает строку больше остального текста в три раза 

 (4) сделает первую строку в два раза больше текста 

Номер 3 
Укажите неверное значение свойств word-spacing и letter-spacing:

Ответ:

 (1) normal 

 (2) center 

 (3) mm 

 (4) inherit 

 (5) px 

Номер 4 
Для размещения элемента у левой или правой границы и обеспечения обтекания текста вокруг него используется свойство:

Ответ:

 (1) align 

 (2) float 

 (3) position 

 (4) margin 

 (5) padding 

Номер 5 
C помощью какого свойства указывается гарнитура шрифта для текстового элемента?

Ответ:

 (1) font-family 

 (2) font-type 

 (3) font-style 

 (4) font-variant 

 (5) font-weight 

Номер 6 
Является ли синтаксически правильным следующее описание:
  
<p style="text-indent=-20pt;">...</p>

Ответ:

 (1) является, т.к. отрицательное значение отступа допускается 

 (2) не является, т.к. отрицательное значение отступа в данном случае не допускается 

 (3) не является, т.к. вместо символа ":" в описании используется символ "=", что является синтаксический ошибкой 

Упражнение 29:
Номер 1 
Можно ли при описании первой строки параграфа определить отступ от границы предыдущего параграфа?

Ответ:

 (1) нельзя, т.к. это свойство всего элемента в целом 

 (2) можно, но лучше определить его в стиле описания элемента p 

 (3) нет такого атрибута 

Номер 2 
В каком примере будет создана начальная заглавная зависающая буква, захватывающая две строки?

Ответ:

 (1) P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } SPAN { text-transform: uppercase }  

 (2) P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } SPAN { text-transform: uppercase }  

 (3) P { font-size: 12pt; line-height: 12pt } SPAN { text-transform: uppercase }  

 (4) P, P:first-letter { font-size: 12pt; line-height: 12pt } SPAN { text-transform: uppercase }  

Номер 3 
Как будет выглядеть текст при выполнении данного кода:
  
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Какой-нибудь текст, содержащий не менее двух строк.</P> :

Ответ:

 (1) первые буквы каждого элемента P будут зелёными и размером '24pt'. Остаток первой форматированной строки будет голубой, а остаток параграфа - красный 

 (2) первые буквы каждого элемента P будут голубыми и размером '24pt'. Остаток первой форматированной строки будет зеленый , а остаток параграфа - красный 

 (3) первые буквы каждого элемента P будут красными и размером '24pt'. Остаток первой форматированной строки будет зеленый , а остаток параграфа - голубой 

 (4) первые буквы каждого элемента P будут зелёными и размером в два раза больше. Остаток первой форматированной строки будет голубой, а остаток параграфа - красный 

Номер 4 
Имеется абзац, состоящий из нескольких строк. Как будет выглядеть первая строка данного абзаца, свойства которой определены следующим образом:
  
<style>
p:first-line{
background:  White;
font-size:   150%;
}
p:first-letter{
font-size:   200%;
}
p{
font-size:   100%; 
background:   Orange;
}
</style>

Ответ:

 (1) фон белый, размер шрифта первого символа в два раза превышает размер шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (2) фон - белый, размер шрифта первого символа в три раза превышает размер шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (3) фон первого символа - оранжевый; фон строки - белый; размер шрифта первого символа в два раза больше шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (4) фон - по умолчанию, размер шрифта первого символа в три раза больше размер шрифта первой строки; шрифт первой строки по - умолчанию 

 (5) фон оранжевый, размер шрифта первого символа в полтора раза превышает размер шрифта первой строки; размер шрифта первой строки в 2 раза больше следующих 

Номер 5 
Имеется абзац, состоящий из нескольких строк. Как будет выглядеть первая строка данного абзаца, свойства которой определены следующим образом:

  
<style>
p:first-line{
background:  Blue;
font-size:   150%;
}
p:first-letter{
font-size:   200%;
}
p{
font-size:   100%; 
background:   White;
}
</style>

Ответ:

 (1) фон голубой, размер шрифта первого символа в два раза превышает размер шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (2) фон - белый, размер шрифта первого символа в три раза превышает размер шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (3) фон первого символа - белый; фон строки - голубой; размер шрифта первого символа в два раза больше шрифта первой строки; размер шрифта первой строки в полтора раза больше следующих 

 (4) фон - по умолчанию, размер шрифта первого символа в три раза больше размер шрифта первой строки; шрифт первой строки по - умолчанию 

 (5) фон голубой, размер шрифта первого символа в полтора раза превышает размер шрифта первой строки; размер шрифта первой строки в 2 раза больше следующих 

Номер 6 
Данный код:
  
P {text-align: justify}
  
задает:

Ответ:

 (1) выравнивание по центру текста в абзаце 

 (2) выравнивание по ширине текста в абзаце 

 (3) подчеркивание по ширине текста в абзаце 

 (4) зачеркивание текста в абзаце 

Упражнение 30:
Номер 1 
Какой из нижеприведенных вариантов убирает выделение текста в гиперссылках?

Ответ:

 (1) a {underline: none} 

 (2) a {text: no underline} 

 (3) a {decoration: no underline} 

 (4) a {text-decoration:none} 

 (5) ни один 

Номер 2 
Какой фрагмент кода позволит выровнять содержимое абзаца по центру?

Ответ:

 (1) Text-align: normal 

 (2) Text-align: left-right 

 (3) Text-align: center 

 (4) Text-align: flatten 

 (5) Text-align: justify 

Номер 3 
Необходимо закрасить блочный элемент div фоном, как у предка <p>. Для этого Вы помещаете блок div внутрь тега <p>:
 
<style>
body {background:  orange}
p {background:   Gray}
</style>
<body>
<p>First
<div> Second</div>
</p>
</body>

Каким образом будет выглядеть конечный документ после обработки браузером следующего фрагмента кода и почему?

Ответ:

 (1) First - на оранжевом фоне, Second - на фоне по умолчанию, поскольку для него не было указано свойств; остальная часть - на сером фоне 

 (2) First - на оранжевом фоне, Second - на оранжевом , так как выполняется правило наследования свойств; остальная часть страницы - на сером фоне 

 (3) First и Second - на сером фоне, как и вся страница поскольку наследуется свойство фона <body> 

 (4) First и Second - на сером, остальное - на оранжевом фоне; наследуется свойство тега <p> 

 (5) First - на оранжевом, Second - на сером фоне; остальная часть страницы - на сером фоне 

Номер 4 
Какой из перечисленных вариантов задает курсивный текст?

Ответ:

 (1) font-type: italic 

 (2) font-style:italic 

 (3) font-decoration:italic 

 (4) font-transform:italic 

 (5) font-glyph:italic 

Номер 5 
Какое значение имеет по умолчанию 'direction'?

Ответ:

 (1) rtl 

 (2) ltr 

 (3) inherit 

 (4) left 

Номер 6 
Какое из следующих свойств не производит изменение позиции текста в блоке (выравнивание)?

Ответ:

 (1) text-indent 

 (2) text-align 

 (3) text-padding 

 (4) vertical-align 

 (5) vertical-align со значением text-top 

Упражнение 31:
Номер 1 
Что задает свойство table-layout?

Ответ:

 (1) фон для таблицы 

 (2) алгоритм разметки таблицы 

 (3) размещение таблице в окне 

 (4) рамку для таблицы 

Номер 2 
Вы создали таблицу стилей, в которой определили используемые шрифты для элемента #box следующим образом:
  
#box {font-family: Verdana, "Comic Sans MS", Geneva, Arial, Helvetica, sans-serif}
  
Каким шрифтом будет отображено содержимое #box, если на компьютере пользователя установлены все шрифты, кроме Geneva?

Ответ:

 (1) семейством шрифтов sans-serif 

 (2) Verdana 

 (3) Helvetica 

 (4) Comic Sans MS 

 (5) Arial 

Номер 3 
Во внешней таблице стилей определен шрифт идентификатора p, равный 14px; во внедренной таблице тот же идентификатор p со свойствами шрифта равен 2em; в элементе разметки все тот же идентификатор приобретает размеры шрифта 0.85em. Каким будет размер шрифта после применения описанной выше схемы форматирования?

Ответ:

 (1) размер будет вычислен на основании среднего арифметического значений 14px, 2em и 0.85em 

 (2) 2em 

 (3) будет использован размер шрифта по умолчанию 

 (4) 0.85em 

 (5) 14px 

Номер 4 
Какими будут цвета текста и фона приведенного ниже рисунка согласно присвоенным атрибутам:
  
<style>
div{ background:   #ffffff;
color:   #000000
}
p{color:   #000000;
background:   #000000;
}
</style>
<body>
<div><p>TEXT</p></div>
</body>

Ответ:

 (1) текст не виден (черного цвета) на фоне черного цвета 

 (2) текст белого цвета, фон слова TEXT черного, остальной фон - белого цвета 

 (3) текст черного цвета, фон слова TEXT - белого цвета, остальной фон - черного цвета 

 (4) цвет фон и шрифта установлены по умолчанию 

 (5) текст белого цвета, фон - черного цвета 

Номер 5 
Каким образом будет выглядеть конечный документ после обработки браузером следующего фрагмента кода:
  
<style>
p.new{color:  blue)
p#full{background:   Orange}
</style>
</head>
<body>
<p id="full" class="new" style="font-weight:  bold;">Simple text</p>

Ответ:

 (1) цвет текста - по умолчанию, шрифт - жирный, фон - оранжевый 

 (2) текст синего цвета, фон оранжевый, шрифт - жирный 

 (3) текст синего цвета, на оранжевом фоне, полужирный шрифт 

 (4) цвет текста - синий, фон - по умолчанию, шрифт - полужирный 

 (5) все настройки по умолчанию, так как возник конфликт стилей 

Номер 6 
Необходимо закрасить блочный элемент div фоном, как у предка <p>. Для этого Вы помещаете блок div внутрь тега <p>
  
<style>
body {background:   Gray}
p {background:   orange}
</style>
<body>
<p>First
<div> Sec ond</div>
</p>
</body>
  
Каким образом будет выглядеть конечный документ после обработки браузером данного фрагмента кода и почему?

Ответ:

 (1) First - на оранжевом фоне, Second - на фоне по умолчанию, поскольку для него не было указано свойств; остальная часть - на сером фоне 

 (2) First -на оранжевом фоне, Second - на оранжевом , так как выполняется правило наследования свойств; остальная часть страницы - на сером фоне 

 (3) First и Second - на сером фоне, как и вся страница поскольку наследуется свойство фона <body> 

 (4) First - на сером, Second - на оранжевом фоне - наследуется свойство тега <p> 

 (5) First - на оранжевом, Second - на сером фоне; остальная часть страницы - на сером фоне 

Упражнение 32:
Номер 1 
Каким образом будут отформатированы фрагменты Simple text и other text после обработки браузером следующего фрагмента кода:
  
<style>
p {color:   black;
font-style:   italic;
}
p.new{color:  red;}
</style>
</head>
<body>
<p class="new">Simple text</p>
<p>other text</p> :

Ответ:

 (1) Simple text - черный нормальный, other text - черный нормальный 

 (2) Simple text - красный курсив, other text - черный курсив 

 (3) Simple text - черный курсив, other text - красный нормальный 

 (4) Simple text - красный нормальный, other text - черный курсив 

 (5) Simple text - красный нормальный, other text - черный нормальный 

Номер 2 
Укажите порядок следования свойств элемента:
  
font: oblique normal 800 1.2em/95% Arial, Helvetica, sans-serif; :

Ответ:

 (1) Font-style; font-variant; font-weight; font-size/font-height; font-family 

 (2) Font-height; font-style; font-size/font-weight; font-variant; font-family 

 (3) Font-variant; font-family; font-height/font-size; font-weight; font-style 

 (4) Font-weight; font-style; font-variant; font-height/font-size; font-family 

 (5) Font-style; font-weight; font-variant; font-size/font-height; font-family 

Номер 3 
В какой строке приведенного ниже фрагмента кода допущена ошибка:
  
a:visited { background:  Bhite;}
a  { background:   Orange;}
:hover { background:   Aqua;}
a:active { background:  Red;} :

Ответ:

 (1) 1 

 (2) ошибок нет 

 (3) 3 

 (4) 4 

 (5) 2 

Номер 4 
Какие параметры форматирования определяют свойства letter-spacing со значением 3px и word-spaсing со значением 18px соответственно:

Ответ:

 (1) сжатие букв первого абзаца 3px; расстояние между абзацами - 18px 

 (2) увеличение интервала между символами на 3px и расстояния между словами на 18px 

 (3) увеличение межстрочного интервала на 3px, а интервала между символами на 18px 

 (4) отступ слева первого строчного элемента - 18px; интервал между буквами первого слова 3px 

 (5) расстояние между строками - 18px; интервал между словами - 3px 

Номер 5 
Вы создали таблицу стилей, в которой определили используемые шрифты для элемента #box следующим образом:
  
#box {
font-family: Verdana, "Comic Sans MS", Geneva, Arial, Helvetica, sans-serif
}
  
Каким шрифтом будет отображено содержимое #box, если на компьютере пользователя установлены все шрифты, кроме Geneva:

Ответ:

 (1) Verdana 

 (2) Arial 

 (3) Comic Sans MS 

 (4) семейством шрифтов sans-serif 

 (5) Helvetica 

Номер 6 
Укажите неверное значение свойств word-spacing и letter-spacing:

Ответ:

 (1) normal 

 (2) inherit 

 (3) center 

 (4) 10 px 

Упражнение 33:
Номер 1 
За что отвечает атрибут text-transform?

Ответ:

 (1) за направление выбранного шрифта 

 (2) за регистр выбранного шрифта 

 (3) за гарнитуру выбранного шрифта 

 (4) за размер букв выбранного шрифта 

Номер 2 
Каким образом будут отформатированы фрагменты simple text и other text после обработки браузером следующего фрагмента кода:
  
<style>
p {color:   Green;
}
p.new{color:  blue;font-style:   italic;
}
</style>
</head>
<body>
<p class="new">Simple text</p>
<p>other text</p> :

Ответ:

 (1) Simple text - зеленый нормальный, other text - зеленый нормальный 

 (2) Simple text - синий курсив, other text - зеленый курсив 

 (3) Simple text - зеленый курсив, other text - синий нормальный 

 (4) Simple text - синий нормальный, other text - зеленый курсив 

 (5) Simple text - синий курсив, other text - зеленый нормальный 

Номер 3 
Какой фрагмент кода позволит выровнять содержимое абзаца по ширине?

Ответ:

 (1) Text-align: normal 

 (2) Text-align: left-right 

 (3) Text-align: center 

 (4) Text-align: flatten 

 (5) Text-align: justify 

Номер 4 
Во внешней таблице стилей определен шрифт идентификатора p, равный 0.85px; во внедренной таблице тот же идентификатор p со свойствами шрифта равен 2em; в элементе разметки все тот же идентификатор приобретает размеры шрифта 14em.
  
Каким будет размер шрифта после применения описанной выше схемы форматирования?

Ответ:

 (1) размер будет вычислен на основании среднего арифметического значений 14px, 2em и 0.85em 

 (2) 2em 

 (3) будет использован размер шрифта по умолчанию 

 (4) 0.85px 

 (5) 14em 

Номер 5 
Какая из представленных ниже единиц измерения позволит определить шрифт как строго фиксированный?

Ответ:

 (1) em 

 (2) px 

 (3) emx 

 (4) % 

 (5) ex 

Номер 6 
Каким образом будут отформатированы фрагменты simple text и other text после обработки браузером следующего фрагмента кода?
  
<style>
p {color:   Green;
font-style:   italic;
}
p.new{color:  blue;}
</style>
</head>
<body>
<p class="new">Simple text</p>
<p>other text</p>

Ответ:

 (1) Simple text - зеленый нормальный, other text - зеленый нормальный 

 (2) Simple text - синий курсив, other text - зеленый курсив 

 (3) Simple text - зеленый курсив, other text - синий нормальный 

 (4) Simple text - синий нормальный, other text - зеленый курсив 

 (5) Simple text - синий нормальный, other text - зеленый нормальный 

Упражнение 34:
Номер 1 
Можно ли изменить форму маркера у упорядоченного списка?

Ответ:

 (1) нельзя, т.к. атрибут формы маркера применяется только к неупорядоченным спискам 

 (2) нельзя, т.к. в HTML не поддерживается нумерация буквами кириллицы 

 (3) можно, но это будут цифры и буквы 

Номер 2 
Какого цвета будет фон остальной страницы, кроме элемента разметки p после обработки браузером следующего фрагмента кода:
  
p#text{background:   green;}
p.text(background:   red;}
</style>
</head>
<body bgcolor="Orange">
<p class="text" id="text">text</p> :

Ответ:

 (1) оранжевый 

 (2) красный 

 (3) белый 

 (4) зеленый 

 (5) по умолчанию 

Номер 3 
Укажите порядок следования свойств элемента:
  
font: normal 800 1.2em/95% Arial, Helvetica, sans-serif oblique ; :

Ответ:

 (1) Font-height; font-style; font-size/font-weight; font-variant; font-family 

 (2) Font-variant; font-family; font-height/font-size; font-weight; font-style 

 (3) Font-style; font-weight; font-size/line-height; font-family; font-variant 

 (4) Font-weight; font-style; font-variant; line-height/font-size; font-family 

 (5) Font-style; font-weight; font-variant; font-size/line-height; font-family 

Номер 4 
Вы создали таблицу стилей, в которой определили используемые шрифты для элемента #box следующим образом:
  
#box {font-family: Verdana, "Comic Sans MS", Geneva, Arial, Helvetica, sans-serif}
  
  Каким шрифтом будет отображено содержимое #box, если на компьютере пользователя установлены все шрифты, кроме Verdana и Geneva?

Ответ:

 (1) семейством шрифтов sans-serif 

 (2) Verdana 

 (3) Helvetica 

 (4) Arial 

 (5) Comic Sans MS 

Номер 5 
Укажите верное значение свойств word-spacing и letter-spacing:

Ответ:

 (1) mm 

 (2) center 

 (3) left 

 (4) margin 

Номер 6 
Можно ли управлять через CSS отображением списка определений?

Ответ:

 (1) нельзя 

 (2) можно, т.к. для этой цели существует специальный атрибут 

 (3) можно как обычным блоком текста 

Упражнение 35:
Номер 1 
При задании стиля <style TYPE="text/css"> TD { color: red } </style> красный цвет будет:

Ответ:

 (1) у фона конкретной ячейки таблицы 

 (2) у фона всех ячеек всех таблиц 

 (3) у символов текста всех ячеек всех таблиц 

 (4) у заголовка таблицы 

Номер 2 
Какой атрибут CSS отвечает за форму маркера?

Ответ:

 (1) list-style-image 

 (2) list-style-type 

 (3) list-style 

 (4) list-type 

Номер 3 
Какие из представленных ниже методов определения цвета фона установлены неверно?

Ответ:

 (1) Background: "orange" 

 (2) Color: green 

 (3) Background-color: white 

 (4) Color-background: #ade43ff 

 (5) Background: #F0F 

Номер 4 
Свойство абзаца было определено следующим образом:
  
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif
  
  Что произойдет после обработки браузером следующего фрагмента кода, если пользователь первого из объявленных шрифтов не будет обнаружен:

Ответ:

 (1) шрифт Verdana будет автоматически загружен из сети Интернет 

 (2) будет проигнорирована вся строка и использован системный шрифт 

 (3) будет отображено приглашение вставить диск с версией Windows для установки шрифта 

 (4) в местах использования шрифта будет показан нечитаемый набор символов 

 (5) шрифт Verdana будет заменен следующим, указанным в свойствах данного элемента. Если ни один из указанных шрифтов в таблице стилей не будет найден на пользовательском компьютере, то будет использован шрифт по умолчанию 

Номер 5 
Вы создали таблицу стилей, в которой определили используемые шрифты для элемента #box следующим образом:
  
#box {font-family: Verdana, "Comic Sans MS", Geneva, Arial, Helvetica}
  
Каким шрифтом будет отображено содержимое #box, если на компьютере пользователя не установлены все перечисленные шрифты?

Ответ:

 (1) семейством шрифтов sans-serif 

 (2) Verdana 

 (3) Helvetica 

 (4) Arial 

 (5) Comic Sans MS 

Номер 6 
Можно ли заказать в качестве маркера упорядоченного списка картинку?

Ответ:

 (1) нельзя 

 (2) можно только размера 16x16 px 

 (3) можно любую 

Упражнение 36:
Номер 1 
Для изменения внешнего вида ссылки, при наведение на ней мышки используется:

Ответ:

 (1) alink 

 (2) link 

 (3) vlink 

 (4) hover 

 (5) ahover 

Номер 2 
Какой маркер будет использован в данном случае в списке: 
  
ul {
list-style-image: url(pic.gif); 
list-style-type:disc; 
list-style-position: outside;
}

Ответ:

 (1) квадрат 

 (2) диск 

 (3) картинка pic.gif 

 (4) пустой кружок 

 (5) маркер не выведется вообще 

Номер 3 
Какого цвета будет фон элемента разметки p после обработки браузером следующего фрагмента кода:
  
p#text{background:   green;}
p.text(background:   red;}
</style>
</head>
<body bgcolor="Orange">
<p class="text" id="text">text</p> :

Ответ:

 (1) оранжевый 

 (2) красный 

 (3) белый 

 (4) зеленый 

 (5) по умолчанию 

Номер 4 
Какого цвета будет фон остальной страницы, кроме элемента разметки p после обработки браузером следующего фрагмента кода:
  
p#text{background:   green;}
p.text(background:   red;}
</style>
</head>
<body>
<p class="text" id="text">text</p>

Ответ:

 (1) по умолчанию 

 (2) зеленый 

 (3) белый 

 (4) красный 

 (5) оранжевый 

Номер 5 
В какой строке присутствует неверное определение свойства font-weight?

Ответ:

 (1) Inherit, bolder, 400, normal, 600 

 (2) 700, inherit, 500 

 (3) Bolder, lighter, 1000, normal 

 (4) 100, 200, 300 

 (5) Normal, bold, bolder, lighter, 900 

Номер 6 
Какие свойства позволяют отобразить таблицу с одной видимой границей и без дополнительного промежутка?

Ответ:

 (1) table {border-collapse:separate; border-spacing: 1px 1px; empty-cells:hide;} 

 (2) table { border-collapse:separate; border-spacing: 1px 1px; border:none} 

 (3) table {border-collapse:collapse; border:none} 

 (4) table { border-collapse:separate; border-spacing: 1px 0px; border:none} 

 (5) все вышеперечисленное неверны 

Упражнение 37:
Номер 1 
Каким цветом будут отображаться все заголовки первого уровня в документе:
  
h1 {color: green;}
h1 {color: blue;}
h1 {color: gray;}
h1 {color: red;}

Ответ:

 (1) серый 

 (2) красный 

 (3) зелёный 

 (4) синий 

 (5) чёрный 

Номер 2 
Какое из значений свойства color является неверным?

Ответ:

 (1) {color: #A9A9FF;} 

 (2) {color: #00F;} 

 (3) {color: rgb (0,0,255);} 

 (4) {color: rgb (0%,0%,100%)} 

 (5) {color: rgb (#A9, #CCC, 100%} 

Номер 3 
Какая из записей синтаксически правильна?

Ответ:

 (1) ol {list-style-type:circle;} 

 (2) ul {list-style:disk;} 

 (3) ol {list-style-type:upper-roman;} 

 (4) ul {list-style:none;} 

 (5) ul ol {list-style-type:lower-alpha;} 

Номер 4 
Как можно получить при помощи таблицы стилей красную строку?

Ответ:

 (1) при помощи атрибута text-indent 

 (2) путем вставки несжимаемых пробелов можно 

 (3) применив к части текста display:рге 

 (4) это сделать нельзя 

 (5) используя в коде символ табуляции 

Номер 5 
Необходимо выделить текст таким образом, чтобы межсимвольное расстояние составило 3px, а расстояние между словами составило 3em. Какая последовательность действий приведет к решению поставленной задачи?

Ответ:

 (1) свойство margin должно следует установить равным 3px, а padding 3em 

 (2) необходимо записать свойство letter-spacing, равное 3em, и word-spacing, равное 3px 

 (3) следует применить средства text-indent (со значением 3em) и padding (со значением 3px) 

 (4) свойство letter-spacing следует установить равным 3em, а text-indent 3px 

 (5) необходимо определить свойство letter-spacing со значением 3px, и word-spacing со значением 3em 

Номер 6 
Для указания типа маркера списочного элемента используется свойство:

Ответ:

 (1) list-style-type 

 (2) type 

 (3) list 

 (4) list-type 

 (5) li-style 

Упражнение 38:
Номер 1 
Какое значение возможно определить для свойства background в целях оптимизации приведенного ниже фрагмента кода: 
  
div{
background-color:   Lime;
background-image:  url(1.gif);
background- attachment:   fixed;
background-repeat:  no-repeat;
background-position: left 10px;
} :

Ответ:

 (1) background: Lime fixed left 10px 

 (2) background: url(1.gif) fixed no-repeat left 10px 

 (3) background: fixed no-repeat left 10px 

 (4) background: Lime url(1.gif) fixed no-repeat left 10px 

 (5) background: Lime fixed no-repeat left 10px 

Номер 2 
Что задает свойство list-style-position?

Ответ:

 (1) размещение маркера списка относительно текста 

 (2) место размещения списка 

 (3) размещение текстовых элементов списка 

 (4) расстояние между маркерами 

Номер 3 
Для задания промежутков между ячейками таблицы используется свойство?

Ответ:

 (1) border-collapse 

 (2) border-size 

 (3) border-spacing 

 (4) caption 

 (5) empty-cells 

Номер 4 
Чем можно управлять посредством атрибутов CSS?

Ответ:

 (1) формой маркеров 

 (2) изображением маркеров 

 (3) и формой, и изображением маркеров 

 (4) значениями списков 

Номер 5 
Можно ли не отображать и не интерпретировать HTML-код при его загрузке в браузер?

Ответ:

 (1) можно (<input type=hidden>) 

 (2) можно (<div style="visibility:hidden;">...</div>) 

 (3) можно (<div style="display:none;">...</div>) 

 (4) нельзя 

Номер 6 
Какое значение позиции маркера списка (list-style-position) является используемым по умолчанию?

Ответ:

 (1) Outside 

 (2) Relative 

 (3) Interhit 

 (4) Inside 

 (5) Absolute 

Упражнение 39:
Номер 1 
Какова будет реакция браузера при наведении курсора мыши на слово Link и на всю область <ol>:
  
<style>
ol{
border:solid 1px  red;
list-style: circle outside;
margin: 0;
padding: 0;
width:  10em;
}
li a{
text-decoration:  none; 
display:  block;
margin:   0;
padding:   0;
width:   10em;
}
li a:hover {
background:   Silver;
}
</style>
<body>
<ol><li><a href="#">Link</a></li>
</ol>

Ответ:

 (1) при нажатии на слове Link сменится фон на silver, и произойдет переход по ссылке. Остальная область в рамке никак влияет на состояние окна браузера 

 (2) наведение курсора не вызовет никаких визуальных изменений 

 (3) вне зависимости от того, в каком месте внутри рамки будет наведен курсор, фон изменится на silver (серебристый) 

 (4) данная ситуация вызовет ошибку приложения с дальнейшим закрытием окна 

 (5) при наведении на всей области, заключенной в рамку, произойдет смена фона на silver. Но ссылка будет работать лишь при нажатии на слове Link 

Номер 2 
Каким образом будут отображены слова simple и span после обработки браузером следующего фрагмента кода:
  
<p style="margin-left: 70px">simple
<span style="margin-left: -80px">span</span>
</p> :

Ответ:

 (1) оба текста "вылезут" за границу экрана и не будут отображены 

 (2) simple - справа, span - слева 

 (3) произойдет наложение одного текста на другой 

 (4) span не будет отображен, поскольку указана отрицательная величина отступа 

 (5) simple - слева, span - справа 

Номер 3 
С помощью какого свойства можно отвязать фоновое изображение от элемента, привязав его к области просмотра?

Ответ:

 (1) background-attachment 

 (2) background-position 

 (3) background-repeat 

 (4) background-image 

 (5) этого сделать нельзя 

Номер 4 
Какие атрибуты CSS отвечают за отображение картинки маркера списка?

Ответ:

 (1) list-style-type 

 (2) list-style-image 

 (3) list-style-url 

 (4) list-style-src 

Номер 5 
Какие значения может принимать атрибут CSS, который определяет картинку маркера списка?

Ответ:

 (1) none 

 (2) url(http://kuku.ru/kuku.gif) 

 (3) src(http://kuku.ru/kuku.gif) 

 (4) circle 

Номер 6 
В чем состоит отличие между псевдоэлементами :before и :after, которые применяются со свойством content(значение)?

Ответ:

 (1) при использовании :before положение содержимого находится выше основного текста, а при использовании :after - ниже 

 (2) при использовании :before положение содержимого находится ниже основного текста, а при использовании :after - выше 

 (3) положение содержимого (content) зависит конкретно от того, что записано в (значение) 

 (4) при использовании :before содержимое(content) генерируется перед основным элементом, к которому применяется, а при использовании :after - после 

 (5) при использовании :before содержимое (content) генерируется после основного элемента, к которому применяется, а при использовании :after - перед 

Упражнение 40:
Номер 1 
Можно ли применять атрибут padding к элементу разметки img?

Ответ:

 (1) можно всегда 

 (2) нет, нельзя 

 (3) можно, если он расположен внутри элемента a 

Номер 2 
В таблице стилей CSS имеется следующая строка: 
  
P.note:before { content: "заметка: " }
  
Расшифруйте ее значение:

Ответ:

 (1) перед всеми элементами P с атрибутом class="note" будет вставлено слово "заметка:" 

 (2) после содержимого последнего элемента Р будет вставлено слово "заметка" 

 (3) перед содержимым первого элемента P будет вставлено слово "заметка" 

 (4) содержимое элемента P с атрибутом class="note" будет заменено на строку со словом "заметка" 

 (5) после содержимого каждого элемента P будет вставлена строка со словом "заметка" 

Номер 3 
Какие из перечисленных ниже значений не может приобретать свойство overflow?

Ответ:

 (1) Visible 

 (2) Scroll 

 (3) Fixed 

 (4) Hidden 

 (5) Auto 

Номер 4 
С помощью какого свойства можно задать величину полей за пределами рамки элемента?

Ответ:

 (1) padding 

 (2) margin 

 (3) field-size 

 (4) max-width 

 (5) такого свойства нет 

Номер 5 
Какое значение нужно присвоить свойству элемента display, чтобы он не отображался на странице?

Ответ:

 (1) display:block 

 (2) display:none 

 (3) display:inline 

 (4) display:invisible 

 (5) display:list-item 

Номер 6 
Какой порядок следования списка свойств border в приведённом ниже фрагменте кода является верным:

border {medium outset #063} :

Ответ:

 (1) border-length, border-style, border-color 

 (2) border-style, border-width, border-color 

 (3) border-style, border-color, border- length 

 (4) border-height, border-width, border-color 

 (5) border-width, border-style, border-color 

Упражнение 41:
Номер 1 
Укажите верный перечень свойств элемента ol?
  
ol{ background:   #fff;
list-style-position:   inside;
list-style-type:   circle;
border-left:   solid 3px green;
} :

Ответ:

 (1) фон - белый; позиция маркера - правее левой рамки; вид маркера - окружность 

 (2) фон - белый; маркер отсутствует 

 (3) фон - белый; позиция маркера перекрывает левую рамку; вид маркера - квадрат 

 (4) фон - белый; позиция маркера левее левой рамки; вид маркера - по умолчанию 

 (5) фон - черный; позиция маркера - правее левой рамки; вид маркера - круг 

Номер 2 
С помощью какого параметра можно задать вывод элемента в виде списка?

Ответ:

 (1) list 

 (2) listing 

 (3) list-element 

 (4) list-item 

 (5) list-block 

Номер 3 
Для чего используется псевдоэлемент after?

Ответ:

 (1) для вставки кавычки после текста 

 (2) для вывода автоматически генерируемого контента перед элементом 

 (3) для вставки автоматически генерируемого контента после элемента 

 (4) для размещения элемента внизу страницы 

Номер 4 
Какой из нижеприведенных вариантов задает красный фон для всех элементов класса red?

Ответ:

 (1) class.red {background-color:red;} 

 (2) .red {background-color:red;} 

 (3) class:red {background-color:red;} 

 (4) red {background-color:red;} 

 (5) =red {background-color:red;} 

Номер 5 
Какой из нижеприведённых вариантов располагает маркер внутри зоны содержимого элемента?

Ответ:

 (1) list-style-position: outside 

 (2) list-style-position: inside 

 (3) list-style-position: inherit 

 (4) list-style-position: element 

 (5) list-style-position: auto 

Номер 6 
С помощью какого свойства можно задать форму указателя мыши, когда он находится над элементом?

Ответ:

 (1) cursor 

 (2) cursor-style 

 (3) cursor-decoration 

 (4) cursor-type 

Упражнение 42:
Номер 1 
Как правильно определить видимую область блока на рисунке?

Ответ:

 (1) div {clip:rect(20,20,200,100);} 

 (2) div {clip:rect(20,200,100,20);} 

 (3) div {clip:rect(20,20;200,20;200,100;20,100);} 

 (4) div {clip:rect(20,20;200);} 

Номер 2 
Что произойдет после обработки браузером следующего фрагмента кода, если путь к изображению окажется недоступным:
  
ul{list-style-type: circle;
list-style-image: url(../path)
} :

Ответ:

 (1) браузер не отобразит ни одно свойство элемента ul 

 (2) браузер отобразит маркер в виде окружности 

 (3) браузер не отобразит содержимое элемента ul 

 (4) браузер не отобразит маркер 

 (5) браузер будет игнорировать все определения данного свойства 

Номер 3 
Что произойдет после обработки браузером следующего фрагмента кода, если путь к изображению окажется недоступным:
  
ul{
list-style-type:circle;
list-style-image:  url(../samples/button.gif);
} :

Ответ:

 (1) браузер не отобразит содержимое элемента ul 

 (2) браузер отобразит маркер в виде окружности 

 (3) браузер не отобразит маркер 

 (4) браузер будет игнорировать все определения данного свойства 

 (5) браузер не отобразит ни одно свойство элемента ul 

Номер 4 
В чём состоит отличие между примерами, представленными в следующем фрагменте кода:
  
/* первый пример */ 
р, i {
font-family:  Verdana,  Geneva, Arial, Helvetica,  sans-serif;
}
/* второй пример */
p  i {
font-family:  Verdana,  Geneva, Arial, Helvetica,  sans-serif;
} :

Ответ:

 (1) конструкция в первом примере содержит недопустимые синтаксические ошибки, и браузер будет игнорировать указанные свойства селекторов. Во втором примере селектор p приобретает указанные свойства лишь в случае позиционирования внутри селектора i 

 (2) в первом примере свойства двух селекторов p и i идентичны. Во втором примере содержатся ошибки, браузер будет игнорировать данные строки 

 (3) в первом примере свойства двух селекторов p и i идентичны, а во втором селектор i приобретает указанные свойства лишь в случае позиционирования внутри селектора p 

 (4) свойства идентичны, запятая используется лишь для удобства восприятия 

 (5) в первом примере селектор i приобретает указанные свойства лишь в случае позиционирования внутри селектора p. Во втором примере свойства идентичны 

Номер 5 
Каким будет размер шрифта текста First и Second соответственно после обработки браузером следующего фрагмента кода:

body {
font-size:lem
}
ul{
font-size:1.5em
}
li#the{
font-size:2em
}
</style>
</head>
<body>
<ul>
<li id="the">first</li>
<li>second</li>
</ul> :

Ответ:

 (1) 2em и 1.5em 

 (2) 2em и 1em 

 (3) 1em и 1.5em 

 (4) 1.5em и 2em 

 (5) 1.5em и 1.5em 

Номер 6 
Какие координатные системы поддерживает спецификация CSS?

Ответ:

 (1) абсолютную(absolute) 

 (2) относительную(relative) 

 (3) базовую(base) 

 (4) местную(local) 

 (5) сервера(server) 

 (6) приложения(application) 

Упражнение 43:
Номер 1 
Что определяют абсолютные координаты блока?

Ответ:

 (1) нет такой координатной системы 

 (2) местоположение геометрического центра блока относительно верхнего левого угла рабочей области окна браузера 

 (3) местоположение верхнего левого угла прямоугольника блока относительно верхнего левого угла рабочей области окна браузера 

 (4) координаты блока в системе координат Web-узла 

Номер 2 
Необходимо создать автоматическую нумерацию списка в виде прописных римских цифр. Какое значение свойства list-style-type позволит решить поставленную задачу?

Ответ:

 (1) upper-roman 

 (2) roman 

 (3) x-roman 

 (4) roman-number 

 (5) lower-roman 

Номер 3 
Необходимо создать автоматическую нумерацию списка в виде заглавных римских цифр. Какое значение свойства list-style-type позволит решить поставленную задачу?

Ответ:

 (1) upper-roman 

 (2) roman 

 (3) x-roman 

 (4) roman-number 

 (5) lower-roman 

Номер 4 
Какое значение не может приобретать свойство float?

Ответ:

 (1) left 

 (2) right 

 (3) none 

 (4) inherit 

 (5) both 

Номер 5 
Необходимо промаркировать список при помощи окружностей и залить его серым цветом, включая сами маркеры. Какие 2 фрагмента кода позволят решить поставленную задачу?

Ответ:

 (1) Ol {list-style: disc inside; background: gray} 

 (2) Ol {list-position: inside circle gray} 

 (3) Ol {list-style-position: inside; list-style-type: circle; background-color: gray} 

 (4) Ol {list-style: inside circle; background: gray} 

 (5) Ol {list-style-type: circle outside; background: gray} 

Номер 6 
Какие атрибуты определяют координаты блока?

Ответ:

 (1) position-x 

 (2) position-y 

 (3) bottom-right 

 (4) top 

 (5) left 

 (6) right 

Упражнение 44:
Номер 1 
Какие атрибуты отвечают за видимость элемента?

Ответ:

 (1) left 

 (2) top 

 (3) visibility 

 (4) display 

Номер 2 
Какой элемент разметки позволяет добиться абсолютного или относительного позиционирования разделов документа без применения CSS?

Ответ:

 (1) div 

 (2) layer 

 (3) body 

 (4) table 

 (5) frame 

Номер 3 
Можно ли при помощи CSS наложить текст на картинку?

Ответ:

 (1) нельзя, т.к. в одном элементе разметки не может быть и текста и картинки 

 (2) можно при помощи блочных атрибутов CSS 

 (3) можно, используя атрибуты позиционирования 

Номер 4 
Необходимо создать автоматическую нумерацию списка в виде Десятеричных чисел, дополненных начальными нулями. Какое значение свойства list-style-type позволит решить поставленную задачу?

Ответ:

 (1) decimal 

 (2) decimal-leading-zero 

 (3) hebrew 

 (4) cjk-ideographic 

 (5) georgian 

Номер 5 
Необходимо создать автоматическую нумерацию списка в виде букв ascii нижнего регистра. Какое значение свойства list-style-type позволит решить поставленную задачу:

Ответ:

 (1) lower-latin 

 (2) upper-alpha 

 (3) lower-greek 

 (4) lower-roman 

Номер 6 
Что происходит при абсолютном позировании?

Ответ:

 (1) абсолютно позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причём сам элемент или его потомки могут перекрывать ранее отображённые элементы 

 (2) элементы после изъятия из исходного текста документа всех абсолютно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего 

 (3) элементы не изымаются из исходного текста документа и образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего 

Упражнение 45:
Номер 1 
Что происходит при абсолютном позиционировании?

Ответ:

 (1) элементы ведут себя аналогично относительно позиционированным: они отображаются непосредственно сразу после предыдущего элемента в потоке 

 (2) позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причём сам элемент или его потомки могут перекрывать ранее отображённые элементы 

 (3) абсолютно позиционированные и статически позиционированные элементы после изъятия из исходного текста документа всех абсолютно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего 

Номер 2 
Какое свойство специфицирует, насколько смещен вниз верхний край содержимого бокса относительно верхнего края содержащего блока?

Ответ:

 (1) bottom 

 (2) top 

 (3) down 

 (4) up 

Номер 3 
Для чего используется свойство background-attachment?

Ответ:

 (1) определяет фоновое изображение элемента страницы 

 (2) устанавливает положение верхнего левого угла фонового изображения относительно верхнего левого угла контейнерного элемента 

 (3) устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента 

 (4) открывает форму для загрузки собственного фонового изображения 

Номер 4 
Какой из атрибутов CSS определяет порядок перекрытия блоков?

Ответ:

 (1) visibility 

 (2) position 

 (3) z-index 

 (4) clip 

Номер 5 
Необходимо промаркировать список незалитыми прямоугольниками. Какой фрагмент кода позволит решить поставленную задачу?

Ответ:

 (1) List-style-type: quadrate 

 (2) List-style: quadrangle 

 (3) List-style-type: square 

 (4) List-style-image:url(путь к изображению с незалитым прямоугольником) 

 (5) List-type: perimeter 

Номер 6 
Укажите, какого типа позиционирования не существует:

Ответ:

 (1) static 

 (2) relative 

 (3) absolute 

 (4) fixed 

 (5) существуют все 

Упражнение 46:
Номер 1 
Для задания схемы позиционирования, в которой прямоугольники элементов отображаются на экран в порядке их появления в документе, используется тип:

Ответ:

 (1) absolute 

 (2) static 

 (3) relative 

 (4) inherit 

 (5) default 

Номер 2 
Какие атрибуты определяют линейные размеры блока (ширину и высоту)?

Ответ:

 (1) width 

 (2) block-width 

 (3) block-height 

 (4) height 

 (5) margin 

 (6) padding 

Номер 3 
Какие значения может принимать атрибут visibility?

Ответ:

 (1) show 

 (2) hidden 

 (3) visible 

 (4) invisible 

 (5) нет такого атрибута 

Номер 4 
Какие атрибуты определяют площадь, занимаемую блоком на экране?

Ответ:

 (1) position 

 (2) width 

 (3) height 

 (4) display 

 (5) visibility 

Номер 5 
Какой слой не будет виден после обработки браузером следующего фрагмента кода:
  
div{    position:   absolute}
</style>
</head>
<body>
<div> First</div>
<div style="left:10em">Second</div>
<div style="right:10em">Third</div>
<div style="left: -5em">Fourth</div>
</body> :

Ответ:

 (1) все слои будут видны 

 (2) First 

 (3) Fourth 

 (4) Second 

 (5) Third 

Номер 6 
Какое значение по умолчанию имеет 'z-index'?

Ответ:

 (1) inherit 

 (2) absolute 

 (3) auto 

 (4) 0 

Упражнение 47:
Номер 1 
Какой из блоков не будет виден после обработки браузером следующего фрагмента кода?
  
<html><head></head>
<body style="margin:0; padding:0">
<div style="position: absolute;  z-index:2; background: orange;  width:   20еm;">Первый блoк</div>
<div scyle="position:   absolute;  z-index:   1; left:  20em;  width:   20em; background:   green;">Второй блок</div>
<div style="position:   relative;  z-index:   3; background:  yellow;  left:   30em; width:   20еm;">Третий блок</div> </body></html> :

Ответ:

 (1) будут видны только оранжевый и зеленый блоки 

 (2) все блоки будут видны, но зеленый блок - частично 

 (3) будет не виден желтый блок 

 (4) будет не виден зеленый блок 

Номер 2 
Что происходит при относительном позировании?

Ответ:

 (1) элементы отображаются непосредственно сразу после предыдущего элемента в потоке 

 (2) позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причём сам элемент или его потомки могут перекрывать ранее отображённые элементы 

 (3) относительно позиционированные и статически позиционированные элементы после изъятия из исходного текста документа всех относительно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего 

Номер 3 
Что делает свойство z-index?

Ответ:

 (1) зaдaeт пopядoк пepeкpытия элeмeнтoв дpуг дpугом 

 (2) задает порядок следования одного элемента за другим 

 (3) нет такого свойства 

 (4) задает прозрачность элемента 

Номер 4 
Можно ли использовать отрицательные значения при указании координат блока?

Ответ:

 (1) нет нельзя 

 (2) можно, но только в относительных координатах 

 (3) можно только в абсолютных координатах 

 (4) можно в любой из допустимых координатных систем 

Номер 5 
Как изменяется значение атрибута, определяющего порядок перекрытия, с точки зрения пользователя браузера?

Ответ:

 (1) увеличивает свое числовое значение в направлении "от пользователя в глубину экрана" 

 (2) увеличивает свое числовое значение из глубины экрана по направлению к пользователю 

 (3) принимает те значения, которые назначил автор страницы 

Номер 6 
Какой из блоков будет виден после обработки браузером следующего фрагмента кода?
  
<html><head></head>
<body style="margin:0; padding:0">
<div style="position: absolute;  z-index:2; background: orange;  width:   20еm;">Первый блoк</div>
<div scyle="position:   absolute;  z-index:   1; left:  20em;  width:   20em; background:   green;">Второй блок</div>
<div style="position:   relative;  z-index:   3; background:  yellow;  left:   30em; width:   20еm;">Третий блок</div> </body></html>:

Ответ:

 (1) будут видны только оранжевый и зеленый блоки 

 (2) все блоки будут видны, но зеленый блок - частично 

 (3) будет виден только желтый блок 

 (4) будет виден только зеленый блок 

 (5) будут видны только желтый и оранжевый блоки 

Упражнение 48:
Номер 1 
Какие слои будут видны после обработки браузером следующего фрагмента кода:
  
div{    position:   relative;}
</style>
</head>
<body>
<div> First</div>
<div style="left:-10em;">Second</div>
<div style="right:10em;">Third</div>
<div style="left: 15em;">Fourth</div>
</body> :

Ответ:

 (1) Second 

 (2) Third 

 (3) Fourth 

 (4) First 

 (5) все слои будут видны 

Номер 2 
Необходимо разместить логотип сайта с отступом сверху 50px и слева 10px таким образом, чтобы он не изменял своего положения при возможном изменении содержимого страницы сайта. Какие 2 значения не являются верными для свойства background?

Ответ:

 (1) Absolute 

 (2) 50px 10px 

 (3) Fixed 

 (4) No-repeat 

 (5) 10px 50px 

Номер 3 
Если в документе описано три блока: первый имеет цвет #666 и z-index:20; второй имеет цвет #999 и z-index:5; третий имеет цвет # 333 и z-index: 12. Блок, какого цвета будет выведен первым и наложен на два остальных?

Ответ:

 (1) #666 

 (2) #333 

 (3) #999 

 (4) блок будет невидимым 

 (5) на страницу не выведется ничего 

Номер 4 
Закрывает ли ближний к пользователю видимый блок содержание других видимых блоков?

Ответ:

 (1) закрывает полностью в области наложения блоков 

 (2) закрывает полностью в области наложения блоков, если для блока определен фон 

 (3) закрывает частично в области наложения блоков, если фон не был определен или прозрачен 

Номер 5 
Какие атрибуты определяют местоположение блока на экране?

Ответ:

 (1) position 

 (2) top 

 (3) left 

 (4) display 

 (5) visibility 

Номер 6 
Необходимо создать небольшой сайт. Решено подключить стилевую таблицу, чтобы она влияла на определенные, заранее отмеченные элементы всего сайта. Что для этого нужно сделать?

Ответ:

 (1) стили необходимо определять в каждом элементе разметки с помощью атрибута style 

 (2) использовать ссылку в заголовке на внешнюю таблицу стилей на всех необходимых страницах сайта 

 (3) разместить на каждой странице в теле документа ссылку на внешнюю таблицу стилей 

 (4) разместить на главной странице сайта (index.html) в заголовке описания элементов конструкцию <style> …содержимое… </style> 

 (5) для каждой страницы сайта необходимо создать собственную таблицу стилей 

Упражнение 49:
Номер 1 
Какое значение не может приобретать свойство position?

Ответ:

 (1) Absolute 

 (2) Static 

 (3) Fixed 

 (4) Normal 

 (5) Relative 

Номер 2 
Какие значения может приобретать свойство position?

Ответ:

 (1) Normal 

 (2) Auto 

 (3) Relative 

 (4) Fixed 

 (5) No-repeat 

Номер 3 
Какой слой не будет виден после обработки браузером следующего фрагмента кода:
  
div{    position:   absolute;}
</style>
</head>
<body>
<div> First</div>
<div style="left:-10em;">Second</div>
<div style="right:10em;">Third</div>
<div style="left: 15em;">Fourth</div>
</body>:

Ответ:

 (1) все слои будут видны 

 (2) First 

 (3) Fourth 

 (4) Second 

 (5) Third 

Номер 4 
Если в документе описано три блока: первый имеет цвет #666 и z-index:19; второй имеет цвет #999 и z-index:1; третий имеет цвет # 333 и z-index: 72. Блок, какого цвета будет выведен первым и наложен на два остальных?

Ответ:

 (1) #666 

 (2) #333 

 (3) #999 

 (4) блок будет невидимым 

 (5) на страницу не выведется ничего 

Номер 5 
Какие атрибуты определяют координаты блока?

Ответ:

 (1) left-top 

 (2) bottom-right 

 (3) top 

 (4) left 

 (5) right 

Номер 6 
Какого цвета слой не будет виден после обработки браузером следующего фрагмента кода?

<style>
body  {margin:   0; padding:   0;  color:  white}
div{    position:   absolute;
width:   10em;
height:   1em;
top:   0;
left:   0}
<body>
<div style="z-index:   1; background:   orange;  left:   10em">1</div>
<div style="z-index:   2; background:   Green;">2</div>
<div style="z-index:   3; background:  Blue;  left:   lOem; position:   inherit;">3</div>
</div>
</style>

Ответ:

 (1) синий и оранжевый 

 (2) оранжевый 

 (3) оранжевый и зеленый 

 (4) синий и зеленый 

 (5) зеленый 

Упражнение 50:
Номер 1 
Необходимо сопоставить значения и их свойства так, что бы зеленый блок (First) находился слева, оранжевый блок (Second) - справа, белый блок (Third) - между ними. Какой код необходимо вставить вместо "..."?
  
<body>
<div style="background:   green;  ...; ">first</div>
<div style="background:   orange; ...; ">second</div>
<div style="background:   rahite; ...; ">third</div>
</body>

Ответ:

 (1) First - float: right; Second - float: left; Third - clear: inherit 

 (2) First - float: left; Second - float: right; Third - clear: none 

 (3) First - float: right; Second - clear: both; Third - float: left 

 (4) First - float: none; Second - float: none; Third - clear: both 

 (5) First - clear: left; Second - float: both; Third - clear: none 

Номер 2 
Элемент разметки с большим или меньшим значением z-index будет отображаться верхним:

Ответ:

 (1) с большим значением 

 (2) с меньшим 

 (3) тот, у которого visibility: hidden 

 (4) у которого равен 0 

Номер 3 
Каково расстояние от левого края родительского элемента (body) страницы до правой границы блочного элемента div в приведенном ниже фрагменте кода
  
<style>
body{
margin:   0 0 0 100px;
padding:   0;
}
div{
background:   green;
position:   absolute;
margin:   0 0 0 100px;
left:   100px;
width:   100px;
}
</style>
<head>
<body>
<div> 5 5 5</div>
</body>

Ответ:

 (1) 0px 

 (2) 300px 

 (3) 400px 

 (4) 200px 

 (5) 100px 

Номер 4 
Какой слой будет виден после обработки браузером следующего фрагмента кода?
  
div{    position:   absolute}
</style>
</head>
<body>
<div> First</div>
<div style="left:10em">Second</div>
<div style="right:10em">Third
<div style="left: -5em">Fourth</div>
</div>
</body>:

Ответ:

 (1) все слои будут видны 

 (2) First 

 (3) Fourth 

 (4) Second 

 (5) Third 

Номер 5 
Отметьте правильные значения свойства float

Ответ:

 (1) top 

 (2) bottom 

 (3) inherit 

 (4) right 

 (5) left 

Номер 6 
Страница имеет активную полосу прокрутки. Каким будет поведение расположенного на странице элемента в случае, если он обладает свойством position: fixed?

Ответ:

 (1) позиция элемента зависит от значения тега body 

 (2) такое значение недопустимо 

 (3) данное свойство не указывает на поведение элемента в случае прокрутки страницы 

 (4) элемент не должен прокручиваться вместе с остальной частью страницы 

 (5) элемент должен прокручиваться вместе с остальной частью страницы 



Главная / Интернет-технологии / CSS2: основы / Тест 1