Css задать ширину строки

Стиль и размер текста в 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 Все права защищены

Источник

Расстояние между буквами, строками, ширина табуляции в CSS

Демонстрация возможностей CSS для настройки расстояний между буквами, строками, табуляции и других свойств шрифтов.

Красная строка

Свойство text-indent устанавливает сдвиг первой строки, цвет первой буквы можно определить свойством :first-letter.

Расстояние между буквами

Свойство letter-spacing устанавливает интервал между символами. В качестве значений принимаются единицы длины (px, in, pt, em, ex), допустимо отрицательное значение. Лучшая точность получается при использовании em.

Ширина пробелов

Word-spacing задает интервал между словами, значение можно указать в px, in, pt, em, ex.

Ширина табуляции

Свойство tab-size устанавливает ширину табуляции в , , и других элементах со свойством white-space: pre . В качестве значения используется количество символов (по умолчанию 8) или единицы длины.

Свойство пока ещё не стандартизировано W3C, но поддерживается современными браузерами.

Ширина букв

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

normal	100%	Обычная ширина
semi-condensed	87.5%	Узковатая ширина
condensed	75%	Узкая ширина
extra-condensed	62.5%	Очень узкая ширина
ultra-condensed	50%	Самая узкая ширина
semi-expanded	112.5%	Широковатая ширина
expanded	125%	Средне-большая ширина
extra-expanded	150%	Очень большая ширина
ultra-expanded	200%	Самая большая ширина

Источник

line-height

The line-height CSS property sets the height of a line box. It’s commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

Try it

Syntax

/* Keyword value */ line-height: normal; /* Unitless values: use this number multiplied by the element's font size */ line-height: 3.5; /* values */ line-height: 3em; /* values */ line-height: 34%; /* Global values */ line-height: inherit; line-height: initial; line-height: revert; line-height: revert-layer; line-height: unset; 

The line-height property is specified as any one of the following:

Values

Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2 , depending on the element’s font-family .

Accessibility concerns

Use a minimum value of 1.5 for line-height for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.

Formal definition

Initial value	normal
Applies to	all elements. It also applies to ::first-letter and ::first-line .
Inherited	yes
Percentages	refer to the font size of the element itself
Computed value	for percentage and length values, the absolute length, otherwise as specified
Animation type	either number or length

Formal syntax

Examples

Basic example

/* All rules below have the same resultant line height */ /* number/unitless */ div  line-height: 1.2; font-size: 10pt; > /* length */ div  line-height: 1.2em; font-size: 10pt; > /* percentage */ div  line-height: 120%; font-size: 10pt; > /* font shorthand */ div  font: 10pt/1.2 Georgia, "Bitstream Charter", serif; > 

It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.

Prefer unitless numbers for line-height values

HTML

div class="box green"> h1>Avoid unexpected results by using unitless line-height.h1> Length and percentage line-heights have poor inheritance behavior. div> div class="box red"> h1>Avoid unexpected results by using unitless line-height.h1> Length and percentage line-heights have poor inheritance behavior div>  line-height is calculated from its own font-size (30px × 1.1) = 33px -->  line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want --> 

CSS

.green  line-height: 1.1; border: solid limegreen; > .red  line-height: 1.1em; border: solid red; > h1  font-size: 30px; > .box  width: 18em; display: inline-block; vertical-align: top; font-size: 15px; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник