Autor publikacji
Virtual Patriot - Administrator

initial

Data publikacji
Ostatnio edytowano

Przeznaczenie wartości initial

Wartość initial sprawia, że wartość danej właściwości CSS zostaje zresetowana do wartości domyślnej określonej przez specyfikację języka CSS (dodatkowo bez możliwości automatycznego dziedziczenia od elementu rodzica).

Przykład wartości initial

  color:initial;
mimo że wartość właściwości "color" może być automatycznie dziedziczona przez elementy dzieci od elementu rodzica, tekst znajdujący się w zawartości tego elementu "div" nie posiada koloru niebieskiego, lecz posiada kolor domyślny, ponieważ do tego elementu "div" została dodana właściwość "color" wraz z wartością "initial"
tekst znajdujący się w zawartości tego elementu "div" posiada kolor niebieski, ponieważ ten element "div" automatycznie odziedziczył od swojego elementu rodzica wartość właściwości "color", czyli w tym wypadku wartość "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;
      }

      #rodzic {
        color:blue;
        border:3px solid black;
        padding:1em;
        font-size:1.3em;
      }

      #dziecko-1 {
        color:initial;
        margin-bottom:1em;
        padding:1em;
        background-color:#7DCDE8;
      }

      #dziecko-2 {
        padding:1em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <div id="dziecko-1">
        mimo że wartość właściwości "color" może być automatycznie dziedziczona przez elementy dzieci od elementu rodzica, tekst znajdujący się w zawartości tego elementu "div" nie posiada koloru niebieskiego, lecz posiada kolor domyślny, ponieważ do tego elementu "div" została dodana właściwość "color" wraz z wartością "initial"
      </div>

      <div id="dziecko-2">
        tekst znajdujący się w zawartości tego elementu "div" posiada kolor niebieski, ponieważ ten element "div" automatycznie odziedziczył od swojego elementu rodzica wartość właściwości "color", czyli w tym wypadku wartość "blue"
      </div>
    </div>

  </body>
</html>

Interpretacja wartości initial

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji wartości .