مفاهیم پایه ای CSS

دانستن مفاهیم پایه ای در CSS از اهمیت زیادی برخوردار است. هرچه بر این مفاهیم مسلط تر باشیم در آینده بهتر طراحی می کنیم و در رفع خطاها سریع تر عمل می کنیم. در این ایستگاه با چند مفهموم مهم آشنا می شویم.

CSS Cascade

در مطالب قبل به آبشاری بودن CSS اشاره کردیم در اینجا نحوه کارکرد این آبشار را می آموزیم.

وظیفه این آبشار در نهایت این است که تعیین کند کدام یک از ویژگی های CSS بر روی یک عنصر HTML اعمال می شوند. شاید بگویید: “خب آنهایی که ما می نویسیم!”

ولی جالب است بدانید غیر از دستوراتی که ما به عنوان طراح می نویسیم استایل های دیگری هم وجود دارند. که کار این آبشار تعیین اولویت بین این دستورات و در نهایت تعیین دستوری است که به عنصر HTML اعمال می شود.

سه قدم برای انجام این عملیات وجود دارد که هر کدام از دیگر مفاهیم پایه ای سی اس اس می باشند که باید فرا گرفته شوند:

1. اهمیت
2. ارجحیت
3. ترتیب

اهمیت

اهمیت یک دستور CSS به منبعی که از آن می آید بستگی دارد که برای CSS سه منبع متفاوت وجود دارد:

1. عامل کاربر (user agent)

یکی از این منابع استایل هایی هستند که مرورگر بصورت پیشفرض بر روی عناصر صفحه اعمال می کند. هر مرورگری استایل های پیشفرض مخصوص به خود را دارد و به همین دلیل است که اگر یک سایت را در مرورگرهای مختلف باز کنیم احتمال دارد تفاوت هایی را احساس کنیم.

 

2. کاربر

منبع دیگر استایل هایی هستند که کاربر از طریق مرورگرش تعیین می کند. کاربرهایی که خدایی نکرده مشکلات بینایی دارند و نیاز دارند تا فونت ها بزرگتر باشند و یا رنگ قسمت های خاصی متفاوت باشند.

 

3. طراح

و منبع آخر من و شما هستیم, یعنی استایل هایی که توسط نویسنده یا بهتر بگوییم طراح نوشته می شود.

 

همانطور که در مطالب قبل گفته شد سه نوع استایل توسط طراح می توانند نوشته شوند:

1. خطی
2. داخلی
3. خارجی

بصورت پیشفرض ترتیب اهمیت منابع بصورت زیر است یعنی استایل هایی که توسط طراح نوشته می شود از اهمیت بیشتری برخوردار است:

1. استایل طراح
2. استایل کاربر
3. استایل عامل کاربر

در اینجا توجه داشته باشید که اهمیت استایل خطی بیشتر از داخلی و داخلی بیشتر از خارجی می باشد پس خواهیم داشت:

1. استایل طراح
   1. خطی
   2. داخلی
   3. خارجی
2. استایل کاربر
3. استایل عامل کاربر

یکی از دلایلی که در مطالب قبل گفته شد بهتر است تا حد امکان از روش خارجی استفاده کنیم این است که درگیر دعوا بین اهمیت این سه روش نشویم تا به راحتی بتوانیم پروژه را گسترش دهیم.

پس تا اینجا آبشار قصه ما می داند کدام منبع اهمیت بیشتری دارد پس می تواند اولویت آن منبع را برای تصمیم نهایی در نظر بگیرد.

 

ارجحیت

بعد از اهمیت مرحله دومی که فرآیند آبشاری باید از آن گذر کند تا بتواند تعیین کننده استایل نهایی که به عنصر صفحه اعمال می شود باشد ارجحیت یا Specificity نام دارد.

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

در طی این فرآیند آبشاری به دستورات CSS وزن داده می شود و در آخر هر کدام وزن بیشتری داشته باشند به عنصر HTML اعمال می شوند.

حال اگر دو دستور بعد از بررسی اهمیت و ارجحیت به وزن برابر رسیدن کدامیک برنده میدان خواهند بود؟

 

ترتیب

فاکتور آخر در فرآیند آبشاری Source Order یا ترتیب است. به این معنا که در زمان نوشتن دستورات CSS هر کدام در فایل CSS آخرتر نوشته شود وزن بیشتری می گیرد.

پس اگر دو دستور بعد از بررسی اهمیت و ارجحیت دارای وزن برابر باشند, آن استایلی به عنصر اعمال می شود که آخرتر نوشته شده باشد.

 

article {
  background-color: red;
}

article {
  background-color: green; 
  /* چون در آخر آمده است اثر استایل قبلی را از بین می برد و خود اعمال می شود. */
}

 

بعد از اتمام این فرآیند, آبشار ما به تمام دستورات وزن مخصوص آنها را داده است و می داند باید کدام دستور در نهایت به عنصر صفحه اعمال شود.

 

CSS Inheritance

مفهوم پایه ای دیگر وراثت یا inheritance است که در CSS به این معنا است که مقدار ویژگی استایل یک عنصر در HTML از عنصر پدر آن کپی می شود.

به عنوان نمونه فرض کنید رنگ متن را برای عنصر body با مقدار سفید تعیین کنیم. حال تمام عناصری که به عنوان فرزندان body هستند این رنگ را به ارث می برند و رنگ متن آنها نیز سفید می شود مگر اینکه بصورت مجزا برای آنها رنگ خاص خودشان را تعیین کنیم: