Приветствую вас, дорогие друзья. Сегодня я расскажу вам о том, как оформить в css стиль текста, потому что текст на странице – всему голова. Да, он как хлеб, только в сайтостроении. Я расскажу вам о всех свойствах, так что эта статья получается такой общей. В других моих публикациях описаны отдельные из этих свойств, но сегодня о поговорим о всех сразу.
Как сделать жирный шрифт?
Итак, первая возможность, о которой обычно вспоминают при оформлении текста – это придание ему жирного начертания. Для этого в html есть 2 тега, но мы же сегодня говорим с вами о css, поэтому не будем их рассматривать.
В стилях же для этого существует свойство font-weight и всего два его значения: normal и bold. Второе, как вы понимаете, и делает текст жирным. Интересно, что также можно задавать числовые значения от 100 до 900. 400 соответствует режиму normal, 700 – bold. Но, к сожалению, это не работает во всех браузерах, поэтому я рекомендую все-таки пользоваться ключевыми словами.
Также есть слова bolder и lightet, они делает жирность шрифта больше или меньше по отношению к тому, как он установлен для родительского элемента. Ими тоже можете пользоваться.
Как написать в css курсивом?
Идем дальше и теперь сделаем текст курсивным. Для этого существует свойство font-style и его значение italic. Именно оно придает курсивное начертание. Также есть значения oblique, при нем внешний вид текста немного отличается. Это так называемый наклонный текст.
Подчеркивание и зачеркивание
Чтобы подчеркнуть или зачеркнуть текст в css есть свойство text-decoration и у него много значений, рассмотрим каждое:
- Underline – подчеркивание снизу;
- Overline – сверху;
- Line-through – зачеркивание;
- None – значение по умолчанию, ничего не применяется;
- Blink – мигающий текст (не рекомендуется использовать вообще).
Нужно сказать, что у ссылок на веб-странице по умолчанию есть подчеркивание снизу, если вы хотите его отменить, то нужно для них прописать text-decoration: none.
Выравнивание текста
Конечно же, нельзя забывать о такой важной штуке, как выравнивание. Именно текста, а не элемента, в котором он размещается. Для этого есть text-align и несколько его значений:
- Left – по левому краю (это по умолчанию);
- Center – по центру (для заголовков, например);
- Right – по правому (часто так выравнивают цитаты);
- Justify – по ширине. При этом параметре текст попытается выравниваться так, чтобы занимать в каждой строке одинаковую ширину.
Вариант написания
Интересное свойство, которое очень редко применяется, но все же существует – font-variant. По сути, у него всего одно значение: small-caps. Это означает, что все буквы преобразовываются в заглавные, но немного уменьшаются в размере.
Размер шрифта в css
Теперь мы добрались до еще одного свойства – font-size. И как вы уже поняли, оно позволяет нам определить размер шрифта. Обычно его задают в пикселях, иногда в относительных единицах em, а иногда даже в процентах. В общем, можно по-разному.
Для основного текста на странице обычно устанавливает размер шрифта 12-16 пикселей, для заголовков и подзаголовков – 20-30.
Имя шрифта
Пожалуй, одна из самых интересных возможностей – выбрать название шрифта, который будет использоваться. Если вы активно пользуетесь Вордом, то наверняка знаете как минимум парочку. Это Arial, Times New Roman, Tahoma, Verdana и т.д. Это так называемые стандартные шрифты, которые идут вместе с операционной системой.
В html типы шрифтов бывают такие:
- Serif – с засечками.
- Sans-serif – без засечек, оптимальный вариант для основного текста.
- Monospace – моноширинные, для вывода кода и т.д.
- Cursive – курсивные.
- 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. У него есть такие значения:
- Lowercase – все буквы строчные;
- Uppercase – все буквы заглавные;
- Capitalize – каждая первая буква нового слова становится заглавной.
Как выделить в css первую букву или первую строку
Для этого используйте псевдоклассы :first-letter и :first-line. Об их использовании я написал здесь. Это полезно, когда первая буква по формлению должна сильно отличаться от остальных, как делают во многих книгах.
Если вам нужно сделать красную строку в абзаце, то это делается с помощью свойства text-indent, подробнее его описание смотрите в этой статье.
Управление переполнением текста
В css3 появилось свойство, которое позволяет задать команду что делать, если текст не влезает в контейнер. Это text-overflow и у него два значения:
- Clip – обрезает весь лишний текст
- Ellipsis – обрезает и добавляет в конец троеточие
В общем, свойство из разряда “чтоб знали”, пока я им никогда не пользовался.
Текстовая тень
Ну и, конечно, какое оформление текста без тени, без этого замечательного свойства text-shadow, которое появилось в css3. При правильном использовании это позволяет значительно украсить текст. Впрочем, я не буду здесь подробно описывать это свойство, более подробно о нем можете посмотреть в этой статье, где я показываю, как с его помощью сделать обводку нужных слов.
Цвет шрифта
Конечно, в этой статье я перечислил много свойств для преобразования внешнего вида текста, но ничего до сих пор не сказал о цвете. Он задается с помощью color, об этом я подробно написал здесь.
Итог
Пока это все свойства, что я вспомнил. Если и есть еще какие-то, то я обязательно добавлю их в будущем, но и этих в целом достаточно. Буду благодарен, если вы поделитесь статьей в социальных сетях, если вы думаете, что на может быть полезна людям.