Свойства структуры CSS


Оглавление

    Показать оглавление


Контур — это линия, нарисованная за пределами границы элемента.


This element has a black border and a green outline with a width of 10px.

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid black;
  outline: #4CAF50 solid 10px;
  margin: auto;  
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>

</body>
</html>



CSS-схема

Контур — это линия, которая рисуется вокруг элементов ВНЕ границ, чтобы элемент «выделился».

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

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

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



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

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

dotted

- Определяет пунктирный контур

dashed

- Определяет пунктирный контур

solid

- Определяет сплошной контур

double

- Определяет двойной контур

groove

- Определяет трехмерный рифленый контур.

ridge

- Определяет трехмерный ребристый контур.

inset

- Определяет контур 3D-вставки

outset

- Определяет начальный 3D-контур.

none

- Не определяет контур

hidden

- Определяет скрытый контур

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

Пример

Демонстрация различных стилей контуров:

 p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Результат :

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.

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
</html>


Примечание. Ни одно из других свойств структуры (о которых вы узнаете больше в следующих главах) не будет иметь НИКАКОГО эффекта, если только Свойство class="w3-codespan">outline-style установлено!