De cascading volgorde
CSS basics 101:
- Een inline style
<p style="color: #600;">heeft voorrang op - een style block in je pagina welke voorrang heeft op
- een link stylesheet
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />welke meer invloed heeft dan - een @import stylesheet.
En dan nog dit:
Dat de volgorde van de @import regel ook van belang is.
<style type="text/css" media="screen">
@import "style.css";
@import "nogmeerstyle.css";
</style>
nogmeerstyle.css zal meer invloed hebben als style.css. Met andere woorden:
Stel je hebt in style.css bepaald dat:
p {
color: #f00; /* rood */
}
en in nogmeerstyle.css:
p {
color: #00f; /* blauw */
}
Alle <p> elementen zullen blauw zijn.
Op Friday 02 November 2007
Aha, ik wist niet dat een link-stylesheet voorrang had op een @import
Op Friday 02 November 2007
Dat van die @import wist ik ook niet; leuk om weten.
Als je in je externe css of css in de head !important gebruikt wordt de inline css wel overschreven.
Op Friday 07 December 2007
euh ik geloof helemaal niet dat de link-stylesheet zomaar voorrang heeft op de @import ..
ik denk dat hier vooral de volgorde in de broncode telt.
dus als je in de head
<link ..... / ><style>
@import ….
</style>
doet dan heeft de @import voorrang.
Test dit maar eens met een set dezelfde selectors waar je verschillende rules voor definieert.
Op Friday 07 December 2007
geloof het maar