Overerven CSS

<div class="border">inhoud</div>

css:
.border
{
border: 1px solid green;
}

je hoeft het toch maar 1 keer te wijzigen?

Gebruik daarvoor class iig, die kan namelijk zoveel gebruik worden als je wilt. id="" is uniek, dus eenmalig te gebruiken.

Zoals harmen al postte over class="border" geven waar je dit wilt toepassen

Marien, geef alles wat in principe dezelfde border eigenschappen heeft dezelfde class.
Onderdelen die anders zijn kan je bijvoorbeeld zo doen:

Een div:content bevat een div:tekst, beide divs wil je dezelfde omlijning geven, maar andere tekst:

div{
hier de lijnstijl voor alle divs
}

.content{
hier de tekststijl voor de contentdiv
}
.tekst{
hier de tekststijl voor de tekstdiv
}

Je kan gewoon verschillende classes gebruiken op 1 element, zie bijv:

<style type="text/css">
.border{
border: 1px solid;
}

.groen{
border-color: #00ff00;
}
</style>
<div class="border groen">inhoud</div>

Remco van Arkelen schreef op 25.10.2006 13:22

Je kan gewoon verschillende classes gebruiken op 1 element, zie bijv:

<style type="text/css">
.border{
border: 1px solid;
}

.groen{
border-color: #00ff00;
}
</style>
<div class="groen">inhoud</div>

Je gebruikt .groen{, dus moet de class van die div ook gewoon "groen", en niet "border groen" zijn.

Kijk nog eens naar het voorbeeld Robert, je kunt in het class-attribuut meerdere CSS-classes opgeven, ik geef toe dat de naam "border" wat ongelukkig is gekozen.

Maar, met class="border groen" worden zowel de CSS-regels .border en .groen op het betreffende element toegepast.

Ok Remco, dat kende ik nog niet.. weer wat geleerd.

Als je op bijvoorbeeld alle divs en a's (links) een border wilt zetten, is het het verstandigste om gebruik te maken van roberts methode, als dat verschilt dus zeg maar op ene div en a wel en de andere niet dan is de verstandigste methode van harmen.

alle elementen
div, a, p{ /* voor alle div, a en p */
border: 2px solid #e4a;
}
voor bepaalde:
.border{ /*hierbij geldt dat overal waar je dit wilt toepassen class="border" moet staan*/
border: 2px solid #e4a;
}

Ik heb dus meerdere divs welke wel EN niet een border krijgen, tevens zijn er ook andere elementen die dezelfde border krijgen. (daarom heb ik ook teveel styles :S)

Nu heb ik 2 oplossingen:
- Op elke pagina de oplossing van remco toepassen (welke mij wel het beste uitkomt)
- Volledig uittypen in de stylesheet: style1, style2, style3 {}

Wat raden jullie mij aan?

De oplossing van Remco is dan de handigste oplossing, omdat je dan 2 verschillende borders zou aan kunen maken. Het scheelt typewerk, en je kan ook de css file kleiner houden, waardoor je pagina sneller geladen wordt.