css фон текста цветом

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Установить цвет фона и текста для однострочного текстового поля формы.

Решение

Цвет фона элемента задается стилевым свойством background-color , а цвет текста с помощью color , эти свойства необходимо добавить к селектору INPUT . Поскольку тег является универсальным, то он создает не только текстовое поле, но и другие элементы форм и чтобы определить стиль для конкретного поля можно воспользоваться классами, как показано в примере 1.

Пример 1. Цвет текста и фона в текстовом поле

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид текстового поля после добавления к нему стилей

В данном примере добавляется новый класс с именем colortext , он добавляется к тегу с помощью конструкции .

Аналогично можно определить стиль одновременно для всех текстовых полей, зная, что к тегу в этом случае всегда добавляется атрибут type . Используя запись INPUT[type=»text»] задаем стиль для всех элементов , но стиль применяется только в том случае, когда значение атрибута type равно text (пример 2).

Пример 2. Использование селекторов атрибутов


Одна из самых распространённых задач при редактировании текста и блоков в HTML и CSS. С ней может столкнуться не только верстальщик, но и любой контент-менеджер, который редактирует содержимое сайта. Для решения данного вопроса используется всего два свойства: color — цвет текста, background — работа с фоном, цвет или изображение.

Работа со цветом теста в CSS

color — это свойство, которое нужно для указания цвета только для текста. Цвет можно указать как в формате HTML HEX кода, так в формате RGB (Red Green Blue). Коды цвета можно выбрать либо в графических программах, например, Photoshop, либо в онлайн

Теперь применяем свойство:

Пример указания цвета для текста в элементе с идентификатором content:

Почему именно такой пример: указание цвета для ссылки и для текста — это разные вещи. Запомните. Ну и от себя рекомендую делать цвет текста и ссылки разного цвета.

Работа с фоном в CSS

background — это свойство, которое позволяет работать с фоном изображения: устанавливать цвет фона, устанавливать в качестве фона изображение (форматы jpg, gif, png), изменять положение фона и другие параметры, которые описаны ниже.

background-color — это свойство используется только для установки цвета фона. Принимает только код цвета. Цвет можно указать в формате RGB (Red Green Blue), либо в формате HTML HEX кода.

Лучшие примеры цветов для фона (современные дизайн-модели: Flat Design и др):

background-image — это свойство, которое используется для установки какого-либо изображения в качестве фона в элементе. Для указания изображения достаточно параметра url и пути к изображению относительно файла с css-стилями.

background-repeat — может использоваться только в том случае, когда выше было указано свойство background-image. Данное свойство устанавливает правило повтора изображения. По умолчанию, изображение повторяется по оси X и по оси Y до границ элемента (если фон меньше элемента). В свойстве можно указать настройку, чтобы изображения повторялось только по оси X — repeat-x (по горизонтали), только по Y — repeat-y (по вертикали) или вообще не повторялось вообще — no-repeat.

background-attachment — фиксирует фон в одном положении, то есть будет изображение прокручиваться вместе с содержимым блока или останется фиксированным. По умолчанию стоит значение scroll, что не фиксирует положение фона.

background-position — свойство, которое задаёт расположение фона в элементе. Задаётся два значения: расположение по горизонтали и затем по вертикали. Задаётся либо в цифровом (пиксели и проценты), либо в буквенном варианте (left, center, right, top, bottom). Данное свойство нужно в том случае, когда изображение не повторяется (no-repeat), а фон нужно расположить в элементе определённым образом.

В комментарии думаю всё понятно)
Пример написания цифирного значения:

Тут думаю тоже всё должно быть понятно.
Много свойств? Смотрим как писать сокращённо.

В итоге. Сокращённая запись background в CSS

Можно использовать сокращённую запись, где все параметры будут указаны в строчку:

Внимание! Порядок важен. Указывая значения, следите за последовательностью их расположения как в примере.

О плюсах. Подобная запись сокращает время загрузки страницы и рендеринг браузером. Пожалейте посетителей, записывайте лучше таким образом, если, конечно, Вам нужно несколько свойств.
Да, пропустить какое-либо свойство, в случае отсутствия потребности в нём, можно! Просто продолжаете дальше указывать значения дальше по списку.

Пример работы фонов background в CSS

Код примера. Результат работы и исходники можете посмотреть по ссылке ниже.

В случае с фоновым изображением лучше указывать размеры блока, так как иначе он примет размер согласно содержимому.
Демонстрация Скачать исходники
Спасибо за внимание!

Определяем стили текста в CSS самостоятельно

В текущем уроке мы рассмотрим свойства текстового элемента интернет-страницы.

Навигация по странице

CSS цвет текста на конкретном примере

Определим нужный цвет:

CSS цвет

Оцените статью