Воскресенье, 17.12.2017, 07:30
Приветствую Вас Гость | rss
Меню сайта
Форма входа

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Урок 11: Рамки


Рамки имеют многообразное применение, например, как декоративный элемент или для отделения двух объектов. CSS предоставляет бесчисленное множество вариантов использования рамок.

  •      border-width
  •      border-color
  •      border-style
  •      Примеры определения рамок
  •      border

Толщина рамки [border-width]

Толщина рамки определяется свойством border-width, которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:


толщина рамки


Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .


Типы рамок [border-style]

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Google Chrome. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

типы рамок


Примеры определения рамок

Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для <h1>, <h2>, <ul> и <p>. Результат, может быть, не производит впечатления, но он демонстрирует некоторые возможности:

h1{
border-width:thick;
border-style: dotted;
border-color: gold;
}


h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}


ul {
border-width: thin;
border-style: solid;
border-color: orange;
}



виды рамок

Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:

h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}




цвет рамки


Сокращённая запись [border]

Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример:

p {
border-width: 1px;
border-style: solid;
border-color: blue;
}


можно объединить в:

p {
border: 1px solid blue;


Поиск
Календарь
«  Декабрь 2017  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей

rss
Яндекс.Метрика Каталог@Mail.ru - каталог ресурсов интернет