Как изменить цвет и фон в CSS? Свойства цвета и фона

Если с цветом все просто, то есть задали мы свойство color, и текст стал такого цвета, то с фоном немного сложнее. Это из-за того, что в CSS мы можем задать не только само изображение фона, и не только цвет фона, как в HTML, а можем задать дополнительные свойства, такие как повторение, расположение и фиксация. Сейчас я вам все это покажу на реальном примере.

Как задать фон страницы с помощью CSS?

Я открываю свой сайт. Он имеет фон — это изображение, которое повторяется вправо и вниз. Также мой сайт имеет изображение «Оставьте свой отзыв». Оно не повторяется, но при перемещении страницы оно фиксируется, то есть я прокручиваю страницу и всегда могу нажать эту кнопку. На самом деле эта тема уже немного другая. Она называется «Позиционирование элементов». Мы ее будем рассматривать в конце данного видеокурса. Вы наверняка спросите, почему я вам это сейчас показываю. А потому что с фоном можно сделать то же самое, то есть его можно повторять, его можно расположить в какой-либо части сайта и зафиксировать либо не зафиксировать.

Давайте перейдем в код таблицы стилей и опробуем все на практике. Для того, чтобы рассказать эту тему от начала до конца я удалю все, что мы ввели в свойство background:

Итак, приступим. Что нам нужно сделать первым делом? Нам нужно задать цвет фона. Почему цвет так важен? Он важен потому, что если у человека задан фон на сайте, но не задан цвет, то у посетителя, у которого отключено отображение картинок, вместо фона будет показан белый цвет. А теперь представьте, каково будет его возмущение, если на сайте, к тому же, цвет текста — белый. Это нужно предусмотреть. Мы создадим сейчас цвет фона.

Давайте определимся с тем цветом, который мы хотим задать фону. Для этого я прикладываю таблицу цветов к этому видеоуроку. Например, я хочу задать сайту голубой цвет #33CCFF. Естественно в таблице представлены не все цвета. Существуют и другие оттенки. Но здесь выделены основные — так называемые RGB-цвета. Первые две цифры отвечают за красный (Red), вторые — за зеленый (Green), третьи — за синий (Blue).

Фон мы задали. Давайте сохраним нашу страницу и проверим ее в браузере. Открываем. Мы видим, что цвет фона стал тем самым, который мы выбрали.

Снова перейдем в код. Сейчас мы зададим фоновое изображение. Как это сделать? Оно задается с помощью url, который есть адрес нашей страницы, то есть сейчас мы введем адрес изображения, которое хотим сделать фоном. Если мы откроем папку сайта, зайдем в папку img, то увидим, что у нас есть изображение bg.JPG. Пропишем его вместо нашего фона. Не забываем указывать папку img.

Давайте сохраним. Посмотрим, что получилось. Наше изображение стало фоном нашего сайта. Почему я сказал не «страницы», а «сайта»? Потому что если привязывать данный файл стилей к каждой странице, то в этом случае фон будет копироваться на все страницы, если, конечно, на страницах не задан фон по умолчанию.

Теперь давайте разберемся с повторением. Если мы перейдем на нашу страницу, то увидим, что фон — это лишь небольшое изображение, которое просто копируется вниз и вправо. Если мы отменим повторение, то на странице наше изображение будет выглядеть, как одно, и не будет размножено. Также стоит отметить, что можно выбрать только правое повторение и только нижнее повторение.

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

Чтобы оно не повторялось, нужно перед словом repeat поставить приставку no- .

Давайте сохраним и проверим, повторяется оно у нас или нет. Мы видим, что наше изображение не повторяется, поэтому оставшаяся часть фона залита выбранным нами цветом.

Повторение в CSS

Теперь давайте попробуем повторить его по оси Х (слева направо) и по оси Y (сверху вниз). Чтобы это сделать, нам нужно поставить repeate-x (по оси Х).

Сохраним. Сейчас изображение повторяется только по оси Х. Это очень полезная возможность для шапок или футеров сайта, где наше изображение копируется только вправо, а на него налагается какой-либо текст.

Чтобы скопировать изображение по оси Y, нам надо прописать repeate-y.

И оно у нас повторилось по оси Y.

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

Фиксация в CSS

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

Перейдем в код и добавим слово fixed (фиксировать). По умолчанию стоит scroll.

Сохраним, обновим и переместим ползунок. Как мы видим, наше фоновое изображение передвигается вместе с ним. Как я уже показывал, на моем сайте по такому же принципу передвигается кнопочка «Оставить свой отзыв».

Позиционирование в CSS

Теперь давайте разберемся с позиционированием. Как таковое, позиционирование мы будем разбирать в конце данного видеокурса, сейчас мы научимся лишь позиционировать наше фоновое изображение. Для этого нам нужно указать отступы от верхнего и левого края. Указывать их можно как относительными, так и абсолютными значениями. Что это значит? Есть два типа единиц: относительная и абсолютная. Относительная единица— это пиксели, проценты и др. А абсолютная — это миллиметры, сантиметры. Сначала указывается значение отступа от левого края. Давайте попробуем поставить это значение в 20 пикселей, а потом укажем от верхнего края — 40 пикселей.

Сохраним и посмотрим, как все получилось. Получили два отступа: от левого и верхнего краев.

Если мы укажем значения отступов в абсолютных величинах, т.е. поставим, например, 2см и 4см:

то это выглядит соответственно.

Почему абсолютные значения называются абсолютными, а относительные — относительными? Сантиметр одинаков везде, поэтому он называется абсолютным, а проценты зависят, например, от размеров экрана: если на одном экране 10% — это примерно 3см, то на другом это может быть примерно 1см. Абсолютными величинами очень редко пользуются. В основном обходятся именно относительными: пикселями, процентами, есть еще такая буква «m» (величина зависит от буквы m), например:

Это означает «30 букв m в ширину и 20 — в высоту». Сохраняем. Получили желаемое. Такой прием используется в зарубежных странах. В России он используется достаточно редко, хотя бы потому, что буква m – буква английского алфавита.

Есть и другие относительные величины, но используются они совсем редко, поэтому я советую вам обходиться пикселями и процентами. Я делаю именно так.

Значения можно задавать еще и словами: если указать top (верх) и right (право).

То есть в верхнем правом углу у нас будет отображаться изображение. Если укажем bottom left:

то оно будет отображаться в нижнем левом углу. Возможно, это немного трудно освоить, но вы поэкспериментируйте, попытайтесь повторять за мной. Поставьте изображению повторение, фиксирование, задайте позиционирование, и такой практикой вы добьетесь нужного вам результата.

Как задать цвет текста с помощью CSS?

На этом с фоном мы покончили и сейчас разберемся с цветом текста. С ним все просто. Он может принимать как значение кода (решетка и код RGB), так и значение словами (например, red – красный, purple – фиолетовый).

Есть несколько таких слов, которые браузер понимает, но, например, для оттенков таких слов нет. Например, #660066 – оттенок фиолетового цвета и для него нет соответствующего английского слова. Мы можем задать темно-серый цвет с помощью слова gray, но мы не можем задать какой-либо оттенок этого темно-серого цвета. Такого слова просто напросто нет. Поэтому нам нужно указывать код. Также код можно сократить. Если у вас первые два символа, вторые два символа и третьи два символа повторяются, то мы можем сократить каждый второй символ. Код оттенка фиолетового станет трехзначным кодом #606. Это дает браузеру понять, что первые два символа — две шестерки, вторые — два нуля и третьи — тоже две шестерки. Мы сохраним и проверим это сейчас. Ничего с цветом текста не изменилось.

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