Основные способы задания фона на CSS

Как бы выглядел сайт, если при его вёрстке не использовался язык стилей CSS? Во-первых, страница потеряла бы свой привлекательный вид, что резко снизило бы посещаемость сайта в 2 и более раза.

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

Конечно, сделать сайт более живым можно и с помощью JavaScript, однако, как показывает практика, JavaScript сложнее поддаётся изучению, чем CSS. Это является третьей причиной, почему следует вначале научиться пользоваться именно CSS.

Создание и подключение CSS

Для начала работы следует создать файл CSS. Чтобы это сделать, необходимо для начала создать любой текстовой файл, открыть его, нажать на "сохранить как", а затем переименовать его в style.css. Вместо style можно записать или слово, или набор из английских букв (например, rtyuidfg или people). Главное, чтобы самому разработчику было понятно, что за файл подключен и в какой папке его искать. Иначе при желании изменить немного внешний вид страницы будет потрачено много времени на поиск нужного файла. Окончание .css должно быть обязательно прописано, так как иначе файл не станет CSS-файлом.

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

Это тег <link>

Изображение как фон сайта

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

body { }

Фигурные скобки желательно располагать на разных строках, чтобы было видно, когда body открывается и закрывается. Хотя есть люди, для которых удобно всё записывать в одну строчку. Далее все необходимые стили будут записываться внутри фигурных скобок.
Пример записи:

body {
background-image:url (zero/phon.jpg);
}

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

Итак, в данном случае перед названием файла-изображения (здесь файл имеет имя phon) стоит zero/ . Это означает, что изображение, которое используется для будущего сайта, находится в папке zero. Располагать разные файлы по папкам весьма удобно, так как не приходится долго искать, что где находится.

Пример:

В папке Qwerty находятся файл HTML и папка zero, которая содержит файл phon. Если же сама папка zero находится в другой папке (например, azbukas), то запись приобретает вид: azbukas/zero/phon.jpg. Таким образом задаётся иерархия файлов при создании сайта. Если всё это не прописывать в коде, то ничего работать как надо не будет.

Одноцветный фон

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

background-color: #0000FF;

Цвет фона в данном случае будет синим. Можно записывать и проще, английскими словами: blue, green, red, white и так далее. Чтобы записать цвета в виде, который дан в примере, следует написать в браузере "таблица HTML-цветов" или что-то похожее. А далее всё зависит от предпочтений и цветовой гамы, которую выберет верстальщик.

Что узнали?

Изменять фон сайта достаточно просто. Главное в этом деле быть достаточно внимательными. Так, все стили, которые нужно применить к фону, записываются (в самом простом сайте) внутри фигурных скобок

body {
...
}

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

Краткий итог

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