Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения

CSS рамки

Рамка представляет собой обычную линию, которая отображается вокруг стилизуемого элемента. Но совсем не обязательно применять рамку, окружающую элемент со всех сторон. Можно добавить ее только с требуемой строны элемента. Например, если добавить рамку только с нижней строны блочного элемента, то она будет производить тот же эффект, что и элемент <hr> (горизонтальная линия), выступая в качестве разделителя.

Каждая рамка имеет три свойства, которыми мы можем управлять с помощью CSS: ширина, стиль и цвет, рассмотрим с помощью каких свойств можно их задавать и изменять:

Вместо указания всех трех свойств, можно указать всего одно - свойство border, которое позволяет одновременно указать ширину, стиль и цвет для рамки:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.one {
        border-style: solid;
        border-width: 5px;
      }
      p.two {
        border-style: solid;
        border-width: medium;
		border-color: red;
      }
      p.three {
        border: 3px dashed #ffffff;
        background-color: #0000FF;
		color: #ffffff;
      }
    </style>
  </head>

  <body>
    <p class="one">Первый абзац.</p>
    <p class="two">Второй абзац.</p>
    <p class="three">Третий абзац.</p>
  </body>
</html>
Попробовать »

Для управления рамкой отдельно с каждой стороны элемента, используются соответствующие свойства:

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

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь