Основы работы с CSS



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

  • <LINK rel=»»stylesheet»» href=»»number.css»» type=»»text/css»»>
  • (Правильный ответ)
    <STYLE type=»»text/css»»>S { color: blue }</STYLE>
  • <STYLE type=»»text/css»»>P { color: blue }

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

  • <LINK rel=»»stylesheet»» href=»»one.css»» type=»»text/css»»>
  • (Правильный ответ)
    <STYLE type=»»text/css»»>H1 { color: blue }</STYLE>
  • HR { width:250px }

Какие свойства получат свои начальные значения в примере:
H1 { font: bold 12pt/14pt Helvetica }

  • (Правильный ответ) ‘font-weight
  • (Правильный ответ) ‘font-family’
  • ‘font-variant’

С помощью какого элемента можно сослаться на внешнюю таблицу стилей?

  • <STYLE>
  • <TABLE>
  • (Правильный ответ) <LINK>

Что является селектором в примере P { font-style:italic }?

  • (Правильный ответ) P
  • { font-style:italic }
  • P { font-style:italic }
  • ‘font-style’

Что является свойством объявления в примере P { font-weight: oblique }?

  • { font-weight: oblique }
  • ‘oblique’
  • (Правильный ответ) ‘font-weight’

Что является значением объявления в правиле «I { font-weight: bold }»?

  • { font-weight: bold }
  • (Правильный ответ) ‘bold’
  • I

Укажите корректный пример задания изображения в качестве фона:

  • (Правильный ответ)
    <style type=»»text/css»»>body {background-image:url(http://www.intuit.ru/pic.jpg);}</style>
  • <style type=»»text/css»»>body {background-image: «»url(http://www.intuit.ru/picture.jpg)»»;}</style>
  • <style type=»»text/css»»>body {background-image: http://www.intuit.ru/picture.jpg;}</style>

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

  • <style type=»»text/css»»>body {background-image: «»http://www.intuit.ru/picture.jpg»»;background-loop: repeat-y;}</style>
  • (Правильный ответ)
    <style type=»»text/css»»>body {background-image: url(http://www.intuit.ru/img.jpg);background-repeat: repeat-y;}</style>
  • <style type=»»text/css»»>body {bg-image: url(http://www.intuit.ru/picture.jpg);background-repeat: repeat-y;}</style>

Укажите корректный пример задания фиксированного (не прокручивающегося) фонового изображения:

  • (Правильный ответ)
    <style type=»»text/css»»>body {background-image: url(http://www.intuit.ru/picture.jpg);background-repeat: no-repeat;background-attachment: fixed;}</style>
  • <style type=»»text/css»»>body {background-image: url(http://www.intuit.ru/picture.jpg);background-repeat: no-repeat;background: fixed;}</style>
  • <style type=»»text/css»»>body {background-image: url(http://www.intuit.ru/picture.jpg);background-repeat: repeat;background-attachment: no-fixed;}</style>

Какое свойство позволяет задать цвет фона элемента?

  • (Правильный ответ) background-color
  • back
  • bg-color

Укажите корректный пример задания фонового цвета элемента:

  • (Правильный ответ)
    <style type=»»text/css»»>ol {background-color: #00FFFF}</style>
  • <style type=»»text/css»»>ol {bground: #00FFFF}</style>
  • <style type=»»text/css»»>ol {back-color: #00FFFF}</style>

Укажите корректный пример задания изображения в качестве фона:

  • (Правильный ответ)
    <style type=»»text/css»»>body {background-image:url(http://www.intuit.ru/img.jpg)}</style>
  • <style type=»»text/css»»>body {background-fon:»»http://www.intuit.ru/picture.jpg»»}</style>
  • <style type=»»text/css»»>body {bg-image:url(http://www.intuit.ru/picture.jpg)}</style>

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

  • <style type=»»text/css»»>body {background-image: url(http://www.intuit.ru/picture.jpg);background-repeat: repeat-horiz;}</style>
  • (Правильный ответ)
    <style type=»»text/css»»>body {background-image: url(http://www.intuit.ru/picture.jpg);background-repeat: repeat-x;}</style>
  • <style type=»»text/css»»>body {background-image: url(http://www.intuit.ru/picture.jpg);background-repeat: repeat;}</style>

Укажите корректный пример задания прокручивающегося фонового изображения:

  • <style type=»»text/css»»>body {background-image:url(http://www.intuit.ru/picture.jpg);background-repeat: no-repeat;background: repeat;}</style>
  • <style type=»»text/css»»>body {background-image:url(http://www.intuit.ru/picture.jpg);background-repeat: no-repeat;background-attachment: dynamic;}</style>
  • (Правильный ответ)
    <style type=»»text/css»»>body {background-image:url(http://www.intuit.ru/picture.jpg);background-repeat: no-repeat;background-attachment: scroll;}</style>

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

  • (Правильный ответ)
    <style type=»»text/css»»>body{ background: blue url(http://www.intuit.ru/picture.jpg) repeat-x center; }</style>
  • <style type=»»text/css»»>body{ background: blue url(http://www.intuit.ru/picture.jpg) scroll-x center; }</style>
  • <style type=»»text/css»»>body{ background: blue url(http://www.intuit.ru/picture.jpg) repeat center; }</style>

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

  • (Правильный ответ)
    <style type=»»text/css»»>body {background-image:url(http://www.intuit.ru/pic.jpg);background-repeat: repeat-x;}</style>
  • <style type=»»text/css»»>body {background-image: http://www.intuit.ru/picture.jpg;background-repeat: repeat-x;}</style>
  • <style type=»»text/css»»>body {background-image: «»url(http://www.intuit.ru/picture.jpg)»»;background-repeat: repeat-x;}</style>

Укажите корректный пример задания фонового цвета элемента:

  • <style type=»»text/css»»>p {bg-color: blue}</style>
  • (Правильный ответ)
    <style type=»»text/css»»>ul {background-color: rgb(200,10,200)}</style>
  • <style type=»»text/css»»>ol {bground-fon: #00FFFF}</style>

Укажите корректный пример задания фиксированного (не прокручивающегося) фонового изображения:

  • <style type=»»text/css»»>body {background-image:url(http://www.intuit.ru/picture.jpg)background-repeat: no-repeat;background-attachment: static}</style>
  • <style type=»»text/css»»>body {background-image:url(http://www.intuit.ru/picture.jpg)background-repeat: no-repeat;background-attachment: locked}</style>
  • (Правильный ответ)
    <style type=»»text/css»»>body {background-image:url(http://www.intuit.ru/picture.jpg)background-repeat: no-repeat;background-attachment: fixed}</style>

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

  • (Правильный ответ) right
  • none
  • (Правильный ответ) left

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

  • ‘text-shadow’
  • (Правильный ответ) ‘text-align’
  • ‘text-indent’

В каком примере текст тэга EM в заголовке H1 будет иметь обычное начертание?

  • H1 + EM { font-style: normal }
  • H1 {EM { font-style: normal }}
  • (Правильный ответ) H1, EM { font-style: normal }

Какое свойство позволяет задать цвет текста?

  • textcolor
  • text
  • (Правильный ответ) color

Какое свойство задает выравнивание содержимого блока?

  • ‘text-indent’
  • ‘text-decoration’
  • (Правильный ответ) ‘text-align’

В каком примере текст тэга EM в заголовке H1 будет иметь обычное начертание?

  • H1 {EM { font-style: normal }}
  • (Правильный ответ) H1 EM { font-style: normal }
  • H1, EM { font-style: normal }

Перечислите доступные свойства параметра font

  • (Правильный ответ) font-variant
  • font
  • (Правильный ответ) font-style

Укажите корректный пример сокращенной записи свойств шрифта:

  • p { font-family: oblique small-caps bold 5px serif }
  • (Правильный ответ)
    p { font: oblique small-caps bold 5px serif }
  • p { font: italic; small-caps; 10px; 12px; serif }

Какой из примеров устанавливает маленькие заглавные буквы для заголовка H3 и наклонные — для выделенного текста (EM)?

  • (Правильный ответ) H3 { font-variant: small-caps }
    EM { font-style: oblique }
  • H3 { font-variant: small-caps }
    EM { font-style: cursiv }
  • H { font-variant: small-caps }
    EM { font-style: oblique }

Укажите корректные примеры описания шрифтов:

  • (Правильный ответ)
    p { font: status-bar }
  • (Правильный ответ)
    h1 { font: italic 200 arial }
  • pre { oblique arial }

Какое свойство определяет семейство шрифтов?

  • ‘font-style’
  • ‘font-variant’
  • (Правильный ответ) ‘font-family’

В каких примерах свойство ‘font-size’ описано без ошибок?

  • (Правильный ответ) BLOCKQUOTE { font-size: larger }
  • (Правильный ответ) EM { font-size: 150% }
  • (Правильный ответ) P { font-size: 12pt; }

Укажите корректные примеры описания шрифтов:

  • (Правильный ответ)
    pre { font: oblique arial }
  • (Правильный ответ)
    p { font: italic small-caps 10px/12px serif }
  • (Правильный ответ)
    h1 { font: italic 200 arial }

Укажите корректные примеры описания шрифтов:

  • (Правильный ответ)
    h1 { font: italic 200 arial }
  • font { oblique arial }
  • p { font: status }

В каких примерах корректно задается степень жирности шрифта?

  • (Правильный ответ)
    <style type=»»text/css»»>h3.third {font-weight: 200}</style>
  • (Правильный ответ)
    <style type=»»text/css»»>h1.first {font-weight: 800}</style>
  • (Правильный ответ)
    <style type=»»text/css»»>h2.second {font-weight: bold}</style>

Укажите корректные варианты задания толщины границы:

  • (Правильный ответ) li { border-bottom-width: thick }
  • (Правильный ответ) li { border-bottom-width: medium }
  • li { border-down-width: 2px }

Укажите корректный вариант задания толщины границы:

  • p { border-top-width: none }
  • p { border-down-width: 2px }
  • (Правильный ответ) p { border-width: medium }

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

  • border-down-color
  • (Правильный ответ) border-bottom-color
  • border-bottom-style

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

  • bottom
  • (Правильный ответ) border-bottom
  • border-down

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

  • border-top-style
  • (Правильный ответ) border-top-color
  • border-up-color

Укажите корректный вариант задания параметров границы:

  • (Правильный ответ) p {border-style: dashed}
  • p {border-style: solid tripple}
  • p {border-style: double-sided}

Укажите корректный вариант задания толщины границы:

  • (Правильный ответ) h2 { border-width: thin }
  • h2 { border 2px }
  • h2 { border-width: none }

Укажите доступные значения параметра border:

  • (Правильный ответ) border-style
  • border-up
  • (Правильный ответ) border-width

Укажите доступные значения параметра padding:

  • (Правильный ответ) 10%
  • off
  • (Правильный ответ) 5px

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

  • paddingleft
  • (Правильный ответ) padding-left
  • leftpadding

Укажите вариант, в котором корректно заданы параметры полей:

  • p{padding-top: 5}
  • p{padding-top: 5p}
  • (Правильный ответ) p{padding-top: 5px}

Укажите вариант, в котором параметры отступов заданы ошибочно:

  • p{margin-top: auto}
  • (Правильный ответ) p{margin-top: 10}
  • p{margin-top: 5px}

Укажите варианты, в которых параметры отступов заданы ошибочно:

  • (Правильный ответ) p{margin-top: none}
  • (Правильный ответ) p{margin-top: off}
  • p{margin-top: auto}

Укажите варианты, в которых параметры отступов заданы ошибочно:

  • (Правильный ответ) p{margin-top: 5p}
  • p{margin-top: -2px}
  • (Правильный ответ) p{margin-top: 5}

В каком примере ширина левого отступа равняется 20px?

  • {padding: 20px 10px 5px 20px}
  • {margin: 20px 10px 20px 10px}
  • {padding: 20px 10px 20px 10px}
  • (Правильный ответ) {margin: 20px 10px 5px 20px}

В каком примере ширина левого поля равняется 20px?

  • {padding: 5px 20px 5px 10px}
  • (Правильный ответ) {padding: 20px 10px 5px 20px}
  • {padding: 20px 10px 20px 10px}

Укажите варианты, в которых параметры полей заданы ошибочно:

  • p{padding-top: auto}
  • (Правильный ответ) p{padding-top: off}
  • (Правильный ответ) p{padding-top: none}

Укажите доступные значения параметра list-style-position:

  • (Правильный ответ) inside
  • (Правильный ответ) outside
  • right

Какое значение параметра list-style-type определяет список без маркера?

  • off
  • null
  • (Правильный ответ) none

Какой параметр задает размещение маркера элемента списка?

  • (Правильный ответ) list-style-position
  • list-style-pos
  • list-position

Какой параметр задает тип маркера элемента списка?

  • (Правильный ответ) list-style-type
  • list-type
  • list-style

Какое значение параметра list-style-type определяет маркер — латинские большие буквы?

  • (Правильный ответ) upper-latin
  • upper
  • latin

Какой параметр задает высоту элемента?

  • line-height
  • (Правильный ответ) height
  • max-height

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

  • height
  • (Правильный ответ) line-height
  • max-height

Укажите корректные варианты форматирования:

  • (Правильный ответ) div{line-height: 120%}
  • div{lineheight: 120%}
  • (Правильный ответ) p{height: 50px}

Укажите корректные варианты форматирования:

  • (Правильный ответ) div{cursor : url(«general.cur»), text;}
  • (Правильный ответ) div{cursor : url(«general.cur»), url(«other.cur»), text;}
  • div{cursor : stop;}
  • (Правильный ответ) div{cursor : wait;}

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

  • float
  • pos
  • (Правильный ответ) position

Укажите доступные значения параметра cursor:

  • (Правильный ответ) url(«www.intuit.ru\cursor.cur»), pointer
  • (Правильный ответ) crosshair
  • «www.intuit.ru\cursor.psd»
  • (Правильный ответ) auto

С помощью какого параметра можно задать вывод элемента в виде таблицы?

  • (Правильный ответ) table
  • table-cell
  • list

Как установить курсор в виде указателя (руки)?

  • arm
  • link
  • (Правильный ответ) pointer

Укажите варианты форматирования, в которых допущена ошибка:

  • pre{position: absolute;bottom: 50px}
  • (Правильный ответ) pre{position: absolute;bottom: nocellpadding}
  • (Правильный ответ) pre{position: abs}

Какой псевдо-класс добавляет специальный стиль посещенной ссылке ?

  • :link
  • (Правильный ответ) :visited
  • :lastlink

Как с помощью псевдо-классов задать цвет гиперссылки?

  • (Правильный ответ) <style type=»text/css»> a:link {color: #808080}</style>
  • <style type=»text/css»> a {linkcolor: #808080}</style>
  • <style type=»text/css»> a:linkcolor {#808080}</style>

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

  • (Правильный ответ) :after
  • (Правильный ответ) :before
  • :first-line
  • :first-child

Как с помощью псевдо-классов создать новый стиль гиперссылки?

  • <style type=»»text/css»»> a.new: link { color=#808000, hover: font-size=25%} }</style>
  • <style mystyle type=»»text/css»»> a:new {color: #808000}a:new {font-size: 25%}</style>
  • (Правильный ответ)
    <style type=»»text/css»»> a.new:link {color: #808000}a.new:hover {font-size: 25%}</style>

Как с помощью псевдо-классов создать новый стиль гиперссылки?

  • (Правильный ответ)
    <style type=»»text/css»»> a.mystyle:link {color: #808000}a.mystyle:visited {color: #008080}a.mystyle:hover {font-size: 250%}</style>
  • <style mystyle type=»»text/css»»> a:link {color: #808000}a:visited {color: #008080}a:hover {font-size: 250%}</style>
  • <style type=»»text/css»»> a.mystyle: link { color=#808000, visited: color=#008080, hover: font-size=250%} }</style>

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

  • <style type=»text/css»> a:visited {#808080}</style>
  • (Правильный ответ) <style type=»text/css»> a:visited {color: #808080}</style>
  • <style type=»text/css»> a:last {color: #808080}</style>

Какой псевдоэлемент можно использовать для «начальных заглавных» и «зависающих заглавных», которые являются распространенными типографскими эффектами?

  • :first-child
  • (Правильный ответ) :first-letter
  • :before
  • :first-line

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

  • :first
  • :child
  • (Правильный ответ) :first-child

Псевдоэлементами являются:

  • :first-child
  • (Правильный ответ) :after
  • (Правильный ответ) :before
  • (Правильный ответ) :first-letter
Узнать сколько стоит решение этого задания
(ответ в течение 5 мин.)
X