حاصل على الجنسية
مر على وجوده في المنتدى أكثر من 10 سنوات
|
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية -_online](https://2img.net/h/dc530.4shared.com/img/9dRBvJVw/s3/0.3564740103330516/-_online.png)
اقدم لكم اليوم شرح مبسط بلغة الاكواد الانسيابية " لغة المظهر" او (CSS) وهذا الشرح يتضمن وضع اطار حول عارضة اعلى المنتدى , وانتم مخيرين بوضع هذا الاطار اسفل العارضة فقط او اعلى العارضة فقط او على الجانبين .
# ملاحظة : اضغط على رؤية تكبير الصورة او رؤية الصورة بالابعاد الاصلية او افتحها في صفحة جديدة لرؤية واضحة للصور المدرجة في الشرح
# ملاحظة : اضغط على رؤية تكبير الصورة او رؤية الصورة بالابعاد الاصلية او افتحها في صفحة جديدة لرؤية واضحة للصور المدرجة في الشرح
ندخل في الشرح :
المتطلبات :
1-اكيد منتدى تابع لاحلى منتدى .
2- متصفح وافضل استخدام متصفح (Google Chrome) بدل المتصفحات الاخرى (ولمن ليس لديه هذا المتصفح هذا رابط التحميل اضغط هنا) .
3- الصبر + استكان شاي او فنجان قهوه
.
3- الصبر + استكان شاي او فنجان قهوه
![يبتسم](/users/1612/76/57/78/smiles/3281142574.png)
الان لخطوات العمل :
1- نقوم بالضغط زر الفأرة الايمن على منطقة عارضة المنتدى واختيار خيار (Inspect Element) او بالعربي (عرض العنصر) كما في الصورة ادناه :
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 816pw4](https://2img.net/h/im62.gulfup.com/816pw4.png)
أ- Id : وتعني المعرف الخاص بوسم معين وفي حالتنا هذه فان عارضة اعلى المنتدى اعطت بـ Id الذي يحتوي اسمها الثابت في كل المنتدى وهو fa_toolbar .
ب- Fa_toolbar : الاسم الخاص بعارضة اعلى المنتدى وفي حالتنا هذه (فهو الاسم الخاص بنسخة المنتدى رقم 2 التابعة لخدمة احلى منتدى , قد يختلف الاسم في النسخ الاخرى ) .
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 4NPYq5](https://2img.net/h/im62.gulfup.com/4NPYq5.png)
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 8B35NJ](https://2img.net/h/im62.gulfup.com/8B35NJ.png)
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية Lkc87X](https://2img.net/h/im78.gulfup.com/Lkc87X.png)
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية LYT8So](https://2img.net/h/im62.gulfup.com/lYT8So.png)
الان الشكل النهائي :
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية Zsivei](https://2img.net/h/im67.gulfup.com/Zsivei.png)
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 816pw4](https://2img.net/h/im62.gulfup.com/816pw4.png)
2- سوف يظهر اسفل المتصفح المستطيل الخاص بمحرر الاكواد البرمجية من خلاله نعرف وسم HTML الخاص بعارضة اعلى المنتدى وفي حالة نسخة هذا المنتدى (المشروح عليه) وذو النسخة الثانية لاحلى منتدى فان عارضة اعلى المنتدى تحمل الاسم (id=”fa_toolbar”) , الصورة ادناه تبين شكل محرر الاكواد البرمجية ومكان ظهور اسم وسم عارضة اعلى المنتدى :
[justify][center]![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 5NAidS](https://2img.net/h/im62.gulfup.com/5NAidS.png)
[justify][center]
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 5NAidS](https://2img.net/h/im62.gulfup.com/5NAidS.png)
الان نفصل معنى وسم عارضة اعلى المنتدى (id=”fa_toolbar”) وطريقة كتابته بلغة الاكواد الانسيابية CSS :
أ- Id : وتعني المعرف الخاص بوسم معين وفي حالتنا هذه فان عارضة اعلى المنتدى اعطت بـ Id الذي يحتوي اسمها الثابت في كل المنتدى وهو fa_toolbar .
ب- Fa_toolbar : الاسم الخاص بعارضة اعلى المنتدى وفي حالتنا هذه (فهو الاسم الخاص بنسخة المنتدى رقم 2 التابعة لخدمة احلى منتدى , قد يختلف الاسم في النسخ الاخرى ) .
اذن بما ان اسم عارضة اعلى المنتدى هي Id فما يكافيء الـ Id في لغة الاكواد الانسيابية هو # (الهاش او الشباك) .
اذن يكون الكود الخاص بلغة الاكواد الانسيابية لعارضة اعلى المنتدى كالتالي :
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 4NPYq5](https://2img.net/h/im62.gulfup.com/4NPYq5.png)
3- نتوجه الى مكان كتابة الاكواد الانسيابية لمعاينتها والتلاعب بها حسب ما نراه مناسب للمنتدى في الصورة التالية ومن ثم ننقل هذه الاكواد الى ورقة الاكواد الانسيابية في لوحة ادارة المنتدى :
[justify][center]![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية ZajGUc](https://2img.net/h/im62.gulfup.com/ZajGUc.png)
[justify][center]
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية ZajGUc](https://2img.net/h/im62.gulfup.com/ZajGUc.png)
ونكتب الاكواد التالية :
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 8B35NJ](https://2img.net/h/im62.gulfup.com/8B35NJ.png)
تعمدت لعدم كتابتي الكود بشكل نصي هنا وذلك لتعويدكم على كتابته بايديكم وفهم هذه الاكواد وليس فقط نسخ ولصق
.
![شرير](/users/1612/76/57/78/smiles/12266552.png)
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية Lkc87X](https://2img.net/h/im78.gulfup.com/Lkc87X.png)
الان ننقل هذا الكود الى صفحة الالوان الخاصة بالاكواد الانسيابية وللدخول لهذه الصفحة نتبع المسار التالي :
لوحة الادارة <<<<<< مظهر المنتدى <<<<<<< الصور والالوان <<<<<<<<< الالوان >>>>>>> ورقة تصميم CSS >>>>>>> ومن ثم الضغط على زر قدم .
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية LYT8So](https://2img.net/h/im62.gulfup.com/lYT8So.png)
الان الشكل النهائي :
![وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية Zsivei](https://2img.net/h/im67.gulfup.com/Zsivei.png)
يمكن زيادة سمك الاطار بتغيير الرقم 3 الى اي رقم تراه مناسب و كذلك يمكن تغيير اللون الاحمر الى اي لون يعجبكم فقط نضغط على اللون الاحمر و ستظهر لوحة الالوان التي نختار منها اللون المناسب وننقل كود اللون الى باقي الجوانب , كما يمكنكم حذف اي جانب والابقاء على جوانب معينه كحذف الجانب الاعلى والابقاء على الجانب الاسفل واليمين و اليسار او كما تراه انت مناسب للمنتدى .
كلمة :
! important
تعني اذا وجد هذا الكود سابقاً في المنتدى (اي من الاصل) واردنا اضافة نفس الكود ولكن بالوان وعرض جديد فاننا لا نستطيع حذف الكود الموجود اصلا والذي تكون الاولوية له وليس لكودنا الجديد حيث فقط نضيف كلمة
! important
في اخر كودنا الجديد لاعطاء الاولوية لكودنا بدل الكود الاصلي . ![يغمز](/users/1612/76/57/78/smiles/3519372425.png)
![يغمز](/users/1612/76/57/78/smiles/3519372425.png)
الى هنا ينتهي شرحنا هذا واعتذر للاطالة وتفصيلي بالشرح هو لصالحكم .
عند النقل الى المنتديات الاخرى يرجى ذكر حقوق شبكة ابن النيل والفرات .
[/justify]
[/center]
[/justify]
عدل سابقا من قبل T4RE9 في الخميس مايو 15, 2014 10:35 pm عدل 1 مرات (السبب : خطأ)