Форматирование текста CSS
CSS имеет множество свойств для стилизации и форматирования текста, таких как цвет текста, выравнивание, интервалы, оформление и трансформация.
Цвет текста CSS
Свойство color задаёт цвет текста.
Цвет может быть именем (например, red), значением HEX (например, #ff0000) или значением RGB (например, rgb(255,0,0)).
Цвет текста по умолчанию для страницы задаётся в селекторе body.
Пример
Текст body синий, <h1> зелёный, а <h2> красный.
Prompt
HTML-страница, которая задаёт цвета текста с помощью свойства color во внутреннем блоке стилей.
Сделай текст тела синим,
<h1> — зелёным, а <h2> — красным. Добавь заголовок каждого уровня и абзац.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
color: blue;
}
h1 {
color: green;
}
h2 {
color: red;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is an ordinary paragraph. The body text color is blue.</p>
</body>
</html>
Цвет текста и цвет фона
Вы можете задать одновременно background-color и color элемента.
Важно: высокий контраст важен для людей с проблемами зрения, поэтому всегда сохраняйте хороший контраст между цветом текста и фоном.
Пример
Body, заголовок и div — каждый сочетает цвет фона с цветом текста.
Prompt
HTML-страница, которая одновременно задаёт цвет фона и цвет текста.
Во внутреннем блоке
<style> задай телу (body) светло-серый фон и синий текст, элементу <h1> — чёрный фон и белый текст, а <div> — синий фон и белый текст. Добавь заголовок, div с текстом и абзац.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<div>This is a div with a blue background and white text.</div>
<p>This is a paragraph. The body text is blue on a light grey background.</p>
</body>
</html>