Цвет текста и цвет фона в CSS

SMARTINCOMRU 09.02.202007.11.2021 0 Comments

При помощи CSS цвет и фон можно задавать практически любым элементам web-страницы, свободно управлять фоновым изображением, его повторением по горизонтали и вертикали. Кроме этого, средствами CSS можно поместить фоновое изображение в любую точку экрана используя позиционирование. Не будем пока далеко забегать, пойдем по порядку.

Содержание:

Свойство COLOR

Это свойство задает цвет элемента, а точнее, цвет текста внутри элемента. Значение задается одной из возможных форм:

наименованием цвета (GREEN, BLACK, RED…);
шестнадцатеричным кодом цвета (008000, 000000, FF0000…);
десятичным кодом цвета в RGB (color:rgb (40, 175, 250));

Свойство COLOR является наследуемым, и при не заданном значении для какого-либо элемента значение унаследуется от его предка. Но может получиться так, что и для предка оно не задано — тогда будет применена таблица стилей браузера с использованием значений по умолчанию. Цвет элемента в этом случае скорее всего будет черным.

Как я уже упоминал, задавать цвет можно практически всем элементам, это могут быть заголовки (H1… H6), теги выделения текста (strong, em) и даже целые абзацы (p) и даже границам таблиц, но об этом позже.

Смотрим пример задания цвета текста при помощи CSS:

h1 {color: Blue}

В этом примере все заголовки первого уровня web-страницы будут синего цвета:

strong {color: red}

В этом случае все то, что в тексте страницы будет выделено тегом strong, окрасится в красный цвет.

Можно записать так:

h1, p, strong {color: green}

Тогда заголовки первого уровня, все абзацы и все то, что выделено тегом <strong> будет зеленого цвета.

Когда же возникает необходимость выделять заголовки различными цветами, то применяются селекторы по классу. Для определения класса в HTML используется атрибут class, который можно применять к любым элементам. В HTML — коде нужно будет записать:

<h1 class="Blue">Цвет заголовков этого класса будет синим</h1>

В таблице стилей CSS, в этом случае, пишем правило, где селектором будет элемент H1, а через точку (.) имя класса:

h1.Blue {color: blue}

В HTML — документах используются так же селекторы по идентификатору, определяются они атрибутом id. Идентификатор является более значимым или приоритетным признаком, чем класс. И если в HTML — коде для элемента будет указан и класс и идентификатор, то применится стиль идентификатора. Обозначается идентификатор знаком решетки (#). Для применения в HTML — коде идентификатора, нужно будет записать:

<h1 id="Blue">Цвет заголовков этого идентификатора будет синим</h1>

В таблице стилей в свою очередь:

h1#Blue {color: blue}

Свойство BACKGROUND-COLOR

Это свойство позволяет задать цвет фона для страницы в целом, абзаца, ссылки, вообщем для любого элемента HTML. Для этого в значении свойства указывается цвет или значение transparent (прозрачный). Код для фона страницы пишется:

body {background-color: aqua}

В этом случае фон страницы будет бирюзового цвета, а чтобы придать фон заголовку пишем:

h1 {background-color: yellow}

Получаем желтый фон заголовков первого уровня.

Цвет и фон в CSS

Свойство BACKGROUND-REPEAT

Это свойство применяется когда задано фоновое изображение, для того чтобы определить будет ли оно повторяться по горизонтали и вертикали. Допустимые значения:

repeat — изображение повторяется по вертикали и горизонтали;
repeat-x — изображение повторяется только по горизонтали;
repeat-y — изображение повторяется только по вертикали;
no-repeat — изображение не повторяется.

Код пишется так:

p {
background-image: url(адрес файла с изображением);
background-repeat: repeat-x
}

Текст этого параграфа будет поверх фонового изображения, которое расположится по горизонтали.

Свойство BACKGROUND-ATTACHMENT

Это свойство применяется для указания браузеру, должно ли фоновое изображение страницы прокручиваться с текстом (scroll) или оставаться неподвижным (fixed).

body {
background-image: url(адрес файла с изображением);
background-repeat: repeat-x;
background-attachment: fixed
}

В этом случае фоновое изображение останется неподвижным.

Свойство BACKGROUND-POSITION

Данное свойство применяется для расположения изображения относительно окна браузера. Значения задаются в процентах (%), в единицах длины (см, px), ключевыми словами:

По вертикали:
- top — верх изображения выравнивается по верхнему краю страницы или блока;
- center — центр изображения выравнивается по центру страницы или блока;
- bottom — низ изображения выравнивается по нижнему краю страницы или блока.
По горизонтали:
- left — левый край изображения выравнивается по левому краю страницы или блока;
- center — центр изображения выравнивается по центру страницы или блока;
- right — правый край изображения выравнивается по правому краю страницы или блока.

Пишем пример кода в процентах, единицах длины и ключевыми словами:

body {
background-image: url(адрес файла с изображением);
background-position: 0% 0%
}

body {
background-image: url(адрес файла с изображением);
background-position: 10px 25см
}

body {
background-image: url(адрес файла с изображением);
background-position: top center
}

Свойство BACKGROUND

Пришло время записать полный пример задания фона для web-страницы:

body {
background-image: url(адрес файла с изображением);
background-repeat: no-repeat;
background-attachment: fixed
background-position: 50% 50%
}

Фоновое изображение закреплено по центру экрана, не повторяется ни в одном из направлений и не прокручивается вместе с текстом страницы. Показанный выше код можно оптимизировать и записать проще, что тоже будет верно:

body {background: url(адрес файла с изображением) no-repeat fixed 50% 50%}

В сокращенной форме значения разделяются пробелами, а порядок указания значений может быть произвольным. На этом знакомство со свойством background можно закончить и перейти к свойствам шрифтов.

Свойства CSS / Шрифт в CSS

Post Views: 2 738