11. Выравнивание текста, "красная" строка.
В этом уроке мы затронем еще 2 свойства по оформлению текста: его выравнивание и "красная" строка.
Также как есть определенные базовые значения по размеру шрифта и его насыщенности (жирности), также есть и базовое значение по выравниванию текста. Если не дано никаких указаний-свойства, то по умолчанию текст выравнивается по левому краю.
Но часто бывает необходимо применить иной способ выравнивания. Достигается требуемый способ выравнивания с помощью свойства (property) text-align:
Эффект "красной" строки, когда самая первая строка абзаца имеет определенный отступ от края достигается за счет свойства text-indent:
На базе данного теоретического материала попробуем создать соответствующие классы:
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_011_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_011_001.zip ← скачайте пример, чтобы установить на свой сайт...
Также как есть определенные базовые значения по размеру шрифта и его насыщенности (жирности), также есть и базовое значение по выравниванию текста. Если не дано никаких указаний-свойства, то по умолчанию текст выравнивается по левому краю.
Но часто бывает необходимо применить иной способ выравнивания. Достигается требуемый способ выравнивания с помощью свойства (property) text-align:
Выравнивание текста:
text-align:left; - по левому краю (по умолчанию)
text-align:center; - по центру
text-align:right; - по правому краю
text-align:justify; - по ширине текста, т.е. по обоим краям (как в книгах и газетах). Эффект достигается за счет равномерного автоматического добавления пробелов между словами в абзаце.
Эффект "красной" строки, когда самая первая строка абзаца имеет определенный отступ от края достигается за счет свойства text-indent:
"Красная" строка:
Для "красной" строки можно использовать и другие еденицы измерения, то разумнее всего использовать пиксели и проценты.
text-indent:32px; - отступ в первой строке равен 32 пикселям.
text-indent:12%; - отступ в первой строке равен 12%.
На базе данного теоретического материала попробуем создать соответствующие классы:
.text_align_left {
text-align:left;
background-color:#F0F0F0;
text-indent:5%;
}
.text_align_center {
text-align:center;
background-color:#F0FFFF;
text-indent:5%;
}
.text_align_right {
text-align:right;
background-color:#F0F0FF;
text-indent:5%;
}
.text_align_justify {
text-align:justify;
background-color:#F0FFF0;
text-indent:5%;
}
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_011_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_011_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
