الأفضلية في تطبيق قواعد Css

ADMIN · 02-02-2007, 11:01 صباحاً

مرحباً..
إذا وضعت قواعد CSS متعارضة تشير إلى نفس العنصر، فهناك عدد من القواعد التي يتبعها المتصفح لتحديد القاعدة التي سيتبعها بحسب دقة القواعد في التعيين، و عند ذلك يتم تطبيقها على العنصر.

أعتقد أن هذه المقالة لا تبدو لك مهمة، و خاصةً أن هذه المشكلة -أي تضارب القواعد- قلما تحدث، و لكنها غالباً ستحدث في الملفات الكبيرة أو عند أخذ قواعد CSS من أكثر من ملف، لذلك لا مانع من إلقاء نظرة على هذا الأمر.

إذا كانت العناصر المختارة هي نفسها تماماً، فعند ذلك سيتم تطبيق الأخيرة، مثلاً :

كود:

p { color: red; } p { color: blue; }

عند ذلك فإن العنصر P سيأخذ اللون الأزرق، لأننا كتبناه آخراً.

و لكن هذه الحالة قلما تحدث، أن تكون العناصر المختارة هي نفسها تماماً، و لكن قد تحدث هذه الحالة عندما يتم "تداخل" بين العناصر المختارة، فمثلاً :

كود:

div p { color: red; } p { color: blue; }

يبدو هنا أن العنصر P الموجود داخل العنصر Div سيأخذ اللون الأزرق لأننا عرفنا لون العنصر P بشكل عام بالأزرق -في الآخر-، و لكن لا!، سيتم إسناد اللون الأحمر إلى العنصر P الموجود داخل العنصر Div، لماذا؟، لأن هذه القاعدة محددة و دقيقة أكثر من القاعدة الثانية، لذلك يتم تطبيق القواعد العامة ثم تطبيق القواعد الخاصة فوقها، أرجو أن تكون الفكرة قد وضحت.

و الآن سنحدد الحالات و نعطي لكل حالة عدد من النقاط التي تستحقها، فالحالات الأكثر نقاط هي التي تأخذ الأفضلية في التطبيق :
1- إذا حددت العنصر (مثلاً P، كما في الحالة الأولى)، عند ذلك تعتبر هذه الحالة هي الأقل دقة و تحديد لذلك تأخذ نقطة واحدة.
(مثال) إذا حددت عنصرين متداخلين (مثلاً Div P، كما في الحالة الثانية السطر الأول)، عند ذلك تعتبر هذه الحالة هي تطبيق للحالة الأولى مرتين (1+1) لذلك تأخذ نقطتين.

2- إذا حددت الطبقة (Class) (مثلاً .alternative) عند ذلك تأخذ 10 نقاط.
(مثال) إذا حددت عنصرين متداخلين و حددت الطبقة الخاصة بالثاني (مثلاً div p.alternative)، عند ذلك تعتبر هذه الحالة تطبيق للحالة الأولى مرتين، و للحالة الثانية مرة (1+1+10) لذلك تأخذ 12 نقطة.

3- إذا حددت الـ ID (مثلاً #content)، عند ذلك تأخذ مئة نقطة.
(مثال) إذا حددت عنصرين متداخلين، و حددت الـ ID الخاص بالعنصر الأول و حددت الطبقة الخاصة به أيضاً (body #content .alternative p)، عند ذلك تعتبر هذه الحالة تطبيق للحالة الأولى مرتين و للحالة الثالثة مرة، و للحالة الثانية مرة (1+100+10+1) لذلك تأخذ 112 نقطة.

لذلك إذا وضعت هذه الأمثلة الثلاث، فإن div p.alternative ستفوز على div p و يتم تطبيقها، في حين يتم تطبيق body #content .alternative p عليهما.

لذلك سنلخص النقاط كما يلي :
العنصر : نقطة واحدة.
الطبقة : 10 نقاط.
الـ ID : مئة نقطة.

ذلك بسهولة يمكنك معرفة القاعدة التي ستتطبق من حساب عدد النقاط الخاصة بها.
أرجو أن تكون قد استفدت من هذا الدرس.

المصدر:
http://www.htmldog.com

حقوق الدرس للكاتب مؤيد مارديني

02-02-2007, 11:01 صباحاً	#1 (permalink)
ADMIN .::+: Gulf Son :+::. تاريخ التسجيل: May 2005 الدولة: بلاد الخليج المشاركات: 53,991 معدل تقييم المستوى: 53	الأفضلية في تطبيق قواعد Css مرحباً.. إذا وضعت قواعد CSS متعارضة تشير إلى نفس العنصر، فهناك عدد من القواعد التي يتبعها المتصفح لتحديد القاعدة التي سيتبعها بحسب دقة القواعد في التعيين، و عند ذلك يتم تطبيقها على العنصر. أعتقد أن هذه المقالة لا تبدو لك مهمة، و خاصةً أن هذه المشكلة -أي تضارب القواعد- قلما تحدث، و لكنها غالباً ستحدث في الملفات الكبيرة أو عند أخذ قواعد CSS من أكثر من ملف، لذلك لا مانع من إلقاء نظرة على هذا الأمر. إذا كانت العناصر المختارة هي نفسها تماماً، فعند ذلك سيتم تطبيق الأخيرة، مثلاً : كود: p { color: red; } p { color: blue; } عند ذلك فإن العنصر P سيأخذ اللون الأزرق، لأننا كتبناه آخراً. و لكن هذه الحالة قلما تحدث، أن تكون العناصر المختارة هي نفسها تماماً، و لكن قد تحدث هذه الحالة عندما يتم "تداخل" بين العناصر المختارة، فمثلاً : كود: div p { color: red; } p { color: blue; } يبدو هنا أن العنصر P الموجود داخل العنصر Div سيأخذ اللون الأزرق لأننا عرفنا لون العنصر P بشكل عام بالأزرق -في الآخر-، و لكن لا!، سيتم إسناد اللون الأحمر إلى العنصر P الموجود داخل العنصر Div، لماذا؟، لأن هذه القاعدة محددة و دقيقة أكثر من القاعدة الثانية، لذلك يتم تطبيق القواعد العامة ثم تطبيق القواعد الخاصة فوقها، أرجو أن تكون الفكرة قد وضحت. و الآن سنحدد الحالات و نعطي لكل حالة عدد من النقاط التي تستحقها، فالحالات الأكثر نقاط هي التي تأخذ الأفضلية في التطبيق : 1- إذا حددت العنصر (مثلاً P، كما في الحالة الأولى)، عند ذلك تعتبر هذه الحالة هي الأقل دقة و تحديد لذلك تأخذ نقطة واحدة. (مثال) إذا حددت عنصرين متداخلين (مثلاً Div P، كما في الحالة الثانية السطر الأول)، عند ذلك تعتبر هذه الحالة هي تطبيق للحالة الأولى مرتين (1+1) لذلك تأخذ نقطتين. 2- إذا حددت الطبقة (Class) (مثلاً .alternative) عند ذلك تأخذ 10 نقاط. (مثال) إذا حددت عنصرين متداخلين و حددت الطبقة الخاصة بالثاني (مثلاً div p.alternative)، عند ذلك تعتبر هذه الحالة تطبيق للحالة الأولى مرتين، و للحالة الثانية مرة (1+1+10) لذلك تأخذ 12 نقطة. 3- إذا حددت الـ ID (مثلاً #content)، عند ذلك تأخذ مئة نقطة. (مثال) إذا حددت عنصرين متداخلين، و حددت الـ ID الخاص بالعنصر الأول و حددت الطبقة الخاصة به أيضاً (body #content .alternative p)، عند ذلك تعتبر هذه الحالة تطبيق للحالة الأولى مرتين و للحالة الثالثة مرة، و للحالة الثانية مرة (1+100+10+1) لذلك تأخذ 112 نقطة. لذلك إذا وضعت هذه الأمثلة الثلاث، فإن div p.alternative ستفوز على div p و يتم تطبيقها، في حين يتم تطبيق body #content .alternative p عليهما. لذلك سنلخص النقاط كما يلي : العنصر : نقطة واحدة. الطبقة : 10 نقاط. الـ ID : مئة نقطة. ذلك بسهولة يمكنك معرفة القاعدة التي ستتطبق من حساب عدد النقاط الخاصة بها. أرجو أن تكون قد استفدت من هذا الدرس. المصدر: http://www.htmldog.com حقوق الدرس للكاتب مؤيد مارديني من مواضيع ADMIN في المنتدى الملك فيصل بن عبدالعزيز آلـ سعود [مقال] شامل بساييف والقناة السعودية الأولى فن الاعلان درس عمل خلفيه انابيب الكترونية درس تساقط الثلج __________________ يقول الامام مالك رحمه الله: إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين. وقال أبو الوفا بن عقيل رحمه الله: انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق. وحيد القرن، كسرنا قرنه، ودككنا حصنه، وهدمنا برجه، فخرج يتبختر بعتاده مزهواً بعدده ففللنا حدّه، وقتلنا جنده، وفرقنا صحبه، والفضل لله وحده ولئن أبيد أبناء دولة الإسلام عن بكرة أبيهم خيرٌ لهم من أن يحكمهم رافضيٌّ خبيث أو أن تستظلّ بغداد برايات الصفويين يوما واحداً.

أدوات الموضوع
عرض نسخة صالحة للطباعة أرسل هذا الموضوع إلى صديق
طرق مشاهدة الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
كرة قدم - الأهلي ومازيمبي يحققان الأفضلية	ابن الخليج	رياضة و كورة و سيارات	0	10-04-2010 01:00 صباحاً
تطبيق رمضانيات للجوال	amar1	هواتف و ملحقاتها	0	08-15-2010 10:52 صباحاً
رياضات ميكانيكية - هاميلتون وفتيل يتقاسمان الأفضلية	ابن الخليج	رياضة و كورة و سيارات	0	05-08-2010 01:00 صباحاً
كرة قدم - روبن يلعب دور "البطل" ويمنح بايرن الأفضلية	ابن الخليج	رياضة و كورة و سيارات	0	04-22-2010 01:00 صباحاً
عروض دمج وتركيب قواعد البيانات وتحويل قواعد البيانات والدعم الفني للمواقع	سامح المصري	تبادل إعلاني و تجاري	1	01-16-2008 04:23 صباحاً

الأفضلية في تطبيق قواعد Css

منتديات شبكة ابن الخليج