УРОКИ CSS для начинающих. Базовый курс.


Урок 10. Рамки в CSS

Эти свойства устанавливают рамки элемента. Обратите внимание: речь идёт не только о рамках таблиц, но вообще о рамках любых элементов страницы: заголовков, участков текста и т. д.

Каждый элемент имеет четыре стороны рамки, для которых устанавливаются толщина, цвет и стиль.

border-top-width: thin | medium | thick | [толщина]

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

border-top-width: 1px;

Как вы догадались, толщина обычно указывается в пикселях (px).

Идём дальше.

border-right-width: thin | medium | thick | [толщина]

Задает толщину правой стороны рамки элемента. Эквивалентно установке толщины верхней стороны рамки border-top-width.

border-bottom-width: thin | medium | thick | [толщина]

Определяет толщину нижней стороны рамки элемента . Эквивалентно установке толщины верхней стороны рамки border-top-width.

border-left-width: thin | medium | thick | [толщина]

Задает толщину левой стороны рамки элемента. Эквивалентно установке толщины верхней стороны рамки border-top-width.

Вышеприведенные свойства стилей применяют, когда хотят задать отдельные стили для каждой рамки. Если же толщина всех рамок одинакова, то применяют общее свойство:

border-width: thin | medium | thick | [толщина]

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

  1. Одно значение: используется для установки толщины всех четырех сторон;
  2. Два значения: толщина верхней и нижней сторон устанавливаются по первому значению, правое и левое - по второму;
  3. Три  значения:   толщина  верхней  стороны устанавливается  по  первому значению, правого и левого по второму, а нижнего по третьему;
  4. Четыре значения: соответственно толщина верхней, правой, нижней и левой сторон рамки.

Свойства цвета.

border-color: [цвет] | transparent

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

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Определяет стиль рисования рамки. Возможны следующие варианты:

none - рамка отсутствует;

hidden – то же, что и none, но при использовании в таблицах интерпретируется особым образом;

dotted - рамка из точек;

dashed - пунктирная рамка;

solid - непрерывная линия;

double - рамка из двух линий. Сумма толщины каждой линии и промежуток между ними равняется значению border-width;

groove - рамка выглядит так, как будто она вырезана в фоне;

ridge - эффект, противоположный groove - рамка выпуклая;

inset - вне таблиц создает эффект вдавленности всей прямоугольной области, ограниченной рамкой;

outset - эффект, противоположный inset - выпуклость прямоугольной области, ограниченной рамкой.

Следует отметить, что не все эти стили реализованы в ведущих браузерах. Стили dotted и dashed реализованы только в браузере Opera. Реализация последних четырех стилей зависит от конкретного браузера. Следовательно при их использовании необходимо все проверять. Большое значение в этом случае имеют параметры цвета границы, цвета фона и толщины рамки.

Пример:

H1 {border-width:  thick; border-color: #008000; border-style: solid}

Это значит, что все заголовки первого уровня на страницах сайта будут окружены непрерывной толстой рамкой зелёного цвета.

Успехов и до встречи в следующих статьях.

Важно! Те уроки по CSS, что выложены на нашем сайте - это очень далеко не всё, что следует знать по каскадным таблицам стилей. К тому же, web-технологии постоянно развиваются! Поэтому рекомендую скачать бесплатно видеоуроки по CSS, в которых вы найдёте много нового, соответствующего современным стандартам сайтостроения.

Автор: Андрей Чернобай

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

Новые статьи

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта




59 - 1 - 43