Ostatnio edytowany:

all

Autor: Virtual Patriot

Opis 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. Zasada ta nie tyczy się właściwości direction oraz właściwości unicode-bidi.

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

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie tyczy się

wartość initial

nie tyczy się

wyjątki initial

nie tyczy się

animowanie

nie tyczy się

Interpretacja właściwości all

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

nie

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

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

initial

Opis

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

Opis

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

Opis

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