Форматирование текста в CSS
«Форматирование текста в CSS» – третий урок учебника CSS. Здесь мы поговорим об основных способах форматирования текста средствами CSS.
CSS предоставляют вебмастеру отличную возможность управления отображением текста. Изменение расстояния между символами, всевозможные отступы, стиль символов и управление шрифтами – это и многое другое позволяют изменять таблицы стилей.
Свойства, позволяющие форматировать текст в CSS.
Color – позволяет задает цвет элемента. В качестве параметра может выступать как шестнадцатиричное, так и буквенное значение цвета.
|
.red { color: red }
|
красный цвет
|
Direction – позволяет изменить направление текста.
ltr – слева направо
rtl – справа налево.
| div.d1{ direction : ltr; } div.d2{ direction : rtl; } |
Я текст, написанный слева – направо
Я текст, написанный справа – налево
|
К сожалению не во всех браузерах этот параметр будет отображаться правильно.
Letter – spacing – задает интервал между символами.
normal – обычные интервалы
length – пользовательский интервал.
| div.c { letter – spacing : 7px; } |
Я текст, интервал между моими символами равен 5 пикселей.
|
Text – align – задает выравнивание текста внутри элемента и может принимать значения:
- Left – выравнивает текст слева
- Right – выравнивает текст справа
- Center – выравнивает текст по центру
- Justify – выравнивает текст по ширине
| div.e1{ text – align : left; } div.e2{ text – align : right; } div.e3{ text – align : center; } div.e4{ text – align : justify; } |
Left – выравнивает текст слева
Right – выравнивает текст справа
Center – выравнивает текст по центру
Justify – выравнивает текст по ширине
|
Text – decoration – оформление текста. Может принимать значения:
- None – обычный текст
- Underline – подчеркнутый снизу текст
- Overline – подчеркнутый сверху текст
- Line – through – зачеркнутый текст
- Blink – мигающий текст
| div.f1 { text – decoration : none; } div.f2 { text – decoration : underline; } div.f3 { text – decoration : overline; } div.f4 { text – decoration : line – through; } div.f5 { text – decoration : blink; } |
None – определяет обычный текст Underline – подчеркивает текст снизу Overline – подчеркивает текст сверху Line – through – зачеркивает текст Blink – создает мигающий текст |
Text – indent – задает отступ для первой строки текста.
| div.g { text – indent : 25px; } |
Отступ первой строки этого текста равен 25 пикселей.
|
Text – transform – управляет размером символов и может принимать следующие значения:
- None – обычный текст
- Capitalize – каждое слово начинается с заглавной буквы.
- Uppercase – только большие буквы
- Lowercase – маленькие буквы
| div.h1 { text – transform : none; } div.h2 { text – transform : capitalize; } div.h3 { text – transform : uppercase; } div.h4 { text – transform : lowercase; } |
определяет обычный текст. Каждое Слово Начинается С Заглавной Буквы. ОПРЕДЕЛЯЕТ ТОЛЬКО ЗАГЛАВНЫЕ БУКВЫ. только строчные символы. |
White – space – задает способ отображения пробелов и может принимать следующие значения:
- normal – допускается только один пробел.
- pre – вся структура документа, с неограниченным количеством пробелов сохраняется.
- nowrap – текст не будет переноситься , пока не встретит тег <br>
Word – spacing – задает интервал между словами.
| div.i { word – spacing : 15px; } |
Я текст, расстояние между словами которого равно 15 пикселей.
|
Используя данные свойства вы без труда сможете отформатировать текст любой сложности надлежащим образом средствами CSS.
Работа со шрифтами в CSS.
Font – family – определяет список допустимых имен шрифтов для элемента. Использован будет первый, распознанный браузером шрифт.
| h1 { font – family : «Comic Sans MS», «Times New Roman»; } |
текст шрифта comic sans , если его нет в системе, то шрифта times new roman |
Font – size – задает размер шрифта и может принимать значения:
- xx – small – наименьший
- x – small – очень маленький
- small – маленький
- medium – средний
- large – большой
- x – large – очень большой
- xx – large – наибольший
- smaller – меньше, чем у порождающего элемента
- larger – больше, чем у порождающего элемента
- length – задает фиксированное значение шрифта
- % – размер шрифта в % от размера шрифта порождающего элемента
| div.j1 { font – size : xx – small; } div.j2 { font – size : medium; } div.j3 { font – size : xx – large; } div.j4 { font – size : 130%; } |
Наименьший текст Средний текст Наибольший текст 130% от размера порождающего элемента |
Font – size – adjust – задает значение аспекта шрифта. Аспект шрифта – отношение между размерами маленькой буквыx и размером шрифта. Чем выше это значение, тем лучше шрифт будет читаться при уменьшении размера.
Font – stretch – позволяет задать интервал между символами внутри шрифта. Принимает значения:
- normal – Задает масштаб сжатия или расширения как обычный
- wider – Задает масштаб расширения как следующее расширенное значение
- narrower – Задает масштаб сжатия как следующее сжатое значение
- ultra – condenced – максимальный масштаб сжатия
- extra – condenced – сильный масштаб сжатия
- condenced – сжатие
- semi – condenced – слабое сжатие
- semi – expanded – слабое расширение
- expanded – расширение
- extra – expanded – сильный масштаб расширения
- ultra – expanded – максимальный масштаб расширения
| div.k1 { font – stretch : wider; } div.k2 { font – stretch : narrower; } div.k3 { font – stretch : ultra – condensed; } div.k4 { font – stretch : ultra – expanded; } |
следующее расширенное значение следующее сжатое значение максимальный масштаб сжатия максимальный масштаб расширения |
Font – style – задает стиль шрифта.
normal – нормальный шрифт.
italic – курсив.
oblique – наклонный шрифт.
| div.l1{ font – style : normal; } div.l2{ font – style : italic; } div.l3{ font – style : oblique; } |
выводит обычный шрифт выводит курсивный шрифт наклонный шрифт |
Font – variant – используется для создания шрифта – капители (все маленькие символы преобразуются в большие).
normal – обычный шрифт
small – caps – шрифт – капиель.
| div.m1 { font – variant : normal; } div.m2 { font – variant : small – caps; } |
normal – обычный шрифт small – caps – Выводит шрифт – капиель |
Font – weight – позволяет задать толщину символов:
- normal – обычные символы
- bold – жирные символы
- bolder – более жирные символы
- lighter – более тонкие символы
| div.n1 { font – weight : normal; } div.n2 { font – weight : bolder; } div.n3 { font – weight : lighter; } div.n4{ font – weight : 800; } |
normal – Определяет обычные символы bolder – Определяет более жирные символы lighter – Определяет более тонкие символы Толщина задана численно |
Параметры размеров элементов CSS
Параметры, приведенные в таблице ниже позволяют управлять всеми возможными размерами элементов.
| Параметр | Описание | Значения |
|---|---|---|
| height | Задает высоту элемента | auto |
| length | ||
| % | ||
| line – height | Задает интервал между строками | normal |
| number | ||
| length | ||
| % | ||
| max – height | Задает максимальную высоту элемента | none |
| length | ||
| % | ||
| max – width | Задает максимальную ширину элемента | none |
| length | ||
| % | ||
| min – height | Задает минимальную высоту элемента | length |
| % | ||
| min – width | Задает минимальную ширину элемента | length |
| % | ||
| width | Задает ширину элемента | auto |
| % | ||
| length |
Сегодня мы разобрались с форматированием текста в CSS. Данный урок получился достаточно объемным, но он действительно важен для понимания основ работы с CSS. Теперь вы можете самостоятельно настроить отображение текстов средствами CSS, которые сильно опережают функционал HTML.
Правильно подобранный фон — неотъемлемый атрибут для любого качественного сайта и в следующем уроке мы поговорим о возможностях работы с фоном в CSS.