اچ تی ام السی اس اس

CSS Specificity: قسمت سوم، مثال های باز هم بیشتر

احسان پاک نژاد - 2013-02-17 12:02

در دو قسمت قبل (اینجا و اینجا) بسیار از اسپسیفیسیتی گفتیم. در قسمت سوم و پایانی باز هم مثال های بیشتری از این مبنا را آورده ایم. در صورتی که فکر می کنید مبحث اسپسیفیسیتی را درک کرده اید، دیگر نیازی به خواندن مقاله حاضر ندارید، هر چند در ادامه مطلب نکات آموزشی جالبی خواهید یافت.

در صورت تمایل می توانید خودتان هم دست به کار شوید، کدهای مقاله را در کامپیوترتان کپی و نتیجه آنها را ببینید (کدها را در مرورگر باز کنید). 

ادامه نوشته

اچ تی ام السی اس اس

CSS Specificity: قسمت دوم، بحث اصلی

احسان پاک نژاد - 2013-02-14 11:12

همان طور که در ابتدای مطلب قبل گفتیم عکس بالا روش های مختلف استایل دادن را نمایش می دهد. بر اساس قانون specificity، هر یک از سلکتورها وزن های مختلفی دارند. برای مثال وزن و اختصاصی بودن «id» از «کلاس» بیشتر است و «کلاس» از «المنت» ها. طریقه معمول برای اندازه گیری میزان specificity یک دستور سی اس اس آسان است: برای هر یک از سکلتورهای آن، یک امتیاز در نظر می گیریم و با جمع آنها میزان specificity یک دستور محاسبه می شود. بر این اساس امتیاز Style attribute هزار، id صد، کلاس معادل ۱۰ و المنت ها مساوی ۱ است.

در ادامه ضمن مثال هایی، توضیح کامل این مبنا را آورده ایم.

ادامه نوشته

اچ تی ام السی اس اس

CSS Specificity: قسمت اول، آشنایی با مفاهیم مهم سی اس اس

احسان پاک نژاد - 2013-02-12 17:50

CSS Specificity یکی از مشکل ترین مباحث در CSS است. زمانی که به یک المنت خاص در HTML (مثلا

) دو دستور سی اس اس (CSS) متفاوت (مثلا دو background یکی آبی و یکی قرمز) می دهید، مرورگر با توجه به CSS Specificity تصمیم می گیرد که کدام دستور را اجرا کند.

درک این مبحث برای استاد شدن در سی اس اس نویسی کاملا الزامی است. برای همین است که گاهی دستورهای سی اس اس شما اجرا نمی شوند و یا دستوری که قبلا به خوبی کار می کرده در اثر دستور دیگری از کار می افتد. برای رفع این مشکلات شما نیاز به یک درک عمیق از specificity (اختصاصی بودن) دارید. پس از درک این مبنا حل کردن مشکلات و رفع باگ هایی که در طراحی سایت ها به آنها برمی خورید، بسیار آسان تر خواهند شد.

در عکس بالا چهار روش کلی دادن دستورات سی اس اس را می بینید. در این مقاله قصد داریم، توضیحاتی راجع به مفاهیم اولیه سی اس اس بدهیم، در مقاله بعد (قسمت دوم) به توضیح مفصل specificity خواهیم پرداخت و قسمت سوم را نیز با مثال های تکمیلی به اتمام می رسانیم. در ضمن در صورتی که از قبل با مبحث specificity آشنایی دارید باز هم توصیه می کنیم که این مقاله و قسمت دوم را حتما مطالعه کنید. مطمئنا در آنها نکات مفید فراوانی خواهید یافت. پس در ادامه با ما باشید.

ادامه نوشته