صحبتی در مورد انواع اعمال کدهای CSS به عناصر و Override کردن استایلها
احتمالاً میدانید که ما به سه طریق میتوانیم در صفحه وب، کدهای 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 بهتر است.
لغو کردن Override:
خوب، تا اینجای بحث، مشکلی نیست. مشکل زمانی است که در موقعیتی، شما عکس این را بخواهید! به طور مثال، شما بکگراند سطرهای یک جدول را به صورت inline یکی در میان، رنگ قرمز و سبز کردهاید.
حالا از طریق فایل خارجی میخواهید بگویید اگر موس روی این سطرها قرار گرفت، رنگ بکگراند به رنگ سیاه تغییر کند.
طبیعتاً این کد اعمال نخواهد شد، چون صفت inline ارجحیت دارد و همیشه رنگ سبز و قرمز باقی میماند.
در این مواقع، در فایل خارجی از این کد استفاده کنید:
کد: |
div[style] { background: yellow !important; } |
اگر فرضاً به div چنین استایلی را داده باشید:
کد: |
background: red;"> The inline styles for this div should make it red. |
بکگراند این div به رنگ زرد خواهد شد و نه قرمز.
موفق باشید؛
حمید رضا نیرومند
.
- مطالب مرتبط:
- چطور میتوان یک div را در تمام رزولوشنها در وسط صفحه تنظیم کرد؟ (How to set div position to screen center)
- ساختن منو با CSS Sprites
- نمایش و مخفی کردن عناصر صفحه وب هنگام قرارگیری موس روی یک عنصر با استفاده از CSS
- ------------
- نمایش و مخفی کردن عناصر صفحه وب هنگام قرارگیری موس روی یک عنصر با استفاده از CSS
- ترازبندی کدهای زبانهای برنامهنویسی با استفاده از Frontpage و Dreamweaver
- فرق html با htm چیست؟
- نکاتی برای حفظ سلامتی در حین کار زیاد با کامپیوتر
- آسانتر کردن دسترسی به دکمههای ضروری در Office 2007 (کاملاً کاربردی و مهم)
ارسال سؤال یا نظر
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
دست شما درد نکنه.