Как задать цвет фона и текста веб-страницы?
Для изменения цвета фона всей веб-страницы применяется свойство background-color (или универсальное background), которое добавляется к селектору body , а для цвета текста используется свойство color, как показано в примере 1.
Пример 1. Изменение цвета фона
Результат данного примера показан на рис. 1.
Рис. 1. Вид веб-страницы с тёмным фоном
См. также
- background-color
- color
- currentColor
- text-fill-color
- Атрибут bgcolor
- Атрибут link
- Единицы цвета в CSS
- Наследование в CSS
- Работа с типографикой
- Фон в CSS
Как добавить цвет фона к заголовку текста?
Для изменения цвета фона под текстом используется универсальное свойство background , которое следует добавить к селектору h1 . Цвет заголовка меняется с помощью свойства color , которое также добавляется к этому селектору (пример 1).
Пример 1. Цвет фона под заголовком
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвет фона под заголовком Закон внешнего мира
Закон внешнего мира методологически выводит интеллигибельный мир, хотя в официозе принято обратное.
Результат данного примера показан на рис. 1.
Рис. 1. Цвет фона под заголовком текста
Учтите, что на размер цветного прямоугольника влияет не только размер текста, но и отступы вокруг него. Поэтому регулируйте размер фона за счет свойства padding , добавляя его опять же к селектору h1 .
Как сделать фон для текста?
Здравствуйте, как можно сделать фон для текста, примерно как на картинке:
При этом нужно, чтобы он находился в одной обертке, которая является display: inline-block, строки текста нельзя ни во что обернуть и [br] тоже использовать не вариант.
В идеале верстка должны так выглядеть:
Тут текст, количество которого не известно Также не известно какой длинны текст будет в блоке, так что перенос должен зависеть от максимальной ширины wrapper.
- Вопрос задан более трёх лет назад
- 6395 просмотров
1 комментарий
Простой 1 комментарий
Ankhena @Ankhena Куратор тега CSS
При этом нужно, чтобы он находился в одной обертке, которая является display: inline-block, строки текста нельзя ни во что обернуть и [br] тоже использовать не вариант.
Откуда взялись все эти условия?
Теоретически, если вы зададите 100500 теней, то проблемы останутся только для краев )))))
Фон под текстом
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами:
Вариант №1 – разметка тегами
Первый вариант так себе, но работает – обвернуть каждую строку в и добавить переносы строк
.
dummy text of the printing
and typesetting industry
.title < font-size: 50px; line-height: 56px; color: #000; >.title span