احتمالاً می‌دانید که ما به سه طریق می‌توانیم در صفحه وب، کدهای CSS را درج کنیم و به یک عنصر اعمال کنیم:
1- روش Inline : یعنی در صفت style مربوط به آن عنصر (تگ)، کدهای CSS را بنوسیم. مثال:
| کد: |
style="border:solid 1px red;">Hello! |
2- روش Embedded : یعنی در بالای صفحه، در بین تگ style در وسط تگ head، کدهای CSS را بنویسیم. مثال:
| کد: |
|
...
|
3- روش Linked : یعنی در فایل خارجی با پسوند .css کدهای CSS را بنویسیم و در صفحه لینک بدهیم. مثال:
| کد: |
|
در فایل style.css داریم: div{ و در صفحه وب داریم: style.css" rel="stylesheet" type="text/css" /> ... ... Hello!
|
خوب، حالا تصور کنید به دلایلی، یک div هم از فایل خارجی برای border خود استایل می‌گیرد و هم از طریق صفت style خود. مثلاً فایل خارجی می‌گوید همه divها خط دور مشکلی داشته باشند و style یک div خاص در آن صفحه می‌گوید خط دور قرمز داشته باش.
فکر می‌کنید کدام استایل به آن div اعمال می‌شود؟ بالاخره خط دور، مشکلی می‌شود یا قرمز؟
جواب: قرمز.
اولویت اعمال کدهای CSS به یک عنصر به این صورت است:
بیشترین اولویت را inline دارد. یعنی اگر هر سه جا استایل بگیرم، استایلی دیده می‌شود که inline باشد. سپس embedded و در نهایت، فایل خارجی.
در اصطلاح گفته می‌شود استایلی که در inline نوشته می‌شود، استایل‌های دیگر را Override می‌کند. (Override کردن یعنی باطل کردن) یا ممکن است بگویند Overwrite می‌کند که البته override بهتر است.
خوب، تا اینجای بحث، مشکلی نیست. مشکل زمانی است که در موقعیتی، شما عکس این را بخواهید! به طور مثال، شما بک‌گراند سطرهای یک جدول را به صورت inline یکی در میان، رنگ قرمز و سبز کرده‌اید.
حالا از طریق فایل خارجی می‌خواهید بگویید اگر موس روی این سطرها قرار گرفت، رنگ بک‌گراند به رنگ سیاه تغییر کند.
طبیعتاً این کد اعمال نخواهد شد، چون صفت inline ارجحیت دارد و همیشه رنگ سبز و قرمز باقی می‌ماند.
در این مواقع، در فایل خارجی از این کد استفاده کنید:
| کد: |
| div[style] { background: yellow !important; } |
اگر فرضاً به div چنین استایلی را داده باشید:
| کد: |
background: red;"> The inline styles for this div should make it red. |
بک‌گراند این div به رنگ زرد خواهد شد و نه قرمز.
موفق باشید؛
حمید رضا نیرومند
English
العربی
Swedish
François