Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Границы в CSS Высота и ширина блоков

Границы в CSS

Border Border-color Border-style Border-width
Outline Outline-color Outline-style Outline-width


Толщина границы
Стиль границы
Цвет границы
От 1 до 4 значений
Внешняя граница


Внутренняя граница. Свойство border

 

Каждый элемент имеет границу. По умолчанию она невидима. Оформление для границы задается с помощью свойства border.

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

Значения вышеупомянутых свойств указывают через пробел, в любом порядке. А браузер автоматически определяет принадлежность значения свойству.

Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию. Только свойству border-style необходимо присвоить какое-либо значение кроме none, чтобы свойство border-width действовало.

Свойства border-top, border-right, border-bottom и border-left аналогичны свойству border, но позволяют применить стилевое оформление лишь к верхней, правой, нижней и левой границе элемента соответственно.

Свойства применимы ко всем элементам.

Толщина границы

Свойство border-width задает толщину границы элемента для всех его сторон или индивидуально для каждой.

Толщина границы задается в пикселях (указывается целое положительное число) или в других единицах принятых в CSS (подробнее здесь...). Также ширину границы можно указать при помощи ключевых слов thin, medium и thick, устанавливающих толщину, равную 2, 4 и 6 пикселям соответственно.

С помощью свойств border-top-width, border-right-width, border-bottom-width и border-left-width устанавливают толщину границы для каждой из соответствующих сторон элемента индивидуально.

И еще раз напомним: чтобы свойство border-width действовало, необходимо свойству border-style присвоить любое значение, кроме none.

Свойства применимы ко всем элементам.

Стиль границы

Свойство border-style устанавливает стиль границы элемента для всех его сторон или индивидуально для каждой.

Стиль задается с помощью ключевых слов none, solid, double, dashed, dotted, groove, ridge, inset и outset, которые устанавливают тип линии.

Минимальная ширина для границы в виде двойной сплошной линии (значение double) составляет 3 пикселя. Иначе она будет отображаться сплошной.

С помощью свойств border-top-style, border-right-style, border-bottom-style и border-left-style задают стиль границы для каждой из соответствующих сторон элемента индивидуально.

Свойства применимы ко всем элементам.

Цвет границы

Свойство border-color задает цвет границы элемента для всех его сторон или индивидуально для каждой.

Цвет задается одним из способов, принятых в CSS (подробнее здесь...)

С помощью свойств border-top-color, border-right-color, border-bottom-color и border-left-color устанавливают цвет границы для каждой из соответствующих сторон элемента индивидуально.

Свойства применимы ко всем элементам.

От 1 до 4 значений

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

Количество значений Результат
1 Граница элемента для всех его сторон имеет одинаковое оформление.
2 Первое значение задает оформление для верхней и нижней границы, второе для боковых границ элемента.
3 Первое значение задает оформление для верхней границы, второе для боковых, а третье значение для нижней границы элемента.
4 Значения поочередно устанавливают оформление границы для верхней, правой, нижней и левой стороны элемента.

Внешняя граница. Свойство outline

Внешняя граница в отличие от границы, задаваемой свойством border, не влияет на положение элемента.

Стилевое оформление для внешней границы задается с помощью свойства outline.

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

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

Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию. Только свойству outline-style необходимо присвоить какое-либо значение кроме none, чтобы свойство outline-width действовало.

Свойства применимы ко всем элементам.

Значения у свойств outline-width, outline-style и outline-color те же, что и у свойств border-width, border-style и border-color соответственно.

Пример

Фрагмент кода:

<p style="border-color:#0099CC; border-style:double; border-width:10px; outline:#CC0000 double 10px; border-bottom: #CC3333 solid 3px; padding:10px;">
Оформили обе границы абзаца. Для нижней внутренней границы стиль задан индивидуально.
</p>

Результат:


Оформили обе границы абзаца. Для нижней внутренней границы стиль задан индивидуально.


Поля и отступы в CSS Границы в CSS Высота и ширина блоков
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru