Внешняя рамка элемента. Свойство outline


Содержание

Outline (внешняя граница)

Outline — это внешняя рамка, которая отображается снаружи обычной рамки элемента (border).

Свойство outline позволяет изменить стиль, цвет и ширину внешней границы.

Примеры

Все свойства outline — справка CSS

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
outline Все свойства внешней границы одной записью outline-color
outline-style
outline-width
inherit
2
outline-color Цвет внешней границы название-цвета
hex-код
rgb-код
invert
inherit
2
outline-style Стиль внешней границы none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-width Ширина внешней границы thin
medium
thick
ширина
inherit
2

Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!

CSS-разметка — применение outline вместо border

February 21, 2014

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

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

Во время создания разметки можно визуально обозначить местоположение всех ее частей.

Например, таким образом:

Вы можете решить, что точно так можно сделать и с помощью свойства , но в действительности это не так. Причина заключается в том, что границы ( ) нарушают разметку. А свойство не нарушает ее.

Вот что я имею ввиду: предположим, у вас есть три колонки ‘ов, которые должны располагаться внутри контейнера-родителя с шириной 960px. (Если вам не нравятся пиксели, то можете применить для этой же цели , проценты или любую другую единицу измерения).

Для всех трех ‘ов-потомков устанавливаем правила и попытаемся визуально обозначить местоположение в разметке каждого из блоков.

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

Это произошло потому, что каждый из трех блоков имеет ширину 320px; помимо этого справа и слева к каждому блоку добавлена граница толщиной в , что делает ширину блока равной, как минимум, .

Умножте это значение ширины на 3 (количество блоков-колонок) и в результате получиться общая ширина 966px, что явно больше ширины блока-родителя 960px. Результат для браузера — сместить последний блок вниз!

Именно по этой причине свойство нарушает разметку. Свойство , с другой стороны, не нарушает ее. С помощью него вокруг элементов рисуется линия; к примеру, в нашем случае все три блока со свойством разместятся друг рядом с другом внутри блока-родителя.

Не имеет значения, какой толщины вы сделаете , блоки никогда не сдвинуться и не нарушат разметку (это касается не только блока , а любого элемента страницы). Линии сделают перекрытие друг друга, как показано на рисунке ниже:

Сразу становится ясно преимущество использования при создании разметки. Если в процессе ее создания вам кажется, что что-то идет не так, вы легко можете “нарисовать” границы интересующего вас элемента, не опасаясь при этом нарушить разметку.

Другое отличие от заключается в том, что “рисуется” обязательно вокруг всего элемента, по всем четырем его сторонам.

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

По этой же причине невозможно изменять цвет, ширину или стиль какой-либо одной из сторон элемента. Если необходимо создать границу , то она будет создана таковой вокруг всех сторон элемента.

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

Если элемент также имеет , то эти поля рисуются вокруг границ ; но при этом не изменяют поля и не замещают их.

Автор статьи: Eric Meyer — “Smashing CSS Professional Techniques for Modern Layout”

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

CSS урок 10. Отступ и граница элемента CSS

Отступы в CSS

Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:

Внешние отступы

Внешние отступы в CSS задаются при помощи свойства margin , которое устанавливает величину отступа от границ текущего элемента до внутренней границы его родительского элемента.

Илон Маск рекомендует:  Что такое код imagesx

Свойство:

  • margin-bottom (нижний отступ)
  • margin-left (отступ слева)
  • margin-right (отступ справа)
  • margin-top (верхний отступ)

Значения:

Краткая запись:

margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?


Внутренние отступы

Внутренние отступы в css создаются при помощи свойства padding , которое устанавливает значение полей от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

Свойства:

  • padding-bottom (нижний отступ)
  • padding-left (отступ слева)
  • padding-right (отступ справа)
  • padding-top (верхний отступ)

Значения:

Краткая запись:

padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Граница элемента (рамка)

Граница элемента в CSS устанавливается при помощи свойства border .

border-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Пример:

border-width (ширина границы)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

border-color (цвет границы)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатиричной системе)
  • transparent (прозрачная)

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Краткая запись:

border:border-width border-style border-color; border: 1px solid #000;

Внешние границы (outline)

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

outline-color (цвет)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатеричной системе)
  • invert (инвертированный, противоположный)

outline-width (ширина)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение


outline-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Краткая запись:

outline:outline-color outline-style outline-width; outline: #0f0 solid thick;

Некоторые приемы с границей

Рамка вокруг изображения

Пример:

Результат:

Двойная рамка с использованием CSS

Пример:

Результат:

Путь осилит идущий,

И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.

Эффектные рамки для изображений

CSS Outline

Структура CSS

Контур представляет собой линию, которая рисуется вокруг элементов, за пределами границ, чтобы сделать элемент «выделиться».

CSS имеет следующие свойства структуры:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Примечание: Контур отличается от границ! В отличие от границы, контур рисуется за пределами границы элемента и может перекрывать другое содержимое. Кроме того, контур не является частью размеров элемента; Общая ширина и высота элемента не зависит от ширины контура.

Стиль контура

Свойство outline-style задает стиль структуры и может иметь одно из следующих значений:

  • dotted — Определяет пунктирную структуру
  • dashed — Определяет пунктирную структуру
  • solid — Определяет сплошной контур
  • double — Определяет двойной контур
  • groove — Определяет трехмерную контурную канавку
  • ridge — Определение трехмерного ребристого контура
  • inset — Определяет контур 3D-вставки
  • outset — Определение трехмерного контура начала
  • none — Не определяет структуру
  • hidden — Определяет скрытый контур

В следующем примере показаны различные значения outline-style :

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Пример

Примечание: Никакие другие свойства структуры не будут иметь никакого эффекта, если не задано свойство outline-style !

Цвет контура

Свойство outline-color используется для задания цвета контура.

Цвет может быть установлен:

  • name — Укажите имя цвета, например «red»
  • RGB — Укажите значение RGB, например «rgb(255,0,0)»
  • Hex — Укажите шестнадцатеричное значение, например «#ff0000»
  • invert — выполняет инверсию цвета (что обеспечивает видимость структуры, независимо от цвета фона)

В следующем примере показаны некоторые различные контуры с различными цветами. Также обратите внимание, что эти элементы также имеют тонкие черные границы внутри контура:

Сплошной красный контур.

Двойной зеленый контур.

Вначале желтый контур.


Пример

p.ex1 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
>

p.ex2 <
border: 1px solid black;
outline-style: double;
outline-color: green;
>

p.ex3 <
border: 1px solid black;
outline-style: outset;
outline-color: yellow;
>

В следующем примере используется outline-color: invert , который выполняет инверсию цвета. Это гарантирует, что контур будет виден, независимо от цвета фона:

Сплошной инвертированный контур.

Пример

Ширина контура

Свойство outline-width задает ширину структуры и может иметь одно из следующих значений:

  • thin (typically 1px)
  • medium (typically 3px)
  • thick (typically 5px)
  • A specific size (in px, pt, cm, em, etc)

В следующем примере показаны некоторые очертания с различной шириной:

A medium outline.

A thick outline.

A 4px thick outline.

Пример

p.ex1 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
>

Илон Маск рекомендует:  Функции hyperwave

p.ex2 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
>

p.ex3 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
>

p.ex4 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
>

Структура-Сокращенное свойство

Свойство outline является сокращенным свойством для задания следующих отдельных свойств структуры:

  • outline-width
  • outline-style (Обязательно)
  • outline-color

Свойство outline задается как одно, два или три значения из приведенного выше списка. Порядок значений не имеет значения.

В следующем примере показаны некоторые контуры, заданные с помощью сокращенного свойства outline :

A dashed outline.

A dotted red outline.

A 5px solid yellow outline.

A thick ridge pink outline.

Пример

Смещение контура

Свойство outline-offset добавляет пространство между контуром и краем/границей элемента. Пространство между элементом и его контуром прозрачно.

В следующем примере указывается структура 15пкс за пределами границы:

Этот абзац имеет контур 15пкс за пределами края границы.

Пример

В следующем примере показано, что пространство между элементом и его контуром прозрачно:

Этот абзац имеет контур 15пкс за пределами края границы.

CSS-рамки

Рамки — это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались — рамки ячеек внутри таблицы.

CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border — только со всех сторон сразу.

Сначала поговорим об оформлении border, потом перейдём к outline.

border-width

Задаёт ширину границ. Понятно, что по умолчанию элемент окружён рамками с четырёх сторон. Свойство позволяет задать ширину границ как для всех сторон одинаковую, так и разную для каждой стороны. В зависимости от того, какую ширину каким границам нужно присвоить, в правиле можно указать от одного до четырёх значений.

Количество значений

Результат

Одинаковая ширина рамок со всех сторон.


Первое значение задаёт толщину верхней и нижней рамок, второе — левой и правой.

1 — верхняя рамка, 2 — левая и правая, 3 — нижняя.

Значения ширины, начиная с верхней границы по часовой стрелке (верхняя, правая, нижняя, левая).

Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).

border-style

Определяет стиль рамки. Обратите внимание: если не задать это правило, но указать свойство border-width , то рамок вообще не будет, так что если хотите видимые границы, обязательно укажите border-style.

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

Последний абзац показывает, что стиль, как и толщина, у рамки с каждой стороны может быть собственным:

border-color

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

border

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

Для настройки разных правил рамкам с разных сторон можно использовать следующие значения:

  • border-top — верхняя граница.
  • border-right — правая.
  • border-bottom — нижняя.
  • border-left — левая.

outline-width

То же самое, что и border-width, только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width. Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.

outline-style

Значения свойства дублируют значения border-style. Правило задаёт стиль внешнего контура.

outline-color

Определяет цвет внешнего контура.

Пример кода ниже задаёт стиль заголовка первого уровня с зелёными внутренними границами и оранжевыми внешними контурами.

outline

Объединяющее три предыдущих свойство, аналог border.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

outline

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE8.0+ + + + +

Пример

Задаем внешнюю границу элемента:

Описание и использование

Свойство outline задает внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства выделить какой-либо элемент.

Свойство outline объединяет в себе все свойства, которые используются для определения внешней границы (рамки) элемента.

Свойства, которые можно задать (по порядку): outline-color, outline-style, outline-width.

Любое из свойств может отсутствовать, если это необходимо. Кроме этого, порядок свойств может быть изменен. Браузер сам определит, какое из них соответствует нужному атрибуту.

Создать рамку в HTML/CSS

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

В этой статье мы расскажем вам о создании рамок, а именно о группе свойств border, опишем каждое её отдельное свойство.

Border. HTML & CSS

Давайте рассмотрим каждое свойство отдельно, разобрав разные примеры использования.

Как сделать рамку таблицы в HTML

Для начала давайте рассмотрим самый простой способ создания рамки, для которого нам понадобится простой HTML.

Создадим таблицу с 3 колонками, по 3 ячейки в каждой(9х9), с помощью тега

. Внутри вписываем теги .

Для создания рамки записываем в тег-контейнер атрибут border, присваиваем ему значение 2px.

В итоге у нас получилась простая таблица, которая имеет темно-серую обводку шириной в 2 пикселя. Её можно сделать красивее, но для этого уже понадобится CSS.


Стиль обводки. Свойство Border-style.

Начнем мы с именно с этого свойства. Он задает стиль рамки, делая её либо сплошной линией, либо набором точек. Существуют и другие стили:

  1. Solid > — создает обводку в виде нескольких сплошных линий, соединенных между собой. Линии соединяются без образования пространства между ними.
  2. Dotted > — создает рамку в виде точек.
  3. Dashed > — создает рамку в виде небольших разделенных линий. По виду напоминает пунктирную линию.
  4. Double > — создает сплошную рамку, образуя двойную линию.
  5. Groove > — создает рамку имеющую 2 цвета. Внешняя часть рамки имеет заданный цвет, а внутренняя его темный оттенок.
  6. Ridge > — создает рамку с градиентом. Заданный для рамки цвет плавно распределяется по всем линиям, плавно меняя свой оттенок.
  7. Inset > — создает 2-х цветную рамку. Левая и нижняя линии имеет заданный цвет. Правая и нижняя линии имеют его темный оттенок.
  8. Outset > — Полная противоположность стилю Inset. Правая и верхняя — заданный цвет. Левая и нижняя имеют его темный оттенок.

Можно задавать разные стили для каждой отдельной линии. Для этого нужно использовать отдельный стиль для каждой линии, например свойство border-top-style. Оно будет изменять стиль для каждой линии рамки.

CSS свойство outline

Определение и применение

CSS свойство outline устанавливает все свойства контура элемента в одном объявлении (контур не является частью элемента и не влияет на его ширину — свойства элемента width и height не содержат ширину контура).

Свойства, которые могут быть заданы:

  • outline-style (тип контура). «none (значение по умолчанию) | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit «
  • outline-w >»medium (значение по умолчанию) | thin | thick | length | initial | inherit»
  • outline-color (цвет контура). «invert (значение по умолчанию) | color | initial | inherit»

Если одно из значений свойства отсутствует, то значение этого свойства будет установлено по умолчанию автоматически. Особенно это заметно, когда вы не укажете значение outline-style, т.к. значению по умолчанию этого свойства «none» , т.е. отсутствие контура.

outline

Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента. В отличие от линии, задаваемой через border, у свойства outline есть следующие особенности:

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

Краткая информация

и
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

Пример

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

Рис. 1. Использование свойства outline

Объектная модель

Спецификация ?

Спецификация Статус
CSS Basic User Interface Module Level 4 Рабочий проект
CSS Basic User Interface Module Level 3 Рекомендация
CSS Level 2 (Revision 1) Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

8 12 1 7 1.2 1.5

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Свойство CSS border

Свойство 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 можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

Илон Маск рекомендует:  Что такое код iptcparse
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL