Nwahy Articles V3 pro

التحديد و الطبقات

التحديد و الطبقات

القسم css - الزيارات 8578 - التاريخ 20/3/2008
سوف نلقي الضوء الآن على ما يرى الناس أنه أعظم شيء في صفحات الأنماط المتعاقبة : التحديد و الطبقات . و إليك الخصائص التي ستساعدنا في ذلك :

1- position

2- left

3- top

4- width

5- height

6- overflow

7- visibility

8- clip

9- z-index

ملحوظة : مواصفات خصائص التحديد تم تطويرها بعد معظم خصائص صفحات الأنماط الأخرى ، و لذلك فالمتصفح IE 3 لا يدعم أي منها ، و بالتالي فأنت ليس لديك بالنسبة لخصائص التحديد و الطبقات سوى المتصفحان IE 4 و IE 5 .

--------------------------------------------------------------------------------



[color=FA0309]الخاصية position : [/color]

H4 { position: absolute; left: 100px; top: 43px }


القيم top و left هي قيم بسيطة و صريحة للغاية : القيمة left تحدد المسافة بين العنصر و الحافة اليسرى لنافذة المتصفح ، و القيمة top تحدد المسافة بين العنصر و الحافة العلوية للنافذة . و لتحديد هذه المسافات يمكنك استخدام وحدات القياس أو النسب المئوية . وحدات القياس هي نفسها التي تكلمنا عنها من قبل : البكسل ، النقطة ، البوصة .. إلخ . و إذا استخدمت النسب المئوية فإن النسبة تشير إلى حجم العنصر الأب .

إذا كنت تتساءل الآن عن الأشياء التي تستطيع تحديد مكانها كما فعلنا بالفقرة في مثالنا السابق ، فإن الجواب سيكون : أي شيء ، فقرات ، كلمات محددة ، صور GIF أو JPG ، أفلام الكويك تايم .. إلخ . يمكنك تحديد موضع أي شيء في أي مكان .

تكلمنا حتى الآن عن التحديد المطلق absolute ، عندما تحدد مكان عنصر ما بصفة مطلقة absolute فهو يتحدد مكانه بصفة مستقلة عن أي كائن آخر في الصفحة ، و العنصر محدد المكان يرث الخصائص الأخرى أيضاً كنوع الخط و حجمه .. إلخ .

هل هناك أي بديل عن التحديد المطلق ؟ بالتأكيد ، هناك التحديد النسبي relative . التحديد النسبي يعني أن الموضع الذي تحدده لعنصر ما يكون بالنسبة إلى موضعه الطبيعي في مجرى الصفحة ، و إليك مثال على هذا :

I { position: relative; left: 40px; top: 10px }


بالإضافة إلى القيم absolute و relative تستطيع أيضاً أن تستخدم القيمة static ، و هي تعني أن العنصر سوف يوضع في مكانه الطبيعي في الصفحة كما اعتدنا عليه بدون تحديد مكان خاص له .

[color=FA0309]التحكم في العناصر المحددة الأماكن : [/color]

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

[color=FA0309]الخاصية width : [/color]

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

DIV { position: absolute; left: 200px; top: 40px; width: 150px }


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

الخاصية width تعمل فقط مع العنصر المحدد مكانه بطريقة مطلقة absolute . و تستطيع استخدام أي من وحدات القياس التي تكلمنا عنها سابقاً أو يمكنك استخدام النسب المئوية التي تشير إلى عرض العنصر الأب . في المتصفحان IE 4 و IE 5 هذه الخاصية تعمل أيضاً مع الصور ، حيث يمكنك أن تمدد أو تضغط صورة ما بأن تحدد عرضها بالخاصية width .

[color=FA0309]الخاصية height : [/color]

السمة height تعمل مثل width تماماً بخلاف أنها تعمل على الاتجاه العمودي :

DIV { position: absolute; left: 200px; top: 40px; height: 150px }


للأسف ، فإن المتصفح كوميونيكيتور لا يدعم هذه الخاصية ، و أحيانا سوف تجد بعض الإزعاج مع المتصفحان إنترنت إكسبلورر 4 و إنترنت إكسبلورر 5 أيضاً .

[color=FA0309]الخاصية overflow : [/color]

ماذا سيحدث إذا كان محتوى صندوق ما أكبر من العرض width و / أو الارتفاع height الذي حددته له ؟ يمكنك أن تقرر ماذا سيحدث له باستخدام الخاصية overflow التي تحدد ماذا سيحدث للنص الذي يفيض عن الحجم المحدد :

DIV { width: 150px; height: 150px; overflow: scroll }


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

1- القيمة visible تجعل كل المحتويات يتم عرضها حتى لو تخطت الحجم المحدد للصندوق .

2- القيمة hidden تجعل المتصفح يقص أي شيء يخرج عن الخط المحدد للحجم ، و هذا يعني أنه من المحتمل ألا يعرض جزء من المحتوى المطلوب .

3- القيمة auto تجعل المتصفح يقص المحتوى الزائد و لكنه سوف يضيف قضيب انزلاق إذا كان هناك محتوى زائد لم يتم عرضه لتستطيع الوصول إليه إذا أردت .

4- القيمة scroll تجعل المتصفح يقص المحتوى الزائد لكنه دائماً سوف يضيف قضيب انزلاق حتى لو لم يكن مطلوباً .

هذه الخاصية مدعومة من المتصفحان IE 4 و IE 5 للويندوز فقط .

--------------------------------------------------------------------------------



[color=FA0309]الخاصية visibility : [/color]

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

DIV { visibility: hidden }


الاختيارات التي أمامك هي :

1- visible تجعل العنصر مرئي .

2- hidden تجعل العنصر خفي .

3- inherit يعنى أن العنصر سوف يرث إذا كان مرئي أو خفي من عنصره الأب .

عندما يكون عنصر ما خفي فهو لا يزال يأخذ نفس الحجم في نافذة المتصفح كما لو كان مرئي ، لكنك لا تراه ، هذا كل ما في الأمر . لذا إذا كنت تحيط صورة أخفيتها بنص ما ، فسوف يظهر أن النص يحيط بمساحة خالية . المتصفج كوميونيكيتور لا يدعم هذه الخاصية أما IE 4 و IE 5 فيدعمانها .

--------------------------------------------------------------------------------



[color=FA0309]الخاصية clip : [/color]

بهذه الخاصية تستطيع التحكم في أي أجزاء العنصر ستظهر و أيها ستختفي :

H2 { clip: rect(10px 200px 100px 40px) }


هذه الخاصية تعمل فقط مع العناصر المحددة أماكنها بصفة مطلقة ، أي العناصر التي تم تطبيق الخاصية position عليها بالقيمة absolute . و هي تعمل مع المتصفحان IE 4 و IE 5 بالإضافة إلى كوميونيكيتور . القص الذي تقوم به هذه الخاصية يؤثر فقط على عرض العنصر المقصوص و ليس على هيكل الصفحة ، و بالتالي فإن أي قص تقوم به لن يؤثر على المساحة التي يأخذها العنصر أي أنها ستظل كما هي .

القاعدة السابقة تقص منطقة مستطيلة rect اختصار rectangle (و هو الشكل الوحيد المدعوم حتى الآن) ، كل ما هو داخل المنطقة المقصوصة سوف يظهر . الجانب العلوي من المنطقة المقصوصة في مثالنا يبعد 10 بكسل عن قمة الصندوق الذي يحتوي على العنصر ، أما الجانب الأيمن للمنطقة المقصوصة فيبعد 200 بكسل عن الجانب الأيسر للصندوق ، و الجانب السفلي يبعد 100 بكسل عن الجانب العلوي من الصندوق ، و الجانب الأيسر يبعد 40 بكسل عن الجانب الأيسر للصندوق .

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

i



يمكنك أيضاً أن تستخدم أي وحدة من وحدات القياس الأخرى إذا أردت . و إذا استخدمت القيمة auto فسوف يعني هذا أنه لن يحدث أي قص . تستطيع كذلك أن تستخدم القيم السالبة لهذه الخاصية .

--------------------------------------------------------------------------------



ترتيب طبقات النص و الصور :

[color=FA0309]الخاصية z-index : [/color]

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

H2 { position: relative; left: 10px; top: 0px; z-index: 10 }

H1 { position: relative; left: 33px; top: -45px; z-index: 1 }


و الآن لنر نتيجة هاتان القاعدتان ( لقد جعلت لون نص الواصفة H2 بالأحمر حتى ترى الفرق) :

بما أن الواصفة H2 أخذت القيمة الأعلى للخاصية z-index فهي التي ظهرت فوق الواصفة H1 . (المتصفحان IE 4 و IE 5 في بعض الأحيان يصبحان مشاكسين قليلاً مع هذه الخاصية) . يجب أن تستخدم أرقام صحيحة مع هذه الخاصية التي تعمل مع العناصر المحددة أماكنها positioned بصفة مطلقة absolute أو نسبية relative . و بالطبع تستطيع أن تستخدم الخاصية z-index مع الصور أيضاً . (مع المتصفح كوميونيكيتور من الأفضل أن تحيط الواصفة <IMG> بإحدى الواصفتين <SPAN> أو <DIV> ثم تطبق الخاصية على إحداهما بدلاً من الواصفة <IMG>) .

--------------------------------------------------------------------------------



[color=FA0309]التحليل و التوافق :[/color]

سنلقي الآن الضوء على بعض الحيل التي تجعل صفحاتك المدعمة بصفحات الأنماط المتعاقبة سهلة التحليل و العرض في المتصفحات المختلفة التي تستعرضها :

1- استخدم الأنماط مع واصفات هتمل مماثلة :

إذا كنت تريد التحكم في درجة سماكة الخط عن طريق الخاصية font-weight ، فلماذا لا تستخدم الواصفة <B> لتطبيق النمط عليها . و بهذه الطريقة فإن النص سيبدو سميكاً في المتصفحات القديمة أيضاً . حاول أن تجد واصفات الهتمل الملائمة للنمط الذي تطبقه حتى يصبح عندك على الأقل بعض من التأثير الذي أردته على المتصفحات التي لا تدعم CSS .

2- امزج الأنماط مع واصفات الهتمل :

إذا كنت تريد أن تتيقن من أن فقرة ما سوف تكون باللون الأزرق ، فاستخدم قاعدة صفحات الأنماط و واصفة الهتمل لتتأكد من ذلك ، أي أنك سوف تستخدم الخاصية color: blue بالإضافة إلى الواصفة <'FONT COLOR='blue> ، و هكذا في كل شيء ، هل فهمت الفكرة ؟

جعل صفحاتك متوافقة مع المتصفحات المختلفة ليس شيئاً سهلاً تقضي فيه خمس دقائق في النهاية ، بل هو شيء تبقيه في عقلك أثناء عملية التصميم كلها حيث تنشيء قواعدك و تحدد أهدافك . و كالعادة فإن أهم ثلاث كلمات هي : اختبر ، اختبر ، اختبر .



[color=FA0309]مصادر صفحات الأنماط المتعاقبة على الإنترنت :[/color]

1- الموقع الرسمي لصفحات الأنماط المتعاقبة .

2- دليل صفحات الأنماط - خرائط بيانات تخبرك بدقة عن الذي يعمل على كل متصفح .

3- مراجعة صفحات الأنماط - تتأكد من صحة تركيب القواعد في شفرة صفحات الأنماط الخاصة بك .

4- مؤشرات صفحات الأنماط - أفضل مصدر للوصلات عن صفحات الأنماط .
مشاركة الموضوع
Facebook Twitter Google+ Pinterest Reddit StumbleUpon Linkedin Tumblr Google Bookmarks Email
كن أول من يقيم الموضوع
12345

أضف تعليقك على الموضوع