اولویت بندی دستورات در CSS
ارجحیت دستورات CSS یا همان Specificity. شما هر پروژه ای انجام دهید حتی اگر آن پروژه بسیار کوچک هم که باشد باز هم ممکن است در بخشی از کار با ارجحیت دستورات مواجه شوید و داشتن درک درست از این ویژگی در CSS به شما کمک بسیاری میکند تا اشکالاتی که شاید به واسطه ارجحیت دستوات به وجود میآید را برطرف کنید.
CSS به شکلی طراحی شده است که در صورت وجود تناقض در کد شما و اعمال دو استایل مختلف به یک عنصر٬ دستوری که بر اساس یک اصول از پیش تعیین شده٬ قدرت بالاتری دارد به عنصر مورد نظر اعمال میشود. مثال سادهای میزنم. فرض کنید در بخشی از فایل css خود از دستور font-size: 1.2em; استفاده کرده باشید٬ حال در بخش دیگری از کد دوباره به همان عنصر قبلی font-size: 1.4em; را اختصاص میدهید. اینجا باید مرورگر تصمیم بگیرد که دستور اول را به کد شما اعمال کند یا دستور دوم را.
مورد اول که گاهی از روش اشتباه و سهوا اتفاق میافتد این است که شما یک کلاس مشخص تعریف کرده و به یک عنصر اختصاص دادهاید٬ حال فراموش میکنید و در بخشی دیگر از کد دوباره همان کلاس را مینویسید و استایل متفاوتی به آن میدهید. مثلا به این شکل
.container {
font-size: 1.2em;
}
.
.
.
.
.container {
font-size: 1.4em;
}
در اینجا دستوری که پایینتر نوشته شده است اعمال خواهد شد. زیرا وزن دستورات دقیقا یکسان است و در CSS در این شرایطی دستوری که داخل فایل CSS٬ پایینتر نوشته شده باشد دارای قدرت بیشتری بوده و دستور بالایی را خنثی میکند. همین وضعیت میتواند داخل یک بلوک دستور CSS هم اتفاق بیافتد به این شکل:
.container {
font-size: 1.2em;
color: #222;
width: 960px;
margin: 0 auto;
font-size: 1.4em;
box-shadow: 0 0 2px 3px #eee;
}
در اینجا خط ۲ و ۶ یک دستور هستند که دوبار تکرار شده اند. موارد مشابه به این زمانی رخ میدهد که شما کد را نوشتهاید و در شرایط خاص در حال ویرایش کد هستید و فراموش میکنید که سایز فونت را یکبار در بالای کد نوشتهاید و آن را دوباره در زیر دستور مینویسید. در اینجا هم دستوری که پایینتر آمده قویتر است و دستور بالایی را خنثی کرده و خودش اعمال میشود. بین دو حالتی که اینجا ذکر شد مورد اول شایع تر است و مورد دوم خیلی کم اتفاق میافتد.
دستورات با وزن یکسان داخل فایلهای CSS مختلف
مورد دیگری که باید به آن توجه کنید دستورات مشابهی است که داخل فایلهای CSS مختلف قرار میگیرد. فرض بگیرید که ما دو فایل CSS داریم که بدین شکل به صفحه متصلاشان کردهایم:
حال یک دستور CSS داریم که در فایل اول است که بدین شکل است
.important {
color: red;
}
و دقیقا مشابه به همین دستور را داخل فایل CSS دوم هم داریم:
.important {
color: orange;
}
حال در اینجا کدام دستور اعمال میشود؟ در این شرایط هم دستور که در فایل پایینتر آمده باشد اعمال خواهد شد. ما اول فایل main.css را به صفحه پیوست کردهایم و بعد از آن فایل layout.css را به صفحه اضافه کردهایم. به خاطر اینکه فایل layout.css بعد از فایل main.css آمده در نتیجه دستورات داخلش ارجحیت داشته و در مثال بالا که وزن دستورات یکسان بود٬ دستوری که در فایل پایینتر قرار داشت به صفحه اعمال میشود. در اینجا اگر ما ۵ فایل CSS داشتیم محتوای فایل پنجم ارزش بالاتری به نسبت ۴ فایل قبلی دارد و فایل چهارم هم ارزش بالاتری از سه فایل قبلی خود دارد. البته دقت داشته باشید که ما هنوز درباره وزن دستورات صحبت نکردهایم و دستوراتی که نوشتیم هم وزن و کاملا یکسان بودهاند.
جدا از تگ link ما می توانیم با دستور @import هم یک فایل CSS را به صفحه اضافه کنیم. به عنوان مثال:
@import "/css/typography.css";
پیشنهاد شده که همیشه تگ style را در زیر تگهای link استفاده کنیم. دستور @import هم باید داخل تگ style قرار بگیرد و همیشه باید قبل از بقیه دستورات و در بالای تگ style باشد. در اینجا نیز ارجحیت با دستوراتی است که داخل فایلی CSS قرار دارد که با دستور import به صفحه اضافه شده باشند. دقت کنید که تگ style را اگر بالای link ها قرار دهید دیگر ارجحیت با فایل CSS ای که با import به صفحه اضافه شده نیست و آخرین فایل CSS که بعد از همه به صفحه اضافه شده است ارجحیت بالاتر خواهد داشت. البته استفاده از دستور @import برای اضافه کردن فایل CSS به صفحه به این شکل دیگر مرسوم نیست.
مورد بعدی هم زمانی است که شما در زیر همان دستور @import دستورات CSS دیگری بنویسید. بدین شکل:
@import "/css/typography.css";
.important {
color: blue;
}
در اینجا ارجحیت با دستورات CSS ای است که که بعد از دستور @import به صفحه اضافه شده اند. باز هم دقت داشته باشید که تا اینجای کار وزن همه دستورات یکسان بوده فقط محل قرارگیری آنها بوده است که تفاوت داشته. از اینجا به بعد وزن دستورات را بررسی میکنیم.
دستورات با وزنهای مختلف در یک فایل CSS
در مثالهای قبلی تنها درباره دستوراتی صحبت کردیم که وزن یکسانی دارند و تنها محل قرارگیریشان متفاوت است. حال میخواهیم درباره دستورات با وزنهای مختلف بحث کنیم. فرض کنید شما داخل صفحه خود ساختاری بدین شکل را دارید:
متن نمونه برای نشان دادن ارجحیت دستورات
و برای کد بالا دستورات CSS ای بدین شکل نوشتهاید:
#container {
color: red;
}
.text {
color: orange;
}
p {
color: green;
}
متن ما به چه رنگی نمایش داده خواهد شد؟ قرمز؟ سبز؟ نارنجی؟ در اینجا ما یک عنصر در صفحه را در دستورات مختلف هدف قرار دادهایم و رنگ عنصر مورد نظر ما بر اساس فرمولی خاص توسط مرورگر محاسبه شده و دستوری اعمال خواهد شد که قدرت بیشتری دارد. در این مثال رنگ نارنجی اعمال خواهد شد.
همچنین میتوانید برای مطالعه کامل مقالات مربوطه روی لینک مقالات مربوط کلیک نمایید.
برچسبها: طراحی, سئو, css, طراحی وبسایت
