CSS
Arv

Syntax

• egendom: ärva;

Automatisk arv

Arv är en grundläggande mekanism för CSS genom vilken de beräknade värdena för vissa egenskaper hos ett element tillämpas på dess 'barn. Detta är särskilt användbart när du vill ställa in en global stil för dina element snarare än att behöva ställa nämnda egenskaper till varje element i din markering.

Vanliga egenskaper som automatiskt ärvs är: font , color , text-align , line-height .

Antag följande formatmall:

#myContainer {
  color: red;
  padding: 5px;
}

Detta kommer att tillämpa color: red inte bara för <div> -elementet utan också för <h3> och <p> -elementen. Men på grund av karaktären av padding dess värde inte att ärvas till dessa element.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>

Tvingad arv

Vissa egenskaper ärvs inte automatiskt från ett element ner till dess 'barn. Detta beror på att dessa egenskaper vanligen önskas vara unika för det element (eller val av element) som egenskapen tillämpas på. Vanliga sådana egenskaper är margin , padding , background , display etc.

Ibland önskas dock arv ändå. För att uppnå detta kan vi tillämpa inherit på den egendom som ska ärvas. Det inherit värdet kan appied någon CSS egendom och alla HTML-element.

Antag följande formatmall:

#myContainer {
  color: red;
  padding: 5px;
}
#myContainer p {
  padding: inherit;
}

Detta kommer att tillämpa color: red på både <h3> och <p> -elementen på grund av color arv. Emellertid kommer <p> -elementet också att ärva padding från dess "överordnade" eftersom detta anges.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>