[css] volgorde

[Verwijderd]

Ik heb een vraagje betreft stylesheets. Maakt het uit in welke volgorde je de verschillende styles in een stylesheet zet?

Oftewel:

Is:

code:

.voorbeeld
{
    height: 100%;
    background-color: #FFFFFF;
    border-left: 1px solid #CCCCCC;
}

Gelijk aan:

code:

.voorbeeld
{
    background-color: #FFFFFF;
    border-left: 1px solid #CCCCCC;
    height: 100%;
}

?

Ik was namelijk een stylesheet netjes aan het maken door alles een beetje in dezelfde volgorde te zetten en dit leek wel dergelijk verschil te maken. Ik vraag me nu dus af of het door die volgorde komt of dat ik misschien iets anders fout deed.

En zijn er eigenlijk regels voor in welke volgorde je de verschillende styles moet zetten in een stylesheet?

[Rickets]

Binnen de selectie hoort de volgorde niet uit te maken; in de stylesheet wel.
http://www.w3.org/TR/CSS21/intro.html#processing-model
http://www.w3.org/TR/CSS21/cascade.html#cascading-order

[stp_4]

Zolang hij de style gewoon pakt, in welke vorm dan ook, wat maakt het dan uit? Je zal merken dat hij gewoon dezelfde style pakt ongeacht volgorde in de selectie.....

[Reptile209]

Verwijderd schreef op 24 februari 2004 @ 13:08:
Ik was namelijk een stylesheet netjes aan het maken door alles een beetje in dezelfde volgorde te zetten en dit leek wel dergelijk verschil te maken. Ik vraag me nu dus af of het door die volgorde komt of dat ik misschien iets anders fout deed.

Want bij het testen gebeurde... Dit is wel een beetje vaag he .
Ik zet ze meestal op alfabet, soms met een extra ordening op "soort": font en color bij elkaar, formaten bij elkaar, borders e.d., etc. Het zou niks uit moeten mogen maken.

[Willem]

Ehm Rickets geeft het juiste antwoord al?

[Verwijderd]

Ja, dat maakt uit:

Cascading Stylesheet:

.dikke-border-links {
    border:1px solid red;
    border-left-width:2px;
}


.geen-dikke-border-links {
    border-left-width:2px;
    border:1px solid red;
}

Je kunt je eerder gezette waardes dus overschrijven. Vooral shorthand notatie (border:,background:, etc.) kan hierbij verwarrend werken.

[stp_4]

Zolang hij de style gewoon pakt, in welke vorm dan ook, wat maakt het dan uit? Je zal merken dat hij gewoon dezelfde style pakt ongeacht volgorde in de selectie.....

edit:

excusses, refreshte deze pagina perongeluk....

[ Voor 16% gewijzigd door stp_4 op 24-02-2004 14:29 ]

[stp_4]

Verwijderd schreef op 24 februari 2004 @ 13:39:

Je kunt je eerder gezette waardes dus overschrijven. Vooral shorthand notatie (border:,background:, etc.) kan hierbij verwarrend werken.

Daar heb je uiteraard wel gelijk in, maar waarom zou je dat doen....

[Verwijderd]

Ik ben er nog niet helemaal achter waardoor het nou kwam, maar ik ben inmiddels nog geen steek verder. Ik ben weer een aantal andere probleempjes tegengekomen die ik eerst moet oplossen voordat ik die stylesheet "netjes" kan maken.

Bij het testen versprong een div naar de onderkant van de pagina terwijl hij eerst naast een andere div stond. In de vorm van een soort tabel, zeg maar twee kolommen naast elkaar.

[Verwijderd]

stp_4 schreef op 24 februari 2004 @ 14:31:
Daar heb je uiteraard wel gelijk in, maar waarom zou je dat doen....

Vele redenen:

Inline CSS hacks
Bij het gebruik van inline CSS hacks voor crossbrowser dingen worden er vaak properties geset en gereset.

Cascading Stylesheet:

div.content { 
    width:400px; 
    voice-family: "\"}\""; 
    voice-family:inherit;
    width:300px;
} 

'Wat was dit ook alweer?'
Als een soort line-comment (die er niet is in CSS) kun je properties opnieuw setten zonder de oude values kwijt te raken.
Ik geef bijvoorbeeld herbruikbare classes soms een opvallende kleur tijdens het ontwikkelen zodat ik kan zien waar ik allemaal mee bezig ben.

Cascading Stylesheet:

.someClass {
    background:#FE756C url(../bg.gif) no-repeat;
    background:#FF0;
}

Korte notatie
Soms is het korter om met shorthand een propertie te setten en dan weer (deels) te overschrijven.
Vergelijk:

Cascading Stylesheet:

.someClass {
    border:1px solid #F00;
    border-right-color:#C00;
    border-bottom-color:#C00;
}

.someClass {
    border-left:1px solid #F00;
    border-top:1px solid #F00;
    border-right:1px solid #C00;
    border-bottom:1px solid #C00;
}

...en er zijn vast nog wel meer redenen te bedenken.

[Verwijderd]

Hexadecimale kleurcodes van 3 waardes ipv 6??? Zie ik dat goed?

[Rickets]

Verwijderd schreef op 24 februari 2004 @ 15:37:
Hexadecimale kleurcodes van 3 waardes ipv 6??? Zie ik dat goed?

Dat ziet u goed

[Clay]

De volgorde van de rules zelf is ook nogal belangrijk.

code:

div.fiets {
}

.fiets {
}

De eerste rule zal de 2e in dit voorbeeld b.v. altijd overrulen, dat ligt aan de specificity van css. Die wordt bepaald door het aantal elementen dat je voor een selector gebruikt. Classnames zijn b.v. 10 keer zoveel waard als nodenames, en id's weer 10 keer zoveel als classes. Zo kan je een simpel optelsommetje maken van wat elke rule waard is.

In het voorbeeld hierboven is de waardeverhouding van de 1e tot de 2e dus 11 tot 10, en zullen properties daarin voorang krijgen over dezelfde in de 2e rule. De volgorde waarin je je rules in css zet is dan ook alleen van belang voor rules die evenveel waard zijn; alleen dan krijgt de onderste voorrang.