А ведь действительно - как? У начинающих веб-дизайнеров, для кого сайт на Юкозе стал первой пробой на пути сайтостроительства, данный вопрос становиться одним из первоочередных. И многие пытаются менять цвет непосредственно через HTML, напрочь забывая (или не зная) о таком великолепной штуке, как таблица стилей (CSS).
Ведь чтобы поменять значение цвета посредством HTML нужно обновить код на всех (!) страницах Вашего сайта, в то время как CSS, собственно, и задаёт правила отображения для всех страниц сайта, которые к ней привязаны.
Так с чего же начать? Во первых - убедиться, что к тегу BODY не привязан никакой стиль или цвет. Т.е. он должен выглядеть так:
Code
<body>
Если же он имеет такой вид:
Code
<body style="background: #691400; margin:0px; padding:0px;">
то с помощью быстрой замены удаляем данный фрагмент:
Теперь переходим непосредственно к таблице стилей (Управление дизайном --> Таблица стилей (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 - фоновый рисунок повторяется только по вертикали.
Любое из значений может быть убрано (кроме фоновой картинки, естественно) на Ваше усмотрение.
Сделать стартовой
