Спецификация CSS2

Упражнение 1:

Номер 1

Укажите псевдоэлементы:

Ответ:

(1) :before

(2) :after

(3) :top

(4) :bottom

Номер 2

Какой псевдоэлемент специфицирует размещение содержимого до содержимого дерева документа?

Ответ:

(1) :after

(2) :before

(3) :visited

(4) :link

Номер 3

Какой псевдоэлемент специфицирует размещение содержимого после содержимого дерева документа?

Ответ:

(1) :before

(2) :link

(3) :visited

(4) :after

Упражнение 2:

Номер 1

Какое правило вставляет строку "Note: " перед содержимым каждого элемента P, чей атрибут "class" имеет значение "note"?

Ответ:

(1) P { content: "Note: " }

(2) P:before { content: "Note: " }

(3) P.note { content: "Note: " }

(4) P.note:before { content: "Note: " }

Номер 2

В каком примере изменение вышеприведенной таблицы стилей вызовет появление сплошной зеленой рамки вокруг параграфа, включая начальную строку:

Ответ:

(1)

P.note:before { content: "Note: " }
P.note{ border: solid green }

(2)

P.note:before { content: "Note: " }
   P.note{ border: outset green }

(3)

P.note:before { content: "Note: " }
   P.note{ border: dashed green }

(4)

P.note:before { content: "Note: " }
   P.note{ border: groove green }

Номер 3

Какие правила вставляют открывающий знак кавычек перед каждым элементом Q, цвет знака кавычки - красный, но шрифт будет тот же, что и шрифт остальной части элемента Q:

Ответ:

(1)

Q:before {
  content: open-quote;
  color: green
}

(2)

Q:before {
  content: open-quote;
  color: red
}

(3)

Q:before {
  content: open-quote;
  color: yellow
}

(4)

Q:before {
  content: open-quote;
  color: gray
}

Упражнение 3:

Номер 1

В каком примере свойство 'display' явно устанавливается в 'block', так что вставленный текст становится блоком:

Ответ:

(1)

BODY:after {
   content: "The End";
   display: inline;
   margin-top: 2em;
   text-align: center;
}

(2)

BODY:after {
   content: "The End";
   text-align: center;
}

(3)

BODY:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}

Номер 2

Какие свойства будут игнорироваться браузерами при наличии псевдоэлементов :before и :after?

Ответ:

(1) 'position'

(2) 'width'

(3) 'float'

(4) 'height'

Номер 3

Укажите допустимые значения свойства 'display':

Ответ:

(1) :before { display: 'none' }

(2) :after { display: 'none' }

(3) :before { display: 'marker' }

(4) :after { display: 'marker' }

Упражнение 4:

Номер 1

Какое свойство используется с псевдоэлементами :before и :after для генерации содержимого документа:

Ответ:

(1) 'content'

(2) 'block'

(3) 'inline'

(4) 'quotes'

Номер 2

Укажите допустимые значения свойства 'content':

Ответ:

(1) 'open-quote'

(2) 'close-quote'

(3) 'inherit'

(4) 'no-open-quote'

Номер 3

Укажите допустимые значения свойства 'content':

Ответ:

(1) 'no-quote'

(2) 'open-quote'

(3) 'close-quote'

Упражнение 5:

Номер 1

Какое правило вставляет текст атрибута "alt" перед изображением:

Ответ:

(1) IMG:before { content: attr(alt)}

(2) IMG:before { attr(alt)}

(3) IMG:before { content: attr}

(4) IMG:before { attr: alt }

Номер 2

С помощью какого свойства можно специфицировать кавычки?

Ответ:

(1) 'content'

(2) 'top'

(3) 'quotes'

(4) 'height'

Номер 3

Укажите возможные значения свойства 'quotes'?

Ответ:

(1) 'none'

(2) 'inherit'

(3) 'auto'

(4) 'open-quote'

Упражнение 6:

Номер 1

Как можно поместить знаки открывающей кавычки в каждом параграфе в BLOCKQUOTE и одиночную закрывающую кавычку в конце:

Ответ:

(1) BLOCKQUOTE P:before { content: open-quote }

(2) BLOCKQUOTE P.last:after { content: close-quote }

(3) BLOCKQUOTE P:after { content: no-close-quote }

Номер 2

В каком примере кавычки вставляются до содержимого элемента Q:

Ответ:

(1) Q:before { content: open-quote }

(2) P:before { content: open-quote }

(3) Q:after { content: close-quote }

(4) P:after { content: close-quote }

Номер 3

В каком примере кавычки вставляются после содержимого элемента Q:

Ответ:

(1) Q:after { content: close-quote }

(2) Q:before { content: open-quote }

(3) P:after { content: close-quote }

(4) P:before { content: open-quote }

Упражнение 7:

Номер 1

С помощью какого свойства можно управлять видимостью?

Ответ:

(1) 'display'

(2) 'visibility'

(3) 'top'

(4) 'height'

Номер 2

Какое свойство контролирует автоматическую нумерацию?

Ответ:

(1) 'counter-reset

(2) 'counter'

(3) 'counters'

(4) 'counter-increment'

Номер 3

Какой параметр сбросит таблица стилей:
H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

Ответ:

(1) 'section'

(2) 'imagenum'

(3) 'counter'

(4) 'counter-reset'

Упражнение 8:

Номер 1

Какой параметр сбросит таблица стилей:
H1 { counter-reset: section -1 imagenum 99 }

Ответ:

(1) 'imagenum'

(2) 'counter'

(3) 'counter-reset'

(4) 'section'

Номер 2

В каком примере OL создаст счетчик, и все потомки OL будут ссылаться на этот счетчик:

Ответ:

(1) OL { counter-reset: item }

(2) OL { counter-reset: item } LI { display: block }

(3) OL { counter-reset: item } LI { display: block } LI:before { content: counter(item) ". "; counter-increment: item }

Номер 3

Какая таблица стилей нумерует вложенные элементы списка как "1", "1.1", "1.1.1" и т.д.:

Ответ:

(1) OL { counter-reset: item }

(2)

LI { display: block }
   LI:before { content: counters(item, "."); counter-increment: item }

(3) OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, "."); counter-increment: item }

(4) OL { counter-reset: item } LI:before { content: counters(item, ".");

Упражнение 9:

Номер 1

Форматировать счетчики можно следующими способами:

Ответ:

(1) P:before { content: counter(p, none) }

(2) DIV.note:before { content: counter(notecntr, disc) " " }

(3) BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }

Номер 2

С помощью какой таблицы стилей элементы H2 с классом "secret" не увеличивают 'count2', а элементы с 'visibility', установленной в 'hidden', увеличивают счетчики:

Ответ:

(1) H2.secret {display: none}

(2) H2 {counter-increment: count2; display: none}

(3) H1.secret {counter-increment: count2; display: none}

(4) H2.secret {counter-increment: count2; display: none}

Номер 3

Маркеры создаются путем установки свойства 'display' в 'marker' внутри следующих псевдоэлементов:

Ответ:

(1) :before

(2) :after

(3) :later

(4) :start

Упражнение 10:

Номер 1

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

Ответ:

(1) 'vertical-align'

(2) 'horizontal-align'

(3) 'vertical'

(4) 'horizontal'

Номер 2

Какое свойство специфицирует смещение по горизонтали между боксом маркера и ассоциированным основным боксом:

Ответ:

(1) 'marker'

(2) 'offset'

(3) 'transperent'

(4) 'marker-offset'

Номер 3

Укажите допустимые значения свойства 'marker-offset':

Ответ:

(1) 'inherit'

(2) 'auto'

(3) 'none'

(4) 'open-quote'

Упражнение 11:

Номер 1

В каком примере устанавливается маркер - изображение "picture.jpg" - в начале каждого элемента списка:

Ответ:

(1) UL { list-style-image: url("http://www.intuit.ru/") }

(2) UL { list-style-image: url("http://www.intuit.ru/picture.jpg") }

(3) UL { url("http://www.intuit.ru/picture.jpg") }

(4) UL { list-style-image ) }

Номер 2

В каком примере объявляется селектор-потомок:

Ответ:

(1) OL.alpha LI { list-style: lower-alpha }

(2) > LI { list-style: lower-alpha }

(3) < LI { list-style: lower-alpha }

Номер 3

В каком примере будет использоваться 'disc', если изображение недоступно:

Ответ:

(1) UL { list-style: url("http://www.intuit.ru/picture.png") disc } UL { list-style: none }

(2) UL { list-style: url("http://www.intuit.ru/picture.jpg") } UL { list-style: none }

(3) UL { list-style: none }

Спецификация CSS2 - тест 12