Зеленое ничто
Меню сайта

Календарь
«  Март 2006  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
2728293031

Форма входа

Поиск по дневнику

Друзья сайта

Наш опрос
Оцените эту страницу

[ Результаты · Архив опросов ]

Всего ответов: 85


» 2006 » Март » 11 » border-class
border-class

Атрибут border может быть применен к любым объектам.

border-width - задает толщину всех границ элемента.

Толщина может быть задана числовым значением (в пикселях). Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.


border-style задает тип границ элемента.


border-color задает цвет границ элемента страницы. Может принимать значение transparent для задания невидимой, но имеющей ширину границы.
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится в верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней.

Для установки рамки только на определенных сторонах элемента воспользуйтесь параметрами border-top, border-bottom, border-left, border-right:
border-style: none; - запрещает рисование границы (значение по умолчанию);
  1. border-style: dotted; - рисует точечную линию;
  2. border-style: dashed; - рисует штриховую линию;
  3. border-style: solid; - рисует сплошную линию;
  4. border-style: double; - рисует двойную сплошную линию;
  5. border-style: groove; - рисует трехмерную вдавленную границу;
  6. border-style: ridge; - рисует трехмерную выпуклую границу;
  7. border-style: inset; - рисует трехмерную "ступеньку вверх";
  8. border-style: outset; - рисует трехмерную "ступеньку вниз".

border задает все свойства границ элемента страницы в один прием. Заменяет атрибуты border-color, border-style и border-width. Значения этих атрибутов могут располагаться в любом порядке.

Синтаксис: <... style="border: border-width || border-style || color">
Вместо многоточия может быть table, blockquote, fieldset, img, p, div, textarea...


style="border: dotted red thin;"

style="border: dashed #c0c0c0 5px;"

style="border: solid green 3px;"

style="border: double #000000 5px;"

style="border: groove red medium;"

style="border: ridge #FF8000 thick;"

style="border: inset #8080FF 3px;"

style="border: outset #8080FF 3px;"

cellpadding="10" cellspacing="10">
style="border-style: solid; border-width: thick; border-top-color: #00FF00; border-right-color: #00FFFF; border-bottom-color: #FFFF00; border-left-color: #8080FF;"

Это были примеры с таблицами. Теперь рассмотрим другие возможности применения атрибута стиля border:

для IMG (картинки);
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
для BLOCKQUOTE;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
для FIELDSET;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

для P (абзаца);
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
для DIV (слоя);
для TEXTAREA

Вот вам все про бордеры. Как видите, ничего сложного, главное - соблюдать правила синтаксиса.
Поскольку это атрибут стиля, правила здесь немного отличаются от HTML.

Просмотров: 132 | Добавил: donadecasa | Дата:
Всего комментариев: 0
Имя *:
Email *:
Код *: