| Kosten | Среда, 01 Августа 2018, 04:03 | Сообщение 1 |
| На веб странице свойство CSS, которое контролирует объесть пространства между каждой строкой текста line-height. Вам придется изменить это свойство на блоке, которое содержит ваш текст. Работа с текстом в CSS3 позволяет много контролировать. Вы не только можете использовать широкий спектр шрифтов, но и можете настроить способ просмотра шрифтов. В этой статье вы узнаете, как установить одно строчный интервал с текстом.
Свойство, которое позволяет вам выбирать одно строчный интервал, это линия высоты. Есть несколько вариантов, доступных вам при таком подходе. При создании HTML страницы эквивалентом ведущего является свойство CSS line-height, используемое для установки количества пробелов между каждой строкой. Высота линии может быть установлена на фиксированную высоту, например, 12 пикселей или в процентах от размера шрифта, например 120 процентов. Установка значения в normal сбрасывает интервал между строками до значения по умолчанию.
Предположим, что у вас есть код, закодированный в HTML, следующим образом.
Код <p class="tobelankag">
Некоторые лекторы требуют, чтобы разрыв между строками в академической работе был шире, чем значение по умолчанию. Например, они могут оговаривать, что ваш текст должен быть двойным. Или они могут сказать, что межстрочный интервал должен быть установлен равным 1,5.
</p>
Чтобы удвоить указанное выше значение, установите значение line-heightto 200%, то есть дважды значение по умолчанию 100%. Поскольку я дал абзацу класс tobelankag, то здесь можно изменить высоту строки для всех членов этого класса, используя следующий стиль.
Код .tobelankag {
line-height: 200% ;
}
Текст будет выглядеть следующим образом:
Обратите внимание, что для приведенного выше текста я также добавил границу к абзацу и ограничил ее ширину, так что будет несколько строк, даже если вы читаете это на широком экране. В противном случае мне придется придумать еще более фиктивный текст, чтобы было достаточно строк, чтобы эффект двойного интервала был видимым.
Те, кому нужен интервал между строками, который должен быть установлен равным 1,5, должны использовать line-height: 150%. И если по какой-то причине вам нужно сократить пространство между строками, вы можете дать line-height значение менее 100%. Как упоминалось выше, 100% по умолчанию. Любое число выше, которое увеличивает разрыв, и меньшее значение уменьшает его.
Кстати, если вы хотите, чтобы все абзацы на вашей странице использовали тот же двойной интервал или 1,5 интервала или что-то еще, нет необходимости давать ваши абзацы classкак «демопару» именно для этой цели. Установите line-height свойство непосредственно на селектор, чтобы воздействовать на всех, например:
Код p {
line-height: 200% ;
}
Если у вас нет простого доступа к вашей таблице стилей или head разделу вашей веб-страницы, чтобы добавить правила CSS, и вам нужно всего лишь удвоить один абзац, вы можете добавить правило высоты строки к самому тегу абзаца.
Использование относительных чисел
Если прописываете значения, которое будет изначально идти виде числа в виде числа, то все будет основываться с реальным размером шрифта.
Код <p style="line-height:1.4">
Содержание абзаца здесь
</p>
Вы также можете использовать другие методы для задания значений, например, em, rem и так далее. В качестве примера, давайте посмотрим , как использовать точки или размер пикселя.
Использование размера пикселя
Вы также можете указать высоту линии, используя размер пикселя. Это делает интервал независимым от используемого шрифта, что не всегда может быть отличной идеей.
Код <p style="line-height:16px">
Содержание абзаца здесь
</p>
Использование процентов
Когда вы используете проценты, он работает аналогично использованию чисел. Он основан на текущем размере шрифта элемента.
Код <p style="line-height:134%">
Здесь содержимое абзаца имеет интервал, равный 1,34
</p>
Если вы хотите уменьшить высоту, вы должны использовать значение, которое меньше 100% или меньше 1 в методе чисел.
Код <p style="line-height:85%">
Содержание абзаца здесь имеет интервал, равный 0,85.
</p>
Как и следовало ожидать, отрицательные значения не допускаются в свойстве line-height. Как правило, всегда старайтесь использовать любой из единиц меньше значений и в процентах или числах. Это дает некоторую гибкость, когда речь идет о разных шрифтах, которые могут быть использованы.
Как я уже упоминал, в большинстве случаев по умолчанию работает лучше всего.
| | Страна: (RU) |
| |
| Kosten | Среда, 01 Августа 2018, 04:17 | Сообщение 2 |
|
| Свойство line-height, когда применяется к элементу уровня блока, определяет, как предполагает его название буквально предполагает, на высоту каждой линии. Его не следует путать с интервалом между линиями, что содержится в большинстве графических программ, который определяет объем пространства между строками в абзаце. Хотя оба они имеют одну и ту же цель, так и промежуточные строки текста, они делают это по разному.
В line-height собственности используются следующие блоки:
1. px
2. em
3. %
4. Единичные числа, например 1.5
Безразмерные значения в основном действуют как проценты. Так 150% что равно 1.5, что последний является более компактным и удобным для во восприятие.
Почему важна высота линии
Цель состоит в том line-height, чтобы определить читаемый интервал между строками для вашего текста. Поскольку читаемость зависит от размера текста, рекомендуется использовать динамическое значение, соответствующее размеру текста. Использование pxпоэтому не рекомендуется , поскольку он определяет статическое значение.
В некоторых в случаях использование px пригодится, когда вы хотите вертикально выровнять текст в соответствии с другим элементом, а не в соответствии с размером шрифта.
Поскольку использование % или em значения могут иметь неожиданные значения, рекомендуемый метод - это единицы измерения:
- для основного текста рекомендуется высота строки в 1,5 раза больше размера текста;
- для заголовков рекомендуется высота строки 1,2;
Код body{ font-size: 16px; line-height: 1.5;}
Таким образом, вычисленная высота линии будет равна 16 * 1,5 = 24px.
Наследование линейной высоты
Поскольку line-height свойство наследуется дочерними элементами, оно будет оставаться последовательным независимо от того, что font-sizeвпоследствии применяется.
| | Страна: (RU) |
| |
