ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Фон элемента. Списки

Фон элемента. Списки

Каскадные таблицы стилей позволяют задать цвет фона или использовать изображение в качестве фона. Для фонового рисунка можно задать начальное положение и указать, будет ли рисунок прокручиваться вместе с содержимым веб-страницы. Кроме того, можно контролировать, как фоновый рисунок повторяется, что позволяет получить интересные спецэффекты. Например, если в качестве фонового рисунка указать градиентную полосу с высотой, равной высоте элемента страницы, и шириной, равной 1-2 мм, а затем задать режим повторения только по горизонтали, первоначальное изображение будет размножено по горизонтали, и мы получим градиентную полосу любой ширины.

Цвет фона

С помощью атрибута background-color можно задать цвет фона:

body { background-color: blue }

td { background-color: silver }

В качестве значения атрибута можно использовать слово transparent. Оно означает, что цвет прозрачный:

td { background-color: transparent }

Фоновый рисунок

С помощью атрибута background-image можно задать URL-адрес изображения, которое будет использовано в качестве фонового рисунка. Может быть указан абсолютный или относительный URL-адрес (относительно местоположения таблицы стилей, а не документа):

body { background-image:url(images/foto14.gif) }

В качестве значения атрибута можно использовать слово none. Оно означает, что фоновая заливка отключена:

body { background-image: none }

Режим повтора фонового рисунка

Атрибут background-repeat задает режим повтора фонового рисунка. Он может принимать следующие значения:

  • repeat —рисунок повторяется и по вертикали, и по горизонтали (по умолчанию);
  • body { background-image: url(images/foto14.gif); background-repeat: repeat }

  • repeat-x — рисунок повторяется по горизонтали;
  • body { background-image: url(images/foto14.gif); background-repeat: repeat-x }

  • repeat-y — рисунок повторяется по вертикали;
  • body { background-image: url(images/foto14.gif); background-repeat: repeat-y }

  • no-repeat — рисунок не повторяется:
  • body { background-image: url(images/foto14.gif); background-repeat: no-repeat }

Прокрутка фонового рисунка

Атрибут background-attachment определяет, определяет будет ли фоновый рисунок прокручиваться вместе с документом. Он может принимать следующие значения:

  • scroll —фоновый рисунок прокручивается вместе с содержимым страницы (по умолчанию);
  • body { background-image: url (images/foto14.gif); background-repeat: no-repeat; background-attachment:scroll }

  • fixed — фоновый рисунок не прокручивается;
  • body { background-image: url (images/foto14.gif); background-repeat: no-repeat; background-attachment: fixed}

Положение фонового рисунка

Атрибут background-position задает начальное положение фонового рисунка. В качестве значений атрибута задаются координаты в абсолютных единицах или процентах. Координаты указываются через пробел:

body { background-image: url(images/foto14.gif); background-repeat: no-repeat; background-attachment:scroll; background-position: 50% 50% }

Списки

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

Вид маркера списка

Атрибут list-style-type задает вид маркера списка. Он может принимать следующие значения:

  • disk —выводит значки в форме кружков с заливкой;
  • >UL { list-style-type: disk }

  • circle — выводит значки в форме кружков без заливки;
  • UL { list-style-type: circle }

  • square — выводит значки в форме квадрата с заливкой;
  • UL { list-style-type: square }

  • decimal — нумерует строки арабскими цифрами;
  • ОL { list-style-type: decimal }

  • lower-roman — нумерует строки малыми римскими цыфрами;
  • ОL { list-style-type: lower-roman }

  • upper-roman — нумерует строки большими римскими цыфрами;
  • ОL { list-style-type: upper-roman }

  • lower-alpha — нумерует строки малыми латинскими буквами;
  • ОL { list-style-type: lower-alpha }

  • upper-alpha — нумерует строки большими латинскими буквами;
  • ОL { list-style-type: upper-alpha }

  • none — никак не помечает позиции списка;
  • ОL { list-style-type: none }

Изображение в качестве маркера списка

Атрибут list-style-image задает URL-адрес изображения, которое будет использовано в качестве маркера списка.

Относительные адреса указываются относительно расположения таблиц стилей, а не HTML-документа.

OL { list-style-image: url (foto.gif) }

Компактное отображение списка

Атрибут list-style-position позволяет задать более компактное отображение списка. Может принимать следующие значения:

  • outside —по умолчанию. Маркер отображается отдельно от текста;
  • OL { list-style-position: outside }

  • inside —более компактное отображение списка. Маркер входит в состав текста;
  • OL { list-style-position: inside }