| Kosten | Четверг, 12 Сентября 2019, 04:14 | Сообщение 1 |
| В этом материале узнаем как использовать свойство CSS, называемое межсловным интервалом, с примерами. Следующие свойства CSS можно использовать для настройки способа расположения букв, слов и строк текста относительно друг друга и страницы. Свойство определяет объесть пространства между строками текста на странице.
Это очень полезно для управления так называемым «пробелом» страницы — промежутками между всеми элементами HTML. Широко признано, что больше пустого пространства облегчает чтение страницы.
Свойство CSS word-spacing определяет ширину пробела между словами в блоке текста.
Значения могут быть:
normal: нормальный интервал, определенный шрифтом или браузером.
length: укажите дополнительный интервал, указанный в единицах длины CSS - px, em, pt и т. д.
При указании длины длина указанного пробела является дополнением к значению по умолчанию, определенному шрифтом или браузером.
Таким образом, указав интервал word-spacing: 2px будет означать:
Интервал между словами = 2px + интервал между словами по умолчанию (определяется браузером)
inherit: наследовать интервал между словами родительского элемента.
Код word-spacing: inherit;
Пример:
HTML
Код <div class="space-words">Слова будут разделяться 10px в этом предложении.</div>
CSS
Код .space-words {
word-spacing: 10px;
} | | Страна: (RU) |
| |
| Kosten | Четверг, 12 Сентября 2019, 04:26 | Сообщение 2 |
|
| CSS позиционирование текста и интервалы
line-height
Свойство line-height определяет объем пространства между строками текста на веб - странице. Это очень полезно для управления так называемым «пробелом» страницы - промежутками между всеми элементами HTML. Широко признано, что больше пустого пространства облегчает чтение страницы.
Код p {
line-height: 1.4em;
}
letter-spacing
Это свойство CSS позволяет указывать пробелы между буквами. Это может быть указано в обычных единицах, таких как pixelsили ems. Межбуквенный интервал добавляется к стандартному межбуквенному интервалу, поэтому, например, если вы зададите ему значение 1px, межбуквенный интервал будет фактически равен 1px плюс межбуквенный интервал по умолчанию.
Вы можете использовать положительное расстояние между буквами, чтобы переместить буквы дальше друг от друга, или отрицательное расстояние, чтобы переместить их ближе друг к другу:
Код p {
letter-spacing: -1px;
}
word-spacing
Свойство CSS word-spacing работает точно так же, как и letter-spacingсвойство, за исключением того, что на этот раз оно контролирует расстояние между словами, а не буквами.
Код p {
word-spacing: 2px;
}
text-align
Позволяет нам выравнивать текст внутри элемента, где можете выбрать из left, right, center или justify. Обратите внимание, что это свойство выравнивает текст внутри содержащего его элемента, а не всей страницы.
Элементы уровня блока, такие как абзацы p и разделы div по умолчанию заполняют всю ширину страницы, поэтому они действительно будут центрироваться на странице. Но ТАКЖЕ встроенные элементы, например span автоматически изменяют размер по ширине содержимого, поэтому все выравнивания будут выглядеть одинаково.
Вы можете явно объявить ширину встроенного или блочного элемента, используя width свойство; если вы сделаете это, то текст будет выровнен в пределах этой ширины.
Код p {
width: 400px;
text-align: center;
}
text-indent
Свойство CSS text-indent делает отступ первой строке текста в элементе. Вы можете указать сумму отступа, например в pixels или ems. Где значения text-indent могут быть отрицательными, чтобы тянуть текст к левой стороне страницы.
Код p {
text-indent: 10px;
} | | Страна: (RU) |
| |
