Тема 4. Управление элементом
Термин «элемент» относится к различным частям HTML-документа, которые определяются с помощью тегов-контейнеров. Например, <р>Книга самурая</р> представляет собой HTML-элемент. Выражение <div><p><b> Книга самурая <img scr="samuray.gif"></b></p></ div> также является HTML-элементом.
В первом примере элемент создан с помощью одного тега. Во втором он представляет собой набор вложенных тегов, каждый из которых, в свою очередь, является отдельным элементом. Вложенные теги называются тегами-потомками по отношению к тем тегам, внутри которых они находятся. Последние называются тегами-родителями.
Составляющие элемента
У HTML-элемента есть четыре стороны: левая, правая, верхняя и нижняя. Они являются составляющими элемента, и к ним можно применять CSS-свойства. У каждой стороны элемента есть следующие свойства:
-
ширина и высота (width, height) - длины сторон элемента. Ширина относится к верхней и нижней части, а высота - к левой и правой стороне. Длина параллельных сторон (левая/правая и верхняя/нижняя) одинакова. Если вы не определите ширину и высоту элемента, это сделает браузер;
-
поле (margin) - пространство между рамкой и элементом и другими элементами окна;
-
граница (border) - линия, очерченная вокруг элемента. Рамка остается невидимой до тех пор, пока не определен ее цвет, ширина и стиль, например сплошная или пунктирная линия;
-
отступ (padding) представляет собой пространство между рамкой и содержимым элемента;
В центре элемента находится его содержимое (content). К этой области применяются все остальные CSS-свойства (шрифт, текст, цвет, фон и списки). Заметьте, что свойство «фон» относится и к заполненной части элемента. Содержимое включает в себя текст, списки, формы и изображения.
DISPLAY. Изменение внешнего вида элемента
Все элементы можно классифицировать в соответствии с их внешним видом - строчные, блоки или замещенные. По умолчанию каждый тег имеет стиль, который определяет, как он будет выглядеть на фоне других тегов.
Можно использовать атрибут display, чтобы указать, должен ли элемент включать разрывы строк выше и ниже (блок), должен ли он включаться в одну строку с другими элементами (строчный), считаться частью списка или не отображаться вовсе.
Табл. 4.1. Значения свойства display
-
Аргумент
Описание
IE6
IE7
IE8
IE9
O10
O11
Fx3
Fx4
block
Преобразует элемент в блочный что, заставляет вести его как блоки - происходит перенос строк в начале и в конце содержимого.
Да
Да
Да
Да
Да
Да
Да
Да
inline
Преобразует элемент в строчный. Аргумент inline отменяет перенос строк в начале и в конце содержимого.
Да
Да
Да
Да
Да
Да
Да
Да
inline-block
Преобразует элемент в блочный, который обтекается другими элементами веб-страницы подобно строчному элементу. Внутренне содержимое форматируется как блочный элемент.
Да
Да
Да
Да
Да
Да
Да
Да
inline-table
Преобразует элемент в таблицу как при использовании тега <TABLE>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами.
Нет
Нет
Да
Да
Да
Да
Да
Да
list-item
Элемент выводится как блочный и добавляется маркер списка.
Да
Да
Да
Да
Да
Да
Да
Да
none
Временно удаляет элемент из документа. Веб-страница формируется так, словно элемента и не было.
Да
Да
Да
Да
Да
Да
Да
Да
table
Преобразует элемент в таблицу
Нет
Нет
Да
Да
Да
Да
Да
Да
table-caption
Преобразует элемент в заголовок таблицы.
Нет
Нет
Да
Да
Да
Да
Да
Да
table-cell
Преобразует элемент в ячейку таблицы.
Нет
Нет
Да
Да
Да
Да
Да
Да
table-column
Преобразует элемент в колонку таблицы, словно был добавлен тег <COL>.
Нет
Нет
Да
Да
Да
Да
Да
Да
table-column-group
Преобразует элемент в группу одной или более колонок таблицы, как при использовании тега <COLGROUP>.
Нет
Нет
Да
Да
Да
Да
Да
Да
table-footer-group
Преобразует элемент в одну или несколько строк ячеек, которые отображаются в самом низу таблицы.
<TFOOT>.
Нет
Нет
Да
Да
Да
Да
Да
Да
table-header-group
Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. <THEAD>.
Нет
Нет
Да
Да
Да
Да
Да
Да
table-row
Преобразует элемент в строку таблицы.
Нет
Нет
Да
Да
Да
Да
Да
Да
table-row-group
Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <TBODY>.
Нет
Нет
Да
Да
Да
Да
Да
Да
WIDTH. Ширина элемента
Устанавливает ширину блочных или заменяемых. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
В качестве значений принимаются любые единицы длины, принятые в CSS.
Браузеры неодинаково работают с шириной, результат отображения зависит от используемого DOCTYPE. В табл. 4.2 приведены возможные варианты DOCTYPE и получаемая ширина.
-
DOCTYPE
Internet Explorer
Opera 10+, Firefox, Chrome, Safari
Opera 9
Не указан
«Переходный»
W3C//DTD HTML 4.01 Transitional//EN"
Если содержимое превышает заданную ширину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width.
Во всех случаях браузер действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border.
Содержимое блока, если не помещается в заданные размеры, отображается поверх блока.
Ширина равна значению width.
Содержимое блока, если не помещается в заданные размеры, отображается поверх.
«Строгий»
W3C//DTD HTML 4.01//EN"
Ширина формируется путем сложения значений width, padding, margin и border.
Содержимое блока, если не помещается в заданные размеры, отображается поверх.
Ширина равна значению width плюс padding, margin, и border.
Содержимое блока, если не помещается в заданные размеры, отображается поверх.
XHTML
W3C//DTD XHTML 1.0 Strict//EN"
max-width и min-width
Устанавливает максимальную и минимальную ширину элемента.
В качестве значений принимаются любые единицы длины, принятые в CSS.
! Не поддерживается IE6.
HEIGHT. Высота элемента.
Устанавливает высоту блочных элементов. Высота не включает толщину границ вокруг элемента, значение отступов и полей.
Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Чтобы этого не произошло, добавьте overflow:auto к стилю элемента.
В качестве значений принимаются любые единицы длины, принятые в CSS.
max-height и min-height
Устанавливает максимальную и минимальную высоту элемента.
В качестве значений принимаются любые единицы длины, принятые в CSS.
! Не поддерживается IE6.
BOX-SIZING. Задание высоты и ширины блока.
Применяется для изменения алгоритма расчета ширины и высоты элемента, чтобы свойства width и height задавали размеры не контента, а размера блока.
-
content-box
Свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
border-box
Свойства width и height включают в себя значения полей и границ, но не отступов (margin).
width: 300px;
padding: 20px;
margin-top: 20px;
box-sizing: border-box;
|
! |
Safari и Chrome используют нестандартное свойство -webkit-box-sizing.
MARGIN. Отступ элемента
С помощью свойства margin определяется отступ между элементом и соседними элементами в окне. Для этого необходимо указать от одной до четырех величин, которые соответствуют всем сторонам элемента одновременно (парам «левая/правая» и «верхняя/ нижняя») или каждой стороне в отдельности.
Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
Отрицательные поля можно использовать для получения интересных результатов, например перекрывания частей текста. Однако этот метод не всегда хорош, так как различные браузеры работают с ним по-разному.
Чтобы получить эффект перекрывания текста, лучше всего воспользоваться CSS-позиционированием.
Для задания отступа одинакового для всех сторон используется следующая запись:
margin:10px;
Для задания разного отступа для каждой из сторон используется следующая запись:
margin-top:10px;
margin-right:15px;
margin-bottom:20px;
margin-left:25px;
Так же возможны варианты сокращенной формы записи.
Установка отступов от верхнего, правого, нижнего и левого края:
margin: 10px 15px 20px 25px;
Задает значение отступа от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
margin: 10px 20px 25px;
Установка отступов одновременно от верхнего и нижнего края, и левого и правого:
margin: 10px 20px;
|
! |
PADDING. Поле элемента
Может показаться, что внутреннее поле (padding) и определение отступов приводят к одному и тому же результату - появляется свободное пространство вокруг содержимого элемента. Разница же заключается в том, что внутреннее поле располагается между содержимым элемента и границей, а не между различными элементами на экране.
Для задания поля одинакового для всех сторон используется следующая запись:
padding:10px;
Для задания разного поля для каждой из сторон используется следующая запись:
padding-top:10px;
padding-right:15px;
padding-bottom:20px;
padding-left:25px;
Так же возможны варианты сокращенной формы записи.
Установка поля от верхнего, правого, нижнего и левого края:
padding: 10px 15px 20px 25px;
Задает значение поля от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
padding: 10px 20px 25px;
Установка поля одновременно от верхнего и нижнего края, и левого и правого:
padding: 10px 20px;
BORDER. Граница элемента
С помощью свойства border можно одновременно определить все атрибуты границы для четырех сторон элемента. Свойство border используется для установки ширины, стиля и/или цвета рамки. Допустимо также задать границу для каждой стороны в отдельности.
BORDER-WIDTH. Установка толщины границы.
Для установки толщины границы используется свойство border-width. Величина толщины границы можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах, а так же с помощью ключевых слов: thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов).
Для задания толщины границы одинаковой для всех сторон используется следующая запись:
border-width:10px;
Для задания толщины границы разной для всех сторон используется следующая запись:
border-top-width:10px;
border-right-width:15px;
border-bottom-width:20px;
border-left-width:25px;
Так же возможны варианты сокращенной формы записи.
Установка толщины границы для верхнего, правого, нижнего и левого края:
border-width: 10px 15px 20px 25px;
Задает значение толщины границы для верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
border-width: 10px 20px 25px;
Установка толщины границы для верхнего и нижнего края, и левого и правого:
border-width: 10px 20px;
BORDER-COLOR. Установка цвета границы.
Для установки цвета границы используется свойство border-color. Цвет границы можно задавать тремя способами:
-
С помощью ключевого слова
-
С помощью шестнадцатеричного значения
-
С RGB значения - красной, зеленой и синей составляющей в десятичном исчислении
Для задания цвета границы одинаковой для всех сторон используется следующая запись:
border-color:red;
Для задания толщины границы разной для всех сторон используется следующая запись:
border-top-color: red;
border-right-color:#00ff00;
border-bottom-color: rgb(100%, 0%, 0%);
border-left-color: rgb(102,102,102);
Так же возможны варианты сокращенной формы записи.
Установка цвета границы для верхнего, правого, нижнего и левого края:
border-color: red #00ff00 rgb(100%, 0%, 0%) rgb(102,102,102);
Задает значение цвета границы для верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
border-color: red #00ff00 rgb(100%, 0%, 0%);
Установка цвета границы для верхнего и нижнего края, и левого и правого:
border-color: red #00ff00;
BORDER-STYLE. Cтиль границы.
Д
ля
установки стиля границы используется
свойство border-style.
Стиль границы можно задать следующими ключевыми словами: none, dotted, dashed, solid, double, groove, ridge, inset, outset.
Для задания стиля границы одинаковой для всех сторон используется следующая запись:
border-style: solid;
Для задания толщины границы разной для всех сторон используется следующая запись:
border-top-style: solid;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: dotted;
Так же возможны варианты сокращенной формы записи.
Установка стиля границы для верхнего, правого, нижнего и левого края:
border-style: solid double dashed dotted;
Задает значение стиля границы для верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
border-style: solid double dashed;
Установка стиля границы для верхнего и нижнего края, и левого и правого:
border-style: solid double;
BORDER–RADIUS. Скругление углов элемента.
Устанавливает радиус скругления углов элемента.
В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.
Для задания скругления углов элемента одинаковых для всех сторон используется следующая запись:
border-radius: 10px;
Так же для задания скругления углов элемента можно использовать следующие записи:
border-bottom-left-radius:10px; - для левого нижнего угла элемента.
border-bottom-right-radius:10px; - для правого нижнего угла элемента.
border-top-left-radius: 10%; - для правого нижнего угла элемента.
border-top-right-radius: 10cm; - для правого верхнего угла элемента.
Установка скругления углов элемента для верхнего, правого, нижнего и левого края:
border-radius: 10px 15px 20px 25px;
Задает значение скругления углов элемента для верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
border-radius: 10px 20px/15px 25px;
Установка скругления углов элемента для верхнего и нижнего края, и левого и правого:
border-radius: 10px/20px 20px;
В случае задания двух параметров через слэш (/), то первый задает радиус по горизонтали, а второй по вертикали.
BORDER. Общая укороченная форма записи.
Укороченная запись отдельно для каждой границы элемента:
border-top: 2px dotted green;
border-right: 4em solid #00ff00;
border-bottom: medium dashed rgb(100%, 0%, 0%);
border-left: 4cm double rgb(102,102,102);
Укороченная запись для всех границ элемента одновременно:
border: 1px solid red;
|
! |
Не поддерживается Opera 9.6 и 10.
Не поддерживается Firefox 2, 3 и 3.6.
Firefox использует нестандартное свойство -moz-border-radius.
Safari и Chrome использует нестандартное свойство -webkit-border-radius.
OUTLINE. Установка границ
Outline одновременно устанавливает цвет, стиль и толщину внешней границы на всех четырех сторонах элемента. В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину. Обладает следующими свойствами:
-
outline-color - задает цвет линии в любом допустимом для CSS формате.
-
outline-style - стиль линии.
-
outline-width - толщина границы.
! Не поддерживается IE6 и IE7.
BACKGROUND. Настройка фона
CSS позволяет вам задавать цвет фона и графики для любого отдельного элемента на странице, что дает вам намного больше возможностей при дизайне Web-страниц.
Cвойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.
BACKGROUND-COLOR. Цвет фона.
Для установки цвета фона используется свойство background-color. Цвет фона можно задавать тремя способами:
-
С помощью ключевого слова
-
С помощью шестнадцатеричного значения
-
С RGB значения - красной, зеленой и синей составляющей в десятичном исчислении
Для задания цвета границы одинаковой для всех сторон используется следующая запись:
background-color: red;
background-color:#ff0000;
background-color: rgb(100%, 0%, 0%);
BACKGROUND-IMAGE. Установка фонового изображения.
Для установки фонового изображения используется свойство background-image.
background-image: url('images/bg.gif');
background-image: none;
BACKGROUND-POSITION. Установка начального положения фонового изображения.
Задает начальное положение фонового изображения, установленного с помощью свойства background-image.
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали.
background-position: left bottom;
BACKGROUND-REPEAT. Повторяемость фона.
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
-
repeat. Браузер размножит графическое изображение, заполнив весь фон элемента;
-
repeat-x. Изображение повторяется вдоль горизонтальной линии, исходящей из вершины элемента (ось X);
-
repeat-y. Изображение дублируется вдоль вертикальной линии, проходящей по левой стороне элемента (ось Y);
-
no-repeat. Изображение появится только один раз.
background-repeat: repeat-y;
BACKGROUND-ATTACHMENT. Прокрутка фона.
Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента или нет.
fixed. Браузер не будет перемещать фон вместе с остальными элементами;
scroll. Фон передвинется вместе с элементом.
background-attachment: fixed;
! В IE6 только для тега BODY, HTML и textarea.
BACKGROUND-CLIP. Фон по границам элемента.
Определяет, как цвет фона или фоновая картинка выводиться под границами. Эффект заметен при пунктирных или прозрачных границах.
-
padding-box. Фон отображается внутри границ.
-
border-box. Фон выводится под границами.
-
content-box. Фон отображается только внутри контента.
background-clip: content-box;
! Не работает в IE 6,8 Oper 9,10 Firefox 2, 3, 3.6.
BACKGROUND-SIZE. Масштабируемость фонового изображения.
Масштабирует фоновое изображение согласно заданным размерам.
-
значение
Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
проценты
Задает размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.
! Не работает в IE 6,8 Opera 9,10 Firefox 2, 3, 3.6.
BACKGROUND. Общая укороченная форма записи.
background: #fc0 url('images/hand.png') repeat-y fixed bottom right;
BOX-SHADOW. Тень элемента.
Добавляет тень к элементу. Если для элемента задается радиус скругления, тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.
-
none
Отменяет добавление тени.
inset
Тень выводится внутри элемента. Необязательный параметр.
сдвиг по x
Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y
Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
размытие
Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение
Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет
Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.
box-shadow: 0 0 5px black;
|
! |
Не поддерживается Opera 9.6 и 10.
Не поддерживается Firefox 2, 3 и 3.6.
Firefox использует нестандартное свойство -moz-box-shadow.
Safari и Chrome использует нестандартное свойство -webkit-box-shadow.
FLOAT. Выравниваие элемента.
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
-
left
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
right
Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
none
Обтекание элемента не задается.
float: right;
! В IE6 добавляется отступ 3px в направлении, заданном значением float.
CLEAR. Запрет обтекания.
Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
-
none
Отменяет действие свойства clear.
both
Отменяет обтекание элемента одновременно с правого и левого края.
right
Отменяет обтекание с правой стороны элемента.
left
Отменяет обтекание с левого края элемента.
|
! |
В браузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано float со значением, не совпадающим с clear.
Задание 4.1 Создание элемента inline
Создайте html файл добавьте в него несколько параграфов. Добавьте на страницу следующие стили:
<style type="text/css">
p.noBreak
{
font-weight: bold; display: inline;
}
</style>
Задание 4.2 Создание элемента block.
Добавьте в файл несколько ссылок. Добавьте на страницу следующие стили:
<style type="text/css">
a:link.menuLinks
{
font-size: 24px; margin: 10px; display: block;
}
</style>
Задание 4.3 Создание элемента none.
Добавьте на страницу следующий стиль и примените его к рисунку:
<style type="text/css">
img.noShow
{
display: none;
}
</style>
Задание 4.4 Создание элемента list-item.
Добавьте в файл несколько параграфов. Добавьте на страницу следующие стили:
<style type="text/css">
.list
{
display: list-item;
}
</style>
Задание 4.5 Определение ширины и высоты элемента.
Добавьте в файл текстовую область и рисунок. Добавьте на страницу следующие стили:
<style type="text/css">
textarea
{
width: 225px;
height: 100px;
}
img
{
float: left;
width: 5cm;
height: 8cm;
}
.copy
{
float: left;
width: 225px;
height: 100px;
}
</style>
Задание 4.6 Определение поля элемента.
Добавьте в файл текстовую область и рисунок. Добавьте на страницу следующие стили:
<style type="text/css">
p.paragraphtwo
{
margin: 5em;
}
h2
{
margin: 1em;
}
p.copy
{
margin-top: 5em;
margin-bottom: 10%;
margin-left: 8em;
margin-right: 200px;
}
</style>
Задание 4.7 Определение внутреннего отступа элемента.
Добавьте в файл текстовую область и рисунок. Добавьте на страницу следующие стили:
<style type="text/css">
p
{
padding: 10px 1cm 10px 5em; border: dashed silver 1рх;
}
img
{
padding-top: 25px;
}
</style>
Задание 4.8 Определение рамки элемента.
Добавьте в файл параграф и рисунок. Добавьте на страницу следующие стили:
<style type="text/css">
p
{
width: 230px; border: 20px double #990000; padding: 5px;
}
.img
{
width: 230px;
border-top: 1mm dotted #990000;
border-bottom: 3px dashed #990000;
border-left: 3pt solid #990000;
border-right: 2pc inset #990000;
}
</style>
Задание 4.9 Настройка фона.
Добавьте в файл заголовок и параграф. Создайте файл h3.gif высотой 2px и шириной 15px и фоновый рисунок bg.gif.
Добавьте на страницу следующие стили:
<style type="text/css">
body
{
background: white; background-image: url(bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}
h3
{
background:#999999 url(h3.gif) ;
background-repeat: repeat-y;
background-position: left top;
color: white;
padding: 20px;
width: 60%;
}
p
{
width: 60%;
}
</style>
Задание 4.10 Расширяемые строки
<body>
<ul class="register">
<li class="reg">Не зарегестрированы? <a href="/register/">Регестрируйтесь</a> сейчас!</li>
<li class="find"> <a href="/find/">Поиск</a></li>
</ul>
<div class="message">
<p>
<strong>Спецальное предложение недели:
</strong>Все за 100 рублей. Только эту неделю!
<a href="/special/"> СМОТРЕТЬ БОЛЬШЕ</a>
</p>
</div>
<body>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size: small;
margin: 0;
}
.register
{
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #BDDB62;
background-image:url(../images/reg_bottom.gif);
background-repeat:no-repeat;
background-position:bottom left;
color: #690;
}
.register a
{
text-decoration: none;
color: #360;
}
.reg
{
float:left;
margin: 0;
padding: 8px 14px;
}
.find
{
float:right;
margin: 0;
padding: 8px 14px;
background-image:url(../images/img_glass.gif);
background-repeat:no-repeat;
background-position: 0 50%;
}
.message
{
clear: both;
text-align: center;
background: #92B91C;
background-image: url(../images/mess_bottom.gif);
background-repeat:no-repeat;
background-position:top left;
font-weight:bold;
font-size: 110%;
color: #fff;
}
.message p
{
margin: 0;
padding: 8px 14px;
background-image:url(../images/reg_bottom.gif);
background-repeat:no-repeat;
background-position:bottom left;
}
.message strong
{
text-transform:uppercase;
}
.message a
{
margin: 0 0 0 6px;
padding: 2px 15px;
text-decoration: none;
font-weight: normal;
color: #fff;
background-image:url(../images/arrow.gif);
background-repeat:no-repeat;
background-position: 0 50%;
}
</style>