Меню Закрыть

Html рамка вокруг блока

Содержание

Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.

1. Синтаксис CSS border

  • border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
  • border-style — стиль выводимой рамки. Может принимать следующие значения
  • none или hidden — отменяет границу
  • dotted — рамка из точек
  • dashed — рамка из тире
  • solid — простая линия (применяется чаще всего)
  • double — двойная рамка
  • groove — рифленая 3D граница
  • ridge , inset , outset — различные 3D эффекты рамки
  • inherit — применяется значение родительского элемента
  • border-color — цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)
  • Примечание

    Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность "толщина стиль цвет".

    С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого — создание тени. Далее рассмотрим эти методы и их различия между собой.

    Свойство outline

    Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

    • outline выводится вокруг элемента ( border внутри);
    • outline не влияет на размеры элемента ( border добавляется к ширине и высоте элемента);
    • outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах ( border можно использовать для любой стороны или всех сразу);
    • на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

    Возникает вопрос — в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

    • создание сложных разноцветных рамок;
    • добавление рамки к элементу при наведении на него курсора мыши;
    • сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
    • для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания различных дизайнерских эффектов.
    Читайте также:  Чей номер телефона 375

    Разноцветные рамки

    Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

    Пример 1. Создание рамки

    В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).

    Рис. 1. Рамка вокруг элемента

    Рамка при использовании :hover

    При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое — заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).

    Пример 2. Рамка при наведении

    outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод — добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой.

    Пример 3. Рамка при наведении

    Рамка вокруг полей формы

    В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.

    Рис. 2. Рамка вокруг полей

    Пример 4. Убираем рамку

    Рамки через box-shadow

    Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.

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

    Читайте также:  Ручной стабилизатор с камерой dji osmo

    В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow .

    Пример 4. Использование box-shadow

    Результат данного примера показан на рис. 3.

    Рис. 3. Рамки, созданные свойством box-shadow

    Здравствуйте уважаемые начинающие веб мастера.

    Рамка является одним из самых популярных вариантов оформления контента, и в этой статье мы подробно рассмотрим, как они создаются средствами html.

    Рамку можно создать для любого html элемента, будь то

    Разница между рамками блочных и встраиваемых элементов состоит в том, что у блочных рамка образуется на всю ширину блока, но её можно ограничивать.

    Рамка же встроенного создаётся непосредственно вокруг элемента, заключённого в тег.

    Для создания рамки применяется стилевое свойство border которому задаются три значения по порядку

    Толщина Вид Цвет.

    Так как руководство это практическое, то перейдём непосредственно к примерам.

    Толщина и размер рамки

    Для примера возьмём тег

    и создадим ему простую рамку толщиной 3 px

    текст текст текст текст

    Как видите — рамка заняла всё пространство, которое занимает тег.

    Так ведёт себя рамка созданная для блочных элементов, таких как

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

    текст текст текст текст

    Если задать меньшую ширину, то слова в рамке будут размещаться в несколько строк, то есть автоматически будет увеличиваться высота.

    текст текст текст текст

    Рамка для встроенных или строчных элементов, таких как , , и т.п., располагается непосредственно вокруг элемента.

    Бла-бла-бла Бла-бла-бла текст текст текст текст Бла-бла-бла Бла-бла-бла

    Можно изменить вид рамки, для этого в значении меняется её название.

    текст текст текст текст

    текст текст текст текст

    текст текст текст текст

    текст текст текст текст

    текст текст текст текст

    Для рельефной рамки нужно задавать толщину побольше, иначе она будет смотреться как сплошная.

    Не полная рамка

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

    Читайте также:  Сменить картинку на рабочем столе windows 10

    текст текст текст текст

    Выравнивание и отступы рамки

    Текст внутри рамки можно выровнять по центру или правому краю, добавив в код свойство text-align , которое принимает значения

    left — выравнивание по левому краю (по умолчанию)

    center — выравнивание по центру

    right — выравнивание по правому краю

    текст текст текст текст

    Можно задать для рамки отступы от текста.

    Для этого в код рамки вводится свойство padding , которое принимает 4 цифровых значения:

    первая цифра — отступ сверху;

    вторая цифра — отступ справа;

    третья цифра — отступ снизу;

    четвёртая цифра — отступ слева.

    Отступы задаются в любых доступных в веб единицах размеров.

    Если в свойстве padding указать одно значение, то отступы со всех сторон будут одинаковыми.

    Если указать два значения, то первая цифра укажет отступы сверху и снизу, а вторая — справа и слева.

    текст текст текст текст

    Можно задать отступ от предметов находящихся снаружи рамки.

    Для этого в код рамки добавляется свойство margin , которое так же как и padding может принимать 4 цифровых значения.

    Сделаем отступы слева, сверху и снизу

    текст текст текст текст

    Можно внутри рамки сделать фоновый цвет.

    Для этого в код рамки вводится свойство background , в значении которого указывается код цвета.

    текст текст текст текст

    Можно вместе с текстом в рамку вставить картинку. В примере .gif картинка.

    Текст текст текст

    А если задать ширину рамки ridge пикселей в 15-20, то есть в свойстве border вместо 3px задать 15px, то получится багет.

    Текст текст текст

    Так же в дизайне рамки можно использовать стилевые свойства border-radius — закругление и box-shadow — тень.

    Текст текст текст

    Текст текст текст

    Как пишутся рамки в CSS и как делается тень, читайте в статьях Рамки CSS и Как сделать тень для блока.

    Желаю творческих успехов.


    Перемена

    Вовочка папе: — Папа, а тебя била когда нибудь твоя мама ?
    — Нет, только твоя…

    Рекомендуем к прочтению

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

    Ваш адрес email не будет опубликован.