Rambler's Top100 Старый русский почтовик! Оплата в WM! Самый активный, самый надежный!
Рыболовные туры в Финляндию
Рыбалка в Финляндии
с русскоговорящим гидом!
SEO sprint - Всё для максимальной раскрутки!
Форум русских рыболовов Финляндии

Рыбалка в Финляндии


главная
DHTML
Перечень элементов
Список фильтров
Свойства текста
Свойства цвета
Таблица
цветовых кодов
Объекты
JavaScript
Свойства таблиц
Методы и функции JavaScript

Каскадные таблицы стилей. Свойства цвета и фона.

color Устанавливает цвет текста элемента. Цвет может быть задан:
  • стандартным названием (например, синий — blue),
  • соотношением используемых цветов в режиме RGB.
      Здесь также возможно несколько вариантов:
    • цвет в режиме RGB, записанный в десятичной системе.
           Например тот же синий цвет в десятичной системе запишется так: 0, 0, 255
    • цвет в режиме RGB, записанный в 16-ричной системе счисления.
              Например: #0000ff (синий цвет)
    • цвет в режиме RGB, записанный в процентном соотношении цветов.
              Например: 160%, 240%, 120% (синий цвет)
      p {color: blue;},
      p {color: rgb(0,0,255);},
      p {color: #0000ff;},
      p {color: rgb(160%,240%,120%);}
background-color Определяет цвет фона. При этом, если вы примените это свойство к различным селекторам тегов, то получите и различные результаты: при применении этого свойства к body — в указанный цвет окрасится вся Web-страничка. При применении этого свойства к тексту — окрасится цвет фона текста. При этом, Explorer отведет под фон текста всю доступную ширину страницы, а Netscape Navigator — лишь ширину, занимаемую этим текстом.

Пример:

В приведенном ниже примере фон текста будет темно-синим, цвет текста — белым:
<p style="background-color: #000066; color: white">
Вот так:

Пример надписи белым цветом на синем фоне.

Правила задания цвета фона точно такие же, как и в случае указания цвета текста.
body {background-color: blue;};
p {background-color: blue;}
background-image С помощью этого свойства можно указать URL картинки, которую вы хотите использовать в качестве фона. Как всегда, лучше пользоваться относительной адресацией.

body {background-image: URL('./img/fon.gif')}

background-attachment Определяет, будет или нет фоновая картинка прокручиваться при прокрутке страницы. Возможны следующие значения:
  • fixed — фон прокручиваться не будет; в Netscape не работает;
  • scroll — фон будет прокручиваться вместе с прокруткой страницы.

body {background-attachment: fixed;}

background-repeat Определяет, повторяется ли фоновая картинки для заполнения страницы или элемента. Если используются значения repeat-x, repeat-y, то картинка повторяется лишь вдоль одного направления. По умолчанию картинка повторяется по всем направлениям. Возможны следующие значения:
  • repeat — фоновая картинка повторяется по всем направлениям;
  • repeat-x — фоновая картинка повторяется по горизонтали;
  • repeat-y — фоновая картинка повторяется по вертикали;
  • no-repeat — фоновая картинка не повторяется.

body {background-repeat: repeat-y;}
p {background-repeat: no-repeat;}

background-position Определяет начальное положение фоновой картинки с помощью двух значений — отступа по горизонтали (слева) и отступа по вертикали (сверху). Порядок задания значений: сначала по горизонтали, потом по вертикали. Используется совместно со свойством background-repeat равным repeat-x, repeat-y или no-repeat. Возможные значения:
  • left (лево), center (центр), right (право) — положение фоновой картинки по горизонтали;
  • top (сверху), center (середина), bottom (низ) — положение фоновой картинки по вертикали;
  • расстояние от левого края + расстояние от вершины, используя стандартные единицы
      измерения;
  • процент от ширины + процент от высоты.

    body {background-position: 50% 0%; background-repeat: no-repeat;} посмотреть пример

background Обобщает вышеперечисленные свойства, позволяя одновременно устанавливать несколько свойств фона документа. Различные значения отделяются друг от друга пробелами. Возможные значения:
  • background-color;
  • background-image;
  • background-attachment;
  • background-repeat;
  • backgroun-position.

body {background: white url('./img/FonPr.gif') fixed no-repeat 50% 0% ;}


Создать свой сайт


Рейтинг@Mail.ru liveinternet.ru: показано число посетителей за сегодня


Copyright © 2001 by Сергей Червонящий.
Все права защищены. Запрещено частичное или полное воспроизведение материалов сайта без согласования с автором.

Покупайте на OHO.ru:
Покупайте на OHO.ru: