Рамки элементов.

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.

Синтаксис свойства border:

border: Ширина Тип Цвет;

Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%). Цвет можно задать либо в формате RGB (Red Green Blue), либо в HTML HEX кода.

Если для свойства border задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю.

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

Типы линий и их названия:


Рамки элементов.

Рассмотрим пример:

#primer { 
  border:2px solid #0085сс; /* установили линию толщиной 2 пикселя синего цвета  */
}

Чтобы установить одну-две-три рамки с определённой стороны, то можно указать так:

border-top - рамка сверху;
border-bottom - рамка снизу;
border-left - рамка слева;
border-right - рамка справа;

Чтобы убрать рамки элемента нужно прописать в свойстве border – none. Пример:

.primer2 { 
  border: none; /* у элемента с классом primer2 не будет рамки */
}

outline

Outline – это свойство, которое нужно для установки внешней рамки элемента. Есть два отличия от border:

  • линия, задаваемая в outline не будет влиять на положение самого блока, его ширину и высоту.
  • возможность установки рамки с определённой стороны отсутствует.

Синтаксис свойства:

outline: 3px solid #0085cc; /* рамка 3 пикселя пунктиром синяя*/

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: