Css text color italic

Как оформить текст: 11 главных CSS-свойств

У любого текстового элемента есть свои стили по умолчанию. Заголовки крупные и жирные, текст в абзацах нормального размера и начертания, а ссылки обычно синие и подчёркнутые снизу.

Каждый из этих элементов можно стилизовать по-своему, например, поменять размер, начертание или цвет. Давайте посмотрим, как это сделать.

💡 Для каждого стиля мы подготовили пример в CodePen — попробуйте поменять значения и посмотрите, как изменится текст.

Сменить шрифт

Чтобы изменить шрифт элемента, используйте CSS-свойство font-family :

Первым указывается шрифт, который вы хотите добавить. После него через запятую идут альтернативные шрифты. Например, если на компьютере у посетителя сайта не установлен шрифт Roboto, браузер использует шрифт Arial.

Изменить цвет и размер текста

Цвет текста задаётся с помощью свойства color . Оно принимает значения в различных форматах: можно написать название цвета ( red , blue ), шестнадцатеричное значение ( #ff0000 , #00f ) или функцию rgb() , чтобы задать цвет с помощью трёх чисел.

Размер текста меняется свойством font-size . Оно принимает значения в пикселях ( px ), процентах ( % ) и других единицах измерения.

Добавить жирность

Свойство font-weight задаёт жирность текста. Оно принимает два вида значений.

Численные: от 100 до 900 . Например, 400 — обычный шрифт, а 700 — полужирный.

Ключевые слова: normal — обычный шрифт, bold — полужирный, bolder — жирнее, чем текущий, lighter — менее жирный шрифт по сравнению с текущим.

See the Pen Untitled by Feizerr on CodePen.

Сделать текст курсивным

Для этого есть свойство font-style . По умолчанию у него стоит значение normal , то есть текст обычный, без курсива. Чтобы поменять начертание, используйте:

Оба значения создают похожий эффект — текст выглядит курсивным, но есть и разница. Если очень упростить, то italic и oblique немного отличаются в начертании. А ещё не у всех шрифтов есть специальная курсивная версия. В таких случаях oblique делает текст похожим на курсив.

See the Pen Как сделать курсивный текст by Feizerr on CodePen.

Преобразовать текст

Свойство text-transform меняет регистр текста. Оно принимает значения:

• none — без изменений, значение по умолчанию;
• uppercase — все буквы становятся прописными;
• lowercase — все буквы становятся строчными;
• capitalize — первая буква каждого слова находится в верхнем регистре.

See the Pen Как изменить text-decoration by Feizerr on CodePen.

Добавить подчёркивание

Свойство text-decoration добавляет тексту декоративные эффекты:

• overline создаёт линию над текстом,
• line-through делает текст зачёркнутым,
• underline добавляет подчёркивание.

По умолчанию у свойства стоит значение none — без оформления.

See the Pen Как добавить подчёркивание by Feizerr on CodePen.

Создать тень

Свойство text-shadow добавляет тексту тень. Оно принимает значение в таком формате:

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) /*смещение по горизонтали, смещение по вертикали, радиус размытия, цвет тени */ 

See the Pen Как добавить тень тексту by Feizerr on CodePen.

Выровнять текст

Свойство text-align выравнивает текст по горизонтали. Оно принимает значения:

• left — влево;
• right — вправо;
• center — по центру;
• justify — выравнивание по ширине.

See the Pen Как выровнять текст by Feizerr on CodePen.

Изменить высоту строки и межбуквенное расстояние

Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. Свойство letter-spacing управляет расстоянием между символами.

See the Pen Как изменить высоту строки by Feizerr on CodePen.

Нюансы

• У некоторых шрифтов нет жирного и курсивного варианта.
• Свойство text-shadow делает текст эффектным, но слишком насыщенные тени могут усложнить чтение текста или создать плохой контраст.
• Слишком большое или маленькое значение line-height и letter-spacing может нарушить интервалы между буквами и строками.
• При изменении размера шрифта ( font-size ) следует учитывать, что очень мелкий и крупный текст может плохо отображаться или стать нечитабельным.

Рекомендации

Тестируйте вёрстку. Проверяйте, как шрифты отображаются на разных устройствах и браузерах. Некоторые шрифты могут отображаться по-разному на разных платформах.

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

Помните о доступности. Используйте подходящие значения font-weight — слишком мелкий или крупный текст плохо читается. Подбирайте контрастные цвета для текстов.

Используйте несколько шрифтов. Некоторые шрифты могут быть недоступны, поэтому важно указывать альтернативные варианты.

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

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

CSS font-style Property

The font-style property specifies the font style for a text.

Default value:	normal
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.fontStyle=»italic» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
normal	The browser displays a normal font style. This is default	Demo ❯
italic	The browser displays an italic font style	Demo ❯
oblique	The browser displays an oblique font style	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Стиль и размер текста в CSS

В прошлой теме мы рассмотрели установку шрифтов для текста. В этой теме мы рассмотрим, как изменить размер текста в CSS, сделать текст жирным и установить другие свойства текстовых элементов.

Стиль, вариант, ширина и размер текста

Для установки размера текста используется свойство font-size . Размер указывается в любых доступных в CSS единицах. Также этому свойству можно установить значения с помощью специальных слов. Таких значений достаточно много, вы можете найти их в справочниках. Использовать их неудобно, обычных единиц измерения CSS вполне достаточно. Для примера создадим абзац и установим для него размер текста:

Стиль шрифта позваляет выделить текст курсивом. Для установки стиля шрифта используется свойство font-style . Оно может принимать следующие значения:

font-style: normal — обычный шрифт (по умолчанию)

font-style: italic — курсивный шрифт

font-style: oblique — наклонный шрифт

font-style: inherit — значение принимается от родительского элемента

У одних шрифтов стиль italic и oblique выглядит одинаково, у других шрифтов по-разному.

Установим созданному абзацу стиль шрифта. Для этого добавим селектору #fo свойство font-style :

Есть вариант отображения текста, при котором прописные буквы выглядят как заглавные, только уменьшенного размера. Для этого используется свойство font-variant . Оно принимает следующие значения:

font-variant: normal — нормальный шрифт (по умолчанию)

font-variant: small-caps — прописные буквы выглядят как заглавные

font-variant: inherit — значение принимается от родительского элемента

Добавим селектору #fo свойство font-variant :

Если увеличить ширину шрифта, то можно сделать жирный текст. В CSS Это делается с помощью свойства font-weight . Оно принимает такие значения:

font-weight: normal — обычный текст

font-weight: bold — жирный текст

font-weight: inherit — принимает значение от родительского элемента

Кроме того, ширину шрифта можно указать с помощью чисел от 100 до 900. Число 400 соответствует значению normal , а число 700 значению bold . Но числа работают не со всеми шрифтами и не во всех браузерах. Поэтому они редко используются.

Добавим селектору #fo свойство font-weight :

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

Добавим на страницу тэг и установим для него свойство font :

Если какое-то из свойств не указано, то используется значение по умолчанию. Но размер и шрифт нужно указывать обязательно. При указании шрифта, так же, как и для свойства font-family , можно перечислить несколько шрифтов через запятую. Добавим на страницу ещё один тег и установим ему свойство font , но по-другому:

Цвет текста

Цвет текста устанавливается с помощью свойства color . Значением этого свойства является цвет, указанный одним из способов, предусмотренных в CSS.

Установим цвет тэгу , который мы создавали ранее. Добавим селектору #s2 свойство color :

Высота строки

Межстрочный интервал — это расстояние между строками текста. Для его установки используется свойство line-height . Оно устанавлявает высоту строки. Высота строки состоит из размера шрифта и межстрочного интервала. Если высота строки равна 50 пикселей, а размер шрифта 30 пикселей, то межстрочный интервал получится 20 пикселей. Если высоту строки установить меньше размера шрифта, то строки будут пересекаться. Свойство line-height может принимать такие значения:

line-height: normal — обычный интервал (по умолчанию)

line-height: число, на которое будет умножен размер шрифта

line-height: высота в единицах измерения, доступных в CSS

line-height: проценты от размера шрифта

line-height: inherit значение принимается от родительского элемента

Для примера создадим большой абзац текста, состоящий из нескольких строк. Установим ему размер шрифта и высоту строки:

Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
 

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

Отступ первой строки

В абзацах часто делается отступ первой строки. В русском языке он называется Красная строка. Для установки этого отступа есть свойство text-indent . Значение указывают в единицах измерения CSS.

Установим отступ большому абзацу. Селектору #text добавим свойство text-indent :

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

Выравнивание текста устанавливается с помощью свойства text-align . Оно принимает следующие значения:

text-align: left — по левому краю (по умолчанию)

text-align: right — по правому краю

text-align: center — по центру

text-align: justify — по ширине. Используется для текстов длинной более одной строки.

Учитывайте, что выравнивается не сам элемент. Он остаётся на прежнем месте. Выравнивается текст внутри элемента.

Добавим на страницу абзац и выравнем текст в нём по центру.

Декорирование текста

Декорирование — это оформление текста определённым образом. Оно устанавливается с помощью свойства text-decoration . Оно принимает такие значения:

text-decoration: none — без декорирования

text-decoration: underline — подчёркнутый текст

text-decoration: overline — надчёркнутый текст

text-decoration: line-through — зачёркнутый текст

text-decoration: inherit — значение принимается от родительского элемента

Для примера создадим абзац с подчёркнутым текстом:

Коприрование материалов сайта возможно только с согласия администрации

2017 — 2023 © basecourse.ru Все права защищены

Источник