Цвет текста
Для изменения цвета текста используется свойство:
color
Пример:
p {
color: red;
}
В этом примере весь текст внутри тегов <p> станет красным.
Способы задания цвета
Цвета можно задавать несколькими способами.
3.1 Название цвета
Самый простой способ.
h1 {
color: blue;
}
Примеры цветов: - red - blue - green - black - white - gray
2 HEX-код цвета
Цвет задаётся шестнадцатеричным кодом.
p {
color: #ff0000;
}
Пример:
| Цвет | Код |
|---|---|
| Красный | #ff0000 |
| Зеленый | #00ff00 |
| Синий | #0000ff |
| Черный | #000000 |
3 RGB
Цвет задаётся тремя значениями:
color: rgb(255, 0, 0);
Разбор: - первое число — красный - второе — зелёный - третье — синий
Цвет фона
Для изменения цвета фона используется свойство:
background-color
Пример:
body {
background-color: lightgray;
}
Фон страницы станет серым.
Размер шрифта
Размер текста изменяется с помощью свойства:
font-size
Пример:
p {
font-size: 20px;
}
Здесь:
- px — единица измерения (пиксели).
Тип шрифта
Для изменения шрифта используется:
font-family
Пример:
body {
font-family: Arial;
}
Можно указать несколько шрифтов:
body {
font-family: Arial, Helvetica, sans-serif;
}
Если первый шрифт отсутствует, браузер использует следующий.
Жирность текста
Для изменения жирности используется свойство:
font-weight
Пример:
p {
font-weight: bold;
}
Выравнивание текста
Для выравнивания текста используется:
text-align
Пример:
h1 {
text-align: center;
}
Возможные значения: - left - center - right
Пример оформления текста
HTML:
<h1>Мой сайт</h1>
<p>Это текст страницы</p>
CSS:
body {
background-color: #f2f2f2;
font-family: Arial;
}
h1 {
color: blue;
text-align: center;
}
p {
color: black;
font-size: 18px;
}
Рекомендации
При оформлении текста рекомендуется: - не использовать слишком много разных шрифтов; - использовать читаемые цвета; - соблюдать контраст текста и фона; - не делать текст слишком мелким.