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> |
|---|
Вертикальное выравнивание мы будем подробнее изучать далее
Свойство задаёт расстояние между базовыми линиями строк текста, определяя величину, на которую увеличивается или уменьшается высота блока каждого элемента.
h1 {
font-size: 16px;
line-height: 20px;
}
-
px – абсолютные, чёткие, понятные
-
em – относительно размера шрифта
-
rem - размер относительно размера шрифта элемента <html>
-
% – относительно такого же свойства родителя
-
vw – 1% ширины окна
-
vh – 1% высоты окна
Всемирная паутина
Пример
Flexbox Froggy
