Ostatnio edytowany:

outline

Autor: Virtual Patriot

Opis właściwości outline

Za pomocą właściwości outline możemy określić kilka różnych cech obrysu interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości outline

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

medium none invert (lub medium none currentColor dla tych przeglądarek internetowych, które nie interpretują wartości invert)

wyjątki initial

brak

animowanie

tak samo jak dla poszczególnej właściwości CSS, której wartość tworzy poszczególny składnik grupy wartości właściwości outline

Interpretacja właściwości outline

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości outline

grupa wartości

Opis

Za pomocą właściwości outline oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech obrysu interesującego nas elementu HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  outline:8px dotted blue;
}

/* REGUŁA - 2 */
div {
  outline-width:8px;
  outline-style:dotted;
  outline-color:blue;
}

Składniki grupy wartości właściwości outline

Ważne

podana przez nas grupa wartości właściwości outline nie może zawierać wartości globalnych

Przykładowe zapisy

solid

9px solid

solid red

9px solid red

width

Składnik width nie jest wymaganym składnikiem grupy wartości właściwości outline. Składnik width określa wartość właściwości outline-width, czyli rozmiar grubości obrysu interesującego nas elementu HTML.

Wartość domyślna

medium

style

Składnik style nie jest wymaganym składnikiem grupy wartości właściwości outline. Składnik style określa wartość właściwości outline-style, czyli styl obrysu interesującego nas elementu HTML.

Wartość domyślna

none

color

Składnik color nie jest wymaganym składnikiem grupy wartości właściwości outline. Składnik color określa wartość właściwości outline-color, czyli kolor obrysu interesującego nas elementu HTML.

Wartość domyślna

invert

Przykład

  outline:6px solid blue;
do tego elementu "div" został dodany obrys posiadający rozmiar grubości równy 6 pikseli, styl "solid" (pojedyncza ciągła linia) oraz kolor niebieski, ponieważ do tego elementu "div" została dodana właściwość "outline" wraz z następującą grupą wartości: "6px solid blue"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        outline:6px solid blue;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      do tego elementu "div" został dodany obrys posiadający rozmiar grubości równy 6 pikseli, styl "solid" (pojedyncza ciągła linia) oraz kolor niebieski, ponieważ do tego elementu "div" została dodana właściwość "outline" wraz z następującą grupą wartości: "6px solid blue"
    </div>

  </body>
</html>