Styling text · Стилирование текста
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Эта страница требует современного браузера (с поддержкой SharedArrayBuffer). Пожалуйста, обновите Chrome, Edge, Firefox или Safari до последней версии.
English
Sizing text
font-sizesets how big text is, usually in pixels:font-size: 24px;.font-weight: bold;makes text bold (usenormalto undo it).font-family: Georgia;changes the typeface — the style of the letters.
Русский
Размер текста
font-sizeустанавливает размер текста, обычно в пикселях:font-size: 24px;.font-weight: bold;делает текст жирным (используйтеnormal, чтобы отменить это действие).font-family: Georgia;меняет шрифт (typeface) — стиль букв.
English
Aligning text
text-alignmoves text left, center, or right inside its box.text-align: center;is great for titles.line-height: 1.6;adds space between lines, so paragraphs are easier to read.
Русский
Выравнивание текста
text-alignперемещает текст влево, по центру или вправо внутри его блока.text-align: center;отлично подходит для заголовков.line-height: 1.6;добавляет пространство между строками, чтобы абзацы было легче читать.
<style>
h1 { font-size: 36px; text-align: center; }
p { font-family: Georgia; line-height: 1.6; }
</style>
<h1>My story</h1>
<p>Once upon a time, on a small website...</p>
English
Common mistakes
font-size,font-weightandtext-aligncontrol text.- Sizes often use
pxorrem.
Русский
Распространенные ошибки
font-size,font-weightиtext-alignуправляют текстом.- Размеры часто используют
pxилиrem.
English
Now you try
- These properties stack up — one box can have several.
- Resize a heading, then center a paragraph.
Русский
Теперь попробуйте сами
- Эти свойства могут накладываться друг на друга — один блок может иметь несколько свойств.
- Измените размер заголовка, а затем выровняйте абзац по центру.
Make the heading bigger. Add h1 { font-size: 40px; }. · Увеличьте размер заголовка. Добавьте h1 { font-size: 40px; }.
Center the paragraph on the page. Add p { text-align: center; }. · Выровняйте абзац по центру страницы. Добавьте p { text-align: center; }.