Чтобы четко отделить содержимое одной ячейки от другой, к ячейкам добавляются
границы. За их создание отвечает параметр border
тега
, который определяет толщину рамки.
В примере 1 показано создание границы вокруг ячеек.
Пример 1. Добавление рамки к таблице
Толщина границы
Чебурашка
Крокодил Гена
Шапокляк
Рамки созданные таким образом незначительно отличаются по своему виду в разных браузерах.
Рис. 1. Рамка, полученная с помощью параметра border
Чтобы получить рамку одного вида, рекомендуется применить стилевым тегом
border
, применяя его к ячейкам таблицы (тегу
или
). Однако и здесь нас подстерегают подводные
камни. Поскольку рамка создается для каждой ячейки, то в местах соприкосновения
ячеек получается граница удвоенной толщины. Для решения указанной особенности
существует несколько путей. Самый простой — применить свойством border-collapse
со значением collapse
. В его задачу входит отслеживать
соприкосновение линий и вместо двойной границы изображать одинарную. Этот атрибут
дастаткова добавляем к тегу
, а дальше
он все сделает самостоятельно (пример 2).
Пример 2. Применение border-collapse при создании рамок таблицы
Создание рамки
0
X
X
0
0
X
X
X
0
Разница между границами таблицы при добавлении параметра border-collapse
,
а также без него представлена на рис. 2.
a
б
Рис. 2. Вид таблицы при использовании атрибута border-collapase
На рис. 2а показана рамка таблицы, используемая по умолчанию. Обратите внимание,
что внутри таблицы все линии имеют удвоенную толщину. Добавление параметра border-collapse
убирает эту особенность, и толщина всех линий становится одинаковой (рис. 2б).
Для разработки однотипных линий внутри таблицы можно пойти и другим путем. Следует
добавляем для селектора
рамку, но отменить
линию справа и снизу, задавая соответствующим атрибутам значение none
.
Тогда при состыковке ячеек их границы не будут накладываться друг с другом по
той причине, что линия будет только одна. Однако при этом методе формирования
границ нет линий снизу и справа у самой таблицы. Добавляя параметры border-right
и border-bottom
к селектору
,
получим в итоге нужную рамку (пример 3). Для однотипности следует позаботиться,
чтобы стиль, толщина и цвет границы во всех случаях совпадали.
Пример 3. Создание рамки у таблицы с помощью атрибута border
Создание рамки
0
X
X
0
0
X
X
X
0
У этого способа возможны вариации, например, для селектора
добавляем границу только справа и снизу, а у
,
наоборот, добавляем атрибут border
, но линию справа
и снизу убрать. В любом случае представленный результат будет один.
Простой и оригинальный вид таблицы можно получить, если цвет границ сделать
совпадающим с цветом фона. Но чтобы линии были видны, обязательно следует сделать
заливку фона у тега
или
.
Тогда ячейки таблицы получаются, словно рассеченные резцом между собой (пример 4).
Пример 4. Использование невидимых границ в таблице
Создание границ
0
X
X
0
0
X
X
X
0
В данном примере цвет фона web-страницы вводится через свойство background
,
добавленное к селектору BODY
. Хотя белый цвет установлен
по умолчанию, его иногда желательно задавать, чтобы пользователь не указал свой
цвет фона через настройки браузера. Такой же цвет должен быть и у линий таблицы,
в этом случае они явно не выдаются и лишь делят ячейки между собой.
Результат примера 4 показан ниже.
Рис. 3. Вид границ, совпадающих с цветом фона
Влад Мержевич
С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border
, как наиболее универсальное, а также outline
и, как ни удивительно, box-shadow
, основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.
Свойство outline
Самое простое свойство для создания рамок. Имеет те же параметры, что и border
, но существенно отличается от него некоторыми деталями:
outline
выводится вокруг элемента (border
внутри);
outline
не влияет на размеры элемента (border
добавляется к ширине и высоте элемента);
outline
можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border
можно использовать для любой стороны или всех сразу);
на outline
не действует радиус скругления, заданный свойством border-radius
(на border
действует).
Возникает вопрос - в каких случаях нужен outline
, когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border
? Ситуаций не так и много, но они встречаются:
создание сложных разноцветных рамок;
добавление рамки к элементу при наведении на него курсора мыши;
сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
для outline
можно задать расстояние от края элемента до рамки с помощью свойства outline-offset
, для создания .
Разноцветные рамки
Надо понимать, что outline
ни в коей мере не заменяет border
и вполне может существовать вместе с ним, как показано в примере 1.
Пример 1. Создание рамки
border и outline
В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).
Рис. 1. Рамка вокруг элемента
Рамка при использовании:hover
При добавлении рамки через border
происходит увеличение ширины элемента, что довольно заметно при сочетании border
и псевдокласса :hover
. Есть два способа, как это «победить». Самое простое - заменить border
на outline
, которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).
Пример 2. Рамка при наведении
outline
outline
не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод - добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width
, border
слева и border
справа. Аналогично обстоит и с высотой.
Пример 3. Рамка при наведении
border
Рамка вокруг полей формы
В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline
значение none
, как показано в примере 4.
Рис. 2. Рамка вокруг полей
Пример 4. Убираем рамку
input
Рамки через box-shadow
Хотя свойство box-shadow
предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border
или outline
. Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.
Чтобы получить рамку, первые три параметра следует задать нулевыми, они отвечают за положение тени и её размытие. Четвёртый параметр в данном случае отвечает за толщину границы, а пятый устанавливает цвет рамки. Для второй рамки четвёртый параметр равняется сумме толщин двух рамок.
В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow
.
Пример 4. Использование box-shadow
box-shadow
Результат данного примера показан на рис. 3.
Рис. 3. Рамки, созданные свойством box-shadow
21.01.06
5.9K
Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте
(Например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).
Однако, стандарт html имеет небольшое количество стандартных элементов оформления страницы, и не все элементы одинаково отображаются в разных браузерах. Каждая компания пытается разработать свой собственный html, порой уходя далеко от основной концепции html, разработанной консорциумом WWW.
Поэтому веб-мастеру приходится эксперементировать с элементами, которые являются общими для всех браузеров.
Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать информацию.
Кроме того, таблицы в html имеют атрибут "border="0" — этот атрибут со значением "0" скрывает границы таблицы т.е остаётся видно содержимое ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.
Цветная граница рамки таблицы.
Сразу отмечу, что в html, по умолчанию, встроен атрибут, который отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не подойдёт, потому что данный атрибут поддерживается только браузером Internet Explorer. В других браузерах этот элемент не работает. Но нам необходимо, чтобы страница одинаково отображалась в любом браузере. К нам на помощь приходят таблицы. Давайте сначала создадим обычную таблицу.
Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы).
Атрибут "cellspacing" служит для того, чтобы указать расстояние между двумя ячейками. В данном случае, он будет указывать расстояние между двумя таблицами.
Зальём таблицу черным цветом, используя атрибут "bgcolor" Вообще вы можете выбрать любой другой цвет, в зависимости от того, какого цвета будет ваша рамка.
С помощью этого тега указывается, откуда следует располагать информацию. В данном примере нам понадобится расположить информацию, начиная с верхнего края таблицы.
Вставляем в ячейку нашей таблицы другую таблицу.
Текст
Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон.
Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково.
Напоследок, приведу весь код, который мы создали.
Текст
Здравствуйте, сегодня мы поговорим о таком важном атрибуте в CSS как создание рамки. Рамка очень часто используется для того чтобы обрамить текст, отделить один элемент дизайна от другого и для каждого вебмастера полезно знать как задать рамку в CSS.
Задаем стиль оформления рамки в CSS.
Первым что нужно задать вам при создании рамки на своем сайте это стиль рамки для CSS. Благодаря этому вы дадите понять браузеру какой линией выводить рамку. Давайте для примера для одного заголовка просто зададим сплошную линию, как на обычных рамках. Для этого нам конечно же нужен файл стилей который вы можете создать самостоятельно и как это сделать я рассказывал уже на других статьях своего блога.
Я не буду создавать новый файл а буду использовать старый, кроме того здесь сохранились заголовки разного уровня для которых мы будем создавать рамки. Давайте зададим разные виды рамки для заголовка первого уровня и который задается тегом h1. Для этого в файл стилей прописываем такой текст: h1 {border-style:solid;} и коротко рассмотрим что мы написали. h1 это мы определили для какого элемента мы будем задавать рамку, border-style команда которая означает что для данного элемента нужно задать рамку определенного стиля ну а solid обозначает стиль отображения рамки, в данном случае это сплошная черта.
Мы можем менять стиль отображения рамки и для этого нам просто нужно задавать новые параметры и сейчас я покажу какие имеются команды и как они отображаются на сайте.
Параметры рамки:
solid или сплошная линия.
Dotted-пунктирная линия.
dashed-штрихованная линия.
double-двойная сплошная линия.
Это основные стили которые вы можете задать стиль рамки в CSS
, более подробно о всех командах вы можете узнать с спецификации по CSS.
До этого мы задавали стиль полностью для всей рамки но мы можем задать также параметр конкретно для любой из сторон и таблицы стилей дает нам такую возможность. В этом нам помогут четыре команды: border-left-style (левая линия) border-top-style (верхняя линия) border-right-style (правая линия) и border-bottom-style (нижняя линия).
Давайте теперь зададим для нашего заголовка стиль для каждой стороны свой. Напишем команду для всех четырех сторон:
Для задания рамки нам нужно использовать атрибут стиля border-width для которого мы можем задать несколько параметров: первый это задать размер рамки в пикселах или задать толщину командами thin (тонкая линия), medium (средняя линия) или thick (толстая линия). Толщину линии мы также можем задать для любой стороны рамки независимо от того какой стиль задан для остальных.
Давайте для начала изучим как задать толщину линии рамки непосредственно для всех сторон. Для этого нам просто нужно взять и задать команду border-width и определить для него размер линии. Для того чтобы задать толщину текст будет выглядеть так:
h1 {
border-style:solid;
border-width:thin;
}
Команду thin можно заменить на medium или thick или же задать толщину в пикселях обязательно указав единицу измерения, например размер в четыре пикселя-4px.
Теперь мы будем задавать параметры толщины для каждой стороны нашей рамки. Также как и с заданием стиля нам помогут параметры border-left-width (толщина левой линии), border-top-width (толщина верхней линии), border-right-width (толщина правой линии) и border-bottom-width (толщина нижней линии). Для этого мы в файл стилей добавим четыре строчки следующего содержания:
И теперь все четыре стороны нашей рамки будут иметь свою толщину.
Как задать цвет рамки в CSS.
Давайте теперь зададим цвет рамки в CSS и в этом нам поможет команды border-left-color, border-top-color, border-right-color и border-bottom-color для задания цвета для левой,верхней,правой и нижней линии рамки соответственно. Для этого мы прописываем команды и к каждой команде добавляем по параметру цвета.
И теперь посмотрим результат применения данного параметра.
Задание глобальной переменной для сокращения записи.
Теперь давайте разберем как нам можно избавиться от таких громоздких конструкций и записей. Для этого нам нужно будет задать глобальный атрибут border в который мы зададим такие параметры как толщина рамки,стиль рамки и цвет и все это поместиться не в три строчки как минимум а всего лишь в одну строчку.
Для этого мы пишем строчку:
h1 {
border:5px solid #3399FF;
}
в строчке сначала мы указываем толщину линии рамки потом пробел и указываем стиль оформления рамки и снова через пробел указываем цвет рамки. Вот и все мы сократили запись до одной строчки.
Надеюсь что благодаря данной статье вы сможете задавать рамки для всех элементов в CSS. Я постарался остановить ваше внимание на самых необходимых командах и подробно вам рассказать о том как задать рамку в CSS, задать стиль рамки в CSS и задать цвет рамки в CSS.
a
б
