Autor publikacji
Virtual Patriot - Administrator

outline

Data publikacji
Ostatnio edytowano

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.

Informacje dodatkowe

brak

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

Nie interpretuje wartości invert składnika color.

Google Chrome

tak

Nie interpretuje wartości invert składnika color.

Safari

tak

Nie interpretuje wartości invert składnika color.

Opera

tak

Nie interpretuje wartości invert składnika color.

Internet Explorer

tak

Edge

tak

Nie interpretuje wartości invert składnika color.

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

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.

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.

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.

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:#7DCDE8;
      }
    </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>