Все сайты уникальны, каждый имеет свой оригинальный дизайн. Текст, который является главной составляющей любого сайта, должен соответствовать общей стилизации. Иногда простого изменения семейства шрифтов и цвета недостаточно для создания красивого текста. В таком случае нам на помощь приходит letter-spacing - свойство для изменения расстояния между буквами в CSS
Если увеличить расстояние между буквами в CSS, то можно получить уникальный стиль оформления текста.
Для создания уникального шрифта иногда приходится создавать отступы между буквами. Увеличить расстояние между буквами можно только через CSS. В нем эту функцию выполняет свойство letter-spacing.
Оно является дополнительным инструментом в CSS, который позволяет изменить расстояние между буквами. Но иногда именно его и не хватает для хорошей стилизации текстового контента.
Во всех браузерах это свойство задано по умолчанию. Оно применимо ко всем современным браузерам, и не только (например, Internet Explorer).
Значение этого свойства наследуется для всех потомков селектора. Это значит, что, задав отступы между буквами для тега body, вы измените значение letter-spacing для всей страницы.
Еще один момент: учитывайте заданный шрифт. Для каждого отступы между буквами разнятся. Разница небольшая, измеряется в долях пикселей, но имейте в виду.
Работа этого свойства заключается в том, что оно добавляет к каждой букве отступы с правой стороны. Оно изменяет расстояние между буквами на более детальном уровне. Работает по принципу margin-left. Letter-spacing может задаваться в разных величинах: относительных (em, rem, ex и другие) и абсолютных (px, mm, cm). Наиболее пригодными для использования являются величины px, rem и em. Конечно, лучше всего указывать значение в пикселях, так как оно наиболее удобное и лучше подходит для изменения маленького расстояния.
Для начала заполните страницу контентом, на котором мы будем тестировать это свойство.
Чтобы задать его, откройте ваш CSS-документ, а затем запишите строчку letter-spacing: 5px для тега body. Такая запись будет означать, что на всей странице расстояние между буквами увеличится на 5 пикселей (будет равняться 6 или 5,5 в зависимости от шрифта).
После того, как вы запишите вышепоказанный код, у вас получится такая веб-страница:
Положительные значения обычно не превышают 3-5 пикселей, но не всегда. Иногда используются и более длинные расстояния, например, при создании основного заголовка. Делать расстояние выше 10px не рекомендуется, так как текст получится нечитабельным.
Кроме того, есть возможность уменьшить расстояние между буквами в CSS. Задается так же, но со знаком "-". Обычно минимальное значение равно -1 px. Можно задать и -10, даже -20, но текст читать будет невозможно. Если хотите сделать текст с маленькими отступами, не используйте значение менее 200px.
В CSS расстояние между буквами используется для создания уникального шрифта. Может также применяться при создании заголовков, если использовать вместе со свойством font-style: italic и хорошим цветом, может послужить альтернативой хорошему логотипу.
Также, если правильно использовать данное свойство вместе с text-align: center, можно задать красивый заголовок статьи для блога.
Letter-spacing - отличное CSS-свойство для изменения расстояния букв друг от друга. Главное - не перебарщивайте с отступами.
Как правило, для каждого шрифта определенного размера заранее установлены величины пробелов между словами , расстояние между буквами внутри слова и визуальная высота строки . Следует отметить, что расстояние между разными буквами в моноширинных шрифтах, таких как Courier New, всегда одинаковое. В других типах шрифтов межбуквенное расстояние зависит от буквосочетаний - в большинстве случаев оно фиксировано, но между некоторыми парами букв оно намеренно уменьшается, чтобы визуально сделать текст более "ровным" и равномерно распределенным. Например, между буквами АУ расстояние меньше, чем между буквами НП, так как буквы Н и П по своей форме прямые, а буквы А и У со скосами, причем направленными в одну сторону. При одинаковом расстоянии между буквами, А и У будут казаться стоящими дальше друг от друга, чем Н и П. Для того чтобы смягчить этот эффект, расстояние между ними чуть-чуть уменьшается, в результате чего визуально строка текста выравнивается. Это явление - одно из ярких проявлений обмана зрения.
В CSS для текстовых блоков можно регулировать размеры расстояний между словами в тексте, т.е., по сути, менять размер пробела. Также можно менять расстояния между буквами внутри слова (т.е. создавать уплотненный или разреженный текст) и управлять высотой текстовой строки. Высота строки - это расстояние между базовыми линиями двух соседних строк.
Аналогов таких свойств в HTML нет. Интервалы можно задавать только средствами CSS .
Это свойство позволяет задать расстояние между словами. В качестве значения допускаются любые единицы длины, как с положительными значениями, так и с отрицательными. При отрицательных значениях расстояние между словами уменьшается, и при слишком больших значениях слова могут сильно "сближаться" или даже "наезжать" друг на друга. Это отрицательно скажется на читаемости текста, поэтому будьте аккуратнее при задании таких значений. Задание значений в процентах не допускается.
Рассмотрим пример:
Данное свойство задает расстояние между буквами внутри слова. Задается аналогично расстоянию между словами в любых единицах длины. Допускается задание отрицательных значений, при которых буквы могут слишком плотно примыкать друг к другу или даже налегать друг на друга. Поэтому пользуйтесь им осторожнее. Задание величины в процентах не допускается.
При помощи этого свойства можно разрежать буквы, например в заголовках, что выгладит довольно оригинально. При этом рекомендуется, чтобы, с одной стороны, расстояние между буквами было увеличено настолько значительно, чтобы визуально заголовок выделялся на фоне обычного текста, а с другой стороны - разрежение не должно быть слишком большим, чтобы не ухудшалось общее восприятие текста.
Оба свойства word-spacing и letter-spacing можно использовать совместно, так как при увеличении расстояния между буквами, для того чтобы сохранить читаемость и разделить слова, может потребоваться одновременно увеличить и расстояние между словами. Вот типичный пример оформления заголовка:
| Н1 { word-spacing: 2 ex; letter-spacing: 0.3ех } |
С помощью CSS свойства color Вы можете изменять цвет текста HTML элементов.
Цвет может быть задан следующими способами:
Первый способ в основном используется для задания основных цветов, названия которых хорошо известны. Например red определит красный, blue - синий, white - белый.
Второй способ может использоваться для задания любых цветов и оттенков.
Синтаксис:
Rgb(красный ,зеленый ,голубой )
красный число от 0 до 255 указывающее как много красного будет в итоговом оттенке.
зеленый число от 0 до 255 указывающее как много зеленого будет в итоговом оттенке.
голубой число от 0 до 255 указывающее как много голубого будет в итоговом оттенке.
Например rgb(255,0,0) задаст красный цвет, а rgb(0,255,0) rgb(255,255,0) мы получим желтый.
Третий способ по функциональности эквивалентен второму, но более компактен. На практике в основном используют именно этот способ.
Синтаксис:
#красный зеленый голубой
красный шестнадцатеричное число от 0 до ff указывающее как много красного будет в итоговом оттенке.
зеленый шестнадцатеричное число от 0 до ff указывающее как много зеленого будет в итоговом оттенке.
голубой шестнадцатеричное число от 0 до ff указывающее как много голубого будет в итоговом оттенке.
Например #ff0000 задаст красный цвет, а #00ff00 зеленый. Смешивая красный с зеленым #ffff00 мы получим желтый.
Теперь попробуем перекрасить абзацы в зеленый цвет всеми перечисленными выше способами:
P {color:green;} p {color:rgb(0,255,0);} p {color:#00ff00;}
Обратите внимание: удобно выбирать необходимые оттенки цвета можно с помощью .
С помощью CSS свойства text-align Вы можете выровнять текст элемента по горизонтали.
Текст может быть выровнен:
Обратите внимание: по ширине (justify) текст выравнивается путем растягивания всех строчек до одинаковой длины. Этот метод выравнивания часто используется в газетах и журналах.
P.ta1 {text-align:center;} p.ta2 {text-align:left;} p.ta3 {text-align:right;} p.ta4 {text-align:justify;}
Быстрый просмотр
С помощью CSS свойства text-decoration Вы можете сделать текст HTML элемента:
P.td1 {text-decoration:underline;} p.td2 {text-decoration:line-through;} p.td3 {text-decoration:overline;}
Быстрый просмотр
Свойство text-decoration со значением none "очищает" текст от всех вышеперечисленных эффектов. Это может использоваться для создания не подчеркнутых ссылок.
A:link {text-decoration:none;} a:visited {text-decoration:none;}
Быстрый просмотр
Обратите внимание: подчеркивать обычный текст не рекомендуется, так как пользователи могут перепутать его со ссылкой.
С помощью CSS свойства letter-spacing Вы можете увеличивать или уменьшать отступ между буквами в тексте HTML элементов.
P.ls1 {letter-spacing:10px;}
Быстрый просмотр
С помощью свойства word-spacing Вы можете увеличивать или уменьшать отступ между словами в тексте HTML элементов.
P.ws1 {word-spacing:15px;}
Быстрый просмотр
Для того, чтобы посмотреть подробную информацию о желаемом CSS свойстве, щелкните по его названию.
Обратите внимание: для выполнения этого задания Вам необходимо будет посетить так как не все свойства оформления текста были разобраны в данной главе.
Задание 1 оформите элементы согласно их описанию:
1. В данном абзаце отступ между буквами равен 17 пикс., а отступ между словами 5 пикс.
Данный абзац оранжевого цвета.
2. Текст данного элемента подчеркнут, отступ между буквами в нем равен 15 пикселей.
Данный абзац серого цвета.
3. Текст данного элемента выровнен по центру, отступ между словами в нем равен 10
пикселей. Данный элемент имеет цвет #ff3366.
4. Текст данного элемента выравнен по правому краю, отступ между буквами в нем равен 6
пикселей. Текст написан маленькими буквами красного цвета.
5. Текст данного элемента выравнен по центру, подчеркнут, отступ между буквами в нем
равен 7 пикселей. Текст написан большими буквами зеленого цвета.
Включите JavaScript, чтобы воспользоваться системой комментирования Disqus.
Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.
На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине. Наследуется.
Синтаксис
P {word-spacing: normal;}
p {word-spacing: 2px;}
Рис. 1. Расстояние между словами
Свойство устанавливает расстояние между буквами (величину трекинга) и символами. Может принимать положительные и отрицательные значения. Целесообразно применять для повышения выразительности и читаемости заголовков, определений и пр. Наследуется.
Синтаксис
P {letter-spacing: normal;}
p {letter-spacing: 2px;}
Рис. 2. Изменение расстояния между буквами с помощью свойства letter-spacing
Свойство обрабатывает пробелы между словами и переносы строк внутри элемента. Не наследуется.
| white-space | |
|---|---|
| Значения: | |
| normal | Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости. |
| nowrap | Запрещает переносы строк, за исключением применения . |
| pre | Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк. |
| pre-wrap | Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо. |
| pre-line | Удаляет лишние пробелы, за исключением случаев . |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
P {white-space: normal;} p {white-space: nowrap;} p {white-space: pre;} p {white-space: pre-wrap;} p {white-space: pre-line;}
Для изменения величины отступа, получаемого с помощью клавиши ТAB, используется свойство tab-size . Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .
Работает только для элементов