В этой статье речь пойдет о том как происходит форматирование текста в CSS, будут рассмотрены приемы выравнивания текста, как силамии CSS сделать красную строку, установить междустрочный интервал и интервал между словами, как произвести декорирование текста, преобразовать текст в верхний, или нижний регистр и как создать капитель шрифта.
В ходе верстки сайта Вам придется постоянно изменять внешний вид веб-страниц. Одной из первых задач при работе с текстом на странице является необходимость его выровнять.
Давайте рассмотрим пример работы с выравниванием текста:
четыре ) класса, которые определяют различные варианты выравнивания текста. Для всех элементов
Результат нашего примера:
Если Вы откроете практически любую книгу, содержащую текстовую информацию, то можете заметить, что первая строка каждого абзаца, как правило, имеет отступ (красная строка).
Если у вас есть необходимость придать вашему документу вид подобный печатному изданию, то воспользуйтесь таким CSS свойством, как text-indent .
Вы можете применить те относительные единицы измерения, которые вы используете в своем документе, будь то пиксели, либо значения, которые зависят от базового размера шрифта (например, такие как em ).
Обращаю Ваше внимание, что в некоторых ситуациях у вас может появится необходимость использовать отрицательный отступ первой строки, свойство text-indent допускает использование отрицательных значений, в этом случае строка сдвигается в обратном направлении.
Давайте рассмотрим пример использования этого свойства:
Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.
Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.
Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.
Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.
В данном примере мы создали 4 (четыре ) стиля и поочередно применили их к четырем абзацам. Для первого абзаца установили значение отступа по умолчанию (0 ), для второго задали отступ 40 пикселей , для третьего указали отрицательный отступ (-20px ), в результате чего, абзац сдвинулся за окно браузера и для четвертого абзаца установили отступ равный 50% .
Обращаю ваше внимание, что если вы используете процентные значения, то отступ зависит от ширины родительского элемента, в котором находится абзац.
Результат нашего примера:
Рис. 61 Пример использование свойства text-indent (красная строка).
При работе с текстом зачастую возникает необходимость расположить строки абзаца ближе друг к другу, либо наоборот - растянуть их. Расстояние между базовыми линиями соседних строк называется интерлиньяж или междустрочный интервал .
В CSS за междустрочный интервал (интерлиньяж) отвечает свойство line-height (высота строки). Чем выше значение этого свойства, тем больше промежуток между строками.
Обращаю Ваше внимание на то, что при установке значения высоты строки с использованием единиц измерения пиксели, размер междустрочного интервала, напрямую будет зависеть от размера шрифта, то есть он будет автоматически корректироваться пропорционально изменению свойства font-size (размер шрифта), рассмотренного в предыдущей статье.
Как правило, во всех современных браузерах высота строки по умолчанию составляет 120 % .
Расчёт междустрочного интервала происходит следующим образом:
Высота строки (line-height ) минус высота шрифта (font-size )
Например, размер шрифта составляет 20 пикселей , а высота строки 150% (30 пикселей ). Таким образом, получается:
Высота строки (150% или 30px ) минус высота шрифта (20px ) = 10px
Допускается задавать размер высоты строки с использованием числового значения. Объявление выглядит следующим образом:
cелектор { line-height : 1.5 ; }Как вы можете заметить, единицы измерения при этом не указываются, а число выступает в роли множителя. При использовании числовых значений расчёт междустрочного интервала происходит следующим образом:
Числовое значение * размер шрифта
Например, шрифт для абзаца установлен 2em , а высота строки задана как 1.5 :
p { font-size : 2em ; line-height : 1.5 ; }Расчетное значение междустрочного интервала в нашем случае составит 3em :
Числовое значение(1.5 ) * размер шрифта(2em ) = 3em
В большинстве случаев множитель использовать очень удобно, так как элементы наследуют значения междустрочного интервала родительского элемента. line-height :
Параграф в котором line-height: 10px
Параграф в котором line-height: normal
Параграф в котором line-height: 150%
Параграф в котором line-height: 2
В данном примере мы рассмотрели способы указания высоты строки в пикселях, процентах и с использованием множителя.
Результат нашего примера:
Рис. 62 Пример использование свойства line-height (установка междустрочного интервала).
Оформляя страницы на сайте, приходится регулировать интервал не только между строк, но и между отдельными словами, или символами. Например, уменьшив интервал между символами, позволит сделать длинный заголовок более компактным, или наоборот, увеличив интервал, придаст ему более растянутый вид.
Чтобы установить определенный интервал между символами необходимо использовать CSS свойство letter-spacing . При работе со свойством используйте относительные единицы измерения CSS (em , rem , px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между символами, а отрицательные уменьшают, вплоть до наслоения букв и символов друг на друга.
Давайте рассмотрим пример использования свойства letter-spacing :
В данном примере мы рассмотрели способы указания интервала между символами в тексте в пикселях (как положительное, так и отрицательное значение) и единицах измерения em.
Результат нашего примера:
Задать интервал между отдельными словами позволяет похожее по наименованию свойство CSS - word-spacing . По аналогии со свойством letter-spacing используйте относительные единицы измерения CSS (em , rem , px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между словами, а отрицательные уменьшают, вплоть до наслоения слов друг на друга.
Давайте рассмотрим пример использования свойства word-spacing :
Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.
Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.
Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.
В данном примере мы рассмотрели способы указания интервала между словами в тексте в пикселях (отрицательное значение) и единицах измерения em.Результат нашего примера:
CSS свойство text-decoration дает нам возможность добавить к тексту такие виды декорирования как:
Однако, одно из самых распространенных применений этого свойства это отмена декорирования, при этом необходимо использовать со свойством text-decoration ключевое слово none :
a { /* селектором типа выбираем все гиперссылки */ text-decoration : none ; /* убираем декорирование текста */ }В данном примере мы убрали декорирование (подчеркивание) у всех гиперссылок. Полный перечень ключевых слов свойства text-decoration указан в данной таблице:
Обращаю Ваше внимание, что у большинства пользователей подчеркнутый текст ассоциируется с гиперссылкой, а перечеркнутый с удалённым текстом, поэтому используйте декорирование, когда это действительно необходимо.
Допускается использовать несколько значений в одном объявлении:
text-decoration : underline line-through ; /* определяет линию под текстом и линию, проходящую через текст */Давайте рассмотрим пример использования свойства text-decoration в тексте:
Text-decoration: underline;
Text-decoration: overline;
Text-decoration: line-through;
Text-decoration: underline overline;
В данном примере мы создали четыре различных стиля и применили их поочередно к каждому абзацу. В первом абзаце добавили декорирование текста - линия снизу (значение underline ), во втором декорирование текста - линия сверху (значение overline ), в третьем декорирование текста - перечеркивание (line-through ), а в четвертом двойное декорирование текста - линия сверху и снизу (значения underline overline ).
Результат нашего примера:
Рис. 65 Пример использования свойства text-decoration (декорирование текста в CSS).
CSS предоставляет возможность осуществить преобразование любого текста в верхний или нижний регистр, а также преобразовать первые буквы каждого слова в верхний регистр. Управляет регистром текста свойство text-transform , ниже в таблице приведены все его значения:
Давайте рассмотрим пример использования свойства text-transform в тексте:
Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.
Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.
Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.
В данном примере мы создали три различных стиля и применили их поочередно к каждому абзацу. В первом абзаце первые символы каждого слова были преобразованы в верхний регистр (значение capitalize ), во втором все символы в верхний регистр (значение uppercase ), а в третьем в нижний регистр (значение lowercase ).
Рис. 66 Пример использования свойства text-transform (изменения регистра текста).
Малые заглавные, или капитель (англ. small caps ) - начертание шрифта, в котором строчные знаки выглядят как уменьшенные заглавные буквы. Для создания такого начертания используется CSS свойство font-variant со следующим синтаксисом:
cелектор { font-variant : small-caps ; /* задаем капитель шрифта */ }Рассмотрим пример использования:
Параграф отображается обычным шрифтом.
Строчные буквы устанавливаются как прописные уменьшенного размера.
В данном примере первый параграф оставлен без изменений, а ко второму применено свойство font-variant со значением small-caps , благодаря которому текст будет выведен в капители (строчные буквы устанавливаются как прописные уменьшенного размера).
More meanings of this word and English-Russian, Russian-English translations for CSS in dictionaries.
CSS-текст представляет набор свойств для форматирования текстового содержимого веб-страниц. Использование CSS-стилей для форматирования текста позволяет придать HTML-элементам желаемый вид, благодаря чему HTML-теги могут применяться только по своему прямому назначению — для определения структуры документа.
О свойствах для работы с текстом, добавленных в спецификацию CSS3 — text-overflow , word-break , word-wrap , можно прочитать .
Свойство выравнивает строки текста внутри блока по ширине относительно его границ. Применяется только к блочным элементам, например, абзацам. Наследуется.
| Значения: | |
| left | Выравнивание по левому краю элемента. Значение по умолчанию для языков, в которых чтение происходит слева-направо. |
| right | Выравнивание по правому краю элемента. |
| center | Выравнивание по центру элемента, управляет выравниванием содержимого, а не самих элементов. Центрирует каждую строчку текста элемента. |
| justify | Выравнивание по ширине элемента. В выровненном по ширине тексте оба конца строки прижимаются к левому и правому краям родительского элемента. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами. |
| initial | |
| inherit | |
Синтаксис
P {text-align: left;}
p {text-align: right;}
p {text-align: center;}
p {text-align: justify;}
Рис. 1. Свойство text-align
Устанавливает отступ (выступ) в первой строке элемента, создавая иллюзию структурированного текста. Применяется к любому блочному элементу, значение по умолчанию 0. Если в первой строке блочного элемента присутствует изображение, то оно сдвинется вместе с остальным текстом. Наследуется.
Синтаксис
P {text-indent: 5px;}
p {text-indent: 2%;}
Рис. 2. Свойство text-indent
Рис. 3. Контейнер строки
Свойство задаёт расстояние между базовыми линиями строк текста, определяя величину, на которую увеличивается или уменьшается высота блока каждого элемента. Управляет межстрочным интервалом — дополнительным расстоянием между строками над и под текстом. Чтобы определить межстрочный интервал, нужно найти разность line-height и font-size , разницу поделить на два, а каждую половину прибавить к области содержимого сверху и снизу. Принимает только положительные значения. Стандартный межстрочный интервал эквивалентен 120%.
При равных значениях line-height и height выравнивает текст по высоте. Наследуется.
Синтаксис
H1 {line-height: 20px;}
h1 {line-height: 200%;}
h1 {line-height: 1.2;}
h1 {line-height: normal;}
Рис. 4. Пример отображения различных значений межстрочного интервала
Применяется только к строчным элементам, к изображениям и полям форм. Не выравнивает содержимое блочного элемента. Не наследуется.
| vertical-align | |
|---|---|
| Значения: | |
| baseline | Выравнивает базовую линию элемента по базовой линии его родителя, совмещая среднюю линию элемента со средней линией родительского элемента. |
| sub | Делает элемент подстрочным (аналогично с тегом ). Величина понижения элемента может меняться в зависимости от браузера пользователя. |
| super | Делает элемент надстрочным (аналогично с тегом ). При этом значения sup и super не меняют размер шрифта, по умолчанию текст надстрочного и подстрочного элемента имеет такой же размер, как и текст родительского элемента. |
| top | Верхний край элемента совмещается с верхним краем самого высокого элемента в линии. |
| text-top | Верхний край элемента совмещается с верхним краем шрифта родительского элемента. |
| middle | Средняя линия элемента (обычно изображения) совмещается с линией, проходящей через середину родительского элемента. |
| bottom | Нижний край элемента совмещается с нижним краем самого низкого элемента в линии. |
| text-bottom | Нижний край элемента совмещается с нижним краем шрифта родительского элемента. |
| длина | Устанавливает значение в единицах длины, перемещая элемент на заданное расстояние. |
| % | Не позволяет устанавливать middle , вычисляется как часть line-height элемента, а не его родителя, т.е. если установить значение vertical-align , равное 50% для элемента с line-height равным 20рх, то базовая линия элемента поднимется на 10px . |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
CSS дает широкие возможности по оперированию стилем текста. Можно влиять на шрифт, цвет, размер и другие свойства текста.
Так как эта страница расчитана на новичков, то сначала напомним базовый синтаксис CSS и используемую терминологию.
Каждое правило CSS состоит из селектора и определения. Селектор - обычно это тег, к которому мы применяем наш стиль, а определение - это само стилевое отображение. Определение состоит из свойства и его значения. Например: свойство - цвет, значение - красный.
Синтаксис CSS следующий:
селектор { свойство: значение }
Пример правила CSS:
p { color : blue }
Отображать текст синим цветом. Одному селектору можно указать несколько пар (свойство: значение).
p { color : blue ; font-size : 10pt }
В этом примере задано правило тегу
Отображать текст синим цветом и размером 10pt. То есть тут мы имеем две пары (свойство: значение) применённые к одному селектору, в данном случае к тегу абзаца
В дальнейшем, когда в тексте будут встречаться слова свойство и значение, будет иметься ввиду именно определение для селектора в правиле CSS. Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman. Список шрифтов в значении font-family
может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные. Браузер поочерёдно проверяет наличие шрифтов из списка на компьютере пользователя. Если первый шрифт в списке есть, то используется он, иначе браузер проверяет наличие второго шрифта из списка. Если ни одного нет, используется шрифт по умолчанию. В конце списка обычно прописывают ключевые слово, которое описывает тип желаемого шрифта - serif, sans-serif, fantasy, cursive или monospace. Универсальные семейства шрифтов: Пример с использованием:
Свойства шрифта
Заголовок h1
Заголовок h2
Следующее свойство:
Пример кода, в этом примере встроим стили в тег при помощи атрибута style.
Пример нормального шрифта.
Пример курсива.
Пример наклонного шрифта.
Видно что курсив от наклонного шрифта внешне не отличается.
Следующее свойство:
Капитель - так в типографике называется текст, в котором строчные знаки выглядят, как уменьшенные прописные. Следует различать капитель и просто уменьшенные прописные буквы. Капительные буквы несколько выше строчных и имеют, как правило, чуть расширенные пропорции.
Обычный текст. Текст капителью.
Опять обычный текст.
Следующее свойство:
Свойство font-weight устанавливает насыщенность шрифта. Для этого в значении используются ключевые слова: bold - полужирное начертание, normal - нормальное начертание. Значение может быть установленно в диапазоне от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное - 900. Нормальное начертание шрифта (normal, которое установлено по умолчанию) соответствует 400, стандартный полужирный текст, bold, - значению 700.
Браузеры обычно не могут точно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в большинстве браузеров обычно ограничено только двумя вариантами: нормальное начертание и жирное начертание.
Значения lighter и bolder изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.
Обычный текст. Текст bold.
Опять обычный текст.
Следующее свойство:
Свойство font-size - определяет размер шрифта элемента. Размер шрифта можно задать несколькими способами.
Абсолютный размер кегля шрифта может задаваться с использованием ключевых слов: xx-small (крайне малый), small (малый), medium (средний, значение по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). Абсолютные размеры шрифта зависят от настроек браузера и операционной системы, так что они не совсем абсолютны.
Для изменения размера текста относительно родителя используется другой набор констант (larger - увеличивает размер относительно родительского, smaller - уменьшает размер).
Обычный текст.
Текст xx-small. Текст larger.
Текст small.
Текст medium.
Текст large.
Текст x-large.
Текст xx-large.
Опять обычный текст.
Текст 150%.
Текст 15px. Текст larger.
Кроме работы со шрифтами, CSS даёт ряд инструментов для работы с свойствами самого текста.
Рассмотрим первое свойство:
При установке межстрочного интервала отчёт идёт от базовой линии шрифта. По умолчанию расстояние между строками текста зависит от вида и размера шрифта и определяется браузерами автоматически. Отрицательное значение интерлиньяжа не допускается.
Обычный текст. Первая строка.
Вторая строка.
Третья строка.
Изменённый текст. Первая строка.
Вторая строка.
Третья строка.
При процентной записи за 100% берется высота шрифта.
Следующее свойство:
При помощи определения { text-decoration : none } можно убирать подчеркивание у ссылок, которое устанавливается в браузерах по умолчанию.
Поисковик Google.
Следующее свойство:
Свойство text-transform - управляет отображением букв, можно устанавливать заглавные или прописные символы в зависимости от выбранного значения.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| text-transform | none capitalize uppercase lowercase |
Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные |
text-transform: uppercase |
Пример использования:
Текст none.
Текст capitalize.
Текст uppercase.
Текст lowercase.
Сравните текст который содержится в html-коде с текстом в окне браузера.
Следующее свойство:
Свойство text-align - служит для выравнивания текста по горизонтали окна браузера или контейнера, в котором расположен блок текста.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| text-align | left right center justify |
Выравнивание текста | text-align: right |
Подробное описание значений:
Пример использования этого свойства будет совмещён с примером работы следующего свойства.
Следующее свойство:
Свойство text-indent
- служит для создания величины отступа первой строки блока текста (например, для абзаца
Это свойство допускает отрицательное значение, в таком случае создается выступ первой строки. Работа со свойствами text-align и text-indent.
Для лучшего понимания работы кода откройте страницу
в новом окне и уменьшите его размер.
Свойство text-indent
Свойство
Значение
Описание
Пример
text-indent
значение
%
Отступ первой строки
text-indent: 15px;
text-indent: 10%
