Как оформить в css стиль текста? Все свойства

Приветствую вас, дорогие друзья. Сегодня я расскажу вам о том, как оформить в css стиль текста, потому что текст на странице – всему голова. Да, он как хлеб, только в сайтостроении. Я расскажу вам о всех свойствах, так что эта статья получается такой общей. В других моих публикациях описаны отдельные из этих свойств, но сегодня о поговорим о всех сразу.

Как сделать жирный шрифт?

Итак, первая возможность, о которой обычно вспоминают при оформлении текста – это придание ему жирного начертания. Для этого в html есть 2 тега, но мы же сегодня говорим с вами о css, поэтому не будем их рассматривать.

В стилях же для этого существует свойство font-weight и всего два его значения: normal и bold. Второе, как вы понимаете, и делает текст жирным. Интересно, что также можно задавать числовые значения от 100 до 900. 400 соответствует режиму normal, 700 – bold. Но, к сожалению, это не работает во всех браузерах, поэтому я рекомендую все-таки пользоваться ключевыми словами.жирность

Также есть слова bolder и lightet, они делает жирность шрифта больше или меньше по отношению к тому, как он установлен для родительского элемента. Ими тоже можете пользоваться.

Как написать в css курсивом?

Идем дальше и теперь сделаем текст курсивным. Для этого существует свойство font-style и его значение italic. Именно оно придает курсивное начертание. Также есть значения oblique, при нем внешний вид текста немного отличается. Это так называемый наклонный текст.стиль

Подчеркивание и зачеркивание

Чтобы подчеркнуть или зачеркнуть текст в css есть свойство text-decoration и у него много значений, рассмотрим каждое:

  1. Underline – подчеркивание снизу;
  2. Overline – сверху;
  3. Line-through – зачеркивание;
  4. None – значение по умолчанию, ничего не применяется;
  5. Blink – мигающий текст (не рекомендуется использовать вообще).

подчеркивание
Нужно сказать, что у ссылок на веб-странице по умолчанию есть подчеркивание снизу, если вы хотите его отменить, то нужно для них прописать text-decoration: none.

Выравнивание текста

Конечно же, нельзя забывать о такой важной штуке, как выравнивание. Именно текста, а не элемента, в котором он размещается. Для этого есть text-align и несколько его значений:

  1. Left – по левому краю (это по умолчанию);
  2. Center – по центру (для заголовков, например);
  3. Right – по правому (часто так выравнивают цитаты);
  4. Justify – по ширине. При этом параметре текст попытается выравниваться так, чтобы занимать в каждой строке одинаковую ширину.

Вариант написания

Интересное свойство, которое очень редко применяется, но все же существует – font-variant. По сути, у него всего одно значение: small-caps. Это означает, что все буквы преобразовываются в заглавные, но немного уменьшаются в размере.вариант

Размер шрифта в css

Теперь мы добрались до еще одного свойства – font-size. И как вы уже поняли, оно позволяет нам определить размер шрифта. Обычно его задают в пикселях, иногда в относительных единицах em, а иногда даже в процентах. В общем, можно по-разному.

Для основного текста на странице обычно устанавливает размер шрифта 12-16 пикселей, для заголовков и подзаголовков – 20-30.

Имя шрифта

шрифты
Пожалуй, одна из самых интересных возможностей – выбрать название шрифта, который будет использоваться. Если вы активно пользуетесь Вордом, то наверняка знаете как минимум парочку. Это Arial, Times New Roman, Tahoma, Verdana и т.д. Это так называемые стандартные шрифты, которые идут вместе с операционной системой.

В html типы шрифтов бывают такие:

  1. Serif – с засечками.
  2. Sans-serif – без засечек, оптимальный вариант для основного текста.
  3. Monospace – моноширинные, для вывода кода и т.д.
  4. Cursive – курсивные.
  5. Fantasy – декоративные, для разных оформительских целей.

Ах да, я же даже не упомянул свойство, которым нужно задавать имя – это font-family. Например:

Font-family: Arial;
Font-family: Georgia, Tahoma, sans-serif;
Font-family: ‘Lato’, ‘Times New Roman’;

Как видите, можно через запятую указывать несколько шрифтов. Браузер использует тот, который будет первым найден. Можно указать и семейство, на всякий случай, чтобы какой-то шрифт уж точно был использован.

Если вы подключаете какой-то шрифт, или его название состоит из нескольких слов, то их нужно заключать в одинарные или двойные кавычки, как в третьем примере.

Сокращенная запись свойств семейства font

Как вы могли заметить, очень много параметров текста в css начинаются с приставки font-. Все это можно записать сокращенно следующим образом:
Font: style, variant, weight, size, family.
Если какой-то параметр не нужен, он просто опускается, пример:

Font: italic bold 30px Verdana;

Устанавливает жирный курсивный шрифт Вердана, размером 30.

Преобразование регистра

Чтобы изменить регистр букв, используйте свойство text-transform. У него есть такие значения:

  1. Lowercase – все буквы строчные;
  2. Uppercase – все буквы заглавные;
  3. Capitalize – каждая первая буква нового слова становится заглавной.

Как выделить в css первую букву или первую строку

Для этого используйте псевдоклассы :first-letter и :first-line. Об их использовании я написал здесь. Это полезно, когда первая буква по формлению должна сильно отличаться от остальных, как делают во многих книгах.буква

Если вам нужно сделать красную строку в абзаце, то это делается с помощью свойства text-indent, подробнее его описание смотрите в этой статье.

Управление переполнением текста

В css3 появилось свойство, которое позволяет задать команду что делать, если текст не влезает в контейнер. Это text-overflow и у него два значения:

  1. Clip – обрезает весь лишний текст
  2. Ellipsis – обрезает и добавляет в конец троеточие

В общем, свойство из разряда “чтоб знали”, пока я им никогда не пользовался.

Текстовая тень

Ну и, конечно, какое оформление текста без тени, без этого замечательного свойства text-shadow, которое появилось в css3. При правильном использовании это позволяет значительно украсить текст. Впрочем, я не буду здесь подробно описывать это свойство, более подробно о нем можете посмотреть в этой статье, где я показываю, как с его помощью сделать обводку нужных слов.

Цвет шрифта

Конечно, в этой статье я перечислил много свойств для преобразования внешнего вида текста, но ничего до сих пор не сказал о цвете. Он задается с помощью color, об этом я подробно написал здесь.

Итог

Пока это все свойства, что я вспомнил. Если и есть еще какие-то, то я обязательно добавлю их в будущем, но и этих в целом достаточно. Буду благодарен, если вы поделитесь статьей в социальных сетях, если вы думаете, что на может быть полезна людям.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: