CSS: Выравнивание текста
Хороший способ выделить участок текста — выровнять его иначе, чем остальной текст. На многих сайтах используют выравнивание заголовка по центру, чтобы пользователь быстрее мог его отличить.
<p class="text-center h3">Centered header</p>
<p>Page text. You can see that the header jumps out more since it's centered</p>
CSS позволяет выровнять текст, используя свойство text-align с 4 основными значениями:
left— по левому краю. Используется по умолчаниюcenter— по центруright— по правому краюjustify— по ширине
<p class="left">Текст по левому краю</p>
<p class="center">Текст по центру</p>
<p class="right">Текст по правому краю</p>
<p class="justify">Текст с выравниванием по ширине. Используется редко, так как оставляет неравномерные пробелы между словами</p>.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.justify {
text-align: justify;
}
Задание
Добавьте в редактор параграф с классом important и выровняйте его по центру. Стили укажите в теге <style>
Полезное
Для глаза самый привычный вариант — выравнивание по левому краю. Не используйте большое количество разных выравниваний на странице
CSS: Выравнивание текста
Хороший способ выделить участок текста — выровнять его иначе, чем остальной текст. На многих сайтах используют выравнивание заголовка по центру, чтобы пользователь быстрее мог его отличить.
<p class="text-center h3">Centered header</p>
<p>Page text. You can see that the header jumps out more since it's centered</p>
CSS позволяет выровнять текст, используя свойство text-align с 4 основными значениями:
left— по левому краю. Используется по умолчаниюcenter— по центруright— по правому краюjustify— по ширине
<p class="left">Текст по левому краю</p>
<p class="center">Текст по центру</p>
<p class="right">Текст по правому краю</p>
<p class="justify">Текст с выравниванием по ширине. Используется редко, так как оставляет неравномерные пробелы между словами</p>.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.justify {
text-align: justify;
}
Задание
Добавьте в редактор параграф с классом important и выровняйте его по центру. Стили укажите в теге <style>
Полезное
Для глаза самый привычный вариант — выравнивание по левому краю. Не используйте большое количество разных выравниваний на странице
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const element = query(document, 'p');
expect(element).to.have.class('important');
const style = getComputedStyle(element);
expect(style).to.have.property('text-align', 'center');
});Решение учителя откроется через:
20:00
