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

Пройдя этот видеоурок, вы научитесь:

  • Задавать цвет фона с помощью CSS.
  • Задавать фоновое изображение в CSS.
  • Присваивать фоновому изображению фиксацию, повторение и позиционирование.
  • Назначать цвет текста с помощью CSS разными способами.

Скачать материалы:
Скачать 4-ый видеоурок по CSS Размер: 21.32 MB, скачали: 565 раз.
Скачать исходники к 4 видеоуроку по CSS Размер: 28.39 kB, скачали: 493 раз.
Скачать таблицу цветов Размер: 47.78 kB, скачали: 893 раз. 
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

В этом видеоуроке мы рассмотрим свойства цвета и фона. Их я немного затронул еще в прошлом видеоуроке по CSS. Сейчас мы поговорим о них подробнее.

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

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

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

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

 body { background: }
 

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

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

 body { background: #33CCFF;}
 

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

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

 body { background: #33CCFF url(img/bg.jpg);}
 

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

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

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

 body { background: #33CCFF url(img/bg.jpg) repeat ;}
 

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

 body { background: #33CCFF url(img/bg.jpg) no-repeat ;}
 

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

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

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

 body { background: #33CCFF url(img/bg.jpg) repeat-x;}
 

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

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

 body { background: #33CCFF url(img/bg.jpg) repeat-y;}
 

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

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

 body { background: #33CCFF url(img/bg.jpg) no-repeat ;}
 

Фиксация в CSS

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

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

 body { background: #33CCFF url(img/bg.jpg) no-repeat fixed;}
 

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

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

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

 body { background: #33CCFF url(img/bg.jpg) no-repeat fixed 20px 40px;}
 

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

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

 body { background: #33CCFF url(img/bg.jpg) no-repeat fixed 2cm 4cm;}
 

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

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

 body { background: #33CCFF url(img/bg.jpg) no-repeat fixed 30em 20em;}
 

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

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

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

 body { background: #33CCFF url(img/bg.jpg) no-repeat fixed top right;}
 

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

 body { background: #33CCFF url(img/bg.jpg) no-repeat fixed bottom left;}
 

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

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

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

 .red { color: red; }
 .purple { color: purple;}
 

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

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

Подпишись на info-line:

Получать новые уроки на e-mail:

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

  1. Иннокентий 24 мая 2011 в 0:29 #

    Урок посмотрел, хороший. А вот правда при скачивании. точнее когда извлекаешь из архива пишет что файл index.swf повреждён.

  2. Иннокентий 25 мая 2011 в 22:23 #

    Привет, а вот вопросы задать не совсем касающийся уроков можно? Если можно то куда писать? Прям сюда? Просто у меня реально нет знакомых кто бы понимал в этом, а если пишешь на форумах там все такие умные. что аж писать больше не охота. Спасибо!

    • Олег Зубцов 26 мая 2011 в 0:05 #

      Я пока еще об этом не думал, честно говоря. =)

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

      Если есть какие-нибудь идеи по осуществлению такой задумки без помощи форума, прошу их сообщить мне, с помощью кнопки «Оставить свой отзыв» в левой стороне сайта.

      Пока можете задавать вопросы в комментариях, а также используя кнопку «Оставить свой отзыв» и выбрав потом в выпадающем списке «Задать вопросы» *DRINK*

  3. Иннокентий 26 мая 2011 в 1:29 #

    Ну понеслась.)) Каким размером лучше делать фон? Как я понимаю чем меньше тем лучше для загрузки страницы, этот вариант подходит допустим как у Вас на сайте. А вот если я хочу рисунок? Солнце, небо, дома и т.д ведь тогда картинка должна быть большая и значит сайт будет долго грузиться? Я хочу сделать именно картинку, то есть шапка будет к примеру 1000 на 300 px, а вокруг неё фон. Но опять же, ведь у всех разные мониторы, значит кому то будет не удобно, хотя куча сайтов щас как то под монитор автоматом уменьшаются, как этого добиться? Я в общем хочу объёмный сайт с минимум текстА и максимум картинок, ну вот нашёл как пример www.multialbom.ru/albums/. Заранее спасибо!

    • Олег Зубцов 26 мая 2011 в 3:11 #

      Каким размером лучше делать фон? Как я понимаю чем меньше тем лучше для загрузки страницы, этот вариант подходит допустим как у Вас на сайте.

      Да, лучше, чтобы изображение было небольшое.
      А вот если я хочу рисунок? Солнце, небо, дома и т.д ведь тогда картинка должна быть большая и значит сайт будет долго грузиться?
      Не обязательно. Главное, чтобы его вес был небольшим. Есть специальные сервисы для сжатия изображений, например: Smush.it

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

      Но опять же, ведь у всех разные мониторы, значит кому то будет не удобно

      Сейчас уже редко у кого стоит монитор с разрешением менее чем 768×1024.
      хотя куча сайтов щас как то под монитор автоматом уменьшаются, как этого добиться?
      Не совсем понятен вопрос. Приведи пример, пожалуйста.

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

      Для удобства просмотра в маленьких разрешениях(менее 1024 пикселя в ширину), я указал свойство min-width(то есть задал минимальную ширину контента), о котором мы еще будем говорить в видеоуроках.

      Я в общем хочу объёмный сайт с минимум текстА и максимум картинок
      Самое главное — это желание учиться и хотеть действовать. Все в твоих руках! 8)

  4. Иннокентий 1 июня 2011 в 3:50 #

    Приветик, урока нового вижу пока нету((( вот ещё вопросы возникли, сразу говорю спасибо за ответы, очень помогаешь!!! Сайт мой пробный про АВИАЦИЮ вроде подходит к концу, делал я его в adode Dreamwea cs3. Программа хорошая, но конечно своеобразная, хотя там многое делается за два клика. Ну вот задам пару вопросов самых щас важных. 1) у меня там есть раздел автор, туда я повесил инфу о себе и связь с аськой.Хочу туда повесить форму для комментариев, то-есть что бы на это странице люди писали свои комменты, как сложно это сделает? если ли готовые скрипты? как прописать путь и т.д. 2) есть раздел АЭРОПОРТЫ я туда текст вставил, слева текст одной компании, потом справа другой и т.д хочу туда картинку...не понимаю как(((( например слева текст, справа картинка

    • Олег Зубцов 1 июня 2011 в 11:12 #

      Скоро появится урок. И последующие будут выходить чаще, чем раньше.

      1) Форму комментариев лучше писать на php, можно взять и готовые скрипты. Инструкции к ним обычно прилагаются. Для этого достаточно вбить в поисковике соответствующую фразу.

      2) Если правильно тебя понял, то:

      Чтобы текст обтекал изображение, нужно задать изображению атрибут align со значением right (изображение справа, текст слева) или left (изображение слева, текст справа). Есть и другие значения у этого атрибута, подробнее в курсе по HTML.

      Пример:

      <strong>Текст, который обтекает с левой стороны изображение. Само изображение расположено справа.</strong><img src="путь к изображению" align="right">
      

  5. Иннокентий 5 июня 2011 в 20:44 #

    Чушь какая то(((( на своём сайте поменял фон и тему...блин при переходе по страницам белое поле((((( video-art-studio.ru что опять я не так сделал

    • Олег Зубцов 5 июня 2011 в 21:24 #

      Вопрос немного не по теме. Но все же отвечу:

      Не заметил никаких проблем у вас на сайте. Переход по страницам работает исправно.

  6. Иннокентий 7 июня 2011 в 6:35 #

    Извини, я наверное достал тебя уже((. Ну хотя это понятно,если какие то вопросы не стоит задать просто напиши это, мне реально больше не у кого просить помощи, да и с этой страницей для комментариев, про которую я спрашивал, не нашёл я в поиске ни чего, нашёл конечно, но как куда вставлять я не понимаю файл php что бы комменты появлялись на одной странице. как прописать путь...((((((((((. Ладно, ещё раз извини...

    • Олег Зубцов 7 июня 2011 в 13:31 #

      Да нет, не достал, задавай вопросы. Я же сайт создавал для того, чтобы помогать) 8)

      Так, на счет скрипта php! *THUMBS UP*

      У себя на компьютере ты не сможешь его использовать, если не установлено необходимое программное обеспечение.

      Скачайте набор Denwer с сайта denwer.ru.

      Там есть скрины по установке. Видеокурс по установке денвера, я буду записывать чуть позже.

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

      Также можно установить комментарии на JavaScript. Там не потребуется устанавливать ничего такого =) . Но не советую по этим причинам:

      1. JavaScript — язык, который работает на стороне клиента, что сужает нам возможности.

      2. JavaScript у некоторых пользователей может быть отключен.

  7. Georgy 15 июня 2011 в 23:34 #

    Здравствуйте!

    Большое спасибо за уроки!

    Есть вопрос, по теме, что я делаю неправильно?

    Цвета нет, ни у фона ни у шрифта.

    Код писал в notepad++, а когда открывал в программе Adobe Dreamweaver CS3, то шрифт вообще не читался.

    • Олег Зубцов 16 июня 2011 в 0:17 #

      Доброе время суток.

      Цвета нет, ни у фона ни у шрифта.

      1. Убедитесь, установлена ли связь css файла со страницей. Для этого надо в html файле между тегами и добавить такую строчку:

      <link rel="stylesheet" type="text/css" href="файл стилей">

      где «файл стилей» — путь к файлу стилей.

      2. Убедитесь, что перед кодом цвета стоит символ #. То есть, например:

       color: #FF00FF; 

      3. Убедитесь, что вы правильно прописали стили. Попробуйте сделать все в точности как показано в уроке, возможно это поможет найти ошибку.

      Если все вышеописанное не помогло, напишите пожалуйста исходный код файла стилей. Для этого нужно поместить ваш код в комментариях между: [css] и [/css]

      Код писал в notepad++, а когда открывал в программе Adobe Dreamweaver CS3, то шрифт вообще не читался.

      Возможно вы забыли добавить в Dreamveawer файл стилей. В следствии чего, Dreamveawer действуя как редактор, увидел лишь один файл — index.html

      Если проблема именно в этом, то для ее решения нужно создать в панели управления сайтами свой сайт, где указать папку, в которой располагаются ваши файлы сайта(index.html и style.css).

      Если же проблема не в этом, то желательно было бы услышать ее подробное описание.

      P.S. Попробуйте повторить все в точности, как показано в видеоуроке и возможно заметите ошибку. Если же не поможет, то скиньте мне исходники файлов(index.html и style.css), это значительно ускорит решение проблемы. 😉

  8. Иннокентий 7 июля 2011 в 21:58 #

    По поводу DENWER, установил, а при запуске пишет ошибку «found at least 1 errors» весь инет облазил, в основном пишут что касперский блокирует, я его отключил, всё ровно эта ошибка(( может ты что то знаешь?

    • Олег Зубцов 7 июля 2011 в 22:36 #

      Честно говоря, впервые об этом слышу. Я так понял ты установил, а потом отключил. Может попробуй отключить и переустановить(или же поискать способы решения этой проблемы в интернете). У меня NOD32 и никаких проблем с ним не возникало.

      Единственная проблема, была с сервером IIS, я его отключил в панели управления и все заработало как положено.

Оставить ответ