دورة css كاملة للمبتدئين
الدرس السابع
سوف نلقي الضوء الآن على ما يرى الناس أنه أعظم شيء في صفحات الأنماط المتعاقبة : التحديد و الطبقات . و إليك الخصائص التي ستساعدنا في ذلك :
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 .
الخاصية position :
H4 { position: absolute; left: 100px; top: 43px }
إذا كنت تتساءل الآن عن الأشياء التي تستطيع تحديد مكانها كما فعلنا بالفقرة في مثالنا السابق ، فإن الجواب سيكون : أي شيء ، فقرات ، كلمات محددة ، صور GIF أو JPG ، أفلام الكويك تايم .. إلخ . يمكنك تحديد موضع أي شيء في أي مكان .
تكلمنا حتى الآن عن التحديد المطلق absolute ، عندما تحدد مكان عنصر ما بصفة مطلقة absolute فهو يتحدد مكانه بصفة مستقلة عن أي كائن آخر في الصفحة ، و العنصر محدد المكان يرث الخصائص الأخرى أيضاً كنوع الخط و حجمه .. إلخ .
هل هناك أي بديل عن التحديد المطلق ؟ بالتأكيد ، هناك التحديد النسبي relative . التحديد النسبي يعني أن الموضع الذي تحدده لعنصر ما يكون بالنسبة إلى موضعه الطبيعي في مجرى الصفحة ، و إليك مثال على هذا :
I { position: relative; left: 40px; top: 10px }بالإضافة إلى القيم absolute و relative تستطيع أيضاً أن تستخدم القيمة static ، و هي تعني أن العنصر سوف يوضع في مكانه الطبيعي في الصفحة كما اعتدنا عليه بدون تحديد مكان خاص له .
التحكم في العناصر المحددة الأماكن :
بالإضافة إلى تحكمك في تحديد مكان الركن العلوي الأيسر للعنصر ، يمكنك أيضاً أن تتحكم في عرض و ارتفاع العنصر و ماذا سيحدث للمحتويات التي سوف تفيض عن حدوده :
الخاصية width :
هل تذكر كيف كان النص في الفقرة التي حددنا مكانها في الأمثلة السابقة يسير بشكل طبيعي إلى اليمين ، بهذه الخاصية تستطيع التحكم في حجم المسافة التي يمكن أن يسير فيها النص ، أي أنك تحدد عرض الصندوق الذي يحتوي على العنصر ، و بذلك لا يستطيع النص أن يخرج عن العرض المحدد للصندوق :
DIV { position: absolute; left: 200px; top: 40px; width: 150px }
الخاصية width تعمل فقط مع العنصر المحدد مكانه بطريقة مطلقة absolute . و تستطيع استخدام أي من وحدات القياس التي تكلمنا عنها سابقاً أو يمكنك استخدام النسب المئوية التي تشير إلى عرض العنصر الأب . في المتصفحان IE 4 و IE 5 هذه الخاصية تعمل أيضاً مع الصور ، حيث يمكنك أن تمدد أو تضغط صورة ما بأن تحدد عرضها بالخاصية width .
الخاصية height :
السمة height تعمل مثل width تماماً بخلاف أنها تعمل على الاتجاه العمودي :
DIV { position: absolute; left: 200px; top: 40px; height: 150px }
للأسف ، فإن المتصفح كوميونيكيتور لا يدعم هذه الخاصية ، و أحيانا سوف تجد بعض الإزعاج مع المتصفحان إنترنت إكسبلورر 4 و إنترنت إكسبلورر 5 أيضاً .
الخاصية overflow :
الخاصية overflow :
ماذا سيحدث إذا كان محتوى صندوق ما أكبر من العرض width و / أو الارتفاع height الذي حددته له ؟ يمكنك أن تقرر ماذا سيحدث له باستخدام الخاصية overflow التي تحدد ماذا سيحدث للنص الذي يفيض عن الحجم المحدد :
DIV { width: 150px; height: 150px; overflow: scroll }
هذه الخاصية تعمل مع الواصفات التي تنشيء فقرة جديدة بنفسها سواء كانت محددة المكان أو لا . الآن يوجد أمامك الاختيارات التالية لتختار من بينها القيمة التي ستستخدمها مع هذه الخاصية :
1- القيمة visible تجعل كل المحتويات يتم عرضها حتى لو تخطت الحجم المحدد للصندوق .
2- القيمة hidden تجعل المتصفح يقص أي شيء يخرج عن الخط المحدد للحجم ، و هذا يعني أنه من المحتمل ألا يعرض جزء من المحتوى المطلوب .
3- القيمة auto تجعل المتصفح يقص المحتوى الزائد و لكنه سوف يضيف قضيب انزلاق إذا كان هناك محتوى زائد لم يتم عرضه لتستطيع الوصول إليه إذا أردت .
4- القيمة scroll تجعل المتصفح يقص المحتوى الزائد لكنه دائماً سوف يضيف قضيب انزلاق حتى لو لم يكن مطلوباً .
هذه الخاصية مدعومة من المتصفحان IE 4 و IE 5 للويندوز فقط .
الخاصية visibility :
مع هذه الخاصية تستطيع أن تجعل العناصر خفية في صفحة الويب ، سواء كانت محددة المكان أو لا :
الاختيارات التي أمامك هي :
1- visible تجعل العنصر مرئي .
2- hidden تجعل العنصر خفي .
3- inherit يعنى أن العنصر سوف يرث إذا كان مرئي أو خفي من عنصره الأب .
عندما يكون عنصر ما خفي فهو لا يزال يأخذ نفس الحجم في نافذة المتصفح كما لو كان مرئي ، لكنك لا تراه ، هذا كل ما في الأمر . لذا إذا كنت تحيط صورة أخفيتها بنص ما ، فسوف يظهر أن النص يحيط بمساحة خالية . المتصفج كوميونيكيتور لا يدعم هذه الخاصية أما IE 4 و IE 5 فيدعمانها .
الخاصية clip :
2- القيمة hidden تجعل المتصفح يقص أي شيء يخرج عن الخط المحدد للحجم ، و هذا يعني أنه من المحتمل ألا يعرض جزء من المحتوى المطلوب .
3- القيمة auto تجعل المتصفح يقص المحتوى الزائد و لكنه سوف يضيف قضيب انزلاق إذا كان هناك محتوى زائد لم يتم عرضه لتستطيع الوصول إليه إذا أردت .
4- القيمة scroll تجعل المتصفح يقص المحتوى الزائد لكنه دائماً سوف يضيف قضيب انزلاق حتى لو لم يكن مطلوباً .
هذه الخاصية مدعومة من المتصفحان IE 4 و IE 5 للويندوز فقط .
الخاصية visibility :
مع هذه الخاصية تستطيع أن تجعل العناصر خفية في صفحة الويب ، سواء كانت محددة المكان أو لا :
DIV { visibility: hidden }
1- visible تجعل العنصر مرئي .
2- hidden تجعل العنصر خفي .
3- inherit يعنى أن العنصر سوف يرث إذا كان مرئي أو خفي من عنصره الأب .
عندما يكون عنصر ما خفي فهو لا يزال يأخذ نفس الحجم في نافذة المتصفح كما لو كان مرئي ، لكنك لا تراه ، هذا كل ما في الأمر . لذا إذا كنت تحيط صورة أخفيتها بنص ما ، فسوف يظهر أن النص يحيط بمساحة خالية . المتصفج كوميونيكيتور لا يدعم هذه الخاصية أما IE 4 و IE 5 فيدعمانها .
الخاصية clip :
بهذه الخاصية تستطيع التحكم في أي أجزاء العنصر ستظهر و أيها ستختفي :
هذه الخاصية تعمل فقط مع العناصر المحددة أماكنها بصفة مطلقة ، أي العناصر التي تم تطبيق الخاصية position عليها بالقيمة absolute . و هي تعمل مع المتصفحان IE 4 و IE 5 بالإضافة إلى كوميونيكيتور . القص الذي تقوم به هذه الخاصية يؤثر فقط على عرض العنصر المقصوص و ليس على هيكل الصفحة ، و بالتالي فإن أي قص تقوم به لن يؤثر على المساحة التي يأخذها العنصر أي أنها ستظل كما هي .
القاعدة السابقة تقص منطقة مستطيلة rect اختصار rectangle (و هو الشكل الوحيد المدعوم حتى الآن) ، كل ما هو داخل المنطقة المقصوصة سوف يظهر . الجانب العلوي من المنطقة المقصوصة في مثالنا يبعد 10 بكسل عن قمة الصندوق الذي يحتوي على العنصر ، أما الجانب الأيمن للمنطقة المقصوصة فيبعد 200 بكسل عن الجانب الأيسر للصندوق ، و الجانب السفلي يبعد 100 بكسل عن الجانب العلوي من الصندوق ، و الجانب الأيسر يبعد 40 بكسل عن الجانب الأيسر للصندوق .
H2 { clip: rect(10px 200px 100px 40px) }
هذه الخاصية تعمل فقط مع العناصر المحددة أماكنها بصفة مطلقة ، أي العناصر التي تم تطبيق الخاصية position عليها بالقيمة absolute . و هي تعمل مع المتصفحان IE 4 و IE 5 بالإضافة إلى كوميونيكيتور . القص الذي تقوم به هذه الخاصية يؤثر فقط على عرض العنصر المقصوص و ليس على هيكل الصفحة ، و بالتالي فإن أي قص تقوم به لن يؤثر على المساحة التي يأخذها العنصر أي أنها ستظل كما هي .
القاعدة السابقة تقص منطقة مستطيلة rect اختصار rectangle (و هو الشكل الوحيد المدعوم حتى الآن) ، كل ما هو داخل المنطقة المقصوصة سوف يظهر . الجانب العلوي من المنطقة المقصوصة في مثالنا يبعد 10 بكسل عن قمة الصندوق الذي يحتوي على العنصر ، أما الجانب الأيمن للمنطقة المقصوصة فيبعد 200 بكسل عن الجانب الأيسر للصندوق ، و الجانب السفلي يبعد 100 بكسل عن الجانب العلوي من الصندوق ، و الجانب الأيسر يبعد 40 بكسل عن الجانب الأيسر للصندوق .
هذا يعني أنه إذا كان الصندوق الرمادي بالأسفل فقرة ، أو صورة ، فإن المنطقة المقصوصة ستكون هي الخط الأصفر ، و لذلك فإن المنطقة الوحيدة التي ستظهر من المربع كله هي المنطقة السوداء التي يحوطها الخط الأصفر .
يمكنك أيضاً أن تستخدم أي وحدة من وحدات القياس الأخرى إذا أردت . و إذا استخدمت القيمة auto فسوف يعني هذا أنه لن يحدث أي قص . تستطيع كذلك أن تستخدم القيم السالبة لهذه الخاصية .
ترتيب طبقات النص و الصور :
يمكنك أيضاً أن تستخدم أي وحدة من وحدات القياس الأخرى إذا أردت . و إذا استخدمت القيمة auto فسوف يعني هذا أنه لن يحدث أي قص . تستطيع كذلك أن تستخدم القيم السالبة لهذه الخاصية .
ترتيب طبقات النص و الصور :
الخاصية z-index :
عندما تحدد مكان عدد من العناصر ، و تجد أنهم تداخلوا فوق بعض ، استخدم هذه الخاصية لتحدد أيهم سوف تظهر فوق الأخرى :
بما أن الواصفة H2 أخذت القيمة الأعلى للخاصية z-index فهي التي ظهرت فوق الواصفة H1 . (المتصفحان IE 4 و IE 5 في بعض الأحيان يصبحان مشاكسين قليلاً مع هذه الخاصية) . يجب أن تستخدم أرقام صحيحة مع هذه الخاصية التي تعمل مع العناصر المحددة أماكنها positioned بصفة مطلقة absolute أو نسبية relative . و بالطبع تستطيع أن تستخدم الخاصية z-index مع الصور أيضاً . (مع المتصفح كوميونيكيتور من الأفضل أن تحيط الواصفة <IMG> بإحدى الواصفتين <SPAN> أو <DIV> ثم تطبق الخاصية على إحداهما بدلاً من الواصفة <IMG>) .
التحليل و التوافق :
سنلقي الآن الضوء على بعض الحيل التي تجعل صفحاتك المدعمة بصفحات الأنماط المتعاقبة سهلة التحليل و العرض في المتصفحات المختلفة التي تستعرضها :
1- استخدم الأنماط مع واصفات هتمل مماثلة :
إذا كنت تريد التحكم في درجة سماكة الخط عن طريق الخاصية font-weight ، فلماذا لا تستخدم الواصفة <B> لتطبيق النمط عليها . و بهذه الطريقة فإن النص سيبدو سميكاً في المتصفحات القديمة أيضاً . حاول أن تجد واصفات الهتمل الملائمة للنمط الذي تطبقه حتى يصبح عندك على الأقل بعض من التأثير الذي أردته على المتصفحات التي لا تدعم CSS .
2- امزج الأنماط مع واصفات الهتمل :
إذا كنت تريد أن تتيقن من أن فقرة ما سوف تكون باللون الأزرق ، فاستخدم قاعدة صفحات الأنماط و واصفة الهتمل لتتأكد من ذلك ، أي أنك سوف تستخدم الخاصية color: blue بالإضافة إلى الواصفة <"FONT COLOR="blue> ، و هكذا في كل شيء ، هل فهمت الفكرة ؟
جعل صفحاتك متوافقة مع المتصفحات المختلفة ليس شيئاً سهلاً تقضي فيه خمس دقائق في النهاية ، بل هو شيء تبقيه في عقلك أثناء عملية التصميم كلها حيث تنشيء قواعدك و تحدد أهدافك . و كالعادة فإن أهم ثلاث كلمات هي : اختبر ، اختبر ، اختبر .
مصادر صفحات الأنماط المتعاقبة على الإنترنت :
1- الموقع الرسمي لصفحات الأنماط المتعاقبة .
2- دليل صفحات الأنماط - خرائط بيانات تخبرك بدقة عن الذي يعمل على كل متصفح .
3- مراجعة صفحات الأنماط - تتأكد من صحة تركيب القواعد في شفرة صفحات الأنماط الخاصة بك .
4- مؤشرات صفحات الأنماط - أفضل مصدر للوصلات عن صفحات الأنماط .
عندما تحدد مكان عدد من العناصر ، و تجد أنهم تداخلوا فوق بعض ، استخدم هذه الخاصية لتحدد أيهم سوف تظهر فوق الأخرى :
و الآن لنر نتيجة هاتان القاعدتان ( لقد جعلت لون نص الواصفة H2 بالأحمر حتى ترى الفرق) :H2 { position: relative; left: 10px; top: 0px; z-index: 10 }H1 { position: relative; left: 33px; top: -45px; z-index: 1 }
بما أن الواصفة H2 أخذت القيمة الأعلى للخاصية z-index فهي التي ظهرت فوق الواصفة H1 . (المتصفحان IE 4 و IE 5 في بعض الأحيان يصبحان مشاكسين قليلاً مع هذه الخاصية) . يجب أن تستخدم أرقام صحيحة مع هذه الخاصية التي تعمل مع العناصر المحددة أماكنها positioned بصفة مطلقة absolute أو نسبية relative . و بالطبع تستطيع أن تستخدم الخاصية z-index مع الصور أيضاً . (مع المتصفح كوميونيكيتور من الأفضل أن تحيط الواصفة <IMG> بإحدى الواصفتين <SPAN> أو <DIV> ثم تطبق الخاصية على إحداهما بدلاً من الواصفة <IMG>) .
التحليل و التوافق :
سنلقي الآن الضوء على بعض الحيل التي تجعل صفحاتك المدعمة بصفحات الأنماط المتعاقبة سهلة التحليل و العرض في المتصفحات المختلفة التي تستعرضها :
1- استخدم الأنماط مع واصفات هتمل مماثلة :
إذا كنت تريد التحكم في درجة سماكة الخط عن طريق الخاصية font-weight ، فلماذا لا تستخدم الواصفة <B> لتطبيق النمط عليها . و بهذه الطريقة فإن النص سيبدو سميكاً في المتصفحات القديمة أيضاً . حاول أن تجد واصفات الهتمل الملائمة للنمط الذي تطبقه حتى يصبح عندك على الأقل بعض من التأثير الذي أردته على المتصفحات التي لا تدعم CSS .
2- امزج الأنماط مع واصفات الهتمل :
إذا كنت تريد أن تتيقن من أن فقرة ما سوف تكون باللون الأزرق ، فاستخدم قاعدة صفحات الأنماط و واصفة الهتمل لتتأكد من ذلك ، أي أنك سوف تستخدم الخاصية color: blue بالإضافة إلى الواصفة <"FONT COLOR="blue> ، و هكذا في كل شيء ، هل فهمت الفكرة ؟
جعل صفحاتك متوافقة مع المتصفحات المختلفة ليس شيئاً سهلاً تقضي فيه خمس دقائق في النهاية ، بل هو شيء تبقيه في عقلك أثناء عملية التصميم كلها حيث تنشيء قواعدك و تحدد أهدافك . و كالعادة فإن أهم ثلاث كلمات هي : اختبر ، اختبر ، اختبر .
مصادر صفحات الأنماط المتعاقبة على الإنترنت :
1- الموقع الرسمي لصفحات الأنماط المتعاقبة .
2- دليل صفحات الأنماط - خرائط بيانات تخبرك بدقة عن الذي يعمل على كل متصفح .
3- مراجعة صفحات الأنماط - تتأكد من صحة تركيب القواعد في شفرة صفحات الأنماط الخاصة بك .
4- مؤشرات صفحات الأنماط - أفضل مصدر للوصلات عن صفحات الأنماط .
ليست هناك تعليقات:
إرسال تعليق