Egy példa (aminek amúgy nem sok értelme, de jól szemlélteti a dolgot):
body
{
color: black;
line-height: 26px;
}
div
{
color: #2a2a2a;
line-height: 28px;
}
p
{
font-family: arial;
}
A HTML:
<div><p>Suspendisse porta....</p></div>
Ennek az eredménye:
Itt ha komolyabb módosítást szeretnénk, akkor több mindent felül kellene írni. Van azonban lehetőség arra, hogy kinyírjuk a formázásokat.
Erre az "all" tulajdonság szolgál, ami jelen esetben így néz ki:
p
{
all: unset;
}
Az unset értékkel minden formázás törlésre kerül, konkrétan az örökölt, vagy az eredeti (böngésző által meghatározott) értékre kerül visszaállításra.
Jelen példában a
color: #2a2a2a;
line-height: 28px;
a div-től örökölt, így azok érvényben maradnak, ami látható ha például pirosra állítjuk a színét:
De minden stílust elveszít, ami a p elemre vonatkozik.
Persze a div-nél beállított stílusok is törölhetők:
p, div
{
all: unset;
}
Érdekel a webfejlesztés, weboldalak készítése?
Kattints ide oktató videókért!
Az értéke az unset mellett lehet initial is. Ezzel az adott elem a kezdeti, böngésző által meghatározott stílusra áll vissza, aminek értelmében például a betűtípus, szín visszaállításra kerül, de például a sormagasság nem.
p
{
all: initial;
}
És van még egy értéke, az inherit, amely az örökölt értéke állítja vissza, vagyis minden közvetlenül az elemnél beállított stílus törlődik. Jelen példában a divtől örökölt stílusokra áll vissza (többek között).