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

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

Номер 1

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

Ответ:

(1) <style type="text/css"> a:link {color: #808080}</style>

(2) <style type="text/css"> a:linkcolor {#808080}</style>

(3) <style type="text/css"> a {linkcolor: #808080}</style>

Номер 2

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

Ответ:

(1) <style type="text/css"> a:visited {color: #808080}</style>

(2) <style type="text/css"> a:last {color: #808080}</style>

(3) <style type="text/css"> a:visited {#808080}</style>

Номер 3

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

Ответ:

(1) <style type="text/css"> a:active {color: #808080}</style>

(2) <style type="text/css"> a:onmouseover {color: #808080}</style>

(3) <style type="text/css"> a:color {#808080}</style>

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

Номер 1

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

Ответ:

(1) <style type="text/css"> a.mystyle:link {color: #808000} a.mystyle:visited {color: #008080} a.mystyle:hover {font-size: 250%} </style>

(2) <style mystyle type="text/css"> a:link {color: #808000} a:visited {color: #008080} a:hover {font-size: 250%} </style>

(3) <style type="text/css"> a.mystyle: link { color=#808000, visited: color=#008080, hover: font-size=250%} } </style>

Номер 2

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

Ответ:

(1) <style type="text/css"> a.new:link {color: #808000} a.new:hover {font-size: 25%} </style>

(2) <style mystyle type="text/css"> a:new {color: #808000} a:new {font-size: 25%} </style>

(3) <style type="text/css"> a.new: link { color=#808000, hover: font-size=25%} } </style>

Номер 3

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

Ответ:

(1) <style type="text/css"> a.family:visited {color: #008080} a.family:hover {font-family: sans-serif} </style>

(2) <style mystyle type="text/css"> a[family]:visited {color: #008080} a[family]:hover {font-family: sans-serif} </style>

(3) <style type="text/css"> a{family.visited {color: #008080}} a{family.hover {font-family: sans-serif}} </style>

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

Номер 1

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

Ответ:

(1) :active

(2) :focus

(3) :hover

Номер 2

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

Ответ:

(1) :active

(2) :focus

(3) :hover

Номер 3

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

Ответ:

(1) :active

(2) :focus

(3) :hover

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

Номер 1

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

Ответ:

(1) :link

(2) :visited

(3) :notvisited

Номер 2

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

Ответ:

(1) :link

(2) :visited

(3) :lastlink

Номер 3

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

Ответ:

(1) :first

(2) :child

(3) :first-child

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

Номер 1

Примером псевдокласса гиперссылок являются:

Ответ:

(1) A:link { color: red }

(2) :link { color: red }

(3) A.external:visited { color: blue }

Номер 2

К псевдоклассам относятся:

Ответ:

(1) :first-child

(2) :link

(3) :lang

(4) :notvisited

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

Номер 1

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

Ответ:

(1) :first-letter

(2) :before

(3) :after

(4) :first-child

Номер 2

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

Ответ:

(1) :first-line

(2) :first-child

(3) :before

(4) :first-letter

Номер 3

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

Ответ:

(1) :after

(2) :first-line

(3) :first-child

(4) :before

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

Номер 1

Первая форматированная строка будет голубого цвета в следующем примере:

Ответ:

(1) P:first-letter { color: blue; font-size: 200% }

(2) P:first-line { color: blue }

(3) P { color: blue; font-size: 12pt }

(4) <P:first-letter>

Номер 2

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

Ответ:

(1) <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>

(2) <STYLE type="text/css"> P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } SPAN { text-transform: uppercase } </STYLE>

(3) <STYLE type="text/css"> P { font-size: 12pt; line-height: 12pt } SPAN { text-transform: uppercase } </STYLE>

Номер 3

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

Ответ:

(1) P { color: red; font-size: 12pt } P:first-letter { color: green; font-size: 200% }

(2) P { color: green; font-size: 12pt } P:first-letter { color: red; font-size: 200% }

(3) P { color: green; font-size: 12pt } P:first-line { color: red; font-size: 200% }

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

Номер 1

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

Ответ:

(1) first-letter

(2) first

(3) first-line

Номер 2

Перечислите параметры псевдо-элемента first-letter:

Ответ:

(1) text-decoration

(2) vertical-align

(3) text-transform

(4) visited

Номер 3

Перечислите параметры псевдо-элемента first-letter:

Ответ:

(1) line-height

(2) float

(3) double

(4) clear

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

Номер 1

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

Ответ:

(1) first-letter

(2) first

(3) first-line

Номер 2

Перечислите параметры псевдо-элемента first-line:

Ответ:

(1) text-decoration

(2) vertical-align

(3) text-transform

(4) visited

Номер 3

Перечислите параметры псевдо-элемента first-line:

Ответ:

(1) word-spacing

(2) letter-spacing

(3) double

(4) clear

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

Номер 1

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

Ответ:

(1) :undo

(2) :after

(3) :before

Номер 2

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

Ответ:

(1) :redo

(2) :after

(3) :before

Номер 3

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

Ответ:

(1) h5:after{content: url(song.wav)}

(2) h5:before{content: url(song.wav)}

(3) h5:onload{content: url(song.wav)}

Основы работы с CSS - тест 14