صحبتی در مورد انواع اعمال کدهای CSS به عناصر و Override کردن استایل‌ها

Thursday, 2011 August 18 نویسنده: Hamid تعداد بازدید: 7178 بار #آموزش CSS (سی.اس.اس) امتیاز متوسط: امتیازی داده نشده است

احتمالاً می‌دانید که ما به سه طریق می‌توانیم در صفحه وب، کدهای CSS را درج کنیم و به یک عنصر اعمال کنیم:
1- روش Inline : یعنی در صفت style مربوط به آن عنصر (تگ)، کدهای CSS را بنوسیم. مثال:

کد:

style="border:solid 1px red;">Hello!

2- روش Embedded : یعنی در بالای صفحه، در بین تگ style در وسط تگ head، کدهای CSS را بنویسیم. مثال:

کد:

...

Hello!

3- روش Linked :‌ یعنی در فایل خارجی با پسوند ‎.css کدهای CSS را بنویسیم و در صفحه لینک بدهیم. مثال:

کد:

در فایل style.css داریم:

div{
border:solid 1px red;
}

و در صفحه وب داریم:

style.css" rel="stylesheet" type="text/css" />
...
...

Hello!

خوب، حالا تصور کنید به دلایلی، یک div هم از فایل خارجی برای border خود استایل می‌گیرد و هم از طریق صفت style خود. مثلاً فایل خارجی می‌گوید همه divها خط دور مشکلی داشته باشند و style یک div خاص در آن صفحه می‌گوید خط دور قرمز داشته باش.
فکر می‌کنید کدام استایل به آن div اعمال می‌شود؟ بالاخره خط دور، مشکلی می‌شود یا قرمز؟
جواب: قرمز.
اولویت اعمال کدهای CSS به یک عنصر به این صورت است:
بیشترین اولویت را inline دارد. یعنی اگر هر سه جا استایل بگیرم، استایلی دیده می‌شود که inline باشد. سپس embedded و در نهایت، فایل خارجی.

در اصطلاح گفته می‌شود استایلی که در inline نوشته می‌شود، استایل‌های دیگر را Override می‌کند. (Override کردن یعنی باطل کردن) یا ممکن است بگویند Overwrite می‌کند که البته override بهتر است.

لغو کردن Override:

خوب، تا اینجای بحث، مشکلی نیست. مشکل زمانی است که در موقعیتی، شما عکس این را بخواهید! به طور مثال، شما بک‌گراند سطرهای یک جدول را به صورت inline یکی در میان، رنگ قرمز و سبز کرده‌اید.
حالا از طریق فایل خارجی می‌خواهید بگویید اگر موس روی این سطرها قرار گرفت، رنگ بک‌گراند به رنگ سیاه تغییر کند.
طبیعتاً این کد اعمال نخواهد شد، چون صفت inline ارجحیت دارد و همیشه رنگ سبز و قرمز باقی می‌ماند.
در این مواقع، در فایل خارجی از این کد استفاده کنید:

کد:

div[style] {
background: yellow !important;
}

اگر فرضاً به div چنین استایلی را داده باشید:

کد:

background: red;">
The inline styles for this div should make it red.

بک‌گراند این div به رنگ زرد خواهد شد و نه قرمز.

موفق باشید؛
حمید رضا نیرومند

ارسال سؤال یا نظر

1- چهرقانی:
بوسیله: , در: Tuesday, 2014 February 11-کد: 9506
سلام سنگین بود

2- حسام:
بوسیله: , در: Thursday, 2014 December 04-کد: 12535
دست شما درد نکنه.مختصر و مفید بود و واضح.کار من رو که راه انداخت.ممنون

3- مریم:
بوسیله: , در: Thursday, 2014 December 04-کد: 12542
یبار یکی به قصد اموزش به سیستمم وارد شد و من ناشی بودم استفاده از تیم ویور را نمیدونستم اما فقط ران شدم.متوجه بودم که TRANSFER انجام میشه اما نمیدونستم چیه.به نظر شما با 5 دقیقه میشه چند کیلو بایت عکس رو منتقل کرد؟سرعتم512 بود.؟؟؟؟؟؟

4- مصطفی:
بوسیله: , در: Tuesday, 2014 December 09-کد: 12581
دست شما درد نکنه.