Какое свойство позволяет управлять оттенением текста
Главная / Интернет-технологии /
Основы работы с CSS / Тест 4
Упражнение 1:
Номер 1
Какое свойство позволяет задать цвет текста?
Ответ:
 (1)
color
 
 (2)
text
 
 (3)
textcolor
 
Номер 2
Какое свойство позволяет задать цвет текста?
Ответ:
 (1)
text
 
 (2)
color
 
 (3)
fontcolor
 
Номер 3
Укажите допустимые значения свойства color:
Ответ:
 (1)
ol {color: rgb(0,0,255)}
 
 (2)
ul {color: ffff00}
 
 (3)
p {color: green}
 
Упражнение 2:
Номер 1
Какое свойство позволяет задать направление текста?
Ответ:
 (1)
direction
 
 (2)
dir
 
 (3)
direct
 
Номер 2
Какое свойство позволяет задать направление текста?
Ответ:
 (1)
line
 
 (2)
direction
 
 (3)
redirect
 
Номер 3
Укажите допустимые значения свойства direction:
Ответ:
 (1)
ltr
 
 (2)
normal
 
 (3)
rtl
 
Упражнение 3:
Номер 1
В каком примере текст в заголовках H1, H2 или H3 будет отображаться шрифтом italic?
Ответ:
 (1)
H1; H2; H3 { font-style: oblique }
 
 (2)
H1 – H3 { font-style: italic }
 
 (3)
H1, H2, H3 { font-style: italic }
 
Номер 2
В каком примере текст тэга EM в заголовке H1 будет иметь обычное начертание?
Ответ:
 (1)
H1 + EM { font-style: normal }
 
 (2)
H1, EM { font-style: normal }
 
 (3)
H1 {EM { font-style: normal }}
 
Номер 3
Какой из примеров устанавливает маленькие заглавные буквы для заголовка H3 и наклонные – для выделенного текста (EM)?
Ответ:
 (1)
H { font-variant: small-caps }
EM { font-style: oblique }
 
 (2)
H3 { font-variant: small-caps }
EM { font-style: oblique }
 
 (3)
H3 { font-variant: small-caps }
EM { font-style: cursive }
 
Упражнение 4:
Номер 1
Какое свойство позволяет изменить интервал между символами?
Ответ:
 (1)
letter-spacing
 
 (2)
space
 
 (3)
para-spacing
 
Номер 2
Какое свойство позволяет задать выравнивание текста в элементе?
Ответ:
 (1)
text-align
 
 (2)
direction
 
 (3)
align
 
Номер 3
Укажите допустимые значения свойства text-align:
Ответ:
 (1)
left
 
 (2)
right
 
 (3)
none
 
Упражнение 5:
Номер 1
Выберите корректные примеры изменения интервала между символами:
Ответ:
 (1)
<style type=”text/css”>
p {letter-spacing: 1cm}
</style>
 
 (2)
<style type=”text/css”>
li {letter-spacing: 5px}
</style>
 
 (3)
<style type=”text/css”>
h1 {letter-spacing: false}
</style>
 
Номер 2
Выберите корректные примеры задания фонового цвета текста:
Ответ:
 (1)
<style type=”text/css”>
span.back
{
background-color: gray
}
</style>
 
 (2)
<style type=”text/css”>
span.fon
{
background-color: red
}
</style>
 
 (3)
<style type=”text/css”>
span.fon
{
bgcolor red
}
</style>
 
Номер 3
Выберите корректный пример задания цвета текста:
Ответ:
 (1)
<style type=”text/css”>
span.back
{
background-color: gray;
}
</style>
 
 (2)
<style type=”text/css”>
h3 {color: green;}
</style>
 
 (3)
<style type=”text/css”>
span::arial
{
color: red;
}
</style>
 
Упражнение 6:
Номер 1
Укажите корректные примеры использования свойства text-indent:
Ответ:
 (1)
<P STYLE=”text-indent:20em;”>
 
 (2)
<P=”text-indent:20pt;”>
 
 (3)
<P STYLE=”text-indent”>
 
 (4)
<P STYLE=”text-indent:20pt;”>
 
Номер 2
Укажите корректные примеры использования свойства text-indent:
Ответ:
 (1)
{ text-indent: 2in }
 
 (2)
{ text-indent: 20% }
 
 (3)
{ text-indent: 10ct }
 
Номер 3
Укажите корректные примеры использования свойства text-indent:
Ответ:
 (1)
{ text-indent: 10in }
 
 (2)
{ text-indent: 20em }
 
 (3)
{ text-indent: -25ct }
 
 (4)
{ text-indent: 25pc }
 
Упражнение 7:
Номер 1
Какое свойство позволяет задавать отступы?
Ответ:
 (1)
‘text-indent’
 
 (2)
‘text-align’
 
 (3)
‘text-decoration’
 
Номер 2
Какое значение может иметь свойство ‘text-indent’?
Ответ:
 (1)
60%
 
 (2)
auto
 
 (3)
none
 
Номер 3
Укажите правильный вариант определения отступа для текста размером ‘3em’:
Ответ:
 (1)
P { text-inherit: 3em }
 
 (2)
P { text indent: 3em }
 
 (3)
P { text-indent: 3em }
 
Упражнение 8:
Номер 1
Какое свойство позволяет управлять выравниванием?
Ответ:
 (1)
‘text-align’
 
 (2)
‘text-indent’
 
 (3)
‘text-shadow’
 
Номер 2
В каких примерах корректно описано свойство ‘text-align’?
Ответ:
 (1)
{ text-align: left }
 
 (2)
{ text-align: right }
 
 (3)
{ text-align: auto }
 
Номер 3
В каких примерах корректно описано свойство ‘text-align’?
Ответ:
 (1)
DIV.center { text-align: justify }
 
 (2)
DIV.center { text-align: center }
 
 (3)
DIV.center { text-align: auto }
 
 (4)
DIV.center { text-align: none }
 
Упражнение 9:
Номер 2
Какое свойство позволяет управлять оттенением текста?
Ответ:
 (1)
‘text-decoration’
 
 (2)
‘text-indent’
 
 (3)
‘text-shadow’
 
Упражнение 10:
Номер 1
Какое свойство задает выравнивание содержимого блока?
Ответ:
 (1)
‘text-align’
 
 (2)
‘text-decoration’
 
 (3)
‘text-indent’
 
Номер 2
Укажите свойство, позволяющее сделать текст подчеркнутым:
Ответ:
 (1)
‘text-decoration’
 
 (2)
‘text-flash’
 
 (3)
‘text-media’
 
Номер 3
Укажите пример, в котором текст будет мигать:
Ответ:
 (1)
{ text-decoration: blink }
 
 (2)
{ text-decoration: underline }
 
 (3)
{ text-decoration: overline }
 
Источник
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется
тег <font>, задающий свойства шрифта, но стили обладают
большими возможностями и позволяют сократить код HTML.
Свойства шрифта
Изменение начертания шрифта и его размера происходит через свойства CSS, которые
описаны в табл. 1.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-family | имя шрифта | Задает список шрифтов | P {font-family: Arial, serif} |
| font-style | normal italic | Нормальный шрифт Курсив Наклонный шрифт | P {font-style: italic} |
| font-variant | normal small-caps | Капитель (особые прописные буквы) | P {font-variant: small-caps} |
| font-weight | normal lighter bold bolder 100–900 | Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный | P {font-weight: bold} |
| font-size | normal pt px % | нормальный размер пункты пикселы проценты | font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
В примере 1 показано использование параметров при работе со шрифтами.
Пример 1. Задание свойств шрифта с помощью CSS
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “https://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Шрифт</title>
<style type=”text/css”>
H1 {
font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */
font-size: 150%; /* Размер текста */
font-weight: lighter; /* Светлое начертание */
}
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Обычный текст</p>
</body>
</html>
Ниже приведен результат данного примера (рис. 1).
Рис. 1. Вид текста после применения стилей
В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат
их применения.
| Пример | Пример | Пример | Пример | Пример |
| font-family: Verdana, sans-serif; font-size: 120%; font-weight: light | font-size: large; font-weight: bold | font-family: Arial, sans-serif; font-size: x-small; font-weight: bold | font-variant: small-caps | font-style: italic; font-weight: bold |
Свойства текста
Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста.
Значения свойств приведены в табл. 3.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| line-height | normal множитель значение % | Интерлиньяж (межстрочный интервал) | line-height: normal line-height: 1.5 |
| text-decoration | none underline | Убрать все оформление Подчеркивание Линия над текстом | text-decoration: none |
| text-transform | none capitalize uppercase lowercase | Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ | text-transform: capitalize |
| text-align | left right | Выравнивание текста | text-align: justify |
| text-indent | значение % | Отступ первой строки | text-indent: 15px; text-indent: 10% |
Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.
| Пример: и это все о нем | Пример: текст по центру | Пример: Это не ссылка, а просто текст | Пример: отступ первой строки | Пример: полуторный межстрочный интервал |
| text-transform: capitalize | text-align:center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |
Источник
Свойства текста применяются практически ко всем элементам CSS, которые могут включать в себя или описывать текст, правда, с учетом некоторых ограничений в каждом отдельном случае, Свойство text-align запоминает расположение текста относительно границ рабочего окна броузера или ячейки таблицы, иными словами — отвечает за выравнивание текстового блока. Соответственно, оно применяется совместно с так называемыми блоковыми элементами, то есть элементами, поддерживающими отображение текстовых массивов: Р., Н1-Н6, TD, TR и некоторыми другими.Можно использовать одно из четырех значений данного свойства: left — выравнивание по левой границе экрана или ячейки таблицы, right — по правой границе, center — выравнивание по центру и justify — растягивание текста по все ширине экрана или табличной ячейки,
Пример:
Свойства text-decoration. Управляет начертанием символов: с его помощью можно задать эффекты отображения зачеркнутого или подчеркнутого текста Данное свойство может принимать одно из следующих значений, none — отсутствие всяких эффектов, underline — подчеркнутый текст, line-through — перечёркнутый текст,overline — Haд строчечный и blink — мерцающий текст. Обратите внимание на то, что значение ovеrline данного свойства не поддерживается броузером Netscape Navigator а значение blink — наоборот, программе Microsoft Internet Explorer. Пример:
A (text-decoration: none:}
ВНИМАНИЕ Элемент А может быть представлен в тексте файла CSS с использованием определений. link — просто размещенная на web-странице ссылка active описывает состояние ссылки нажимаемой в данный момент времени, hover — состояние ссыпки в момент кагда пользователь навёл на нее курсор мыши и Visited отображает посещённую ссылку. Определения состояний записываются через двоеточие после названия элемента, например A:visited{color:2F4F4F;}
Свойство text-indent, применяемое, как правило, совместно с элементом P, указывает на отступ первой строки текстового блока в пикселах, сантиметрах миллиметрах в процентах от общей длины строки. Например, его используют для организации табулированных абзацных отступов так называемых красных строк. Например:
Свойство line-height устанавливает межстрочный интервал текста web-странице в пикселах, сантиметрах, миллиметрах или процентах от интервала, определённого умолчанию, К этому свойству можно применить значение normal оставляющее определенный в настройках клиентского броузера межстрочный интервал без изменений.
Пример:
Свойство letter-spacing устанавливает расстояние между символами текста в пикселах, сантиметрах или миллиметрах, но распознается оно только броузером Microsoft Internet Explorer. Возможно использование атрибута normal, оставляющего межсимвольный интервал, принятый по умолчанию.
Пример:
Свойство vertical-align определяет вертикальное выравнивание текста в ячейках таблиц или графических изображений в текстовом блоке и также не распознается броузером Netscape Navigator. Оно может принимать одно из следующих значении: top — позиционирование пo верхней границе ячейки, middle — но центру ячейки, bottom — по нижней границе ячейки, baseline — по условной базовой линии, top-text — по верхней точке текстовой строки, bottom-text по нижней точке текстовой строки.
Пример:
IMG (vertical -align: top-text.}
Свойство text-transform задает трансформацию определяемого элементом текстового блока normal- стандартное отображение текста без каких-либо изменений, capitalize-каждое слово абзаца начинается с заглавной буквы, при этом регистр символов, определенный в коде HTML, игнорируется; uppercase все символы текста становятся заглавными и, наконец, lowercase — все символы становится строчными. Это свойство поддерживается только броузером Microsoft Internet Explorer.
Пример:
Источник
Главная / Интернет-технологии /
Спецификация CSS2 / Тест 16
Упражнение 1:
Номер 1
С помощью какого свойства можно управлять отступами?
Ответ:
 (1)
‘text-indent’
 
 (2)
‘text-align’
 
 (3)
‘text-decoration’
 
Номер 2
Укажите доступные значения свойства ‘text-indent’:
Ответ:
 (1)
‘inherit’
 
 (2)
‘auto’
 
 (3)
‘none’
 
Номер 3
Как можно определить отступ размером ‘3em’ для текста:
Ответ:
 (1)
P { text-indent: 1em }
 
 (2)
P { text-indent: 2em }
 
 (3)
P { text-indent: -3em }
 
 (4)
P { text-indent: 3em }
 
Упражнение 2:
Номер 1
Укажите варианты корректного описания свойства ‘text-indent’:
Ответ:
 (1)
<P STYLE=”text-indent:20em;”>
 
 (2)
<P=”text-indent:20pt;”>
 
 (3)
<P STYLE=”text-indent”>
 
 (4)
<P STYLE=”text-indent:20pt;”>
 
Номер 2
Укажите варианты корректного описания свойства ‘text-indent’:
Ответ:
 (1)
{ text-indent: 2in }
 
 (2)
{ text-indent: 20% }
 
 (3)
{ text-indent: 10ct }
 
Номер 3
Какие примеры корректны:
Ответ:
 (1)
{ text-indent: 10in }
 
 (2)
{ text-indent: 20em }
 
 (3)
{ text-indent: -1mm }
 
 (4)
{ text-indent: -25ct }
 
Упражнение 3:
Номер 1
С помощью какого свойства можно управлять выравниванием?
Ответ:
 (1)
‘text-align’
 
 (2)
‘text-indent’
 
 (3)
‘text-shadow’
 
Номер 2
В каких примерах корректно описано свойство ‘text-align’?
Ответ:
 (1)
{ text-align: left }
 
 (2)
{ text-align: right }
 
 (3)
{ text-align: auto }
 
 (4)
{ text-align: justify }
 
Номер 3
Укажите варианты корректного описания свойства text-align:
Ответ:
 (1)
DIV.center { text-align: justify }
 
 (2)
DIV.center { text-align: center }
 
 (3)
DIV.center { text-align: left }
 
 (4)
DIV.center { text-align: auto }
 
Упражнение 4:
Номер 1
Какое свойство описывает выравнивание инлайн-содержимого блока?
Ответ:
 (1)
‘text-align’
 
 (2)
‘text-decoration’
 
 (3)
‘text-shadow’
 
 (4)
‘text-indent’
 
Номер 2
Какое свойство позволяет управлять подчеркиванием, миганием и т.д.?
Ответ:
 (1)
‘text-decoration’
 
 (2)
‘text-flash’
 
 (3)
‘text-media’
 
Номер 3
В каком примере текст будет мигать:
Ответ:
 (1)
{ text-decoration: blink }
 
 (2)
{ text-decoration: underline }
 
 (3)
{ text-decoration: overline }
 
 (4)
{ text-indent: blink }
 
Упражнение 5:
Номер 2
С помощью какого свойства можно управлять оттенением текста?
Ответ:
 (1)
‘text-decoration’
 
 (2)
‘text-indent’
 
 (3)
‘text-align’
 
 (4)
‘text-shadow’
 
Номер 3
Укажите примеры корректного описания свойства ‘text-shadow’:
Ответ:
 (1)
H3 { text-shadow: 3px 3px 5px red }
 
 (2)
H6 { text-shadow: 0.2em 0.2em }
 
 (3)
H1 { text-shadow: 0.2em 0.2em }
 
Упражнение 6:
Номер 1
Начальным значением ‘text-shadow’ является:
Ответ:
 (1)
{ text-shadow: inherit }
 
 (2)
{ text-shadow: auto }
 
 (3)
{ text-shadow: center }
 
 (4)
{ text-shadow: none }
 
Номер 2
Какой пример установит тень справа и снизу от текста элемента:
Ответ:
 (1)
H1 { text-shadow: 1em 1em }
 
 (2)
H5 { shadow: 5px 2px 5px red }
 
 (3)
H2 { text-shadow: 2em 2em }
 
Номер 3
Какой пример установит тень справа и снизу от текста элемента. Тень будет иметь радиус рассеяния 10px и зеленый цвет:
Ответ:
 (1)
H2 { text-shadow: 10px 10px 7px green }
 
 (2)
H2 { text-shadow: 32px 10px 1px green }
 
 (3)
H5 { text-shadow: 5px 5px 10px green }
 
 (4)
H2 { text-shadow: 10px 3px 10px green }
 
Упражнение 7:
Номер 1
Какое свойство позволяет управлять расстоянием между буквами?
Ответ:
 (1)
‘letter-spacing’
 
 (2)
‘text-indent’
 
 (3)
‘text-align’
 
 (4)
‘word-spacing’
 
Номер 2
Какое свойство позволяет управлять расстоянием между словами?
Ответ:
 (1)
‘word-spacing’
 
 (2)
‘word’
 
 (3)
‘letter’
 
 (4)
‘letter-spacing’
 
Номер 3
Укажите доступные значения свойства ‘letter-spacing’:
Ответ:
 (1)
{ letter-spacing: normal }
 
 (2)
{ letter-spacing: inherit }
 
 (3)
{ letter-spacing: none }
 
 (4)
{ letter-spacing: auto }
 
Упражнение 8:
Номер 1
В каком примере пространство между символами в элементах BLOCKQUOTE увеличено на ‘0.1em’:
Ответ:
 (1)
BLOCKQUOTE { letter-spacing: 0.1em }
 
 (2)
BLOCKQUOTE { letter-spacing: 1em }
 
 (3)
BLOCKQUOTE { word-spacing: 0.1em }
 
 (4)
BLOCKQUOTE { word-spacing: 1em }
 
Номер 2
В каком примере браузеру не разрешено изменять межсимвольное пространство:
Ответ:
 (1)
BLOCKQUOTE { letter-spacing: 0cm }
 
 (2)
BLOCKQUOTE { letter-spacing: 1cm }
 
 (3)
BLOCKQUOTE { spacing: 0 }
 
 (4)
BLOCKQUOTE { spacing: 1cm }
 
Номер 3
Укажите доступные значения свойства ‘word-spacing’:
Ответ:
 (1)
{ word-spacing: auto }
 
 (2)
{ word-spacing: normal }
 
 (3)
{ word-spacing: none }
 
 (4)
{ word-spacing: inherit }
 
Упражнение 9:
Номер 1
Укажите начальное значение свойства ‘word-spacing’:
Ответ:
 (1)
{ word-spacing: begin }
 
 (2)
{ word-spacing: auto }
 
 (3)
{ word-spacing: normal }
 
 (4)
{ word-spacing: inherit }
 
Номер 2
В каком примере пространство между словами в элементах H1 увеличено на ‘1em’:
Ответ:
 (1)
H1 { word-spacing: 0.1em }
 
 (2)
H1 { letter-spacing: 0.1em }
 
 (3)
H1 { letter-spacing: 1em }
 
 (4)
H1 { word-spacing: 1em }
 
Номер 3
В каком примере пространство между словами в элементах H6 увеличено на ‘2em’:
Ответ:
 (1)
H6 { word-spacing: -2em }
 
 (2)
H6 { word-spacing: +2em }
 
 (3)
H6 { word-spacing: 0.2em }
 
 (4)
H6 { word-spacing: 2em }
 
Упражнение 10:
Номер 1
С помощью какого свойства можно управлять капитализацией?
Ответ:
 (1)
‘text-transform’
 
 (2)
‘white-space’
 
 (3)
‘text-decoration’
 
 (4)
‘text-indent’
 
Номер 2
Выберите корректные описания свойства ‘text-transform’:
Ответ:
 (1)
{ text-transform: uppercase }
 
 (2)
{ text-transform: lowercase }
 
 (3)
{ text-transform: auto }
 
 (4)
{ text-transform: capitalize }
 
Номер 3
Укажите начальное значение свойства ‘text-transform’:
Ответ:
 (1)
{ text-transform: none }
 
 (2)
{ text-transform: capitalize }
 
 (3)
{ text-transform: uppercase }
 
 (4)
{ text-transform: lowercase }
 
Упражнение 11:
Номер 1
В каком примере первый символ каждого слова в элементе H2 переводится в верхний регистр?
Ответ:
 (1)
H2 { text-transform: uppercase }
 
 (2)
H2 { text-transform: capitalize }
 
 (3)
H2 { text-transform: lowercase }
 
 (4)
H2 { text-transform: none }
 
Номер 2
В каком примере все символы каждого слова элемента P переводятся в прописные?
Ответ:
 (1)
P { text-transform: uppercase }
 
 (2)
P { text-transform: lowercase }
 
 (3)
P { text-transform: none }
 
 (4)
P { text-transform: capitalize }
 
Номер 3
В каком примере все символы каждого слова элемента PRE переводятся в нижний регистр?
Ответ:
 (1)
PRE { text-transform: capitalize }
 
 (2)
PRE { text-transform: auto }
 
 (3)
PRE { text-transform: inherit }
 
 (4)
PRE { text-transform: lowercase }
 
Упражнение 12:
Номер 1
С помощью какого свойства можно управлять пробелом?
Ответ:
 (1)
‘text-transform’
 
 (2)
‘text-indent’
 
 (3)
‘text-align’
 
 (4)
‘white-space’
 
Номер 2
Укажите доступные значения свойства ‘white-space’:
Ответ:
 (1)
{ white-space: pre }
 
 (2)
{ white-space: normal }
 
 (3)
{ white-space: auto }
 
 (4)
{ white-space: nowrap }
 
Номер 3
Выберите корректные примеры:
Ответ:
 (1)
PRE { white-space: pre }
 
 (2)
P { white-space: normal }
 
 (3)
TD[nowrap] { white-space: nowrap }
 
 (4)
PRE.first { white-space: none }
 
Источник