romaissa
10-30-2013, بتوقيت غرينيتش 08:49 PM
http://www.dzbatna.com/images/icons/idea.gif ط³ظ„ط³ظ„ط© ط¯ط±ظˆط³ ظ†طµط§ط¦ط*: ظ†طµط§ط¦ط* ظ„طھظ†ط¸ظٹظ… ط§ظ„ط¹ظ…ظ„ ظپظٹ css (http://www.dzbatna.com/t2036405/)
السلام عليكم ورحمة الله وبركاته
...
بعد غياب طويل لظروف خارجة عن اراداتنا نعود ان شاء الله بسلسلة دروس مستفادة من لغة css هيا عبارة عن نصائح مستفادة من خلال تجربتي مع css نصائح وطرق يجب عليك ان تعرفها لتحسن كتابتك في css ولتزيد من الفاعلية في الكتابة .
لزيادة السرعة في التحميل ومساعدة المتصفح على ترجمة الاوامر بشكل اسرع وتنظيم الصور الجمالية
----------------------------------------------------------------------------------------
1- قم بتجميع ملفات css داخل مجلد واحد فقط .
http://www.red-team-design.com/wp-content/uploads/2014/10/group-css-files.png
- المعنى المقصود من هنا هو تنظيم وتصنيف العمل بشكل يسمح بتسهيل مراجعة العمل مما يساعد في النهاية على تحسين بناء الموقع او العمل المراد في النهاية،
كمان من خبرتي المتواضعة التنظيم حلو .
----------------------------------------------------------------------------------------
2- استخدم محددات ذات معنى وذات كفاءة .
بمعنى انه عند كتابة محدد وليكن مثلا id ليكن ذا اسم محدد يعبر عن المنطقة اللى تعمل فيها ولتكن مثلا الهيدر header
سوف يكون كلإتي :
رمز Code:
<div id="hed_r"></div>
ويكون محدد ال
css ير الى منطقة الهيد للتذكر مثلا الصور اليمنى المشار اليها في الحرف r ايضا يجب عليك عن استخدام محددات ذات وصف دقيق لتحديد جزء معين مثل المحدد الاتي
رمز Code:
ul li a span
يجب ان تعلم ان المتصفحات تقرا السطور من اليمين الى اليسار قد يكون ذلك غريبا ولكن لتعلم ان المتصفحات تقوم بمطابقة المكتوب بالhtml fالاستايل style الموصوف با css
لتفهم اكتر اقرا هذا المقال المفيد من جوجل GOOGLE efficient CSS selectors (http://code.google.com/speed/page-speed/docs/rendering.html)
----------------------------------------------------------------------------------------
3- استخدم التعليقات دائما داخل ملفات css وافصل بين كل جزء بتعليق .
http://www.red-team-design.com/wp-content/uploads/2014/10/comment-css.png
بساطة اختار لكل منطقة تعليق معين
رمز Code:
/* Header styles */ /* ---------------------------------- */ /* Content styles */ /* ---------------------------------- */ /* Footer styles */
-------------------------
----------------------------------------------------------------------------------------
4- استخدم التعليقات لتضع كافة الالوان اللى تحتاجها خلال العمل .
بمعنى انا لما بشتغل ع استايل style متعدد الالوان بكون واضع تحديد لاكتر من لون ودايما بنسى الكود code بتاع اللون عشان كذا
رمز Code:
/* Colors: Light Gray #eaeaea, Dark Gray #828282, Red #c60000 */
اسهل وافضل
----------------------------------------------------------------------------------------
5- استخدم الاسماء ذات المعاني المنطقية والمحددة في المحدد في css .
مرة إخرى بإكد انك لو مافهمت استخدام محددات css ذات كفاءة هذه سوف تبسط عليك الإمر
بمعنى منطقة الهيدر header والفوتر استخدم اسماً محدد لسهم زي كذا
رمز Code:
header-logo or h-logoheader-menu or h-menuheader-tag or h-tag
http://www.red-team-design.com/wp-content/uploads/2014/10/css-naming-convention.png
----------------------------------------------------------------------------------------
6- استفيد من عملك من خلال عمل اطار للعمل Framework .
كتير جدا لما بشتغل في حاجة جديدة واكون إريد اعمل حركة css من عمل اخر واكون ناسي الكود code افكر اعيد وازيد
لغاية لما اتعلمت ان استفيد من ملفات العمل خاصتي ببساطة اكثر
في حاجات بتظم الشكل في البداية اطار عمل زي ماقولت
العرض للصفحة بالكامل اقل عرض وحاجت كذا حسب نظامك
رمز Code:
.full-width { width: 100% !important; } .min-width { width: 1% !important; white-space: nowrap !important; } .centered-inline { text-align: center !important; } .centered-block { margin-left: auto !important; margin-right: auto !important; }
----------------------------------------------------------------------------------------
7- البساطة حلوة وبلاش تعقيد!! .
هذي واضحة جدا في عدم استخدام حركات معقدة كثير واكواد كثيره جدا في الملف عشان مانخرب العمل .
----------------------------------------------------------------------------------------
8- افحص افحص افحص !!.
واضحة جدا جدا فحص العمل من خلال
CSS Validation Service (http://jigsaw.w3.org/css-validator/)
----------------------------------------------------------------------------------------
ملاحظة اخيره هذا العمل من خلال ماتعلمت من خبرتي البسيطة في css ومن خلال الاستفادة من تجارب اشخاص اخرين ومن خلال الاجتهاد
والباقي قريب ان شاء الله
والسلام عليكم ورحمة الله وبركاته
...
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم ورحمة الله وبركاته
...
بعد غياب طويل لظروف خارجة عن اراداتنا نعود ان شاء الله بسلسلة دروس مستفادة من لغة css هيا عبارة عن نصائح مستفادة من خلال تجربتي مع css نصائح وطرق يجب عليك ان تعرفها لتحسن كتابتك في css ولتزيد من الفاعلية في الكتابة .
لزيادة السرعة في التحميل ومساعدة المتصفح على ترجمة الاوامر بشكل اسرع وتنظيم الصور الجمالية
----------------------------------------------------------------------------------------
1- قم بتجميع ملفات css داخل مجلد واحد فقط .
http://www.red-team-design.com/wp-content/uploads/2014/10/group-css-files.png
- المعنى المقصود من هنا هو تنظيم وتصنيف العمل بشكل يسمح بتسهيل مراجعة العمل مما يساعد في النهاية على تحسين بناء الموقع او العمل المراد في النهاية،
كمان من خبرتي المتواضعة التنظيم حلو .
----------------------------------------------------------------------------------------
2- استخدم محددات ذات معنى وذات كفاءة .
بمعنى انه عند كتابة محدد وليكن مثلا id ليكن ذا اسم محدد يعبر عن المنطقة اللى تعمل فيها ولتكن مثلا الهيدر header
سوف يكون كلإتي :
رمز Code:
<div id="hed_r"></div>
ويكون محدد ال
css ير الى منطقة الهيد للتذكر مثلا الصور اليمنى المشار اليها في الحرف r ايضا يجب عليك عن استخدام محددات ذات وصف دقيق لتحديد جزء معين مثل المحدد الاتي
رمز Code:
ul li a span
يجب ان تعلم ان المتصفحات تقرا السطور من اليمين الى اليسار قد يكون ذلك غريبا ولكن لتعلم ان المتصفحات تقوم بمطابقة المكتوب بالhtml fالاستايل style الموصوف با css
لتفهم اكتر اقرا هذا المقال المفيد من جوجل GOOGLE efficient CSS selectors (http://code.google.com/speed/page-speed/docs/rendering.html)
----------------------------------------------------------------------------------------
3- استخدم التعليقات دائما داخل ملفات css وافصل بين كل جزء بتعليق .
http://www.red-team-design.com/wp-content/uploads/2014/10/comment-css.png
بساطة اختار لكل منطقة تعليق معين
رمز Code:
/* Header styles */ /* ---------------------------------- */ /* Content styles */ /* ---------------------------------- */ /* Footer styles */
-------------------------
----------------------------------------------------------------------------------------
4- استخدم التعليقات لتضع كافة الالوان اللى تحتاجها خلال العمل .
بمعنى انا لما بشتغل ع استايل style متعدد الالوان بكون واضع تحديد لاكتر من لون ودايما بنسى الكود code بتاع اللون عشان كذا
رمز Code:
/* Colors: Light Gray #eaeaea, Dark Gray #828282, Red #c60000 */
اسهل وافضل
----------------------------------------------------------------------------------------
5- استخدم الاسماء ذات المعاني المنطقية والمحددة في المحدد في css .
مرة إخرى بإكد انك لو مافهمت استخدام محددات css ذات كفاءة هذه سوف تبسط عليك الإمر
بمعنى منطقة الهيدر header والفوتر استخدم اسماً محدد لسهم زي كذا
رمز Code:
header-logo or h-logoheader-menu or h-menuheader-tag or h-tag
http://www.red-team-design.com/wp-content/uploads/2014/10/css-naming-convention.png
----------------------------------------------------------------------------------------
6- استفيد من عملك من خلال عمل اطار للعمل Framework .
كتير جدا لما بشتغل في حاجة جديدة واكون إريد اعمل حركة css من عمل اخر واكون ناسي الكود code افكر اعيد وازيد
لغاية لما اتعلمت ان استفيد من ملفات العمل خاصتي ببساطة اكثر
في حاجات بتظم الشكل في البداية اطار عمل زي ماقولت
العرض للصفحة بالكامل اقل عرض وحاجت كذا حسب نظامك
رمز Code:
.full-width { width: 100% !important; } .min-width { width: 1% !important; white-space: nowrap !important; } .centered-inline { text-align: center !important; } .centered-block { margin-left: auto !important; margin-right: auto !important; }
----------------------------------------------------------------------------------------
7- البساطة حلوة وبلاش تعقيد!! .
هذي واضحة جدا في عدم استخدام حركات معقدة كثير واكواد كثيره جدا في الملف عشان مانخرب العمل .
----------------------------------------------------------------------------------------
8- افحص افحص افحص !!.
واضحة جدا جدا فحص العمل من خلال
CSS Validation Service (http://jigsaw.w3.org/css-validator/)
----------------------------------------------------------------------------------------
ملاحظة اخيره هذا العمل من خلال ماتعلمت من خبرتي البسيطة في css ومن خلال الاستفادة من تجارب اشخاص اخرين ومن خلال الاجتهاد
والباقي قريب ان شاء الله
والسلام عليكم ورحمة الله وبركاته
...
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
