между строк, между словами, между буквами и меняем регистр букв средствами CSS
И так, продолжаем изучать инструменты CSS для оформления текста, и в этом уроке мы рассмотрим еще четыре свойства для текста, которые нужно знать, и которые часто применяются на практике.
- line-height: 35px ; — Устанавливает межстрочный интервал
- word-spacing: 15px ; — Интервал между словами
- letter-spacing: 4px ; — Интервал между буквами
- text-transform: uppercase/ lowercase/ capitalize ; — Изменение регистра букв
Межстрочный интервал
Первое свойство, которое мы рассмотрим — это свойство задающие межстрочный интервал. Для этого используется свойство line-height: ;.
Благодаря этому свойству мы можем менять расстояние между двумя базовыми линиям шрифта показанными на рисунке. Базовая линия это линия, на которой стоят буквы. Соответственно, когда располагаются две строки, у каждой строки есть своя базовая линия и расстояние между ними задается как раз, именно, с помощью свойства
И теперь, давайте попробуем применить данное свойство на практике, т.е. для всех абзацев принудительно зададим другое межстрочное расстояние то, которое нам нужно.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Меняем расстояние между строками с помощью свойства line-height: ;
Меняем расстояние между строками с помощью свойства line-height: ;
Меняем расстояние между строками с помощью свойства line-height: ;
Меняем расстояние между строками с помощью свойства line-height: ;
</body>
</html>
И, ниже зададим то самое наше свойство, которое и будет менять расстояние между строками.
CSS
p{
line-height: 25px;
}
Если Вы задали данное свойство и обновили страницу то заметили, что расстояние между строками изменилось.
Также можно увеличивать или уменьшать расстояние между строками с помощью множителя. Если мы используем в качестве значения просто число без обозначений >
Использование множителя удобно тем, что при изменении шрифта расстояние между строк так же измениться пропорционально. Таким образом, расстояние между строк можно регулировать множителем либо любым другим фиксированным значением
Интервал между словами
Следующее свойство, которое мы рассмотрим это свойство word-spacing: ;, позволяющее изменять расстояние между словами. В этом свойстве используются фиксированные значения, и, уже проценты здесь не подходят.
Теперь давайте, для тех же абзацев, с помощью данного свойства увеличим расстояние между словами.
CSS
p{
word-spacing: 15px;
}
Теперь если обновить страницу то между словами увеличится расстояние на 15px.
Имейте ввиду, что если задать свойство text-align:
Интервал между буквами
Свойство letter-spacing: ; не так актуально и при больших объемах текста редко используется, так как браузер автоматически выбирает оптимальное расстояние между буквами. В основном, применяется это свойство при использовании больших шрифтов в одном двух словах.
В этом свойстве так же используются фиксированные значения, которые могут и отрицательными. Задается данное свойство следующим образом.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
</body>
</html>
И задаем само свойство.
CSS
h2{
letter-spacing: 3px;
letter-spacing: -3px;
}
Изменение регистра букв
И, четвертое свойство — это text-transform: ;. Данное свойство изменяет регистр букв.
Бывают такие моменты, когда нужно написать какое-то слово полностью из заглавных букв. Для таких случаев и используется свойство text-transform: ;
Написать слово большими буквами можно и напрямую в HTML, но как уже знаем HTML — это только разметка, а оформление создается через таблицу стилей CSS. Поэтому, для этого и используется именно CSS.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
</body>
</html>
Для формирования заглавных букв свойству text-transform: ; задается значение uppercase, что означает upper – верхний и case – регистр.
CSS
h2{
text-transform:uppercase ;
}
Задав такое свойство все заголовки h2 будут отображены в верхнем регистре.
Точно так же, можно и написать слово из маленьких букв, для этого используется значение lowercase, где lower – обозначает нижний и case – регистр.
CSS
h2{
text-transform: lowercase;
}
И, если теперь обновить страницу, то все буквы будут отображены в нижнем регистре.
И, рассмотрим еще один вариант применения этого свойства, это когда каждое слово необходимо начинать с прописной буквы. Для этого существует значение capitalize, указав его в качестве параметра данного свойства, все первые буквы в каждом слове будут заглавными.
CSS
h2{
text-transform: capitalize;
}
Вот, мы и рассмотрели еще четыре свойства относящиеся к тексту. В демо можно просмотреть результат работы, каждого из этих свойств.
На этом все, мы рассмотрели все основные свойства, позволяющие нам изменять внешний вид текста.
Уменьшить отступы между строками » Основы Web сайтов
Чтобы изменить промежутки между строками текста,используют свойство line-height атрибута style, обязательно указывая величину этого расстояния (например,1-одинарный интервал, 1,5 -полуторный, 2-двойной и т.д.)
<p style=»line-height:2″> Вкусная еда и приятное застолье -одно из главных удовольствий в жизни. Ведь еда— это то, что едят, чем питаются — это любое вещество, пригодное для еды и питья живого организма
Данный пример хорошо использовать для отдельных абзацев, а для всего текста подойдёт второй вариант.
Для этого воспользуемся таким кодом, который нужно разместить в парном дескрипторе <head>и </head>.
<!DOCTYPE html>
<html>
<head>
<meta charset=«utf-8»>
<title>Всё о еде</title>
<style>
p.dline { line-height: 1.5; }
P { line-height: 0.9em; }
</style>
</head>
<body>
<p class=«dline»> Вкусная еда и приятное застолье -одно из главных удовольствий в жизни. Ведь еда— это то, что едят, чем питаются — это любое вещество, пригодное для еды и питья живого организма.</p>
<p> Вкусная еда и приятное застолье -одно из главных удовольствий в жизни. Ведь еда— это то, что едят, чем питаются — это любое вещество, пригодное для еды и питья живого организма.</p>
</body>
</html>
Значение line-height допустимо задавать и в других единицах CSS, например, пикселах (px), процентах (%) и др. В данном примере для первого абзаца установлен полуторный интерлиньяж, а для второго — межстрочное расстояние равно 0.9em.
line-height | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.
Синтаксис
line-height: множитель | значение | проценты | normal | inherit
Значения
Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.
- normal
- Расстояние между строк вычисляется автоматически.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>line-height</title>
<style>
h2 {
line-height: 60%;
}
p {
line-height: 1.5;
}
</style>
</head>
<body>
<h2>Duis te feugifacilisi</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства line-height
Объектная модель
[window.]document.getElementById(«elementID»).style.lineHeight
Браузеры
Internet Explorer до версии 7.0 неправильно вычисляет высоту строк для изображений и элементов форм. Также в этом браузере не поддерживается значение inherit.
line-height — расстояние между строками
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 7.0+ | 1.0+ |
Описание
Межстрочный интервал (интерлиньяж) — типографский термин, обозначающий расстояние между строками текста. Часть символа, располагающаяся ниже базовой линии, называется нижним выносным элементом, в то время как самая высокая точка символа называется верхним выносным элементом. Межстрочный интервал измеряется от нижней части нижнего выносного элемента на одной строке до верхнего выносного элемента на следующей строке.
В CSS свойство line-height устанавливает высоту всей строки текста, поэтому разница между размером шрифта (font-size) и высотой строки (line-height) соответствует межстрочному интервалу. Увеличение значения свойства line-height приводит к увеличению расстояния между строками текста.
Увеличение межстрочного интервала может улучшить читабельность текста. Кроме того, это позволяет обеспечить визуальное разделение текста на различные части.
Примечание: по умолчанию во всех браузерах межстрочный интервал равен 120-125% от размера текущего шрифта. Использование отрицательных значений не допускается.
Для регулирования расстояний между словами используйте CSS свойство word-spacing, для изменения расстояния между буквами — letter-spacing.
| Значение по умолчанию: | normal |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да |
| Наследуется: | да |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.lineHeight=»2″ |
Синтаксис
line-height: normal|число|высота|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| normal | Стандартный межстрочный интервал. |
| число | Число, которое будет умножено на текущий размер шрифта для определения межстрочного интервала. |
| высота | Высота задается с помощью единиц измерения, используемых в CSS. |
| % | Высота межстрочного интервала в процентах от текущего размера шрифта. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
Пример демонстрирует, как с помощью свойства line-height можно изменять расстояние между строк текста.
div {
line-height: normal;
}
Между заголовком и основным текстом слишком большой отступ, как его уменьшить?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Уменьшить расстояние между заголовком и идущим за ним текстом.
Решение
К абзацу (тег <p>) и заголовку (тег <h2>) автоматически добавляется верхний и нижний отступы, которые в сумме дают большое расстояние между заголовком и текстом. Чтобы уменьшить величину отступа надо добавить свойство margin-bottom к селектору h2. Причём можно установить положительное, нулевое или отрицательное значение. Таким способом легко задавать желаемое значение отступа (пример 1).
Пример 1. Использование отрицательных отступов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Расстояние между строками</title>
<style>
h2 {
margin-bottom: -15px; /* Отрицательный отступ между заголовком и текстом */
}
</style>
</head>
<body>
<h2>Апплет</h2>
<p>Программа, которая выполняется с составе браузера или под управлением
специальной программы для её просмотра. Апплет, как правило, пишется на
языке Java, поэтому часто можно встретить сочетание «Java
апплет».</p>
</body>
</html>Результат примера показан на рис. 1.
Рис. 1. Расстояние между заголовком и основным текстом
В данном примере для селектора h2 устанавливается отрицательное значение нижнего отступа, за счёт этого на 15 пикселов уменьшается расстояние между заголовком и нижележащим абзацем.
Межстрочный интервал на CSS | Трепачёв Дмитрий
Давайте теперь научимся задавать межстрочный интервал тексту. Под межстрочным интервалом подразумевается расстояние между линиями текста, то есть белый промежуток между ними. Для этого предназначено свойство line-height, задающее высоту линии текста.
При использовании свойства line-height вас может ожидать некоторый подвох: это свойство не задает промежуток между строками текста, как могло бы показаться, а задает высоту линии текста.
Это значит, что реальный видимый промежуток между строками будет вычисляться так: line-height — font-size = видимое расстояние между строками текста.
В следующем примере расстояние между строками текста будет line-height — font-size = 50px — 20px = 30px:
<p>
длинный текст...
</p> p {
font-size: 20px;
line-height: 50px;
text-align: justify;
width: 400px;
}
:
Пусть размер шрифта для абзацев равен 30px. Установите свойство line-height так, чтобы видимый белый промежуток между абзацами был равен 15px.
Значение line-height без единиц
Значением свойства line-height не обязательно должно служить число в некоторых единицах. Можно также просто написать число или дробь. В этом случае настоящее значение line-height можно будет найти, умножив его на значение font-size.
К примеру, font-size равен 10px, а line-height — 1.5. В этом случае реальное значение line-height будет 10px * 1.5 = 15px. Ну, а видимый белый промежуток между линиями текста будет 5px: line-height — font-size = 15px — 10px = 5px.
Преимущество такого способа задания line-height в том, что при изменении размера шрифта автоматически будет меняться и межстрочный интервал.
Посмотрим применение описанного на примере:
<p>
длинный текст...
</p> p {
font-size: 20px;
line-height: 1.5;
text-align: justify;
width: 400px;
}
:
Пусть размер шрифта для абзацев равен 30px. Установите свойство line-height так, чтобы видимый белый промежуток между абзацами был равен 15px. Используйте для этого значение line-height без единиц.
Как увеличить или уменьшить расстояние между абзацами с помощью CSS
Один из моих читателей просил рассказать, как изменить расстояние между абзацами. Данная статья отвечает на этот вопрос.
Изменение расстояния между абзацами
Современные браузеры устанавливают расстояние между абзацами по умолчанию. Точное значение зависит от используемого браузера, так как оно не задано спецификацией HTML.
Вот пример таблицы стилей для HTML 4 от Консорциума W3, в которых устанавливается верхнее и нижнее поля равными 1.12em. Поэтому разрыв между абзацами будет составлять 1.12em.
Чтобы узнать, как ваш браузер задает эти разрывы, запустите инструменты веб-разработчика и проверьте значения, заданные для полей, границ и отступов каждого абзаца.
Таким образом я обнаружил, что Firefox устанавливает поле до и после каждого абзаца в значение, равное размеру используемого шрифта. При этом оставляя размер границы и отступы равными нулю. Получается, что Firefox задает для каждого абзаца следующие стили:
p {
margin-top: 1em ;
margin-bottom: 1em ;
}Но это не гарантирует, что между абзацами будет пробел в 2em, потому что нижнее поле первого абзаца добавляется к верхнему полю второго абзаца. Вместо этого поля перекрывают друг друга, оставляя расстояние, равное большему из двух полей.
В приведенном выше примере оба поля имеют одинаковый размер, поэтому расстояние между абзацами составляет 1em.
Таким образом, расстояние между абзацами устанавливается с помощью верхнего и нижнего полей. Например, чтобы увеличить промежуток до 2em, используйте следующий код:
p {
margin-top: 2em;
margin-bottom: 2em;
}Как предотвратить увеличение расстояния между абзацами при изменении межстрочного интервала
Для решения проблемы мой читатель использовал следующее правило CSS:
Если применить это правило к блоку с текстом, результат будет следующим:
Для каждой строки задано свойство line-height: 2. Поэтому последняя строка первого абзаца имеет дополнительный пробел ее, а первая строка второго абзаца — дополнительное пространство над ней. Добавьте это расстояние к разрыву между абзацами, которое устанавливают браузеры, и вы получите продемонстрированный выше результат.
Но если нужно задать между абзацами интервал, не равный расстоянию между отдельными строками, установите верхнее и нижнее поля равными 0.
p {
line-height: 2;
margin-top: 0;
margin-bottom: 0;
}Для распознавания абзацев установите отступ первой строки с помощью свойства text-indent.
p {
line-height: 2;
margin-top: 0;
margin-bottom: 0;
text-indent: 22px;
}Результат выглядит следующим образом:
Если вам не нравится полученный результат, измените значение отступа.
Данная публикация представляет собой перевод статьи «How do I Increase/Decrease the Space Between Paragraphs on a Web Page (CSS)» , подготовленной дружной командой проекта Интернет-технологии.ру
html — уменьшить пробелы между строками текста
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Общественные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним возможности технической карьеры
- Талант Нанять технических талантов
- реклама Обратитесь к разработчикам по всему миру
html — CSS: уменьшение межстрочного интервала текста?
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Общественные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним возможности технической карьеры
- Талант Нанять технических талантов
pdf — java-код для уменьшения пространства между строками
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Общественные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним возможности технической карьеры
- Талант Нанять технических талантов