CSS arv

CSS- egenskaper som automatiskt ärvs
border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font
font-family
font-stretch
font-size
font-size-adjust
font-style
font-variant
font-weight
letter-spacing
line-height
list-style
list-style-image
list-style-type
quotes
text-align
text-indent
text-transform
white-space
word-spacing

En viktig sak att känna till när man skriver CSS är att många CSS-regler automatiskt går i arv. Grundprincipen är att ett "barn-element", dvs. ett element som skrivs inuti ett annat element "ärver" "föräldra-elementets" CSS-egenskaper.

HTML

<p style="color:blue">
   <em>Denna text blir blå</em>
</p>

I ovanstående exempel ärver elementet <em> egenskaper "color" med värdet "blå" från elementet <p>.

Bara vissa egenskaper går i arv

Inte alla CSS-egenskaper har som standardinställningen att kunna gå i arv.

HTML

<p style="border:1px solid; color:blue;">
   <em>Blå text UTAN ram</em>
</p>

Egenskapen "border" har inte som standardinställningen att gå i arv och därför så kommer elementet <em> inte att visas med en ram.

Arv går att påverka

Även om många egenskaper automatiskt ärv i CSS så kan det finnas situationer där man vill öka prioriteten för den ärvda egenskapen. Genom att ge en CSS-egenskap värdet "inherit" så anger man att det ska ärva värden från föräldraelement men till en större "vikt".

Läs mer om hur egenskaper prioriteras i CSS kaskadordning

Ett användbart område för egenskapen inherit är länkar. Om inte css-egenskapen color är satt så visas länkar vanligtvis med blå text av webbläsaren, även om föräldra-elementet har en annan färg. Det enklaste sättet att göra så att länkarna får samma färg som övrig text är därför att använda värdet "inherit".

CSS

p {color:red}
a:link {color:inherit}

HTML

<p>Lite text med en <a href="#">röd länk</a></p>

Var försiktig med att använda univeral väljaren * tillsammans med värdet "inherit" eftersom det förändrar alla arvregler för hela webbsidan.

Observera att värdet "inherit" inte stöds i Internet Explorer 7 och tidigare versioner.

Några exempel

Nedanstående HTML används i alla exempel på sidan!

HTML

<p class="p-class" id="p-id">
   <span class="s-class" id="s-id">Lite text</span>
</p>

Exempel 1:

CSS

span#s-id {color:blue;}
#p-id span {color:red;}

Texten blir röd. Båda reglerna får vikten 101 men färgen röd anges längre ner.

Exempel 2:

CSS

#p-id #s-id {color:blue;}
p.p-class span#s-id.s-class {color:red;}

Texten blir blå. Den första regeln har vikten 200 och den nedre har vikten 122.

Exempel 3:

CSS

#p-id {color:blue !important;}
span {color:red;}

Texten blir röd. Även om elementet <span> ärver färgen blå av föräldraelementet <p> så går egenskaper som inte är ärvda före.

Exempel 4:

CSS

#p-id {font-size:10px;}
p #s-id {font-size:200%;}

Texten blir svart med storleken 20px. Eftersom textfärgen inte angetts så blir den svart eftersom det är webbläsarens standardinställning. Texten kommer att ärva font-storleken 10px och kombinera det med sin egna fontstorlek som är 200%. Summan blir 10 x 2 = 200px.

För att undvika misstag kan ett bra tips vara att alltid använda samma måttenhet.