Как убрать рамки css

Как убрать рамки css

Практически на каждом на сайте используется свойство, которое создаёт вокруг элемента рамку. Она нужна либо для кнопок, либо для блоков с текстом. Для создания рамки у элемента в CSS есть два свойства: border и outline. Рассмотрим их.

border

Данное свойство нужно для установки рамки вокруг элемента, указывает на его границу в web-документе, ширина рамки учитывается при расположении элемента. Имеет 3 значения — цвет, толщину и тип рамки.

Синтаксис у свойства border следующий:

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

Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%).
Цвет можно задать либо в формате RGB (Red Green Blue), либо в HTML HEX кода.

Ниже представлены ТИПЫ линий с их названиями:


Как установить рамки у элемента? Делаем следующим образом:

Если Вы хотите установить одну-две-три рамки с определённой стороны, то указываем так:

border-top — рамка сверху;
border-bottom — рамка снизу;
border-left — рамка слева;
border-right — рамка справа;

Если Вы хотите убрать рамки элемента в CSS, то пропишите в свойстве border — none

outline

Outline — это свойство, которое нужно для установки внешней рамки элемента.

Есть два отличия от border:
Во-первых, линия, задаваемая в outline НЕ будет влиять на положение самого блока, его ширину и высоту.
Во-вторых, возможность установки рамки с определённой стороны отсутствует.
Синтаксис тот же, что и border.

Для outline, как и для border, убрать рамки можно прописав none:

Думаю, все знают, что это такое. Некоторые браузеры, в частности, Фаерфокс и Интернет Эксплорер 8 рисуют однопиксельную пунктирную рамку вокруг ссылок и внутри кнопок, когда пользователь нажимает на них. Если сайт состоит из голого html, скорее всего, дискомфорта они не доставят. Но если все ссылки как-то стилизованны, вам (или вашему дизайнеру), скорее всего захочется избавиться от этого. Тем более, что эта рамка может отобразиться в неподходящем месте:

Читайте также:  Выход следующего сезона игра престолов

Эта рамка есть ни что иное, как css-свойство outline, поэтому самый первый и чаще всего рекомендуемый способ, позволяющий отключить эту рамку у ссылок — указать нехитрое css-правило:
Или даже такое:

Но, как можно догадаться, просто взять и убрать её нельзя, потому что эта рамка обозначает фокус на активном элементе. Когда вы работаете мышкой, эта функция может показаться совершенно бесполезной — и так понятно, что активный элемент тот, что под курсором. Но при навигации с клавиатуры, эта рамка позволяет узнать, какой элемент сейчас имеет фокус. При применении указанных выше правил в Фаерфоксе и ие8, ссылки по-прежнему будут участвовать в обходе по клавише tab, но понять, какая ссылка выделена, будет невозможно.

В других системах реализованы другие модели поведения. Самый первый подход, который бы хотелось отметить — это стандартное поведение виндовс ХП и выше — по умолчанию фокус на контроллах не рисуется. Но, при первом нажатии клавиши tab фокус появляется и уже не пропадает. Такое же поведение свойственно браузерам Интернет Эксплорер 6 и 7. Другой подход у Оперы. Она не считает, что по ссылкам нужно перемещаться с помощью клавиши tab, переводя фокус только на контроллы форм. А по ссылкам позволяя делать навигацию при помощи других механизмов — шифт + стрелки или контрол + стрелки. При таком подходе css-свойство outline для ссылок не имеет значения.

Понятно, что добиться поведения Оперы врядли возможно, да и не нужно, оно будет непривычно пользователям этих браузеров. А вот попробовать эмулировать поведение Интернет Эксплорера 6 и 7 можно. Для этого можно убирать рамку не просто на фокус, а непосредственно во время нажатия. Как известно, помимо псевдокласса :focus существует еще один — :active. Он отвечает за состояние ссылки между событиями mousedown и mouseup. Если повесить на него то же outline: none, то рамка не будет появляться в момент нажатия с помощью мыши. Зато будет появляться сразу после отпускания, потому что ссылка будет в фокусе. Это можно решить, убрав рамку и для наведенного элемента, т.е. код будет таким:

Читайте также:  Ветчина с хорошим составом

Этот способ советует применять Patrick H. Lauke, веб-евангелист Оперы софтвер (Пепелсбей, привет!). Но это все равно оставит два неприятных момента: фокус по прежнему никуда не денется, и после отвода мышки снова появится. Поэтому, если ссылка обрабатывается джаваскриптом, а не ведет на другую страницу, следует сбрасывать с нее фокус после нажатия. Второй момент — при навигации с клавиатуры фокус будет пропадать, как не сложно догадаться, при наведении мыши.

Все сведения по поведению фокуса можно свести в одну таблицу:

Отсутствие зеленых кружочков в последнем столбце — хороший результат.

Что еще можно сделать

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

Когда мы вставляем картинку в html, то на странице она может отобразиться с рамкой:

Это связано с тем, что по умолчанию в свойствах CSS стоит значение border:

Чтобы рамки больше не было достаточно исправить значения на 0.

Есть еще один вариант почему картинка может быть с рамкой. Возможно, в атрибутах тега указан border:

В этом случае нам также надо поправить его на ноль.

Если картинка является ссылкой (такое часто бывает), то в этом случае надо прописать в стилях к вашему сайту:

Ссылка на основную публикацию
Как создать словарь в word
Меня интересует вот такая тема: когда печатаешь текст на компе, например, с ошибкой правописания, появляется подсказка - как правильно надо....
Как сделать кроссворд в ворде 2010
Пользоваться файлами, созданными в MS Office, можно как угодно: открыть документ Ворд онлайн, составить в Экселе квартальный отчёт или в...
Как сделать местный разрез
Основным назначением видов является определение формы внешних поверхностей предмета. Выявление на видах формы внутренних поверхностей при помощи штриховых линий не...
Как создать таблицу на компьютере
Как создать таблицу в Word? Сейчас я просто не представляю, как можно работать без такой нужной и полезной программы, как...
Adblock detector