CSS text
ТекстПри работе с текстом нужно знать о строчных и блочных элементах, о чем подробнее речь пойдет далее
В качестве контейнеров для текста обычно выступают следующие элементы:
-
p- параграф ( абзац текста ) -
h1|h2|h3|h4|h5|h6- заголовки
Эти элементы по умолчанию занимают всю ширину страницы
<body>
<h1>Header</h1>
<h2>Sub-header</h2>
<p>The word-break property in CSS can be used to change when line breaks ought to occur.
Normally, line breaks in text can only occur in certain spaces,
like when there is a space or a hyphen</p>
</body>
Однако мы можем установить ширину этих элементов с помощью CSS:
<head>
<style>
h1, h2 { width: 200px; }
p { width: 300px; }
</style>
</head>
<body>
<h1>Header</h1>
<h2>Sub-header</h2>
<p>The word-break property in CSS can be used to change when line breaks ought to occur.
Normally, line breaks in text can only occur in certain spaces,
like when there is a space or a hyphen</p>
</body>
Эти элементы называют блочными, поскольку по умолчанию они не позволяют другим элементам располагаться справа или слева - только сверху или снизу
Как видите, даже когда размер блочного элемента значительно меньше ширины страницы, он все равно находится в гордом одиночестве, и пространство слева от него остается пустым
Горизонтальное выравниваниеСвойство выравнивает строки текста внутри блока по ширине относительно его границ.
<head>
<style>
h1 { text-align: center; }
h2 { text-align: right; }
h3 { text-align: left; }
p { text-align: justify; }
</style>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<p>The word-break property in CSS can be used to change when line breaks ought to occur.
Normally, line breaks in text can only occur in certain spaces,
like when there is a space or a hyphen</p>
</body>
Вертикальное выравнивание мы будем подробнее изучать далее
Если вы вставите в текст несколько пробелов подряд, браузер по умолчанию будет выводить их как один единственный пробел
Это не всегда удобно
Для вывода текста "как есть" можно воспользоваться элементом pre
Сравним вывод текста в элементе pre с выводом такого же текста, но с помощью обычного элемента p
Для чистоты эксперимента в контейнер head нужно вставить meta-тег, управляющий отображением страницы на различных девайсах:
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">Итак, вставим на страницу следующую разметку:
<pre>
_____________________________________________________
The word-break property in CSS
can be used to change
when line breaks ought to occur
Normally, line breaks in text
can only occur in certain spaces,
like when there is a space or a hyphen
______________________________________________________
</pre>
<p>
_____________________________________________________
The word-break property in CSS
can be used to change
when line breaks ought to occur
Normally, line breaks in text
can only occur in certain spaces,
like when there is a space or a hyphen
______________________________________________________
</p>и посмотрим, что у нас получилось:
Теперь внесем небольшие изменения в нашу разметку с помощью CSS
добавим стилевой атрибут white-space со значением pre элементу p:
<head>
<style>
p {
white-space: pre;
}
</style>
</head>
<body>
<pre>
_____________________________________________________
The word-break property in CSS
can be used to change
when line breaks ought to occur
Normally, line breaks in text
can only occur in certain spaces,
like when there is a space or a hyphen
______________________________________________________
</pre>
<p>
_____________________________________________________
The word-break property in CSS
can be used to change
when line breaks ought to occur
Normally, line breaks in text
can only occur in certain spaces,
like when there is a space or a hyphen
______________________________________________________
</p>
</body>Теперь элемент p ведет себя так же, как элемент pre:
| Возможные значения | |
|---|---|
normal |
Значение по умолчанию Повторяющиеся пробелы и разрывы строк игнорируются, текст переносится по обычным правилам |
nowrap |
Повторяющиеся пробелы и разрывы строк игнорируются, причем разрывы строк подавляются даже тогда, когда текст выходит за границы контейнера |
pre |
Текст выводится "как есть", т.е. выводятся повторяющиеся пробелы и переводы строк, а перевод строки при переполнении ширины контейнера не работает |
pre-line |
Повторяющиеся пробелы игнорируются, текст переносится по обычным правилам, но перевод строки учитывается В старых версиях браузеров поддержка не полная |
pre-wrap |
Аналогично значению pre за исключением того, что строка переносится при переполнении ширины контейнера |
Когда размер блока элемента значительно меньше, чем необход
Свойство задаёт расстояние между базовыми линиями строк текста, определяя величину, на которую увеличивается или уменьшается высота блока каждого элемента.
h1 {
font-size: 16px;
line-height: 20px;
}Используя различные шрифты для заголовков, абзацев и других элементов, можно задавать определенный стиль письменных сообщений, передавая желаемые эмоции и настроение.
-
px – абсолютные, чёткие, понятные;
-
em – относительно размера шрифта;
-
rem - задаёт размер относительно размера шрифта элемента <html>;
-
% – относительно такого же свойства родителя;
-
vw – 1% ширины окна;
-
vh – 1% высоты окна.
Всемирная паутина
Пример
Flexbox Froggy
