Вы здесь: Главная » CSS » Шрифты, текст » CSS-свойства для текста

CSS-свойства для текста

CSS-свойства для текста, как правило, начинаются с приставкой text- или word-, и предполагают работу с текстовыми блоками с точки зрения форматирования текста. Здесь речь идёт именно о текстовых блоках, как блочных элементах, а не о строчных, т.к. к строчными элементам эти свойства применяются реже, а некоторые не применяются вовсе.

Значения по умолчанию. Наследование от родителей (inherit). Значение initial

Каждое свойство из представленных ниже, как и вообще в CSS, имеет значение по умолчанию, которое применяется к тексту благодаря тому, что в любом браузере подключается таблица стилей браузера (user agent stylesheet), в которой эти свойства указаны и поэтому работают. Кроме того, для многих свойств существуют значения inherit, которое означает "унаследовано от родителя", и initial, что значит "сброс до значения по умолчанию".

Наследование свойства от родителя говорит о том, что, если для section назначено свойство text-align: center, то и для заголовка h2, и для 4-х <div class="column">, вложенных в нее, будет работать это же свойство, выравнивая текст по центру во всех внутренних блоках, сколько бы их не было. Если же для внутренних элементов  нужно выровнять текст по левому краю, то следует записать для .column {text-align: left; }, переопределив аналогичное свойство у родительского элемента (2-я колонка в примере).

Посмотрите код примера.

See the Pen Inline-block columns by Elen (@ambassador)
on CodePen.0

В том случае, если нужно вернуться к значению по умолчанию вместо явного указания этого значения, можно использовать значение initial. Тогда вы получите нужный вам вариант (4-й столбец в примере выше).

Значение inherit можно использовать для того, чтобы назначить какому-либо элементу то значение, которое заложено в родительском элементе. Так с его помощью, например, можно сделать ссылки того же цвета, что и основной текст (темно-серыми), а не синими по умолчанию. Пример можно увидеть ниже. Проанализируйте код на вкладках HTML и CSS.

See the Pen inherit color for link by Elen (@ambassador)on CodePen.0

В этой статье мы рассмотрим следующие свойства для форматирования текста:

  1. Выравнивание текста. Свойство text-align
  2. Свойство text-align-last
  3. Изменение регистра символов. Свойство text-transform
  4. Оформление текста с помощью линий. Свойство text-decoration и другие
  5. Свойство text-decoration-skip-ink
  6. Тень для текста. Свойство text-shadow
  7. Красная строка. Свойство text-indent
  8. Пробелы между словами. Свойство white-space
  9. Перенос длинных слов. Свойство word-wrap
  10. Свойство word-break - перенос строк внутри слов
  11. Свойство letter-spacing - интервал между буквами.
  12. Свойство word-spacing - интервал между словами.
  13. Свойства text-stroke и text-fill-color - контур и заливка текста

Выравнивание текста. Свойство text-align

В любом текстовом элементе вы можете выровнять текст по левому (left), правому краю (right), по центру (center) или по ширине (justify).

Смотрим на варианты применения свойства в действии

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde necessitatibus voluptas quasi odit, corrupti aut harum officiis molestiae delectus? Quos, quod natus. Quod expedita modi quos et numquam unde delectus maiores deleniti rem facere, optio beatae laboriosam maxime enim totam.

Свойство text-align-last

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

Значения:

  • auto - совпадает с выравниванием, заданным свойством text-align, за исключением значения justify. Для него выравнивание будет как start.
  • start - последняя строка выравнивается по начальному краю блока
  • end - последняя строка выравнивается по конечному краю блока.
  • left - последняя строка выравнивается по левому краю.
  • right - последняя строка выравнивается по правому краю.
  • center - последняя строка выравнивается по центру.
  • justify - последняя строка выравнивается по ширине. Если в последней строке только одно слово, то оно будет выравнено по левому краю.

Вы можете попробовать сами на примере с разными вариантами свойства text-align.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, eligendi mollitia aliquam deserunt voluptatem soluta, inventore iusto illo ducimus aut sed officiis pariatur quam exercitationem excepturi sint laborum! Tempore neque quam, explicabo nam dicta, a aliquam voluptates iure id quas voluptas similique vel aliquid, dolorum modi? Autem error ab quas nemo a mollitia eius in est dolorum vero reprehenderit cumque, facere culpa odit? Exercitationem nobis facere, unde earum accusamus tenetur!

Eos ut quo iure culpa doloribus. Distinctio earum, quibusdam doloremque adipisci mollitia quaerat architecto quod ad hic, in odit nemo ea suscipit exercitationem saepe eos vitae! Quidem quae soluta, error sed illum culpa rem sit cupiditate alias hic eum laudantium vel ad eveniet quia animi tempora at, unde accusamus, officia ipsa reiciendis voluptatem similique. Ab adipisci hic neque fugit? Officia ex molestias sapiente iure ea sed. Suscipit ullam ad ex.

text-align
text-align-last

Изменение регистра символов. Свойство text-transform

Как следует из его названия, свойство text-transform отвечает за трансформацию текста, что выражается в изменении регистра символов, поэтому значения этого свойства таковы:

  1. lowercase — все строчные;
  2. uppercase — все заглавные;
  3. capitalize — каждое слово начинается с большой буквы;
  4. none — отменяет изменение регистра (по умолчанию).

Тестируем все варианты:

Officiis eos, minima libero facilis omnis quidem sint ipsa, sit voluptates enim esse repellendus mollitia in hic dolorem cum perferendis temporibus accusamus. Quod commodi voluptates doloremque distinctio ad, corporis incidunt nihil consequatur perspiciatis ea repudiandae ipsam velit. Totam, asperiores adipisci!
text-transform

Оформление текста с помощью линий. Свойство text-decoration и другие

Свойство text-decoration со значением underline является обязательным для ссылок, т.к. они по умолчанию подчеркнуты. В том случае, когда ссылки нужно лишить подчеркивания, это свойство имеет значение none. Остальные его варианты встречаются реже, хотя знать их тоже надо. В отличие от других свойств, text-decoration применяется как к блочным, так и к строчным (display: inline) или строчно-блочным (display: inline-block) тегам.

Значения означают:

  1. underline - подчеркнутый текст.
  2. overline - линия над текстом (надчеркивание).
  3. line-through  - перечеркнутый текст;
  4. none - подчеркивание, перечеркивание или надчеркивание отсутствует (значение по умолчанию для всех элементов, кроме ссылок)

В этом свойстве на самом деле можно выделить 3 отдельных свойства:

  1. text-decoration-line, т.е. вид линии, с такими же значениями, что и у text-decoration;
  2. text-decoration-style, т.е. стиль декоративной линии, значения которого очень похожи на значения для рамок (границ) элемента + wavy (волнистая линия).
  3. text-decoration-color  - цвет линии, значения которого можно задать в виде любых доступных в CSS значений цвета: red, #f00, rgb(255, 0, 0) и др.

Давайте протестируем на примере свойство text-decoration вместе с дополнительными свойствами для оформления линий.

Quibusdam autem aperiam, dolore magnam cum, dicta facere maiores dolor consequuntur eum reprehenderit sed assumenda fugit dolorum impedit sequi ratione iure at suscipit ipsum recusandae mollitia adipisci. Deleniti, ab harum. Deleniti quos tenetur reprehenderit beatae qui debitis praesentium obcaecati totam?
text-decoration
text-decoration-line
text-decoration-style
text-decoration-color

Вы также можете использовать 3 свойства вместе в виде составного свойства text-decorati0n:

Пример в реальном виде:

Текст для подчеркивания

Свойство text-decoration-skip-ink

Свойство text-decoration-skip-ink определяет, как будет выводится подчеркивающая линия на таких буквах, как "р", "ц", "щ", "у" и др., которые имеют выносные элементы ниже базовой линии, на которую "опираются" остальные буквы. Доступные значения: auto (линия прерывается) и none (сплошная линия).

Сравните подчеркивание слова выступающими "у" и "р":

auto: Куркума none: Куркума

Красная строка. Свойство text-indent

Свойство text-indent управляет отступов первой строки текстового блока слева. В школе это называлось "красная строка", или "абзац". В html-страницах используется довольно редко. В качестве значения можно указать количество px, em, rem и др. или %, в том числе и отрицательные величины. Когда значение указывают в процентах, отступ первой строки рассчитывается в зависимости от ширины блока.

Пример позволит вам протестировать отступы первой строки абзацев в пределах -20xp ... 20px.

Борис Акунин - один из псевдонимов Григория Шалвовича Чхартишвили.

Российский писатель, литературовед, переводчик, японист. Свои художественные литературные произведения публикует также под псевдонимами Анна Борисова и Анатолий Брусникин.

Григорий Чхартишвили родился 20 мая 1956 года в Грузии в семье офицера-артиллериста Шалвы Чхартишвили и учительницы русского языка и литературы Берты Исааковны Бразинской (1923—2007). В 1958 году семья переехала в Москву. В 1973 году окончил английскую школу № 36. Закончил историко-филологическое отделение Института стран Азии и Африки (МГУ), имеет диплом историка-японоведа. Занимался литературным переводом с японского и английского языков...Подробнее на livelib.ru

Тень для текста. Свойство text-shadow

Для того чтобы назначить тень для символов (букв), составляющих текстовый блок, необходимо использовать свойство text-shadow.

По умолчанию тени у текста нет (значение none). Когда вы ее назначаете, вы должны указать 2 обязательных параметра - dx (смещение по горизонтали) и dy (смещение по вертикали), а также размытие (blur) и цвет (color).

Теней у текста может быть несколько. В этом случае все параметры каждой тени указываются через запятую.

В примере ниже вы найдете разные варианты назначения свойства text-shadow для заголовков первого уровня <h1>. Увлекаться этим свойством для большого объема текста не стоит.

See the Pen CSS3 text-shadow effects by Elen (@ambassador)
on CodePen.0

Пробелы между словами. Свойство white-space

Свойство white-space позволяет управлять пробелами между словами. Поскольку браузер игнорирует любое количество пробелов и переводов строки в коде HTML и показывает их на веб-странице, как один, обычно используют тег <pre> для вывода текста с тем форматированием, что есть в редакторе. Свойство white-space позволяет сделать это для любого элемента, причем не меняя шрифт на моноширинный, в отличие от <pre>.

Значения для свойства white-space:

  • normal - значение по умолчанию, переносы строк устанавливаются автоматически.
  • nowrap - никакие пробелы не учитываются, переносы строк игнорируются, текст отображается одной строкой. Перенести текст на новую строку можно с помощью тега <br>.
  • pre - аналог тега <pre>: текст показывается с учётом всех пробелов и переносов, как они были добавлены текстовом редакторе. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
  • pre-line - в тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
  • pre-wrap - все пробелы и переносы сохраняются, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.

Давайте протестируем работу каждого из значений на примере части  стихотворения, разбитого на строчки:

Весь мир начинается с мамы… И в сердце хранится портрет Той женщины ласковой самой, Которой родней в мире нет… И с первой минуты рожденья, Она, словно ангел земной, Подарит любовь и терпенье… Она за ребёнка стеной… Ирина Самарина-Лабиринт. Источник

Перенос длинных слов. Свойство word-wrap

Свойство word-wrap указывает, нужно ли переносить длинные слова, которые не помещаются по ширине в заданную область.

Значения:

normal - строки не переносятся совсем или переносятся только в тех местах, где явно задан перенос (с помощью тега <br>).
break-word - перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.

В примере ниже внутри блоков с шириной 300px (width: 300px) размещен текст с длинными словами, но с разным значением свойства word-wrap.

word-wrap: break-word
прилагательное «тетрагидропиранилциклопентилтетрагидропиридопиридиновые» состоит из 55 букв. Или «метоксихлордиэтиламинометилбутиламиноакридин» – 44 знака.
word-wrap: normal
прилагательное «тетрагидропиранилциклопентилтетрагидропиридопиридиновые» состоит из 55 букв. Или «метоксихлордиэтиламинометилбутиламиноакридин» – 44 знака.

Свойство word-break - перенос строк внутри слов

Свойство word-break предназначено для того, чтобы сделать перенос строк внутри слов, которые не помещаются по ширине в заданную область.
Значения:

Они означают:

  • normal - значение по умолчанию. Обычно строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью <br>).
  • break-all - Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока. Значение не работает для текста на китайском, корейском или японском языке.
  • keep-all - не разрешает перенос строк в словах на китайском, корейском или японском языке. Для остальных языков работает, как normal.

Попробуйте сами:

Прилагательное «тетрагидропиранилциклопентилтетрагидропиридопиридиновые» состоит из 55 букв. Или «метоксихлордиэтиламинометилбутиламиноакридин» – 44 знака.

Другой пример: приставка «пра-» может использоваться в понятии, которое обозначает степень родства, множество раз – «прапрапрапрапрапрапрапрапрапрапрадедушка». Теоретически это слово можно растягивать до бесконечности.

Свойство letter-spacing - интервал между буквами.

Свойство letter-spacing может изменять интервал между буквами (символами) в элементе. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Можно использовать положительные и отрицательное значения. Как правило, значение letter-spacing должно быть небольшим, чтобы буквы смотрелись цельно. Чаще всего его используют для заголовков или каких-либо выделений, как для блочных, так и для строчных элементов.

Значения лучше указывать в тех единицах измерений, которые связаны с размером шрифта.

В примере для тестирования значения изменяются от -6 до 10px.

Это тестовое предложение для проверки интервалов между буквами (символами).

Свойство word-spacing - интервал между словами.

Свойство word-spacing поможет вам изменить интервал между словами. Положительные значения свойства увеличивают интервал, отрицательные - уменьшают. Если для текста задано выравнивание с помощью свойства text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного в свойстве word-spacing.

Внимание! Значения в % в этом свойстве не применяются.

Значения:

Измените интервал между словами от -20px до 20px для примера ниже:

Мы привыкли, что предлоги и союзы – слова короткие, а вот слово «соответственно» выпадает из общего ряда, в нем – 14 букв. Подобная ситуация и с наречиями – есть только одно длинное наречие «неудовлетворительно», состоящее из 19 букв.

Свойства text-stroke и text-fill-color - контур и заливка символов текста

На данный момент свойство text-stroke является экспериментальным. В соответствии с названием оно позволяет задать контур для текста, который часто используют дизайнеры в таких программах, как Adobe Illustrator, Figma, Sketch или других приложениях для создания векторных изображений. В настоящее время свойство text-stroke не включено ни в одну спецификацию W3C или WHATWG. При поиске этого свойства на MDN можно увидеть информацию только о свойстве -webkit-text-stroke, а также о составляющих его свойствах -webkit-text-stroke-width (ширина, или толщина контура) и -webkit-text-stroke-color (цвет контура), причем браузеры Mozilla Firefox, Opera и Microsoft Edge также поддерживают это свойство именно с префиксом -webkit, но не поддерживают пока без него.

Поиск свойства -webkit-text-stroke на MDN
Поддержка свойства -webkit-text-stroke современными браузерами очень хороша - 97% (проверьте сами на caniuse.com), но при наведении на любой из них вы увидите, что префикс должен быть именно -webkit:
Поддержка браузерами свойства-webkit-text-stroke
Синтаксис:

Составляющие свойства:

  • text-stroke-width (-webkit-text-stroke-width) - толщина контура (в любых единицах CSS).
  • text-stroke-color (-webkit-text-stroke-color) - цвет контура (любым доступным способом для указания цветов).

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

See the Pen -webkit-text-stroke property by Elen (@ambassador)
on CodePen.0

В примере для указания размера шрифта и контура использованы css-единицы vmin, зависящие от минимальной ширины или высоты вьюпорта браузера, поэтому и шрифт, и контур будет изменяться вместе с размерами браузера.

В качестве дополняющего свойства для text-stroke используется свойство text-fill-color, которое предназначено для заливки символов текста.

Значения задаются в виде всех доступных вариантов для назначения цвета:

Если свойство text-fill-color не указано, используется значение свойства color. По сути своей работы свойства text-fill-color и color одинаковы, но text-fill-color имеет приоритет над color, если они имеют разные значения. Это видно в примере выше, в которм свойство color имеет черный цвет (#000), а text-fill-color  - темно-серый (#333). Мы видим, что символы текста залиты именно темно-серым цветом.

Оба свойства: и  text-stroke, и text-fill-color можно анимировать. Это сделано в примере при наведении на ссылки с помощью свойства transition.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *