... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Форматирование блоков. Границы (стр. 1)

 

 

Блоки в HTML и CSS ||  Поля ||  Границы ||  Отступы ||  Отступы или поля?


Границы блоков, так же как отступы и поля, делятся на четыре сегмента: верхний, правый, нижний и левый. Каждый отдельный сегмент границы блока может иметь свои характеристики: цвет, толщину, тип линий. Для задания характеристик могут использоваться отдельные свойства или стенографические свойства, позволяющие записывать правила в более краткой форме.

Свойства границ не являются наследуемыми.

Свойства border-top-width, border-right-width, border-bottom-width, border-left-width

Данные свойства определяют толщину границ блоков для верхнего, правого, нижнего и левого сегментов соответственно. Значения можно задать при помощи таких ключевых слов:
  • thin - тонкая граница;
  • medium - граница средней толщины;
  • thick - толстая граница.

Какой толщины будет фаница, зависит от браузера, но при этом обязательно выполнение следующего соотношения: thin - medium - thick. Эти значения не должны изменяться на протяжении всего документа. По умолчанию используется ключевое слово medium.

Толщину границы можно указать и в произвольных единицах измерения длины: пикселях, пунктах, сантиметрах, миллиметрах и т.д. Недопустимо задание величин в процентах, а также отрицательных значений.

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

Р { border-top-width: lpx; border-right-width: medium; border-bottom-width lpx; border-left-width: thin; }

Это правило задает только толщину границы, но не определяет ее цвет и тип линии.

Свойство border-width

Это свойство стенографического типа задает значения свойств border-top-width, border-right-width, border-bottom-width, border-left-width. Свойство border-width может имееть одно, два, три или четыре значения.

Если задано только одно значение, это означает, что толщина всех сегментов границы вокруг блока одинакова:

P { border-width: 1px }

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



DIV { border-width: thin mediun }

В этом примере для контейнеров DIV устанавливаются тонкие (thin) сегменты границы сверху и снизу контейнера и средние по толщине (mediun) слева и справа.

Если задано три значения, то первое применяется к толщине верхнего сегмента границы, второе - левого и правого, а третье - нижнего сегмента.

H1 { border-width: 0px lpx 2px }

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

P ( border-top-width: 1px; border-right-width: medium; border-bottom-width 2px; border-left-width: thin }
будет эквивалентна правилу:
P ( border-width: lpx medium 2px thin }


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

 

Страница: - 1 - | - 2 - | - 3 -

 

Блоки в HTML и CSS ||  Поля ||  Границы ||  Отступы ||  Отступы или поля?

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены