Главная /
Программирование /
CSS2: основы
CSS2: основы - ответы на тесты Интуит
Правильные ответы выделены зелёным цветом.
Все ответы: Проверка знаний синтаксиса и семантики конструкций каскадных таблиц стилей и их использования в разметке страниц.
Все ответы: Проверка знаний синтаксиса и семантики конструкций каскадных таблиц стилей и их использования в разметке страниц.
Смотрите также:
Каким образом можно переопределить стиль отображения элемента разметки умолчания?
(1) через атрибут
style этого элемента разметки
(2) через имя-селектор элемента разметки в элементе
style
(3) путем определения атрибутов стиля в селекторе-идентификаторе данного элемента
(4) через JavaScript описание CSS
Какого цвета будет текст в ячейке таблицы при наличии в документе следующего фрагмента:
<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) белый
На какие теги действует содержимое тега
<style>?
(1) на все теги документа
(2) только на теги, находящиеся в одной таблице с ним
(3) только на первый тег, следующий за тегом
<style>
(4) ни на какие
Как называется атрибут HTML-тега, с помощью которого можно задавать стиль непосредственно для конкретного элемента?
(1)
css
(2)
stylesheet
(3)
style
(4)
inlineStyle
(5)
styles Какое значение не может приобретать свойство
width?
(1)
Width: 77%
(2)
Width: 40pt
(3)
Width: none
(4)
Width: inherit
(5)
Width: auto Необходимо вставить комментарий в таблицу стилей. Какой фрагмент кода позволит решить поставленную задачу?
(1)
\ комментарий \
(2)
// комментарий //
(3)
" комментарий "
(4)
/* комментарий */
(5)
*/ комментарий /* Выберите верный вариант объяснения следующей записи:
*{font-size:14px} :
(1) звездочка перед селектором поставлена, чтобы данная строка стала комментарием, и не читалась браузером
(2) синтаксис CSS не допускает данную запись
(3) шрифт с кеглем 14 пунктов применяется ко всем, находящимся на странице тегам
(4) шрифт с кеглем 14 пунктов применяется ко всем классам
Какого эффекта можно добиться, применяя технику определения свойств идентификаторов, описанную в следующем фрагменте кода:
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) данная техника не даст требуемого результата
Как установить цвет фона для заголовка
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 Какая единица измерения не применяется в CSS 2?
(1) em
(2) pc
(3) inc
(4) ex
(5) % (проценты)
Что произойдет после обработки браузером следующего фрагмента кода:
<div style="width: 440px; height: 100px; overflow: auto">содержимое блока</div>
(1) размеры блока будут увеличены в случае необходимости
(2) если содержимое блока превышает по размерам установленные величины, то нижняя часть обрезается
(3) если содержимое превышает размеры блока, то появляется элемент прокрутки
(4) содержимое автоматически будет прокручиваться, если не помещается в установленные рамки блока
(5) если содержимое блока занимает меньше места, чем обозначено, то блок будет уменьшен до меньших размеров
Эквивалентны ли следующие описания стилей?
div {padding:10px;}
p {margin:0px;}
div {padding:0px;}
p {margin:10px;}:
a)
б)
(1) эквивалентны
(2) описания неэквивалентные
(3) каждый браузер отображает по-своему
(4) описания ошибочны
Для чего нужен атрибут
clear?
(1) запрещает обтекание плавающего блока
(2) запрещает обтекание данным блоком плавающего элемента разметки
(3) нет такого атрибута CSS
(4) очищает элемент
Наследуется ли цвет текста охватывающего блока вложенным блоком?
(1) наследуется
(2) не наследуется
(3) наследуется только у параграфа
(4) наследуется только у
div С помощью какого свойства можно задать расстояние между областью содержания элемента и его рамкой?
(1)
padding
(2)
margin
(3)
field-size
(4)
max-width
(5)
border-space Какие из перечисленных ниже определений свойства
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) Каким будет порядок расположения слоев после обработки браузером следующего фрагмента кода:
<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) будет видна только первая строка с синим фоном
Каким будет порядок расположения букв после обработки браузером следующего фрагмента кода:
<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 В каких строках в приведенном ниже фрагменте кода допущены ошибки:
.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
Как будет располагаться блок со свойствами, определенными в следующем фрагменте кода:
<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) отступы слева и справа отсутствуют; положение определяется родительским элементом
Какое из свойств, определенных в следующем фрагменте кода, содержит ошибку:
<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 Что произойдет после обработки браузером блочного элемента со свойством
width 40em если текст, находящийся в нем, не будет помещаться по ширине?
(1) появится возможность горизонтального скроллинга
(2) появится возможность вертикальной прокрутки
(3) часть текста будет обрезана
(4) данное свойство не влияет на поведение текста
(5) часть текста будет перенесена на следующую строку
Какое значение не может приобретать свойство
clear?
(1)
top
(2)
left
(3)
none
(4)
right
(5)
both Укажите неверное значение свойств
word-spacing и letter-spacing:
(1)
normal
(2)
center
(3)
mm
(4)
inherit
(5)
px Какое свойство задает размер шрифта для текста?
(1)
size-font
(2)
text-size
(3)
size
(4)
font-size
(5)
text-font-size Можно ли изменять кегль в строковом элементе разметки?
(1) можно
(2) нельзя
(3) только в момент перезагрузки страницы
(4) изменение не будет отображено на странице
В чем отличие свойств описания шрифта от свойств описания текста?
(1) отличий нет
(2) свойства текста относятся ко всему элементу, а свойства шрифта только к его части
(3) свойства шрифта определяют начертание букв, а свойства текста их взаимное расположение внутри элемента разметки
Можно ли использовать атрибут
text-align в элементе разметки SPAN?
(1) нельзя
(2) можно, но выглядит это не очень логично
(3) такого атрибута нет
(4) можно
Можно ли при описании первой строки параграфа определить отступ от границы предыдущего параграфа?
(1) нельзя, т.к. это свойство всего элемента в целом
(2) можно, но лучше определить его в стиле описания элемента
p
(3) нет такого атрибута
Какой из нижеприведенных вариантов убирает выделение текста в гиперссылках?
(1)
a {underline: none}
(2)
a {text: no underline}
(3)
a {decoration: no underline}
(4)
a {text-decoration:none}
(5) ни один
Что задает свойство
table-layout?
(1) фон для таблицы
(2) алгоритм разметки таблицы
(3) размещение таблице в окне
(4) рамку для таблицы
Каким образом будут отформатированы фрагменты
<style>
p {color: black;
font-style: italic;
}
p.new{color: red;}
</style>
</head>
<body>
<p class="new">Simple text</p>
<p>other text</p> :
Simple text и other text после обработки браузером следующего фрагмента кода:
(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 - черный нормальный За что отвечает атрибут
text-transform?
(1) за направление выбранного шрифта
(2) за регистр выбранного шрифта
(3) за гарнитуру выбранного шрифта
(4) за размер букв выбранного шрифта
Можно ли изменить форму маркера у упорядоченного списка?
(1) нельзя, т.к. атрибут формы маркера применяется только к неупорядоченным спискам
(2) нельзя, т.к. в HTML не поддерживается нумерация буквами кириллицы
(3) можно, но это будут цифры и буквы
При задании стиля
<style TYPE="text/css"> TD { color: red } </style> красный цвет будет:
(1) у фона конкретной ячейки таблицы
(2) у фона всех ячеек всех таблиц
(3) у символов текста всех ячеек всех таблиц
(4) у заголовка таблицы
Для изменения внешнего вида ссылки, при наведение на ней мышки используется:
(1)
alink
(2)
link
(3)
vlink
(4)
hover
(5)
ahover Каким цветом будут отображаться все заголовки первого уровня в документе:
h1 {color: green;}
h1 {color: blue;}
h1 {color: gray;}
h1 {color: red;}
(1) серый
(2) красный
(3) зелёный
(4) синий
(5) чёрный
Какое значение возможно определить для свойства
div{
background-color: Lime;
background-image: url(1.gif);
background- attachment: fixed;
background-repeat: no-repeat;
background-position: left 10px;
} :
background в целях оптимизации приведенного ниже фрагмента кода:
(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 Какова будет реакция браузера при наведении курсора мыши на слово
<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>
Link и на всю область <ol>:
(1) при нажатии на слове
Link сменится фон на silver, и произойдет переход по ссылке. Остальная область в рамке никак влияет на состояние окна браузера
(2) наведение курсора не вызовет никаких визуальных изменений
(3) вне зависимости от того, в каком месте внутри рамки будет наведен курсор, фон изменится на
silver (серебристый)
(4) данная ситуация вызовет ошибку приложения с дальнейшим закрытием окна
(5) при наведении на всей области, заключенной в рамку, произойдет смена фона на
silver. Но ссылка будет работать лишь при нажатии на слове Link Можно ли применять атрибут
padding к элементу разметки img?
(1) можно всегда
(2) нет, нельзя
(3) можно, если он расположен внутри элемента
a Укажите верный перечень свойств элемента
ol{ background: #fff;
list-style-position: inside;
list-style-type: circle;
border-left: solid 3px green;
} :
ol?
(1) фон - белый; позиция маркера - правее левой рамки; вид маркера - окружность
(2) фон - белый; маркер отсутствует
(3) фон - белый; позиция маркера перекрывает левую рамку; вид маркера - квадрат
(4) фон - белый; позиция маркера левее левой рамки; вид маркера - по умолчанию
(5) фон - черный; позиция маркера - правее левой рамки; вид маркера - круг
Как правильно определить видимую область блока на рисунке?
(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);} Что определяют абсолютные координаты блока?
(1) нет такой координатной системы
(2) местоположение геометрического центра блока относительно верхнего левого угла рабочей области окна браузера
(3) местоположение верхнего левого угла прямоугольника блока относительно верхнего левого угла рабочей области окна браузера
(4) координаты блока в системе координат Web-узла
Какие атрибуты отвечают за видимость элемента?
(1)
left
(2)
top
(3)
visibility
(4)
display Что происходит при абсолютном позиционировании?
(1) элементы ведут себя аналогично относительно позиционированным: они отображаются непосредственно сразу после предыдущего элемента в потоке
(2) позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причём сам элемент или его потомки могут перекрывать ранее отображённые элементы
(3) абсолютно позиционированные и статически позиционированные элементы после изъятия из исходного текста документа всех абсолютно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего
Для задания схемы позиционирования, в которой прямоугольники элементов отображаются на экран в порядке их появления в документе, используется тип:
(1)
absolute
(2)
static
(3)
relative
(4)
inherit
(5)
default Какой из блоков не будет виден после обработки браузером следующего фрагмента кода?
<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) будет не виден зеленый блок
Какие слои будут видны после обработки браузером следующего фрагмента кода:
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) все слои будут видны
Какое значение не может приобретать свойство
position?
(1)
Absolute
(2)
Static
(3)
Fixed
(4)
Normal
(5)
Relative Необходимо сопоставить значения и их свойства так, что бы зеленый блок (
<body>
<div style="background: green; ...; ">first</div>
<div style="background: orange; ...; ">second</div>
<div style="background: rahite; ...; ">third</div>
</body>
First) находился слева, оранжевый блок (Second) - справа, белый блок (Third) - между ними. Какой код необходимо вставить вместо "..."?
(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 Каким образом осуществляется ссылка на внешнее описание стиля?
(1) в элементе
LINK
(2)
"@import(url)
(3) через атрибут
style элемента разметки
(4) тегом
<style> Какого цвета будет текст в ячейке таблицы при наличии в документе следующего фрагмента:
<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) белый
Эквивалентны ли способы присоединения внешних таблиц стилей с помощью директивы
@import и тега link:
(1) да
(2) ID
(3) нет
(4) с помощью
@import нельзя присоединить Какой из нижеприведённых вариантов не содержит ошибок?
(1)
body {color: red}
(2)
body (color: red)
(3)
{body: color=red}
(4)
{body; color:red}
(5)
body: color:red Какое значение не может приобретать свойство
width?
(1)
width: 77%
(2)
width: 40pt
(3)
width: none
(4)
width: inherit
(5)
width: -50 Какое из перечисленных ниже значений установлено для свойства
display по умолчанию?
(1)
display: block
(2)
display: marker
(3)
display: inline
(4)
display: inline-table
(5)
display: none Отметьте псевдокласс, обозначающий ссылку, которую посетили:
(1)
a: visited
(2)
a: link
(3)
a: active
(4)
a: hover Какое из приведенных ниже утверждений относительно приоритетов стилевых таблиц разработчика и пользовательских стилевых таблиц согласно спецификации CSS 2 Level, исключая установку
"!important", является верным:
(1) приоритет выше у стилевых таблиц разработчика, чем у пользовательских
(2) приоритет зависит от свойств браузера
(3) приоритет зависит от локальной политики безопасности
(4) приоритет выше у пользовательских стилевых таблиц, чем у таблиц разработчика
(5) данные приоритеты ничем не могут быть обозначены
Как изменить цвет ссылки на красный при наведении на нее курсором?
(1)
a:linc {color:red;}
(2)
a:hover {color:red;}
(3)
a:active {color:red;}
(4)
a:visited {color:red;} Отметьте псевдоселекторы:
(1)
p:first-letter
(2)
a:link
(3)
a
(4)
a:visited
(5)
a, p Каким будет значение отступа от левого края документа до первого символа заголовка (
<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> :
H1) после обработки браузером следующего фрагмента кода:
(1) 200px
(2) 150px
(3) 250px
(4) 100px
(5) 50px
Чему равно поле отступа текста от левой границы страницы в примере:
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) отступ умолчания
Какие из следующих атрибутов являются атрибутами управления цветом?
(1)
color
(2)
text-color
(3)
background-color
(4)
border-top-color
(5)
color-border Какой из атрибутов определяет цвет фона блочного элемента разметки?
(1)
text-background-color
(2)
background-color
(3)
block-background
(4)
text-background Для задания промежутков между ячейкам таблицы используется свойство?
(1)
border-collapse
(2)
border-size
(3)
border-spacing
(4)
caption
(5)
empty-cells Какая из приведённых ниже конструкций является верной для следующего фрагмента кода:
P#simple{ свойства } :
(1)
…<class p="simple"> …
(2)
…<p id="simple"> …
(3)
…<p class="simple"> …
(4)
…<div p="simple"> …
(5)
…<"simple" p> … В каких строках приведенного ниже фрагмента кода допущены ошибки:
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
Необходимо расположить один абзац (
<style>
body{margin: 0; padding: 0}
#all{
background: orange;
width: 300рх;
............
}
</style>
<body>
<div id="all">all</div>
<div>right</div>
all, оранжевого цвета) рядом с правой частью блочного элемента. Какое свойство необходимо применить к блочному элементу all, что бы блок (right) был расположен справа от него:
(1)
float: right
(2)
clear: left
(3)
float: left
(4)
padding: left
(5)
margin: right Какое из свойств, определенных в следующем фрагменте кода, содержит ошибку:
<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 Имеется абзац, состоящий из нескольких строк. Как будет выглядеть первая строка данного абзаца, свойства которой определены следующим образом:
<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 раза больше следующих
К какой группе шрифтов относится гарнитура Courier?
(1) system
(2) serif
(3) monospace
(4) Helvetica
(5) такой гарнитуры нет
Какой из атрибутов CSS определяет начертание шрифта?
(1)
font-family
(2)
font-style
(3)
font-size
(4)
font-variant
(5)
font-weight
(6)
font-decoration В чем отличие свойств описания блоков текста от свойств описания текста?
(1) свойства описания блоков текста относятся только к блочным элементам разметки, а свойства текста, как к блочным, так и к строчным элементам разметки
(2) свойства блоков текста определяют свойства блока как целого, в то время как свойства текста определяют взаимное расположение букв и слов внутри блока текста
(3) между этими свойствами нет разницы
Какие из следующих атрибутов CSS вызывают преобразование шрифта?
(1)
text-decoration
(2)
text-transform
(3)
text-align
(4)
font-family
(5)
font-style Какие атрибуты влияют на межстрочное расстояние?
(1)
font-family
(2)
line-height
(3)
p:first-letter
(4)
font-size Если присвоить свойству
overflow значение auto, то при выходе текста за рамку блока:
(1) текст будет обрезан автоматически
(2) текст не выведется вообще
(3) появятся полосы прокрутки
(4) будут активны полосы прокрутки, которые в данном режиме есть всегда в блоке
(5) текст выйдет за пределы блока
Во внешней таблице стилей определен шрифт идентификатора
p, равный 14px; во внедренной таблице тот же идентификатор p со свойствами шрифта равен 2em; в элементе разметки все тот же идентификатор приобретает размеры шрифта 0.85em. Каким будет размер шрифта после применения описанной выше схемы форматирования?
(1) будет использован размер шрифта по умолчанию
(2) 23.8 px
(3) 14px
(4) 2em
(5) размер будет вычислен на основании среднего арифметического значений 14px, 2em и 0.85em
Что задает следующий код:
<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) сделает первую строку в два раза больше текста
В каком примере будет создана начальная заглавная зависающая буква, захватывающая две строки?
(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 }
Какой фрагмент кода позволит выровнять содержимое абзаца по центру?
(1)
Text-align: normal
(2)
Text-align: left-right
(3)
Text-align: center
(4)
Text-align: flatten
(5)
Text-align: justify Вы создали таблицу стилей, в которой определили используемые шрифты для элемента
#box {font-family: Verdana, "Comic Sans MS", Geneva, Arial, Helvetica, sans-serif}
Каким шрифтом будет отображено содержимое
#box следующим образом:
#box, если на компьютере пользователя установлены все шрифты, кроме Geneva?
(1) семейством шрифтов sans-serif
(2) Verdana
(3) Helvetica
(4) Comic Sans MS
(5) Arial
Укажите порядок следования свойств элемента:
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 Каким образом будут отформатированы фрагменты
<style>
p {color: Green;
}
p.new{color: blue;font-style: italic;
}
</style>
</head>
<body>
<p class="new">Simple text</p>
<p>other text</p> :
simple text и other text после обработки браузером следующего фрагмента кода:
(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 - зеленый нормальный Какого цвета будет фон остальной страницы, кроме элемента разметки
p#text{background: green;}
p.text(background: red;}
</style>
</head>
<body bgcolor="Orange">
<p class="text" id="text">text</p> :
p после обработки браузером следующего фрагмента кода:
(1) оранжевый
(2) красный
(3) белый
(4) зеленый
(5) по умолчанию
Какой атрибут CSS отвечает за форму маркера?
(1)
list-style-image
(2)
list-style-type
(3)
list-style
(4)
list-type
Какой маркер будет использован в данном случае в списке:
ul {
list-style-image: url(pic.gif);
list-style-type:disc;
list-style-position: outside;
}
(1) квадрат
(2) диск
(3) картинка pic.gif
(4) пустой кружок
(5) маркер не выведется вообще
Какое из значений свойства
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%} Что задает свойство
list-style-position?
(1) размещение маркера списка относительно текста
(2) место размещения списка
(3) размещение текстовых элементов списка
(4) расстояние между маркерами
Каким образом будут отображены слова
<p style="margin-left: 70px">simple
<span style="margin-left: -80px">span</span>
</p> :
simple и span после обработки браузером следующего фрагмента кода:
(1) оба текста "вылезут" за границу экрана и не будут отображены
(2)
simple - справа, span - слева
(3) произойдет наложение одного текста на другой
(4)
span не будет отображен, поскольку указана отрицательная величина отступа
(5)
simple - слева, span - справа В таблице стилей CSS имеется следующая строка:
P.note:before { content: "заметка: " }
Расшифруйте ее значение:
(1) перед всеми элементами
P с атрибутом class="note" будет вставлено слово "заметка:"
(2) после содержимого последнего элемента
Р будет вставлено слово "заметка"
(3) перед содержимым первого элемента
P будет вставлено слово "заметка"
(4) содержимое элемента
P с атрибутом class="note" будет заменено на строку со словом "заметка"
(5) после содержимого каждого элемента
P будет вставлена строка со словом "заметка" С помощью какого параметра можно задать вывод элемента в виде списка?
(1)
list
(2)
listing
(3)
list-element
(4)
list-item
(5)
list-block Что произойдет после обработки браузером следующего фрагмента кода, если путь к изображению окажется недоступным:
ul{list-style-type: circle;
list-style-image: url(../path)
} :
(1) браузер не отобразит ни одно свойство элемента
ul
(2) браузер отобразит маркер в виде окружности
(3) браузер не отобразит содержимое элемента
ul
(4) браузер не отобразит маркер
(5) браузер будет игнорировать все определения данного свойства
Необходимо создать автоматическую нумерацию списка в виде прописных римских цифр. Какое значение свойства
list-style-type позволит решить поставленную задачу?
(1)
upper-roman
(2)
roman
(3)
x-roman
(4)
roman-number
(5)
lower-roman Какой элемент разметки позволяет добиться абсолютного или относительного позиционирования разделов документа без применения CSS?
(1)
div
(2)
layer
(3)
body
(4)
table
(5)
frame Какое свойство специфицирует, насколько смещен вниз верхний край содержимого бокса относительно верхнего края содержащего блока?
(1)
bottom
(2)
top
(3)
down
(4)
up Какие атрибуты определяют линейные размеры блока (ширину и высоту)?
(1)
width
(2)
block-width
(3)
block-height
(4)
height
(5)
margin
(6)
padding Что происходит при относительном позировании?
(1) элементы отображаются непосредственно сразу после предыдущего элемента в потоке
(2) позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причём сам элемент или его потомки могут перекрывать ранее отображённые элементы
(3) относительно позиционированные и статически позиционированные элементы после изъятия из исходного текста документа всех относительно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего
Необходимо разместить логотип сайта с отступом сверху 50px и слева 10px таким образом, чтобы он не изменял своего положения при возможном изменении содержимого страницы сайта. Какие 2 значения не являются верными для свойства
background?
(1)
Absolute
(2)
50px 10px
(3)
Fixed
(4)
No-repeat
(5)
10px 50px Какие значения может приобретать свойство
position?
(1)
Normal
(2)
Auto
(3)
Relative
(4)
Fixed
(5)
No-repeat Элемент разметки с большим или меньшим значением
z-index будет отображаться верхним:
(1) с большим значением
(2) с меньшим
(3) тот, у которого
visibility: hidden
(4) у которого равен 0
Какая из записей верна?
(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> Какого цвета будет текст в ячейке таблицы при наличии в документе следующего фрагмента:
<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) цвет умолчания
Среди возможных вариантов объявления стилей наибольший приоритет имеют:
(1) внешние таблицы стилей
(2) таблицы стилей уровня документа
(3) внутренние стили
(4) стили с указанием
!important
(5) стили с указанием
!main Как в CSS-файле обозначаются комментарии?
(1)
<!-comment !-->
(2)
'comment
(3)
/* comment */
(4)
// comment
(5)
"// comment Какое значение не может приобретать свойство
width?
(1)
width: 77%
(2)
width: none
(3)
width: -20
(4)
width: inherit
(5)
width: auto Какое из перечисленных ниже значений установлено для свойства
float по умолчанию?
(1)
left
(2)
right
(3)
none
(4)
inherit Какой отступ снизу задает следующий код:
p { padding: 10px 20px 30px 40px; }
(1)
10
(2)
20
(3)
30
(4)
40 Выберите верный синтаксис применения параметра
ID:
(1)
#{color:red}
(2)
#.my{color:red}
(3)
#my{color:red}
(4)
.#my{color:red} Какой символ необходимо вставить вместо вопросительного знака для объединения одинаковых свойств, с целью сокращения длины представленного фрагмента кода:
h1 ? h2 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.2em;
} :
(1) пробел
(2) знак равенства
(3) двоеточие
(4) точку с запятой
(5) запятую
Какого эффекта можно добиться, применяя технику определения свойств идентификаторов, описанную в следующем фрагменте кода:
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 приобретут идентичные свойства вне зависимости от вложений и позиционирования В чем разница между элементами разметки
DIV и SPAN?
(1)
DIV - блочный элемент разметки, а SPAN - строковый элемент разметки
(2) между ними нет разницы
(3) разница определяется особенностями браузера
(4)
SPAN - блочный элемент разметки, а DIV - строковый элемент разметки Какие из следующих атрибутов являются характеристиками границы блока?
(1)
border-top-width
(2)
border-style
(3)
border-bottom
(4)
border-width
(5)
border Укажите правильный вариант описания цвета границы блочного элемента:
(1)
border-color:#003366
(2)
border-top-color:superlightblue
(3)
color:navy
(4)
text-color:#000fff В чем разница между установкой цвета фона для строкового элемента разметки и блочного?
(1) разницы нет
(2) для блочного элемента заливается установленным цветом весь блок, а для строкового только фрагмент текста
(3) для строкового элемента заливается установленным цветом весь блок, а для блочного только фрагмент текста
Страница имеет активную полосу прокрутки. Каким будет поведение расположенного на странице элемента в случае, если он обладает свойством
position: fixed?
(1) элемент должен прокручиваться вместе с остальной частью страницы
(2) элемент не должен прокручиваться вместе с остальной частью страницы
(3) такое значение недопустимо
(4) данное свойство не указывает на поведение элемента в случае прокрутки страницы
(5) позиция элемента зависит от значения тега
body Какой декоративный эффект будет у текста
<body>
<div style="text-decoration: underline">
First Element
<span style="text-decoration: none">Example</span>
</div>
</body> :
Example после выполнения приведённого ниже фрагмента кода:
(1) отсутствие эффекта
(2) текст будет визуально скрыт
(3) декоративный эффект в виде зачеркивания
(4) декоративный эффект в виде надчеркивания
(5) декоративный эффект в виде подчеркивания
Каким будет порядок расположения слоев после обработки браузером следующего фрагмента кода:
<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) будет видна только первая строка с синим фоном
Какое из перечисленных ниже средств предназначено для создания отступов между внешней границей блочного элемента и его содержанием?
(1)
Left
(2)
Padding
(3)
Border
(4)
Margin
(5)
Top Какой порядок следования списка свойств 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 Что означает запись
padding:2ex?
(1) внутренний отступ равен двум высотам буквы
х текущего шрифта элемента
(2) внешний отступ равен двум высотам буквы
х текущего шрифта элемента
(3) внутренний отступ равен двум пикселям
(4) внутренний шрифт равен двум высотам буквы
х текущего шрифта элемента Во внешней таблице стилей определен шрифт идентификатора
p, равный 14px; во внедренной таблице тот же идентификатор p со свойствами шрифта равен 2em; в элементе разметки все тот же идентификатор приобретает размеры шрифта 0.85em. Каким будет размер шрифта после применения описанной выше схемы форматирования?
(1) 0.85em
(2) будет использован размер шрифта по умолчанию
(3) 14px
(4) 2em
(5) размер будет вычислен на основании среднего арифметического значений 14px, 2em и 0.85em
Какая группа шрифтов обычно используется для отображения текста в полях ввода?
(1) system
(2) serif
(3) monospace
(4) Courier New
Какой из атрибутов CSS определяет размер шрифта?
(1)
font-family
(2)
font-style
(3)
font-size
(4)
font-variant
(5)
font-weight
(6)
font-decoration Какие из следующих атрибутов CSS влияют на межбуквенное расстояние?
(1)
letter-spacing
(2)
font-size
(3)
font-variant
(4)
line-height
(5)
text-indent Какой из вариантов - аналог следующего элемента разметки:
<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> Что определяет атрибут
line-height?
(1) высоту строки, равную заглавной букве шрифта
(2) расстояние между базовыми линиями строк, расположенных друг под другом
(3) расстояние от верхней кромки строки до нижней кромки выше расположенной строки
(4) высоту строки, равную прописным буквам шрифта
Какое свойство может принимать значения (
normal / italic / oblique / inherit)?
(1)
font-variant
(2)
font-weight
(3)
font-style
(4)
font-type
(5)
font-family Укажите неверное значение свойств
word-spacing и letter-spacing:
(1)
normal
(2)
center
(3)
mm
(4)
inherit
(5)
px Как будет выглядеть текст при выполнении данного кода:
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 будут зелёными и размером в два раза больше. Остаток первой форматированной строки будет голубой, а остаток параграфа - красный Необходимо закрасить блочный элемент
<style>
body {background: orange}
p {background: Gray}
</style>
<body>
<p>First
<div> Second</div>
</p>
</body>
Каким образом будет выглядеть конечный документ после обработки браузером следующего фрагмента кода и почему?
div фоном, как у предка <p>. Для этого Вы помещаете блок div внутрь тега <p>:
(1)
First - на оранжевом фоне, Second - на фоне по умолчанию, поскольку для него не было указано свойств; остальная часть - на сером фоне
(2)
First - на оранжевом фоне, Second - на оранжевом , так как выполняется правило наследования свойств; остальная часть страницы - на сером фоне
(3)
First и Second - на сером фоне, как и вся страница поскольку наследуется свойство фона <body>
(4)
First и Second - на сером, остальное - на оранжевом фоне; наследуется свойство тега <p>
(5)
First - на оранжевом, Second - на сером фоне; остальная часть страницы - на сером фоне Во внешней таблице стилей определен шрифт идентификатора
p, равный 14px; во внедренной таблице тот же идентификатор p со свойствами шрифта равен 2em; в элементе разметки все тот же идентификатор приобретает размеры шрифта 0.85em. Каким будет размер шрифта после применения описанной выше схемы форматирования?
(1) размер будет вычислен на основании среднего арифметического значений 14px, 2em и 0.85em
(2) 2em
(3) будет использован размер шрифта по умолчанию
(4) 0.85em
(5) 14px
В какой строке приведенного ниже фрагмента кода допущена ошибка:
a:visited { background: Bhite;}
a { background: Orange;}
:hover { background: Aqua;}
a:active { background: Red;} :
(1) 1
(2) ошибок нет
(3) 3
(4) 4
(5) 2
Какой фрагмент кода позволит выровнять содержимое абзаца по ширине?
(1)
Text-align: normal
(2)
Text-align: left-right
(3)
Text-align: center
(4)
Text-align: flatten
(5)
Text-align: justify Укажите порядок следования свойств элемента:
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 Какие из представленных ниже методов определения цвета фона установлены неверно?
(1)
Background: "orange"
(2)
Color: green
(3)
Background-color: white
(4)
Color-background: #ade43ff
(5)
Background: #F0F Какого цвета будет фон элемента разметки
p#text{background: green;}
p.text(background: red;}
</style>
</head>
<body bgcolor="Orange">
<p class="text" id="text">text</p> :
p после обработки браузером следующего фрагмента кода:
(1) оранжевый
(2) красный
(3) белый
(4) зеленый
(5) по умолчанию
Какая из записей синтаксически правильна?
(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;} Для задания промежутков между ячейками таблицы используется свойство?
(1)
border-collapse
(2)
border-size
(3)
border-spacing
(4)
caption
(5)
empty-cells С помощью какого свойства можно отвязать фоновое изображение от элемента, привязав его к области просмотра?
(1)
background-attachment
(2)
background-position
(3)
background-repeat
(4)
background-image
(5) этого сделать нельзя
Какие из перечисленных ниже значений не может приобретать свойство
overflow?
(1)
Visible
(2)
Scroll
(3)
Fixed
(4)
Hidden
(5)
Auto Для чего используется псевдоэлемент
after?
(1) для вставки кавычки после текста
(2) для вывода автоматически генерируемого контента перед элементом
(3) для вставки автоматически генерируемого контента после элемента
(4) для размещения элемента внизу страницы
Что произойдет после обработки браузером следующего фрагмента кода, если путь к изображению окажется недоступным:
ul{
list-style-type:circle;
list-style-image: url(../samples/button.gif);
} :
(1) браузер не отобразит содержимое элемента
ul
(2) браузер отобразит маркер в виде окружности
(3) браузер не отобразит маркер
(4) браузер будет игнорировать все определения данного свойства
(5) браузер не отобразит ни одно свойство элемента
ul Необходимо создать автоматическую нумерацию списка в виде заглавных римских цифр. Какое значение свойства
list-style-type позволит решить поставленную задачу?
(1)
upper-roman
(2)
roman
(3)
x-roman
(4)
roman-number
(5)
lower-roman Можно ли при помощи CSS наложить текст на картинку?
(1) нельзя, т.к. в одном элементе разметки не может быть и текста и картинки
(2) можно при помощи блочных атрибутов CSS
(3) можно, используя атрибуты позиционирования
Для чего используется свойство
background-attachment?
(1) определяет фоновое изображение элемента страницы
(2) устанавливает положение верхнего левого угла фонового изображения относительно верхнего левого угла контейнерного элемента
(3) устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента
(4) открывает форму для загрузки собственного фонового изображения
Какие значения может принимать атрибут
visibility?
(1)
show
(2)
hidden
(3)
visible
(4)
invisible
(5) нет такого атрибута
Что делает свойство
z-index?
(1) зaдaeт пopядoк пepeкpытия элeмeнтoв дpуг дpугом
(2) задает порядок следования одного элемента за другим
(3) нет такого свойства
(4) задает прозрачность элемента
Если в документе описано три блока: первый имеет цвет
#666 и z-index:20; второй имеет цвет #999 и z-index:5; третий имеет цвет # 333 и z-index: 12. Блок, какого цвета будет выведен первым и наложен на два остальных?
(1)
#666
(2)
#333
(3)
#999
(4) блок будет невидимым
(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: 15em;">Fourth</div>
</body>:
(1) все слои будут видны
(2)
First
(3)
Fourth
(4)
Second
(5)
Third Каково расстояние от левого края родительского элемента (
<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>
body) страницы до правой границы блочного элемента div в приведенном ниже фрагменте кода
(1) 0px
(2) 300px
(3) 400px
(4) 200px
(5) 100px
Какую проблему HTML-разметки решают CSS?
(1) точное позиционирование блока текста
(2) типизация разметки HTML
(3) разделение логической структуры документа и формы его представления
(4) разметка страницы
Что означает запись вида:
i, em, u {color:navy;font-style:italic;}:
(1) вложенный в элементы
i и em элемент u будет отображен цветом navy и курсивом
(2) все перечисленные элементы будут отображаться цветом
navy и курсивом
(3) для всех указанных элементов разметки параметры цвета и стиля отображения будут общими, а остальные параметры будут определены правилами умолчания
(4) вложенные в элемент
i em и u будут отображены цветом navy и курсивом Каким тегом определяются стили на уровне документа?
(1)
<style>
(2)
<head>
(3)
<body>
(4)
<css> Отметьте правильные описания стиля:
(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 } Свойства тега
H2 объявлены во внешней таблице стилей следующим образом: h2 {text-indent: 3em}. необходимо изменить его в единственном месте одной страницы, переопределив значение text-indent на 1em.
Какая последовательность действий приведет к оптимальному решению поставленной задачи?
(1) добавить к внешней таблице стилей новый класс для тега
H2 (например, h2.new {text-indent: 0})
(2) подключить еще одну внешнюю таблицу стилей и в ней определить необходимые параметры
(3) переопределить стиль в элементе разметки (
H2) посредством атрибута style
(4) разместить описание стиля в заголовке документа в элементе
style
(5) необходимо подключить новую таблицу стилей при помощи конструкции
@import url При обработке различными браузерами приведенного ниже фрагмента кода расстояние между первой и второй строкой не будет одинаковым.
<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 Выберите верные утверждения:
(1) кегль шрифта влияет на межбуквенное расстояние
(2) атрибут
float можно применить к строковому элементу разметки
(3) используя CSS, можно полностью переопределить форму представления элемента HTML-разметки
(4) для линии границы разных сторон прямоугольника блочного элемента разметки можно задать различный стиль
(5) атрибут
border нельзя применить к строковому элементу разметки Можно ли переопределить цвет текста следующего элемента через импортируемый стиль:
<p style="color:red;">...</p> :
(1) можно переопределить
(2) нельзя переопределить
(3) можно через импорт файла во внешнее описание стиля из элемента разметки
LINK На какой параметр указывает правило
P{font-size: 10px !important } :
!important в приведенном ниже фрагменте кода?
(1) это комментарий
(2) свойство идентификатора
p имеет пониженный приоритет
(3) свойство идентификатора
p имеет повышенный приоритет
(4) свойство идентификатора
p не будет учитываться при выводе на монитор
(5) данная запись никак не влияет на свойства идентификатора
p Какое значение не может приобретать свойство
width?
(1)
inherit
(2)
none
(3) 40pt
(4)
auto
(5) 77%
Какой стиль имеет наивысший приоритет?
(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} Какие из следующих элементов разметки являются блоками?
(1)
DIV
(2)
P
(3)
A
(4)
TD
(5)
UL Какие из следующих атрибутов CSS описывают свойства блоков?
(1)
color
(2)
background
(3)
margin
(4)
width
(5)
padding
(6)
text-decoration Какая запись из ниже перечисленных отменяет наличие границы у блока?
(1)
border:none
(2)
border-width:0px
(3)
border-style:invisible
(4)
border: 0 К какой группе атрибутов относятся атрибуты
color и background-color?
(1)
text properties
(2)
block properties
(3)
color and background properties
(4) эти атрибуты относятся к различным группам атрибутов CSS
Укажите правильный способ задания фонового изображения:
(1)
background-image: url(pic.gif)
(2)
background-image: pic.gif
(3)
background-color: url(pic.gif)
(4)
background-url: pic.gif
(5) все варианты неверны
Какими свойствами будет обладать блочный элемент, определенный следующим образом
#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
Какой порядок следования трех блочных элементов
<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>
First, Second и Third в приведённых ниже фрагментах кода является верным
ПЕРВЫЙ ПРИМЕР
ВТОРОЙ ПРИМЕР
(1) блоки будут располагаться на трех разных строках соответственно
(2) в первом примере
First, Second и Third расположены каждый на новой строке; во втором примере все они расположены на одной строке
(3) в первом примере -
First , на той же строке - Second и на следующей строке - Third; во втором примере - First, на следующей строке - Second и рядом - Third
(4) в первом примере
First - на первой строке. Second и Third - на второй строке; на втором примере First и Second - на первой строке, Third - на второй
(5) оба примера одинаковы с точки зрения относительного расположения блочных элементов и будут располагаться на одной строке
Какие из перечисленных ниже определений свойства
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 Каким атрибутом определяется внешний отступ от границы блочного элемента?
(1)
padding
(2)
border
(3)
margin
(4)
shape Какой из атрибутов стилей определяет гарнитуру шрифта?
(1)
font-family
(2)
font-style
(3)
font-variant
(4)
font-align В каких единицах задается свойство шрифта
x-height?
(1)
px
(2)
%
(3)
pm
(4)
mm
(5)
ex Какой элемент HTML-разметки используется для установки гарнитуры шрифта?
(1)
<span class=family>...</span>
(2)
<font face=...>...</font>
(3)
<p id=font_face>...</p>
(4)
<font famaly=...>...</font> Какая из следующих записей соответствует элементу разметки
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> Одинаковое ли расстояние между буквами в шрифтах различных гарнитур при равных кеглях?
(1) неодинаковое
(2) одинаковое
(3) все определяется версией браузера
Что подразумевает следующее описание:
<span style="text-transform:capitalize;">...</span>
(1) фрагмент текста будет отображаться только заглавными буквами
(2) все слова во фрагменте текста будут начинаться с заглавных букв, а остальные буквы будут преобразованы в строчные
(3) в этом определении есть ошибка, поэтому оно ничего не подразумевает
(4) все слова во фрагменте текста будут преобразованы в строчные
Можно ли, управляя межстрочным расстоянием, "наехать" строкой на строку?
(1) нельзя, т.к. не существует отрицательного межстрочного расстояния
(2) можно, задав отрицательное межстрочное расстояние
(3) можно, задав значение атрибута
line-height меньше, чем значение атрибута font-size Для размещения элемента у левой или правой границы и обеспечения обтекания текста вокруг него используется свойство:
(1)
align
(2)
float
(3)
position
(4)
margin
(5)
padding Имеется абзац, состоящий из нескольких строк. Как будет выглядеть первая строка данного абзаца, свойства которой определены следующим образом:
<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 раза больше следующих
Какой из перечисленных вариантов задает курсивный текст?
(1)
font-type: italic
(2)
font-style:italic
(3)
font-decoration:italic
(4)
font-transform:italic
(5)
font-glyph:italic Какими будут цвета текста и фона приведенного ниже рисунка согласно присвоенным атрибутам:
<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) текст белого цвета, фон - черного цвета
Какие параметры форматирования определяют свойства
letter-spacing со значением 3px и word-spaсing со значением 18px соответственно:
(1) сжатие букв первого абзаца 3px; расстояние между абзацами - 18px
(2) увеличение интервала между символами на 3px и расстояния между словами на 18px
(3) увеличение межстрочного интервала на 3px, а интервала между символами на 18px
(4) отступ слева первого строчного элемента - 18px; интервал между буквами первого слова 3px
(5) расстояние между строками - 18px; интервал между словами - 3px
Во внешней таблице стилей определен шрифт идентификатора
p, равный 0.85px; во внедренной таблице тот же идентификатор p со свойствами шрифта равен 2em; в элементе разметки все тот же идентификатор приобретает размеры шрифта 14em.
Каким будет размер шрифта после применения описанной выше схемы форматирования?
(1) размер будет вычислен на основании среднего арифметического значений 14px, 2em и 0.85em
(2) 2em
(3) будет использован размер шрифта по умолчанию
(4) 0.85px
(5) 14em
Вы создали таблицу стилей, в которой определили используемые шрифты для элемента
#box {font-family: Verdana, "Comic Sans MS", Geneva, Arial, Helvetica, sans-serif}
Каким шрифтом будет отображено содержимое
#box следующим образом:
#box, если на компьютере пользователя установлены все шрифты, кроме Verdana и Geneva?
(1) семейством шрифтов sans-serif
(2) Verdana
(3) Helvetica
(4) Arial
(5) Comic Sans MS
Свойство абзаца было определено следующим образом:
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif
Что произойдет после обработки браузером следующего фрагмента кода, если пользователь первого из объявленных шрифтов не будет обнаружен:
(1) шрифт Verdana будет автоматически загружен из сети Интернет
(2) будет проигнорирована вся строка и использован системный шрифт
(3) будет отображено приглашение вставить диск с версией Windows для установки шрифта
(4) в местах использования шрифта будет показан нечитаемый набор символов
(5) шрифт Verdana будет заменен следующим, указанным в свойствах данного элемента. Если ни один из указанных шрифтов в таблице стилей не будет найден на пользовательском компьютере, то будет использован шрифт по умолчанию
Какого цвета будет фон остальной страницы, кроме элемента разметки
p#text{background: green;}
p.text(background: red;}
</style>
</head>
<body>
<p class="text" id="text">text</p>
p после обработки браузером следующего фрагмента кода:
(1) по умолчанию
(2) зеленый
(3) белый
(4) красный
(5) оранжевый
Как можно получить при помощи таблицы стилей красную строку?
(1) при помощи атрибута
text-indent
(2) путем вставки несжимаемых пробелов можно
(3) применив к части текста
display:рге
(4) это сделать нельзя
(5) используя в коде символ табуляции
Чем можно управлять посредством атрибутов CSS?
(1) формой маркеров
(2) изображением маркеров
(3) и формой, и изображением маркеров
(4) значениями списков
Какие атрибуты CSS отвечают за отображение картинки маркера списка?
(1)
list-style-type
(2)
list-style-image
(3)
list-style-url
(4)
list-style-src С помощью какого свойства можно задать величину полей за пределами рамки элемента?
(1)
padding
(2)
margin
(3)
field-size
(4)
max-width
(5) такого свойства нет
Какой из нижеприведенных вариантов задает красный фон для всех элементов класса
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;} В чём состоит отличие между примерами, представленными в следующем фрагменте кода:
/* первый пример */
р, 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. Во втором примере свойства идентичны Какое значение не может приобретать свойство
float?
(1)
left
(2)
right
(3)
none
(4)
inherit
(5)
both Необходимо создать автоматическую нумерацию списка в виде Десятеричных чисел, дополненных начальными нулями. Какое значение свойства
list-style-type позволит решить поставленную задачу?
(1)
decimal
(2)
decimal-leading-zero
(3)
hebrew
(4)
cjk-ideographic
(5)
georgian Какой из атрибутов CSS определяет порядок перекрытия блоков?
(1)
visibility
(2)
position
(3)
z-index
(4)
clip Какие атрибуты определяют площадь, занимаемую блоком на экране?
(1)
position
(2)
width
(3)
height
(4)
display
(5)
visibility Можно ли использовать отрицательные значения при указании координат блока?
(1) нет нельзя
(2) можно, но только в относительных координатах
(3) можно только в абсолютных координатах
(4) можно в любой из допустимых координатных систем
Закрывает ли ближний к пользователю видимый блок содержание других видимых блоков?
(1) закрывает полностью в области наложения блоков
(2) закрывает полностью в области наложения блоков, если для блока определен фон
(3) закрывает частично в области наложения блоков, если фон не был определен или прозрачен
Если в документе описано три блока: первый имеет цвет
#666 и z-index:19; второй имеет цвет #999 и z-index:1; третий имеет цвет # 333 и z-index: 72. Блок, какого цвета будет выведен первым и наложен на два остальных?
(1)
#666
(2)
#333
(3)
#999
(4) блок будет невидимым
(5) на страницу не выведется ничего
Какой слой будет виден после обработки браузером следующего фрагмента кода?
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 Как убрать подчеркивание для всех ссылок?
(1)
a { underline: none; }
(2)
a { text-decoration: free; }
(3)
a { text-decoration: none; }
(4)
a { underline: 0; }
(5)
a { href: 0; } Каково назначение точки в имени селектора описания CSS?
(1) разделитель в имени селектора (отделяет имя класса от его модификатора)
(2) обязательный символ при обозначении селектора корневого класса
(3) опционный параметр, его использование жестко не регламентируется
(4) определяет идентификатор класса
Где должна появляться команда
import:?
(1) до любых стилевых правил
(2) не имеет значение
(3) после стилевых правил
(4) в теге документа
Найдите все ошибочные описания стиля:
(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 } Свойства тега
H3 объявлены во внешней таблице стилей следующим образом: h3 {text-indent: 4em}. Необходимо изменить его в единственном месте одной страницы, переопределив значение text-indent на 2em.
Какая последовательность действий приведет к оптимальному решению поставленной задачи?
(1) добавить к внешней таблице стилей новый класс для тега
H3 (например, h3.new {text-indent: 0})
(2) подключить еще одну внешнюю таблицу стилей и в ней определить необходимые параметры
(3) переопределить стиль в элементе разметки (
H3) посредством атрибута style
(4) разместить описание стиля в заголовке документа в элементе
style
(5) необходимо подключить новую таблицу стилей при помощи конструкции
@import url Какое из перечисленных ниже значений установлено для свойства
visibility по умолчанию?
(1)
Visibility: visible
(2)
Visibility: hidden
(3)
Visibility: inherit
(4)
Visibility: normal
(5)
Visibility: collapse Укажите правильный вариант размещения таблицы стилей в документе:
(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 }>
Какое значение не может приобретать свойство
height?
(1)
inherit
(2)
none
(3) 40pt
(4)
auto
(5) 77%
Как обозначается универсальный селектор?
(1)
@
(2)
#
(3)
*
(4)
$
(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 идентичны. Во втором примере содержатся ошибки, браузер будет игнорировать данные строки Какие из элементов разметки можно пересекать строковыми элементами разметки согласно DTD HTML 4.0:
(1)
I
(2)
P
(3)
B
(4)
A
(5)
TD Чем определяется ширина поля между границами вложенных друг в друга блоков?
(1) атрибутами
margin и padding охватывающего блока
(2) атрибутами
margin и padding вложенного блока
(3) атрибутом
padding охватывающего блока и атрибутом margin вложенного блока
(4) относительной позицией вложенного блока
Какой из атрибутов CSS определяет блочный элемент разметки как обтекаемый элемент разметки?
(1)
align
(2)
float
(3)
clear
(4)
center Какая из записей является аналогом следующего 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> div?
(1) все 4 стороны чёрные
(2) все 4 стороны зелёные
(3) три стороны зелёные, верхняя чёрная
(4) рамки вообще не будет из-за конфликта в CSS
(5) одна сторона зелёная, верхняя сторона чёрная
Каким будет значение отступа от верхнего края страницы до верхнего края строки
<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>
First после обработки браузером следующего фрагмента кода
(1) 150px
(2) 50px
(3) 100px
(4) 170px
(5) 160px
В каких строках приведенного ниже фрагмента кода допущены ошибки
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
Что произойдет после обработки браузером следующего фрагмента кода?
<div style="width: 440px; height: 100px; overflow: auto">содержимое блока</div>
(1) если содержимое превышает размеры блока, то появляется элемент прокрутки
(2) если содержимое блока превышает по размерам установленные величины, то нижняя часть обрезается
(3) содержимое автоматически будет прокручиваться, если не помещается в установленные рамки блока
(4) если содержимое блока занимает меньше места, чем обозначено, то блок будет уменьшен до меньших размеров
(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 Какое из значений свойства
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;} Какой из перечисленных вариантов задает курсивный текст?
(1)
font-type: italic
(2)
font-style:italic
(3)
font-decoration:italic
(4)
font-transform:italic
(5)
font-glyph:italic При помощи какого свойства можно задать цвет фона?
(1)
background
(2)
color
(3)
bgcolor
(4)
fon-color
(5)
background-color Какое из следующих определений кегля верно?
(1)
font-size:12pt
(2)
font-variant:small-caps
(3)
font-size:10px
(4)
font-size:60% Укажите доступные значения свойства
font-size:
(1)
10%
(2)
10em
(3)
large
(4)
big Какие из следующих атрибутов CSS влияют на выравнивание текста в блоке?
(1)
font-align
(2)
text-align
(3)
float
(4)
vertical-align Какой из следующих селекторов описывает свойства первой строки параграфа?
(1)
text-indent
(2)
p:first-line
(3)
p:first-letter
(4)
first-line Найдите неверное описание:
(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;} C помощью какого свойства указывается гарнитура шрифта для текстового элемента?
(1)
font-family
(2)
font-type
(3)
font-style
(4)
font-variant
(5)
font-weight Имеется абзац, состоящий из нескольких строк. Как будет выглядеть первая строка данного абзаца, свойства которой определены следующим образом:
<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 раза больше следующих
Какое значение имеет по умолчанию
'direction'?
(1)
rtl
(2)
ltr
(3)
inherit
(4)
left Каким образом будет выглядеть конечный документ после обработки браузером следующего фрагмента кода:
<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) все настройки по умолчанию, так как возник конфликт стилей
Вы создали таблицу стилей, в которой определили используемые шрифты для элемента
#box {
font-family: Verdana, "Comic Sans MS", Geneva, Arial, Helvetica, sans-serif
}
Каким шрифтом будет отображено содержимое
#box следующим образом:
#box, если на компьютере пользователя установлены все шрифты, кроме Geneva:
(1) Verdana
(2) Arial
(3) Comic Sans MS
(4) семейством шрифтов sans-serif
(5) Helvetica
Какая из представленных ниже единиц измерения позволит определить шрифт как строго фиксированный?
(1) em
(2) px
(3) emx
(4) %
(5) ex
Укажите верное значение свойств
word-spacing и letter-spacing:
(1)
mm
(2)
center
(3)
left
(4)
margin Вы создали таблицу стилей, в которой определили используемые шрифты для элемента
#box {font-family: Verdana, "Comic Sans MS", Geneva, Arial, Helvetica}
Каким шрифтом будет отображено содержимое
#box следующим образом:
#box, если на компьютере пользователя не установлены все перечисленные шрифты?
(1) семейством шрифтов sans-serif
(2) Verdana
(3) Helvetica
(4) Arial
(5) Comic Sans MS
В какой строке присутствует неверное определение свойства
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 Необходимо выделить текст таким образом, чтобы межсимвольное расстояние составило 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 Можно ли не отображать и не интерпретировать HTML-код при его загрузке в браузер?
(1) можно (
<input type=hidden>)
(2) можно (
<div style="visibility:hidden;">...</div>)
(3) можно (
<div style="display:none;">...</div>)
(4) нельзя
Какие значения может принимать атрибут CSS, который определяет картинку маркера списка?
(1)
none
(2)
url(http://kuku.ru/kuku.gif)
(3)
src(http://kuku.ru/kuku.gif)
(4)
circle Какое значение нужно присвоить свойству элемента
display, чтобы он не отображался на странице?
(1)
display:block
(2)
display:none
(3)
display:inline
(4)
display:invisible
(5)
display:list-item Какой из нижеприведённых вариантов располагает маркер внутри зоны содержимого элемента?
(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 Каким будет размер шрифта текста
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> :
First и Second соответственно после обработки браузером следующего фрагмента кода:
(1) 2em и 1.5em
(2) 2em и 1em
(3) 1em и 1.5em
(4) 1.5em и 2em
(5) 1.5em и 1.5em
Необходимо промаркировать список при помощи окружностей и залить его серым цветом, включая сами маркеры. Какие 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} Необходимо создать автоматическую нумерацию списка в виде букв
ascii нижнего регистра. Какое значение свойства list-style-type позволит решить поставленную задачу:
(1)
lower-latin
(2)
upper-alpha
(3)
lower-greek
(4)
lower-roman Необходимо промаркировать список незалитыми прямоугольниками. Какой фрагмент кода позволит решить поставленную задачу?
(1)
List-style-type: quadrate
(2)
List-style: quadrangle
(3)
List-style-type: square
(4)
List-style-image:url(путь к изображению с незалитым прямоугольником)
(5)
List-type: perimeter Какой слой не будет виден после обработки браузером следующего фрагмента кода:
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 Как изменяется значение атрибута, определяющего порядок перекрытия, с точки зрения пользователя браузера?
(1) увеличивает свое числовое значение в направлении "от пользователя в глубину экрана"
(2) увеличивает свое числовое значение из глубины экрана по направлению к пользователю
(3) принимает те значения, которые назначил автор страницы
Какие атрибуты определяют местоположение блока на экране?
(1)
position
(2)
top
(3)
left
(4)
display
(5)
visibility Какие атрибуты определяют координаты блока?
(1)
left-top
(2)
bottom-right
(3)
top
(4)
left
(5)
right Отметьте правильные значения свойства
float
(1)
top
(2)
bottom
(3)
inherit
(4)
right
(5)
left Отметьте фрагмент правильный кода:
(1)
body { color: black }
(2)
body { color=black }
(3)
body: black
(4)
body ( color: black )
(5)
body.color=black Как правильно определить стиль отображения гипертекстовой ссылки внутри неупорядоченного списка?
(1)
ul.a {color:red;}
(2)
ul,a {color:red;}
(3)
ul a {color:red;}
(4)
ul:a {color:red;} Где должен находиться тэг
<style>?
(1) только внутри тега
<head>
(2) только внутри тега
<body>
(3) не имеет значения
(4) в теге
<script> Укажите, какая из единиц измерений не является абсолютной:
(1) pt
(2) mm
(3) in
(4) px
(5) cm
В каких строках подключения внешней таблицы стилей к документу допущена ошибка?
(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"> Дан код:
<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) ни в какой, птому что второе правило перекрывает первое
Фон веб-страницы белый. Возможно ли не указывать для тега
body свойство background: white в целях оптимизации кода и сокращения размера таблицы стилей?
(1) нет, так как это необходимый атрибут, без которого остальные значения
body будут проигнорированы
(2) нет, так как некоторые браузеры по умолчанию используют серый цвет
(3) да, белый фон установлен по умолчанию в всех браузерах
(4) нет, поскольку в случае, если пользователь изменил белый фон в свойствах системы, то будет указан именно цвет, определенный пользователем
Какое из приведенных ниже свойств, определяющих положение элемента, содержит ошибку?
(1)
Bottom: 5em
(2)
Right: auto
(3)
Left: 10%
(4)
Top: absolute
(5)
Position: inherit Какое значение не может приобретать свойство
border-width?
(1)
thin
(2) -5
(3) 10
(4)
medium
(5)
thick Задан фрагмент кода:
<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; } Каким будет порядок расположения слова
<body style="margin: 0; padding: 0">
<div style="border: lpx solid; clear: both; float: right; position: static; left: 0; width: 50%;">Box</div>
"Box" и самого блока после обработки браузером следующего фрагмента кода:
(1) блок прижат к левому краю страницы; слово
"Box" - справа от блока
(2) блок прижат к левой части страницы; слово
"Box" прижато к его правому краю
(3) блок занимает всю ширину страницы; слово
"Box" прижато к правому краю
(4) блок прижат к правому краю страницы; слово
"Box" прижато к левой границе блока
(5) блок расположен посередине страницы; слово
"Box" прижато к его правому краю Чему равен внешний отступ (
div {margin:20px;}
...
<div>
<p>
...
</p>
</div>
margin) параграфа для следующего описания:
(1) 20px
(2) отступ умолчания
(3) 20px+отступ умолчания
(4) 10px
Какие значения может принимать атрибут
float?
(1)
right
(2)
left
(3)
top
(4)
bottom
(5)
both Что определяет атрибут
color?
(1) цвет всех компонентов блочного элемента разметки
(2) цвет границы блочного элемента разметки
(3) цвет текста в блочном элементе разметки
(4) цвет текста в строковом или блочном элементе разметки
div?
(1) все 4 стороны чёрные
(2) три стороны красные, верхняя чёрная
(3) все 4 стороны красные
(4) рамки вообще не будет из-за конфликта в CSS
(5) одна сторона красная, верхняя сторона чёрная
В каких из шести приведенных ниже строк кода допущены ошибки:
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
Как будет располагаться блочный элемент на странице
<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
Какое значение по умолчанию у
margin-right :
(1)
auto
(2) 0
(3) 100%
(4) 10
Какой перечень свойств класса, описанного следующим фрагментом кода, является верным?
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
Как будет располагаться блок со свойствами, определенными в следующем фрагменте кода:
<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; отступ слева занимает все свободное пространство; блок прижат к правому краю
Какое из свойств, определенных в следующем фрагменте кода, содержит ошибку:
<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) все значения указаны корректно
Каким будет порядок расположения слова
<body style="margin: 0; padding: 0">
<div style="border: 1px solid; clear: both; float: right; position: static; left: 0; width: 50*;">Box</div>
"Box" и самого блока после обработки браузером следующего фрагмента кода
(1) блок прижат к правому краю страницы; слово
"Box" прижато к левой границе блока
(2) блок занимает всю ширину страницы; слово
"Box" прижато к правому краю
(3) блок прижат к левой части страницы; слово
"Box" прижато к его правому краю
(4) блок прижат к левому краю страницы; слово
"Box" - справа от блока
(5) блок расположен посередине страницы; слово
"Box" прижато к его правому краю Имеется абзац, состоящий из нескольких строк
<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 раза больше следующих
Что понимают под гарнитурой шрифта?
(1) тип шрифта
(2) набор начертаний
(3) начертание
(4) размер шрифта
Кегль определяет:
(1) межстрочное расстояние
(2) размер заглавной буквы
(3) расстояние между базовыми линиями шрифта
(4) размер "очка" шрифта
Какие из перечисленных атрибутов определяют свойства текста?
(1)
font-size
(2)
text-align
(3)
line-height
(4)
color
(5)
text-transform
(6)
letter-spacing Какой из вариантов - аналог следующего элемента разметки:
<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> Является ли синтаксически правильным следующее описание:
<p style="text-indent=-20pt;">...</p>
(1) является, т.к. отрицательное значение отступа допускается
(2) не является, т.к. отрицательное значение отступа в данном случае не допускается
(3) не является, т.к. вместо символа
":" в описании используется символ "=", что является синтаксический ошибкой Данный код:
P {text-align: justify}
задает:
(1) выравнивание по центру текста в абзаце
(2) выравнивание по ширине текста в абзаце
(3) подчеркивание по ширине текста в абзаце
(4) зачеркивание текста в абзаце
Какое из следующих свойств не производит изменение позиции текста в блоке (выравнивание)?
(1)
text-indent
(2)
text-align
(3)
text-padding
(4)
vertical-align
(5)
vertical-align со значением text-top Необходимо закрасить блочный элемент
<style>
body {background: Gray}
p {background: orange}
</style>
<body>
<p>First
<div> Sec ond</div>
</p>
</body>
Каким образом будет выглядеть конечный документ после обработки браузером данного фрагмента кода и почему?
div фоном, как у предка <p>. Для этого Вы помещаете блок div внутрь тега <p>
(1)
First - на оранжевом фоне, Second - на фоне по умолчанию, поскольку для него не было указано свойств; остальная часть - на сером фоне
(2)
First -на оранжевом фоне, Second - на оранжевом , так как выполняется правило наследования свойств; остальная часть страницы - на сером фоне
(3)
First и Second - на сером фоне, как и вся страница поскольку наследуется свойство фона <body>
(4)
First - на сером, Second - на оранжевом фоне - наследуется свойство тега <p>
(5)
First - на оранжевом, Second - на сером фоне; остальная часть страницы - на сером фоне Укажите неверное значение свойств
word-spacing и letter-spacing:
(1)
normal
(2)
inherit
(3)
center
(4)
10 px Каким образом будут отформатированы фрагменты
<style>
p {color: Green;
font-style: italic;
}
p.new{color: blue;}
</style>
</head>
<body>
<p class="new">Simple text</p>
<p>other text</p>
simple text и other text после обработки браузером следующего фрагмента кода?
(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 - зеленый нормальный Можно ли управлять через CSS отображением списка определений?
(1) нельзя
(2) можно, т.к. для этой цели существует специальный атрибут
(3) можно как обычным блоком текста
Можно ли заказать в качестве маркера упорядоченного списка картинку?
(1) нельзя
(2) можно только размера 16x16 px
(3) можно любую
Какие свойства позволяют отобразить таблицу с одной видимой границей и без дополнительного промежутка?
(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) все вышеперечисленное неверны
Для указания типа маркера списочного элемента используется свойство:
(1)
list-style-type
(2)
type
(3)
list
(4)
list-type
(5)
li-style Какое значение позиции маркера списка (
list-style-position) является используемым по умолчанию?
(1)
Outside
(2)
Relative
(3)
Interhit
(4)
Inside
(5)
Absolute В чем состоит отличие между псевдоэлементами
:before и :after, которые применяются со свойством content(значение)?
(1) при использовании
:before положение содержимого находится выше основного текста, а при использовании :after - ниже
(2) при использовании
:before положение содержимого находится ниже основного текста, а при использовании :after - выше
(3) положение содержимого
(content) зависит конкретно от того, что записано в (значение)
(4) при использовании
:before содержимое(content) генерируется перед основным элементом, к которому применяется, а при использовании :after - после
(5) при использовании
:before содержимое (content) генерируется после основного элемента, к которому применяется, а при использовании :after - перед Какой порядок следования списка свойств
border {medium outset #063} :
border в приведённом ниже фрагменте кода является верным:
(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 С помощью какого свойства можно задать форму указателя мыши, когда он находится над элементом?
(1)
cursor
(2)
cursor-style
(3)
cursor-decoration
(4)
cursor-type Какие координатные системы поддерживает спецификация CSS?
(1) абсолютную(absolute)
(2) относительную(relative)
(3) базовую(base)
(4) местную(local)
(5) сервера(server)
(6) приложения(application)
Какие атрибуты определяют координаты блока?
(1)
position-x
(2)
position-y
(3)
bottom-right
(4)
top
(5)
left
(6)
right Что происходит при абсолютном позировании?
(1) абсолютно позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причём сам элемент или его потомки могут перекрывать ранее отображённые элементы
(2) элементы после изъятия из исходного текста документа всех абсолютно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего
(3) элементы не изымаются из исходного текста документа и образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего
Укажите, какого типа позиционирования не существует:
(1)
static
(2)
relative
(3)
absolute
(4)
fixed
(5) существуют все
Какое значение по умолчанию имеет
'z-index'?
(1)
inherit
(2)
absolute
(3)
auto
(4)
0 Какой из блоков будет виден после обработки браузером следующего фрагмента кода?
<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) будут видны только желтый и оранжевый блоки
Необходимо создать небольшой сайт. Решено подключить стилевую таблицу, чтобы она влияла на определенные, заранее отмеченные элементы всего сайта. Что для этого нужно сделать?
(1) стили необходимо определять в каждом элементе разметки с помощью атрибута
style
(2) использовать ссылку в заголовке на внешнюю таблицу стилей на всех необходимых страницах сайта
(3) разместить на каждой странице в теле документа ссылку на внешнюю таблицу стилей
(4) разместить на главной странице сайта (index.html) в заголовке описания элементов конструкцию
<style> …содержимое… </style>
(5) для каждой страницы сайта необходимо создать собственную таблицу стилей
Какого цвета слой не будет виден после обработки браузером следующего фрагмента кода?
<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) зеленый
Страница имеет активную полосу прокрутки. Каким будет поведение расположенного на странице элемента в случае, если он обладает свойством
position: fixed?
(1) позиция элемента зависит от значения тега
body
(2) такое значение недопустимо
(3) данное свойство не указывает на поведение элемента в случае прокрутки страницы
(4) элемент не должен прокручиваться вместе с остальной частью страницы
(5) элемент должен прокручиваться вместе с остальной частью страницы