CSS. Как изменить цвет

Этот урок Вам покажет как изменить цвет в любом HTML шаблоне используя CSS свойства.

Любые предметы на страницах можно окрасить двумя способами: кодом цвета или картинкой. Для начала откройте в браузере Ваш сайт и, нажав F12, откройте инструмент для веб-разработчиков.
С помощью этого инструмента Вы можете найти CSS-свойства каждого элемента на странице. Если Вы не знаете, как работать с инструментом для веб-разработчиков, прочитайте, пожалуйста, данную статью.
Например, Вы увидели следующую таблицу стилей:

 
.button {
    background: -moz-linear-gradient(#FF8E00, #FF7F00) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    color: #FFFEFE;
    display: inline-block;
    font-family: 'PT Sans',sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2em;
    padding: 20px 27px 19px;
    text-transform: uppercase;
}
 

В этом стиле находятся разные коды цветов: #FF8E00, #FF7F00, #FFFEFE и др. Каждый из них определяет свой собственный цвет. Код цвета Вы найдете в любом программном обеспечение для редактирования изображений.

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

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

Например у Вас следующий стиль:

 
.box-red {
    background: url("../images/box-red.gif") repeat scroll 0 0 transparent;
    border-bottom: 1px solid #E8837E;
    border-radius: 9px 9px 9px 9px;
    border-right: 1px solid #E8837E;
    border-top: 1px solid #E8837E;
    color: #FFFFFF;
    position: relative;
    width: 315px;
}

Здесь фон определен с помощью картинки:

 background: url("../images/box-red.gif")  repeat scroll 0 0 transparent;

Перейдите в папку с картинками и замените файл box-red.gif на фоновое изображение или просто цветом

Замените:

background: url("../images/box-red.gif")  repeat scroll 0 0 transparent;

на

background: #E8837E;

Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже: