Наряду с несколькими свойствами font- *, CSS предлагает множество свойств text-*.

text-align

Свойство text-align должно применяться к блочному элементу и определяет, каким образом текст и дочерние строчные элементы выравниваются по горизонтали.

Body { text-align: left; }

Наиболее используемые значения:

• right
• center
• justify

Эти значения соответствуют тем же кнопкам выравнивания, что вы найдёте в Microsoft Word или Photoshop:

Значение text-align по умолчанию равно start . В принципе, start может быть как left , так и right , в зависимости от направления текста, заданного direction для HTML-документа.

direction - это свойство CSS, которое может быть ltr (слева направо) или rtl (справа налево):

• если выбран ltr , start равен left ;
• если выбран rtl , start равен right .

text-decoration

Свойство text-decoration применяется для добавления линии к вашему тексту.

Значение по умолчанию: none .

Deleted { text-decoration: line-through; }

Возможные значения:

• overline
• underline
• line-through

A { text-decoration: none; }

text-indent

Свойство text-indent позволяет добавить пространство перед первой буквой первой строки блочного элемента.

Значение по умолчанию: 0 (ноль).

Blockquote { text-indent: 30px; }

Обратите внимание, что отступ есть только в первой строке . Если вы хотите сдвинуть весь блок текста, используйте padding .

Как и для свойства font-size , вы можете использовать px, em или даже %.

text-shadow

Если вы когда-либо использовали Photoshop, то, вероятно, применяли инструмент для добавления тени. В CSS вы можете добавить тень к тексту, чтобы сделать его более причудливым или удобным для чтения.

Вы определяете:

• х - горизонтальное смещение;
• у - вертикальное смещение;
• размытие;
• цвет.

h1 { text-shadow: 0 2px 5px rgba(0,0,0,0.5); }

Обязательны только значения х и у. Размытие тени по умолчанию 0 (ноль), а цвет по умолчанию совпадает с цветом текста.

Это свойство сложное, так что используйте его осторожно и не сходите с ума!

С помощью CSS свойства color Вы можете изменять цвет текста HTML элементов.

Цвет может быть задан следующими способами:

1. С помощью названия цвета (например "red" задаст красный цвет);
2. С помощью RGB значения (например "rgb(255,255,255)" задаст белый цвет);
3. С помощью шестнадцатеричного значения (например "#00ff00" задаст зеленый цвет).

Пояснения:

Первый способ в основном используется для задания основных цветов, названия которых хорошо известны. Например 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 Вы можете выровнять текст элемента по горизонтали.

Текст может быть выровнен:

• По центру (значение center);
• По левому краю (left);
• По правому краю (right);
• По ширине (justify).

Обратите внимание: по ширине (justify) текст выравнивается путем растягивания всех строчек до одинаковой длины. Этот метод выравнивания часто используется в газетах и журналах.

P.ta1 {text-align:center;} p.ta2 {text-align:left;} p.ta3 {text-align:right;} p.ta4 {text-align:justify;}

Быстрый просмотр

Свойство text-decoration

С помощью CSS свойства text-decoration Вы можете сделать текст HTML элемента:

• Подчеркнутым (значение underline)
• Перечеркнутым (line-through)
• Отобразить над текстом элемента линию (overline)

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 свойства оформления текста

Для того, чтобы посмотреть подробную информацию о желаемом CSS свойстве, щелкните по его названию.

Сделайте сами

Обратите внимание: для выполнения этого задания Вам необходимо будет посетить так как не все свойства оформления текста были разобраны в данной главе.

Задание 1 оформите элементы согласно их описанию:

1. В данном абзаце отступ между буквами равен 17 пикс., а отступ между словами 5 пикс. Данный абзац оранжевого цвета. 2. Текст данного элемента подчеркнут, отступ между буквами в нем равен 15 пикселей. Данный абзац серого цвета. 3. Текст данного элемента выровнен по центру, отступ между словами в нем равен 10 пикселей. Данный элемент имеет цвет #ff3366. 4. Текст данного элемента выравнен по правому краю, отступ между буквами в нем равен 6 пикселей. Текст написан маленькими буквами красного цвета. 5. Текст данного элемента выравнен по центру, подчеркнут, отступ между буквами в нем равен 7 пикселей. Текст написан большими буквами зеленого цвета.

Включите JavaScript, чтобы воспользоваться системой комментирования Disqus.

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.

Универсальные семейства шрифтов:

• serif - антиквенные шрифты (шрифты с засечками), типа Times;
• sans-serif - рубленные шрифты (шрифты без засечек или гротески), типичный представитель - Arial;
• monospace - моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
• fantasy - семейство декоративных шрифтов;
• cursive - семейство курсивных шрифтов;

Пример с использованием:

Заголовок 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

Свойство	Значение	Описание	Пример
text-transform	none capitalize uppercase lowercase	Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные	text-transform: uppercase

Пример использования:

Текст none.

Текст capitalize.

Текст uppercase.

Текст lowercase.

Сравните текст который содержится в html-коде с текстом в окне браузера.

Следующее свойство:

Свойство text-align - служит для выравнивания текста по горизонтали окна браузера или контейнера, в котором расположен блок текста.

Свойство text-align

Свойство	Значение	Описание	Пример
text-align	left right center justify	Выравнивание текста	text-align: right

Подробное описание значений:

• center - текст выравнивается по центру.
• justify - выравнивание по ширине, фактически это выравнивание по правому и левому краю одновременно, между словами текста образовываются пустые места, которые браузер заполняет пробелами.
• left - выравнивание по левопу краю. Это значение используется по умолчанию.
• right - выравнивание по правому краю.

Пример использования этого свойства будет совмещён с примером работы следующего свойства.

Следующее свойство:

Свойство text-indent - служит для создания величины отступа первой строки блока текста (например, для абзаца

Это свойство допускает отрицательное значение, в таком случае создается выступ первой строки.

Свойство text-indent

Свойство	Значение	Описание	Пример
text-indent	значение %	Отступ первой строки	text-indent: 15px; text-indent: 10%

Работа со свойствами text-align и text-indent. Для лучшего понимания работы кода откройте страницу в новом окне и уменьшите его размер.

Определяют как переносить длинные слова:

1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. "Мягкий дефис" - проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то или ​ переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
2. после любого символа.
3. согласно правилам русского языка с автоматическим применением дефиса.

overflow-wrap
word-wrap
word-break
line-break
hyphens

уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти-килограммовый корчеватель‐бульдозер‐погрузчик

В чём состоит различие одно свойства от другого

По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.

Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all; .

Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none; .

Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all; , которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.

При совместном использовании word-break: break-all; с hyphens: auto; , последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang="ru" .

Не переносить слова на другую строку

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим "по умолчанию" и добавить . Нажмите на и посмотрите на наш полигон.

Управлять переносом слов при hyphens: auto;

Тетрагидропиранилциклопентилтетрагидропиридопиридино вые

Свойства CSS для форматирования текста позволяют оформить содержимое страницы, не затрагивая HTML-код. Какие же параметры можно задать тексту через таблицы стилей?

Выравнивание по горизонтали

Для него используется свойство text-align . Выровнять с его помощью можно только блочный текст (теги