А ведь действительно - как? У начинающих веб-дизайнеров, для кого сайт на Юкозе стал первой пробой на пути сайтостроительства, данный вопрос становиться одним из первоочередных. И многие пытаются менять цвет непосредственно через HTML, напрочь забывая (или не зная) о таком великолепной штуке, как таблица стилей (CSS).
Ведь чтобы поменять значение цвета посредством HTML нужно обновить код на всех (!) страницах Вашего сайта, в то время как CSS, собственно, и задаёт правила отображения для всех страниц сайта, которые к ней привязаны.
Так с чего же начать? Во первых - убедиться, что к тегу BODY не привязан никакой стиль или цвет. Т.е. он должен выглядеть так:
Если же он имеет такой вид:
Code
<body style="background: #691400; margin:0px; padding:0px;">
то с помощью быстрой замены удаляем данный фрагмент:
Quote
background: #691400;
Так же может попасться и такой вариант:
Code
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="15" marginwidth="0" marginheight="0" style="padding:5px;">
тут необходимо убрать следующее:
Теперь переходим непосредственно к таблице стилей (Управление дизайном --> Таблица стилей (CSS)), а уже в ней - наш селектор body:
Code
body {background:#0d024e;margin:0;padding:0;}
на некоторых шаблонах он может быть привязан к селектору td
Code
td, body {font-family:Verdana,Arial,Helvetica; font-size:11px;}
тут необходимо "отвязать" их друг от друга:
Code
body {font-family:Verdana,Arial,Helvetica; font-size:11px;}
td {font-family:Verdana,Arial,Helvetica; font-size:11px;}
Для примера рассмотрим такой вариант - нам нужен чёрный фон. Есть три варианта как это сделать (здесь и далее другие свойства и значения опущены для удобства):
Code
body {background: #000000;}
Code
body {background: RGB(0, 0, 0);}
Code
body {background: black;}
т.е. в CSS допустимо прописывать шестнадцатеричное значение, значение в RGB, или по названию цвета.
А если мы хотим поставить картинку? И чтобы она не повторялась и не двигалась, когда мы прокручиваем страницу? И была строго по центру...
Code
body {background: #3f3f3f url('/img/back.jpg') center center fixed no-repeat;}
Сложновато, неправда ли? Но на самом деле всё не так страшно:
Первый параметр, как и в предыдущем случае, задаёт цвет фона.
стоит указать его, даже если задана фоновая картинка.
Второй - путь к картинке фона url('путь')
Третий и четвёртый - позиционирование фоновой картинки по горизонтали и вертикали соответственно.
для первого допустимо задать одно из значений:
left - от левого края
center - по центру
right - пот правой стороны
для второго:
top - от верхнего края
center - по центру
bottom - от нижнего края
для обоих можно прописать проценты или значение в пикселях.
Пятый устанавливает, будет ли прокручиваться\фиксироваться фоновая картинка.
fixed - фиксирует изображение
scroll - позволяет перемещаться фоновому изображению при прокрутке страницы
Шестой - отмена повторения фонового изображение по вертикали и горизонтали.
no-repeat - одно фоновое изображение, без повторений.
repeat - фоновое изображение повторяется по горизонтали и вертикали.
repeat-x - фоновый рисунок повторяется только по горизонтали.
repeat-y - фоновый рисунок повторяется только по вертикали.
Любое из значений может быть убрано (кроме фоновой картинки, естественно) на Ваше усмотрение.