Свойства символов и абзацев в css сообщение
Обновлено: 04.07.2024
Стандартный вид текста не всегда подходит, как по внешнему виду, так и по цвету, CSS предоставляет обширные возможности, с помощью которых, вы можете кардинально изменить ваш текст, например задав ему цвет, меняя межстрочный интервал, расстояние между буквами или размер текста и многое другое.
Отступ текста
Отступ в первой строке абзаца, имитирующий красную строку, - это один из самых распространенных эффектов для текста. В CSS для указания отступа предназначено свойство text-indent.
В случае применения свойства text-indent первая строка любого элемента может быть смещена на заданную величину, даже если эта величина отрицательная. Чаще всего это свойство применяется для создания эффекта красной строки у абзацев:
Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.
Свойство text-indent работает только с блочными элементами, его нельзя применять к строчным элементам или вставляемому контенту, такому как картинки. Но если в первой строке блочного элемента, например абзаца, есть картинка, то она будет сдвинута вместе со всем остальным текстом строки.
Отрицательные значения свойства, позволяют сделать текст с выступающей первой строкой. Но, задавая отрицательные значения, нужно учитывать, что часть выступающей строки может выйти за границы элемента или даже может быть обрезана левым краем окна браузера, если элемент находится вплотную к краю. Для избежания таких неприятностей, можно применить внутренний отступ с левой стороны элемента равный выступу:
Примечание: свойство padding-left было приведено только для примера, как можно выйти из неприятной ситуации. На данный момент на нем можно не заострять внимание. Внутренние отступы и свойство padding-left подробно разбираются в главе - Блочная модель.
С text-indent могут применяться любые единицы измерения длины, в том числе и процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если установлен отступ равный 50% и абзац занимает всю ширину окна браузера, то первая строка будет начинаться посередине экрана.
Примечание: стоит обратить внимание, что свойство text-indent наследуется, что может приводить к непредвиденным результатам:
Форматирование
Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:
Урок №3
Основные CSS-свойства
Схема CSS-кода выглядит следующим образом:
В этом уроке мы рассмотрим основные CSS-свойства. Для вашего удобства, я разложил их по категориям:
CSS-свойства влияющие на цвет и фон
CSS-свойства влияющие на шрифт
font-size: — CSS-свойство влияющее на размер шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства font-size :
font-size: 17px; — размер шрифта должен быть 17 пикселей,
font-size: 20pt; — размер шрифта должен быть 20 пунктов.
font-family: — CSS-свойство устанавливающее имя шрифта для заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя шрифта: Arial , Courier , Impact , Garamond , Georgia , Helvetica , Tahoma , Times (установлен по-умочанию), Verdana и т.д.
Примеры кода с использованием CSS-свойства font-family :
font-family: Arial; — имя шрифта должно быть Arial,
font-family: Impact; — имя шрифта должно Impact.
font-style: — CSS-свойство влияющее на начертание (стиль) шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: normal , oblique .
Примеры кода с использованием CSS-свойства font-style :
font-style: normal; — нормальное начертание шифта,
font-style: oblique; — наклонное начертание шифта.
font-weight: — CSS-свойство влияющее на толщину шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступет: normal , bold .
Примеры кода с использованием CSS-свойства font-weight :
font-weight: normal; — нормальное начертание шифта,
font-weight: bold; — жирное начертание шифта.
CSS-свойства влияющие на текст
text-align: — CSS-свойство влияющее на выравнивание текста в заголовке, абзаце и других блочных элементах. В качестве его значения выступает: left , center , right , justify .
Примеры кода с использованием CSS-свойства text-align :
text-align: left; — выравнивание текста по левому краю (установлен по-умолчанию),
text-align: center; — выравнивание текста по центру,
text-align: right; — выравнивание текста по правому краю,
text-align: justify; — равномерное выравнивание текста по левому и правому краям.
text-indent: — CSS-свойство влияющее на отступ первой строки (красная строка) текста в закаловке, абзаце и других блочных элементах. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства text-indent :
text-indent: 20px; — отступ первой строки равен 20 пикселям,
text-indent: 15pt; — отступ первой строки равен 15 пунктам.
line-height: — CSS-свойство влияющее на расстояние между строками текста (интерлиньяж) заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: множитель, пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства text-indent :
line-height: 35px; — расстояние между строками равно 35 пикселей,
line-height: 1.5; — расстояние между строками равно 1.5 по множителю (аналогичен 150%).
letter-spacing: — CSS-свойство влияющее на расстояние между символами в словах заголовка, абзаца ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства letter-spacing :
letter-spacing: 3px; — расстояние между символами в словах, равно 3 пикселя,
letter-spacing: 5pt; — расстояние между символами в словах, равно 5 пунктов.
word-spacing: — CSS-свойство влияющее на расстояние между словами в тексте заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства word-spacing :
word-spacing: 10px; — расстояние между словами, равно 10 пикселей,
word-spacing: 7pt; — расстояние между словами, равно 7 пунктов.
text-transform: — CSS-свойство влияющее на вид букв в тексте, делая их прописными или строчными. В качестве его значения выступает: capitalize , lowercase , uppercase .
Примеры кода с использованием CSS-свойства text-transform :
text-transform: capitalize; — первая буква каждого слова начинается с верхнего регистра,
text-transform: uppercase; — все буквы в тексте записываются в верхнем регистре,
text-transform: lowercase; — все буквы в тексте записываются в нижнем регистре.
text-shadow: — CSS-свойство создающее тень текста.
В качестве его значения выступает: цвет ось-x ось-y радиус .
Пример кода с использованием CSS-свойства text-shadow:
text-shadow: green 3px 2px 2px; — тень будет зелёного цвета, со сдвигом в лево на 3 пикселя, со сдвигом вниз на 2 пикселя, радиус (разброс тени) будет составлять 5 пикселей.
CSS-свойства влияющие на границу (обводку)
border-width: — CSS-свойство влияющее на толщину границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px).
Примеры кода с использованием CSS-свойства border-width :
border-width: 1px; — толщина обводки равна 1 пикселю,
border-width: 3px; — толщина обводки равна 3 пикселям.
border-style: — CSS-свойство влияющее на стиль границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: solid , dashed , dotted , double .
Примеры кода с использованием CSS-свойства border-style :
border-style: solid; — обводка как сплошная линия,
border-style: dashed; — обводка в виде отрезков,
border-style: dotted; — обводка в виде точек,
border-style: double; — обводка в виде двойной сплошной линии.
CSS-свойства влияющие на внешние и внутренние отступы
margin: — CSS-свойство влияющее на отступ между краем фона одного блочного элемента (заголовки, абзацы и т.д.) и краем фона другого блочного элемента. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства margin :
margin: 15px; — отступ равен 15 пикселям,
margin: 12pt; — отступ равен 12 пунктам.
padding: — CSS-свойство влияющее на отступ между краем фона элемента и его содержимым (текстом, изображением). В качестве его значения выступаюет единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства padding :
padding: 5px; — отступ равен 5 пикселям,
padding: 3pt; — отступ равен 3 пунктам.
Модуль CSS-текст описывает функции CSS, которые управляют переводом исходного текста в форматированный и переносом строк. Различные свойства CSS обеспечивают контроль над преобразованием регистра, обработкой пробелов, правилами переноса и переносом текста и строк, выравниванием, интервалами и отступами.
Основной единицей текста является символ. Тем не менее, поскольку системы письма не всегда так просты, как основной английский алфавит, то, чем на самом деле является символ, зависит от контекста, в котором используется этот термин. Например, в корейской системе письма каждое квадратное представление слога (например, 한 = хань) можно считать символом. Однако квадратный символ действительно состоит из нескольких букв, каждая из которых представляет фонему (например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.
CSS построен на Unicode.
1. Преобразование текста: свойство text-transform
Свойство text-transform стилизует текст. Оно не влияет на базовое содержимое и не должно влиять на содержимое операции копирования и вставки простого текста.
| text-transform | |
|---|---|
| Значения: | |
| none | Значение по умолчанию, означает отсутствие эффектов. |
| capitalize | Изменяет написание первой буквы каждого слова в элементе, делая её прописной. |
| uppercase | Выводит все слова в элементе прописными буквами. |
| lowercase | Выводит все слова в элементе строчными буквами. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
2. Обработка пробелов и переносы строк: свойство white-space
Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.
| white-space | |
|---|---|
| Значения: | |
| normal | Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости. |
| nowrap | Запрещает переносы строк, за исключением применения . |
| pre | Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк. |
| pre-wrap | Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо. |
| pre-line | Удаляет лишние пробелы, за исключением случаев . |
| break-spaces | Поведение идентично pre-wrap , за исключением того, что: любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки; возможность переноса строки существует после каждого неудаляемого пробела, в том числе между пробелами. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
3. Настройка табуляции: свойство tab-size
Свойство tab-size используется для изменения величины отступа, получаемого с помощью клавиши ТAB. Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .
Работает только для элементов
4. Разрыв строки и границы слов
Когда содержимое на строчном уровне разбивается на строки, оно разбивается на линейные блоки. Такое разбиение называется разрыв строки.
Когда строка прерывается из-за явных элементов управления разрывом строки, например, символа новой строки или тега
, начала или конца блока — это принудительный разрыв строки.
Если строка обрывается из-за переноса содержимого, когда браузер создает необязательные разрывы строк, чтобы вписать содержимое — это мягкий перенос.
4.1. Правила разрыва для букв: свойство word-break
Свойство word-break определяет возможности мягкого переноса между буквами, т.е. когда допустимо разбивать строки текста. В частности, оно контролирует, существует ли возможность мягкого переноса между смежными типографскими буквенными единицами и/или цифрами. Это не влияет на правила, регулирующие возможности мягкого переноса, созданные пробелами.
| word-break | |
|---|---|
| Значения: | |
| normal | Слова разрываются в соответствии с их обычными правилами. Значение по умолчанию. |
| break-all | Разрыв допускается в пределах слов. Перенос слов не применяется. |
| keep-all | Запрещает разрывы между парами символов. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
4.2. Разрыв строки: line-break
Свойство line-break определяет правила переноса строк, применяемых внутри элемента, в частности то, как перенос взаимодействует со знаками препинания и символами.
| line-break | |
|---|---|
| Значения: | |
| auto | Браузер определяет набор используемых ограничений на разрыв строки, которые могут варьироваться в зависимости от длины линии, например, использовать менее строгий набор правил разрыва строки для коротких строк. Значение по умолчанию. |
| loose | Разбивает текст, используя наименее ограничивающий набор правил переноса строк. Обычно используется для коротких строк, например, в газетах. |
| normal | Разбивает текст, используя наиболее распространенный набор правил переноса строк. |
| strict | Разбивает текст, используя строгий набор правил переноса строк. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
4.3. Расстановка переносов: свойство hyphens
Свойство hyphens определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.
Расстановка переносов — это контролируемое разбиение слов, при котором им обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как правило, разбиение слов происходит по слоговым или морфемным границам и при визуальном указании на разделение (обычно путем вставки дефиса, ‐ ). В некоторых случаях переносы могут также изменить написание слова. В любом случае, перенос слов является только эффектом рендеринга: он не должен влиять ни на содержимое документа, ни на выбор текста или поиск.
CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса.
4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap
Свойство overflow-wrap (или его устаревшее имя word-wrap ) указывает, может ли неразрывная строка прерваться в неразрешенных точках, чтобы предотвратить переполнение линейного блока. Работает в том случае, когда свойство white-space разрешает перенос.
| overflow-wrap, word-wrap | |
|---|---|
| Значения: | |
| normal | Неразрывные строки могут разрываться только в разрешенных точках разрыва. Значение по умолчанию. |
| break-word | |
| anywhere | Неразрывная последовательность символов может быть разбита в произвольной точке, если в строке нет других приемлемых точек разрыва. Влияет только на визуальное отображение, не затрагивая исходный текст. В точке разрыва строки символ переноса не добавляется. Возможности мягкого переноса, представленные в любом месте, учитываются при расчете собственных размеров минимального содержимого. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
5. Выравнивание и выключка строк
Выравнивание и выключка строк контролируют, как встроенный контент распределяется в линейном блоке.
5.1. Краткая запись для выравнивания текста: свойство text-align
Блок текста представляет собой набор линейных блоков. Свойство text-align задает свойства text-align-all и text-align-last и описывает, как блоки на уровне строки в каждом линейном блоке выравниваются относительно начальной и конечной сторон линейного блока. Значения, отличные от justify-all или match-parent , присваиваются text-align-all и сбрасываются в text-align-last на auto .
| text-align | |
|---|---|
| Значения: | |
| start | Содержимое на уровне строки выравнивается по начальному краю линейного блока. Значение по умолчанию. |
| end | Содержимое на уровне строки выравнивается по конечному краю линейного блока. |
| left | Содержимое на уровне строки выравнивается по левому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста. |
| right | Содержимое на уровне строки выравнивается по правому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста. |
| center | Содержимое на уровне строки центрируется внутри линейного блока. |
| justify | Текст выравнивается по ширине линейного блока, чтобы точно заполнить поле строки, прижимаюсь к левому и правому краям родительского элемента. Если иное не указано в text-align-last , последняя строка перед принудительным разрывом или конец блока выравнивается по началу. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами. |
| justify-all | Устанавливает text-align-all и text-align-last в justify , также выравнивая последнюю строку. |
| match-parent | Значение ведет себя так же, как inherit за исключением того, что унаследованное значение start или end интерпретируется относительно значения direction (или исходного содержащего блока, если нет родителя) и приводит к вычисленному значению left или right . |
| inherit | Наследует значение свойства от родительского элемента. |
5.2. Выравнивание текста по умолчанию: свойство text-align-all
Свойство text-align-all — сокращенный вариант свойства text-align определяет выравнивание всех строк содержимого в контейнере блока, за исключением последних строк, переопределенных значением text-align-last . Принимает значения start , end , left , right , center , justify и match-parent .
5.3. Выравнивание последней строки: свойство text-align-last
Свойство text-align-last описывает, как выравнивается последняя строка блока или строки непосредственно перед принудительным разрывом строки.
Если задано значение auto , содержимое в соответствующей строке выравнивается по text-align-all , если только для text-align-all не настроено justify — в этом случае оно выравнивается по началу блока. Все остальные значения интерпретируются как описано для text-align .
Принимает значения auto , start , end , left , right , center , justify и match-parent .
6. Промежутки
CSS позволяет контролировать промежутки между словами и типографскими символами с помощью свойств word-spacing и letter-spacing .
6.1. Промежутки между словами: свойство word-spacing
Свойство word-spacing определяет дополнительный интервал между словами.
Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.
На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине.
| word-spacing | |
|---|---|
| Значения: | |
| normal | Дополнительный интервал не применяется. Вычисляет в 0 . Значение по умолчанию. |
| длина | Задает дополнительный интервал в дополнение к внутреннему интервалу между словами, определенному шрифтом. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
6.2. Трекинг: свойство letter-spacing
Свойство letter-spacing определяет дополнительный интервал, или трекинг, между смежными типографскими символами. Межбуквенный интервал является дополнением к кернингу и word-spacing . В зависимости от действующих правил выравнивания пользовательские агенты могут дополнительно увеличивать или уменьшать расстояние между типографскими символьными единицами для выравнивания текста.
| letter-spacing | |
|---|---|
| Значения: | |
| normal | Дополнительный интервал не применяется. Вычисляет в 0 . Значение по умолчанию. |
| длина | Определяет дополнительный интервал между типографскими символами. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
7. Отступ первой строки: свойство text-indent
Свойство text-indent задает отступ, применяемый к строкам встроенного содержимого в блоке. Отступ обрабатывается как поле, примененное к начальному краю линейного блока.
Если в первой строке блочного элемента присутствует изображение, то оно сдвинется вместе с остальным текстом.
В этой статье речь пойдет о том как происходит форматирование текста в CSS, будут рассмотрены приемы выравнивания текста, как силамии CSS сделать красную строку, установить междустрочный интервал и интервал между словами, как произвести декорирование текста, преобразовать текст в верхний, или нижний регистр и как создать капитель шрифта.
В ходе верстки сайта Вам придется постоянно изменять внешний вид веб-страниц. Одной из первых задач при работе с текстом на странице является необходимость его выровнять.
Выравнивание текста
Благодаря свойству CSS text-align, вы можете разместить заголовки вашего документа по центру, расположить текстовое содержимое относительно левого, либо правого края, или, может, вы готовите страницы к печати и необходимо выровнять их по ширине, подобно тому, как текст размещается в печатных изданиях.
Чтобы установить выравнивание для текста, используйте следующие ключевые слова со свойством text-align:
| Значение | Описание |
|---|---|
| left | Выравнивает текст влево. Это значение по умолчанию (если направление текста слева направо). |
| right | Выравнивает текст вправо. Это значение по умолчанию (если направление текста справа налево). |
| center | Выравнивает текст по центру. |
| justify | Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст по ширине). |
Давайте рассмотрим пример работы с выравниванием текста:
В данном примере мы создали 4 (четыре) класса, которые определяют различные варианты выравнивания текста. Для всех элементов
Результат нашего примера:
Рис.60 Пример использования свойства text-align (выравнивание текста).
Отступ первой строки
Если Вы откроете практически любую книгу, содержащую текстовую информацию, то можете заметить, что первая строка каждого абзаца, как правило, имеет отступ (красная строка).
Если у вас есть необходимость придать вашему документу вид подобный печатному изданию, то воспользуйтесь таким CSS свойством, как text-indent.
Вы можете применить те относительные единицы измерения, которые вы используете в своем документе, будь то пиксели, либо значения, которые зависят от базового размера шрифта (например, такие как em).
Обращаю Ваше внимание, что в некоторых ситуациях у вас может появится необходимость использовать отрицательный отступ первой строки, свойство text-indent допускает использование отрицательных значений, в этом случае строка сдвигается в обратном направлении.
Давайте рассмотрим пример использования этого свойства:
В данном примере мы создали 4 (четыре) стиля и поочередно применили их к четырем абзацам. Для первого абзаца установили значение отступа по умолчанию (0), для второго задали отступ 40 пикселей, для третьего указали отрицательный отступ (-20px), в результате чего, абзац сдвинулся за окно браузера и для четвертого абзаца установили отступ равный 50%.
Обращаю ваше внимание, что если вы используете процентные значения, то отступ зависит от ширины родительского элемента, в котором находится абзац.
Результат нашего примера:
Рис. 61 Пример использование свойства text-indent (красная строка).
Установка междустрочного интервала
При работе с текстом зачастую возникает необходимость расположить строки абзаца ближе друг к другу, либо наоборот - растянуть их. Расстояние между базовыми линиями соседних строк называется интерлиньяж или междустрочный интервал.
В CSS за междустрочный интервал (интерлиньяж) отвечает свойство line-height (высота строки). Чем выше значение этого свойства, тем больше промежуток между строками.
Обращаю Ваше внимание на то, что при установке значения высоты строки с использованием единиц измерения пиксели, размер междустрочного интервала, напрямую будет зависеть от размера шрифта, то есть он будет автоматически корректироваться пропорционально изменению свойства font-size (размер шрифта), рассмотренного в предыдущей статье.
Как правило, во всех современных браузерах высота строки по умолчанию составляет 120 %.
Расчёт междустрочного интервала происходит следующим образом:
Например, размер шрифта составляет 20 пикселей, а высота строки 150% (30 пикселей). Таким образом, получается:
Допускается задавать размер высоты строки с использованием числового значения. Объявление выглядит следующим образом:
Как вы можете заметить, единицы измерения при этом не указываются, а число выступает в роли множителя. При использовании числовых значений расчёт междустрочного интервала происходит следующим образом:
Например, шрифт для абзаца установлен 2em, а высота строки задана как 1.5:
Расчетное значение междустрочного интервала в нашем случае составит 3em:
В большинстве случаев множитель использовать очень удобно, так как элементы наследуют значения междустрочного интервала родительского элемента. Давайте рассмотрим пример использования свойства line-height:
В данном примере мы рассмотрели способы указания высоты строки в пикселях, процентах и с использованием множителя.
Результат нашего примера:
Рис. 62 Пример использование свойства line-height (установка междустрочного интервала).
Интервал между словами и символами
Оформляя страницы на сайте, приходится регулировать интервал не только между строк, но и между отдельными словами, или символами. Например, уменьшив интервал между символами, позволит сделать длинный заголовок более компактным, или наоборот, увеличив интервал, придаст ему более растянутый вид.
Чтобы установить определенный интервал между символами необходимо использовать CSS свойство letter-spacing. При работе со свойством используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между символами, а отрицательные уменьшают, вплоть до наслоения букв и символов друг на друга.
Давайте рассмотрим пример использования свойства letter-spacing:
В данном примере мы рассмотрели способы указания интервала между символами в тексте в пикселях (как положительное, так и отрицательное значение) и единицах измерения em.
Результат нашего примера:
Рис.63 Пример использования свойства letter-spacing (интервал между символами в тексте).
Задать интервал между отдельными словами позволяет похожее по наименованию свойство CSS - word-spacing. По аналогии со свойством letter-spacing используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между словами, а отрицательные уменьшают, вплоть до наслоения слов друг на друга.
Давайте рассмотрим пример использования свойства word-spacing:
В данном примере мы рассмотрели способы указания интервала между словами в тексте в пикселях (отрицательное значение) и единицах измерения em.
Результат нашего примера:
Рис. 64 Пример использования свойства word-spacing (интервал между словами в тексте).
Декорирование текста
CSS свойство text-decoration дает нам возможность добавить к тексту такие виды декорирования как:
- подчеркивание
- перечеркивание
- линия над текстом
Однако, одно из самых распространенных применений этого свойства это отмена декорирования, при этом необходимо использовать со свойством text-decoration ключевое слово none :
В данном примере мы убрали декорирование (подчеркивание) у всех гиперссылок. Полный перечень ключевых слов свойства text-decoration указан в данной таблице:
| Значение | Описание |
|---|---|
| none | Определяет нормальный текст (без декорирования). Это значение по умолчанию |
| underline | Определяет линию под текстом. |
| overline | Определяет линию над текстом. |
| line-through | Определяет линию, проходящую через текст (перечеркивание). |
Обращаю Ваше внимание, что у большинства пользователей подчеркнутый текст ассоциируется с гиперссылкой, а перечеркнутый с удалённым текстом, поэтому используйте декорирование, когда это действительно необходимо.
Допускается использовать несколько значений в одном объявлении:
Давайте рассмотрим пример использования свойства text-decoration в тексте:
В данном примере мы создали четыре различных стиля и применили их поочередно к каждому абзацу. В первом абзаце добавили декорирование текста - линия снизу (значение underline ), во втором декорирование текста - линия сверху (значение overline ), в третьем декорирование текста - перечеркивание ( line-through ), а в четвертом двойное декорирование текста - линия сверху и снизу (значения underline overline ).
Результат нашего примера:
Рис. 65 Пример использования свойства text-decoration (декорирование текста в CSS).
Верхний и нижний регистр
CSS предоставляет возможность осуществить преобразование любого текста в верхний или нижний регистр, а также преобразовать первые буквы каждого слова в верхний регистр. Управляет регистром текста свойство text-transform, ниже в таблице приведены все его значения:
| Значение | Описание |
|---|---|
| none | Текст отображается как есть (регистр букв не изменяется). Это значение по умолчанию. |
| capitalize | Преобразует первые символы каждого слова в верхний регистр. |
| uppercase | Преобразует все символы в верхний регистр. |
| lowercase | Преобразует все символы в нижний регистр. |
Давайте рассмотрим пример использования свойства text-transform в тексте:
В данном примере мы создали три различных стиля и применили их поочередно к каждому абзацу. В первом абзаце первые символы каждого слова были преобразованы в верхний регистр (значение capitalize ), во втором все символы в верхний регистр (значение uppercase ), а в третьем в нижний регистр (значение lowercase ).
Рис. 66 Пример использования свойства text-transform (изменения регистра текста).
Капитель в CSS
Малые заглавные, или капитель (англ. small caps) — начертание шрифта, в котором строчные знаки выглядят как уменьшенные заглавные буквы. Для создания такого начертания используется CSS свойство font-variant со следующим синтаксисом:
Рассмотрим пример использования:
В данном примере первый параграф оставлен без изменений, а ко второму применено свойство font-variant со значением small-caps , благодаря которому текст будет выведен в капители (строчные буквы устанавливаются как прописные уменьшенного размера).
Рис. 67 Пример использования свойства font-variant (капитель шрифта).
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
Свойства CSS для форматирования текста позволяют оформить содержимое страницы, не затрагивая HTML-код. Какие же параметры можно задать тексту через таблицы стилей?
Выравнивание по горизонтали
Для него используется свойство text-align. Выровнять с его помощью можно только блочный текст (теги
). Свойству может быть задано одно из четырех значений:
Вот код HTML-страницы, текст которой выровнен по правому краю:
Выглядеть страница будет так:
Если текст выровнен по ширине (text-align: justify), то можно использовать свойство text-align-last, чтобы задать отличное от основного содержимого выравнивание последней строчки текста элемента.
Выравнивание по вертикали
Может задаваться только для строчных элементов (картинок, форм), определяется свойством vertical-align. С его помощью выравнивается не содержимое, а сами элементы, кроме случая с ячейкой – использование vertical-align выравнивает не её саму, а только расположенный в ней текст. Значения могут быть следующими:
- baseline. задаётся свойству по умолчанию и выравнивает базовую линию элемента по базовой линии родителя. Если у родителя её нет, то выравнивание происходит по нижней границе.
- top и bottom. Если задано первое значение, то верхний край элемента будет совпадать с верхним краем самого высокого элемента строки. Можно сказать, что top — это выравнивание по верхнему краю. Второе свойство выполняет противоположную функцию — совмещает нижний край оформляемого элемента с нижней частью элемента, расположенного в строке ниже всех, то есть происходит выравнивание по нижнему краю.
- text-top и text-bottom. От предыдущих свойств отличаются тем, что выравнивание происходит по самым нижним и верхним текстовым элементам, а не любым.
- sub и super. Аналоги HTML-тегов и . Первое свойство делает элемент подстрочным, второе — надстрочным. Шрифт текста при этом не меняется.
- middle. Выравнивание по центру относительно элемента-родителя.
Также с помощью vertical-align можно переместить элемент вверх или вниз, указав значение в пикселях, единицах или процентах. Положительная цифра переместит его вверх, отрицательная — вниз.
Отступ первой строки
Свойство text-indent позволяет задать отступ первой строки текста. Например, так можно отформатировать абзацы, чтобы лучше визуально отделить их друг от друга. В качестве значения используется цифра, задающая длину в процентах, единицах или пикселях. Отрицательное число превратит отступ в выступ.
Межстрочный интервал
Задаётся свойством line-height, в качестве значения которого может указываться:
- Процент. Высчитывается от размера шрифта элемента.
- Число. Определяется как множитель от размера шрифта, который принимается за единицу. Например line-height: 1.5; установит полуторный интервал.
- Пиксели или пункты. Определяют не переменное, как предыдущие варианты, а постоянное расстояние.
Декорирование текста
Значение свойства text-decoration позволяет сделать текст зачёркнутым (line-through), подчёркнутым (underline) — линия появляется под текстом, надчёркнутым (overline) — линия появляется над текстом, или отменить эффекты (none).
Вот пример кода:
Результатом работы будет такая страница:
Интервал между символами и словами
Расстояние между словами можно изменить с помощью свойства word-spacing. Межсимвольное расстояние задаётся свойством letter-spacing. В качестве значений используются любые принятые в CSS единицы длины.
Смена регистра
Указав свойство text-transform, вы можете сделать так, чтобы все буквы текста были заглавными (значение uppercase), строчными (lovercase), или чтобы каждое слово начиналось с большой буквы (capitalize).
Обратите внимание, что текст в коде набран как обычно: единственная заглавная буква стоит в начале предложения. Отображение на странице меняет CSS-стиль.
Читайте также: