القائمة الرئيسية

الصفحات

خاصية الأولوية للكود CSS piriority

الأولوية للكود CSS priority

الأولوية: تلك الخاصية تعني أن يكون لدينا مجموعة من التعليمات المختلفة لخاصية واحدة في الكود مثل أن نقوم بتعريف اللون لعنصرأنة أزرق ثم نعرفة أنه أحمر إذا الكود يعمل علي أخر أمر له وهو الأحمر.
الأولوية للكود  ( css piriority)

CSS piriority


تكون الأولوية كالتالي:

1- أخر تعليمات الكود المتضمن في html

2- تعليمات كود css في أول الملف 

3- تعليمات كود css من الملف الخارجي

<p class="message" id="introduction">
MarkSheet is a free HTML and CSS tutorial.

</p>

p{ color: blue;}

.message{ color: green;}

#introduction{ color: red;}


نظراً لأن المتصفح يمكنه إختيار لون واحد فقط لتطبيقه على هذه الفقرة ، فسيتعين عليه تحديد قاعدة CSS التي لها الأولوية على القواعد الأخرى. هذا ما تدور حوله أولوية CSS (أو خصوصية CSS).

في مثالنا ، ستكون الفقرة باللون الأحمر لأن محدد #id أكثر تحديداً وبالتالي أكثر أهمية من المحددات الأخرى.

ترتيب قواعد CSS

إذا كانت هناك محددات متشابهة في CSS ، فستكون الأولوية للمحدد الأخير .

p{ color: blue;} p{ color: red;} /* Paragraphs will be red */


المحدد الحاصل على أعلى "درجة" سيسود ، بغض النظر عن الترتيب الذي  تظهر به القواعد

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

كيف تتجنب الإختلاط بين الأكواد

أثناء كتابة CSS  من السهل كتابة قواعد متضاربة ، حيث يتم تطبيق نفس الخاصية عدة مرات.

لتجنب ذلك:

  • إستخدم الفئات فقط: إستخدم introduction. بدلاً من introduction# ، حتى لو ظهر هذا العنصر مرة واحدة فقط في صفحة الويب الخاصة بك .

  • تجنب تطبيق فئات متعددة على عنصر HTML واحد: لا تكتب <p class = "big red important"> بل تكتب <p class = "title"> وهو أكثر وصفاً من الناحية الدلالية .

  • لا تستخدم الأنماط المضمنة مثل <div style = "background: blue؛">

reaction:

تعليقات