Autor publikacji
Virtual Patriot - Administrator

all

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości all

Za pomocą właściwości all możemy określić sposób zresetowania wartości wszystkich właściwości CSS interesującego nas elementu HTML.

Informacje dodatkowe

właściwość all nie oddziałuje na właściwość direction oraz na właściwość unicode-bidi

Informacje techniczne o właściwości all

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie dotyczy

wartość initial

nie dotyczy

wyjątki initial

nie dotyczy

animowanie

nie dotyczy

Interpretacja właściwości all

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

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

initial

Wyjaśnienie

Za pomocą wartości initial właściwości all możemy sprawić, że wartości wszystkich właściwości CSS interesującego nas elementu HTML zostaną zresetowane do wartości domyślnych określonych przez specyfikację języka CSS (dodatkowo bez możliwości automatycznego dziedziczenia wartości właściwości CSS od elementu rodzica).

Przykład

  all:initial;
wartości wszystkich właściwości CSS tego elementu "div#dziecko-1" zostały zresetowane do wartości domyślnych określonych przez specyfikację języka CSS (dodatkowo bez możliwości automatycznego dziedziczenia od elementu rodzica, dlatego ten element "div#dziecko-1" nie może automatycznie odziedziczyć wartości właściwości "color" oraz wartości właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic"), ponieważ do tego elementu "div#dziecko-1" została dodana właściwość "all" wraz z wartością "initial"
ten element "div#dziecko-2" automatycznie odziedziczył wartość właściwości "color" oraz wartość właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic"

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:9px double black;
        padding:1em;
        font-size:1.3em;
      }

      #dziecko-1 {
        all:initial;
      }

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

  <body>

    <div id="rodzic">
      <div id="dziecko-1">
        wartości wszystkich właściwości CSS tego elementu "div#dziecko-1" zostały zresetowane do wartości domyślnych określonych przez specyfikację języka CSS (dodatkowo bez możliwości automatycznego dziedziczenia od elementu rodzica, dlatego ten element "div#dziecko-1" nie może automatycznie odziedziczyć wartości właściwości "color" oraz wartości właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic"), ponieważ do tego elementu "div#dziecko-1" została dodana właściwość "all" wraz z wartością "initial"
      </div>

      <div id="dziecko-2">
        ten element "div#dziecko-2" automatycznie odziedziczył wartość właściwości "color" oraz wartość właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic"
      </div>
    </div>

  </body>
</html>

inherit

Wyjaśnienie

Za pomocą wartości inherit właściwości all możemy sprawić, że interesujący nas element HTML odziedziczy wartości wszystkich właściwości CSS od elementu rodzica (a nie tylko te wartości właściwości CSS, które mogą być automatycznie dziedziczone).

Przykład

  all:inherit;
ten element "div#dziecko-1" automatycznie odziedziczył wartość właściwości "color" oraz wartość właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic", ponadto ten element "div#dziecko-1" odziedziczył również wartość właściwości "border" oraz wartość właściwości "padding" od elementu "div#rodzic", ponieważ do tego elementu "div#dziecko-1" została dodana właściwość "all" wraz z wartością "inherit"
ten element "div#dziecko-2" automatycznie odziedziczył wartość właściwości "color" oraz wartość właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic"

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:9px double black;
        padding:1em;
        font-size:1.3em;
      }

      #dziecko-1 {
        all:inherit;
      }

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

  <body>

    <div id="rodzic">
      <div id="dziecko-1">
        ten element "div#dziecko-1" automatycznie odziedziczył wartość właściwości "color" oraz wartość właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic", ponadto ten element "div#dziecko-1" odziedziczył również wartość właściwości "border" oraz wartość właściwości "padding" od elementu "div#rodzic", ponieważ do tego elementu "div#dziecko-1" została dodana właściwość "all" wraz z wartością "inherit"
      </div>

      <div id="dziecko-2">
        ten element "div#dziecko-2" automatycznie odziedziczył wartość właściwości "color" oraz wartość właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic"
      </div>
    </div>

  </body>
</html>

unset

Wyjaśnienie

Za pomocą wartości unset właściwości all możemy sprawić, że wartości wszystkich właściwości CSS interesującego nas elementu HTML zostaną zresetowane do wartości domyślnych określonych przez specyfikację języka CSS (dodatkowo z możliwością automatycznego dziedziczenia wartości właściwości CSS od elementu rodzica).

Przykład

  all:unset;
wartości wszystkich właściwości CSS tego elementu "div#dziecko-1" zostały zresetowane do wartości domyślnych określonych przez specyfikację języka CSS (dodatkowo z możliwością automatycznego dziedziczenia od elementu rodzica, dlatego ten element "div#dziecko-1" automatycznie odziedziczył wartość właściwości "color" oraz wartość właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic"), ponieważ do tego elementu "div#dziecko-1" została dodana właściwość "all" wraz z wartością "unset"
ten element "div#dziecko-2" automatycznie odziedziczył wartość właściwości "color" oraz wartość właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic"

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 {
        border:9px double black;
        padding:1em;
      }

      #rodzic {
        color:blue;
        font-size:1.3em;
      }

      #dziecko-1 {
        all:unset;
      }

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

  <body>

    <div id="rodzic">
      <div id="dziecko-1">
        wartości wszystkich właściwości CSS tego elementu "div#dziecko-1" zostały zresetowane do wartości domyślnych określonych przez specyfikację języka CSS (dodatkowo z możliwością automatycznego dziedziczenia od elementu rodzica, dlatego ten element "div#dziecko-1" automatycznie odziedziczył wartość właściwości "color" oraz wartość właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic"), ponieważ do tego elementu "div#dziecko-1" została dodana właściwość "all" wraz z wartością "unset"
      </div>

      <div id="dziecko-2">
        ten element "div#dziecko-2" automatycznie odziedziczył wartość właściwości "color" oraz wartość właściwości "font-size" od swojego elementu rodzica, czyli elementu "div#rodzic"
      </div>
    </div>

  </body>
</html>