admin
11-01-2013, بتوقيت غرينيتش 09:30 AM
http://www.dzbatna.com/images/icons/iconrote.gif ظ…ظ‚ط¯ظ…ط© ط¹ظ† css ظˆطµظٹط؛ط§طھظ‡ط§ ط§ظ„ط¹ط§ظ…ط© (http://www.dzbatna.com/t504679/)
*
هل تخطط لتنفيذ مشاريع ويب يزيد عدد صفحاتها عن العشرة صفحات !?
*
هل تريد إضافة مزيد من الاحترافية و السهولة معاً على عملك في مجال تصميم و تطوير المواقع ؟
*
هل ترهقك طلبات العملاء في تغيير أشياء بسيطة يراها العميل سهلة لكنك تراها مرهقة مع تراكم أعمالك؟
إذا كانت إجابتك على الأسئلة السابقة بنعم ، فهذه السلسلة من الدروس هي لك !
حسناً ... لنتخيل معاً أنك قبلت تنفيذ مشروع متوسط الحجم لأحد العملاء و أنك بطبيعة الحال ستحتاج لبرمجة ما يزيد عن العشر صفحات . لنتخيل أيضاً أنك انتهيت من المشروع بعد عمل متواصل لمدة عشرة أيام و قد عرضت المشروع على العميل لأنك تعتقد أنه أصبح جاهز للاستخدام الآن . ماذا لو فاجأك العميل بطلب تغيير حجم الخط من القيمة "2" إلى القيمة "3" ! هل ستضطر لفتح كل صفحة و التعديل في كل فقرة من فقراتها لتغير هذه القيمة ! ماذا لو كان المشروع مكوناً من 50 صفحة ؟!
و ماذا لو كان يعمل على المشروع أكثر من شخص بشكل منفصل ؟
في الواقع فإن هذه القصة القصيرة التي افتتحنا بها هذا الفصل و التي ستواجهك كثيراً عند التعامل مع عملاءك تنقلنا للتفكير من استخدام لغة "هتمل" وحدها – و التي تستطيع تعلمها من خلال دروس الموسوعة على الرابط التالي : دروس هتمل - إلى لغة تعطينا مرونة أكبر .
الفكرة باختصار تكمن في فصل التنسيق عن المحتوى و من ثم وضع التنسيق في ملف منفصل يمكنه تغييره لتتغير كامل صفحات موقعك !
تشير الأحرف في اسم اللغة إلى الأحرف الأولى من العبارة الإنجليزية التالية :
Cascading Style Sheets
و تعني (صفحات الأنماط الانسيابية) . و اختصارها هو : CSS .
ينبغي أن لا تأخذ هذه الدروس من وقتك الكثير ! نصف ساعة من الزمان تعتبر مدة جيدة .
في الواقع فإننا نستخدم نوعاً من أنواع صفحات الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا المثال البسيط :
http://www.c4arab.com/images/lessons/webprogramming/css/1.gif
كما لاحظت ، لم أقم بتحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة باستخدام المتصفح ستجد تنسيقاً معيناً لنوع الخط و حجمه و لونه . هذا التنسيق قد يختلف من جهاز لآخر بحسب الإعدادات الافتراضية للعرض .
إذاً ، كأننا نقول بأن المتصفح يحتفظ بملف يحوي أنماط معينة من التنسيق يستخدمها إذا لم تحدد التنسيق بشكل واضح في صفحتك .
في الواقع ، إن تقنية السي اس اس تعتمد نفس المبدأ . لن تكتب أي تنسيق في صفحة الهتمل الأساسية لكنك ستحدد بالتفصيل التنسيق الذي تريده في ملف منفصل .
لنلقي نظرة على الطريقة بالتفصيل من خلال هذه السلسلة من الدروس..
معلومة إضافية
ظهرت الحاجة لاستخدام هذه التقنية – CSS – بعد اهتمام المتصفحات الشهيرة (أمثال : الانترنت اكسبلورر و النت سكيب ) بإضافة وسوم هتمل إضافية هي الوسوم الخاصة بتنسيق النص و التي تعرفنا عليها في الفصل السابق . قامت جمعية W3C باعتماد هذه التقنية لتساعد على نقل المواقع قديمة الطراز – تلك التي لا تحتوي على وسوم التنسيق – إلى الطراز الجديد من صفحات إنترنت .
معلومة إضافية
W3C هو اختصار لـ World Wide Web Consortium و هي الجمعية المسؤولة عن إصدار نسخ قياسية من لغة HTML .
************************************************** *********
نتابع معا الدرس مفصل الثانى مهم جدا للجميع[/
COLOR]
كما قلنا ، فإن الأنماط تحدد التنسيق لأوسمة الهتمل المختلفة التي تعرفت عليها في دروس الهتمل . تستطيع تحديد تنسيق معين لوسم الفقرة أو تنسيق معين للجداول و هكذا . إذاً لابد أن نتوقع بأن الصيغة العامة لأوسمة السي اس اس ستتضمن وسم هتمل الذي سيطبق عليه النمط و كذلك التنسيق ، كما توضح هذه الصيغة تماماً :
{"القيمة" : المتغير } : وسم هتمل
كما نلاحظ فإن الصيغة تقتضي كتابة وسم هتمل الذي سيطبق عليه النمط ثم نقطتان رأسيتان ثم قوسين معقوفين نكتب بداخلها المتغير و القيمة مفصولين بنقطتين رأسيتين أخريتين .
لنأخذ بعض الأمثلة الحقيقية لتتضح الصورة :
رمز PHP:
<code style="white-space:nowrap"> <code> a { color: #008000; font-size: 1em }
body { border-style: solid }
h2 { color: #800000 }
p { border-style: solid; border-color: #FF00FF }
table { border-right-style: solid }
</code> </code>
هل تريد تجربة هذه الوسوم بنفسك ؟ انتظر قليلاً حتى ننتهي من شرح طريقة الصيغة العامة للأنماط و سنتعرف على طريقة إدراج الأنماط في الجزء التالي إن شاء الله .
دعنا نركز قليلاً على الأمثلة السابقة . هل لاحظت الوسم الأول (a) ؟ إنه يحتوي على متغيرين بدلاً من متغير واحد . قمنا بفصل المتغيرات المختلفة باستخدام الفاصلة المنقوطة (;). يمكنك أن تجعل أنماطك أكثر وضوحاً بكتابة كل متغير في سطر منفصل! هكذا :
رمز PHP:
<code style="white-space:nowrap"> <code> [COLOR=#0000BB]a {
color: #008000;
font-size: 1em
}
</code> </code>
أفضل كثيراً أن تستخدم عادات جيدة أثناء كتابة الأنماط أو غيرها من الشفرات لأن ذلك هو طريقك لكتابة برامج يمكن أن نطلق عليها مصطلح "برامج نظيفة" ! أو كما نقول باللهجة المحلية "تفتح النفس" !
تعرفنا في المثال السابق على كيفية تخصيص أكثر من متغير لوسم هتمل واحد . ماذا لو أردنا تخصيص متغير واحد بقيمة واحدة مكررة مع أكثر من وسم هتمل ؟
أكثر الأمثلة التي توضح ذلك هي التي تحدد تنسيق وسوم رأس الفقرة (h1-h6) أو وسوم الرابط التشعبي (a) . لنأخذ مثالاً يوضح ذلك :
رمز PHP:
<code style="white-space:nowrap"> <code> h1,h2,h3,h4,h5,h6 { color: #008000; }
</code> </code>
هل راقبت ذلك ؟ الأمر في غاية السهولة . كل ما عليك هو أن تضيف الفاصلة (,) بين الأوسمة المختلفة ثم تستخدم الصيغة العامة التي أصبحت تعرفها الآن
فى الختام
السلام الى الجميع
تحياتى لكم
اخوكم
احمد المنفلوطى
ألعاب الأندرويد مجانا و حصريا (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)©
*
هل تخطط لتنفيذ مشاريع ويب يزيد عدد صفحاتها عن العشرة صفحات !?
*
هل تريد إضافة مزيد من الاحترافية و السهولة معاً على عملك في مجال تصميم و تطوير المواقع ؟
*
هل ترهقك طلبات العملاء في تغيير أشياء بسيطة يراها العميل سهلة لكنك تراها مرهقة مع تراكم أعمالك؟
إذا كانت إجابتك على الأسئلة السابقة بنعم ، فهذه السلسلة من الدروس هي لك !
حسناً ... لنتخيل معاً أنك قبلت تنفيذ مشروع متوسط الحجم لأحد العملاء و أنك بطبيعة الحال ستحتاج لبرمجة ما يزيد عن العشر صفحات . لنتخيل أيضاً أنك انتهيت من المشروع بعد عمل متواصل لمدة عشرة أيام و قد عرضت المشروع على العميل لأنك تعتقد أنه أصبح جاهز للاستخدام الآن . ماذا لو فاجأك العميل بطلب تغيير حجم الخط من القيمة "2" إلى القيمة "3" ! هل ستضطر لفتح كل صفحة و التعديل في كل فقرة من فقراتها لتغير هذه القيمة ! ماذا لو كان المشروع مكوناً من 50 صفحة ؟!
و ماذا لو كان يعمل على المشروع أكثر من شخص بشكل منفصل ؟
في الواقع فإن هذه القصة القصيرة التي افتتحنا بها هذا الفصل و التي ستواجهك كثيراً عند التعامل مع عملاءك تنقلنا للتفكير من استخدام لغة "هتمل" وحدها – و التي تستطيع تعلمها من خلال دروس الموسوعة على الرابط التالي : دروس هتمل - إلى لغة تعطينا مرونة أكبر .
الفكرة باختصار تكمن في فصل التنسيق عن المحتوى و من ثم وضع التنسيق في ملف منفصل يمكنه تغييره لتتغير كامل صفحات موقعك !
تشير الأحرف في اسم اللغة إلى الأحرف الأولى من العبارة الإنجليزية التالية :
Cascading Style Sheets
و تعني (صفحات الأنماط الانسيابية) . و اختصارها هو : CSS .
ينبغي أن لا تأخذ هذه الدروس من وقتك الكثير ! نصف ساعة من الزمان تعتبر مدة جيدة .
في الواقع فإننا نستخدم نوعاً من أنواع صفحات الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا المثال البسيط :
http://www.c4arab.com/images/lessons/webprogramming/css/1.gif
كما لاحظت ، لم أقم بتحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة باستخدام المتصفح ستجد تنسيقاً معيناً لنوع الخط و حجمه و لونه . هذا التنسيق قد يختلف من جهاز لآخر بحسب الإعدادات الافتراضية للعرض .
إذاً ، كأننا نقول بأن المتصفح يحتفظ بملف يحوي أنماط معينة من التنسيق يستخدمها إذا لم تحدد التنسيق بشكل واضح في صفحتك .
في الواقع ، إن تقنية السي اس اس تعتمد نفس المبدأ . لن تكتب أي تنسيق في صفحة الهتمل الأساسية لكنك ستحدد بالتفصيل التنسيق الذي تريده في ملف منفصل .
لنلقي نظرة على الطريقة بالتفصيل من خلال هذه السلسلة من الدروس..
معلومة إضافية
ظهرت الحاجة لاستخدام هذه التقنية – CSS – بعد اهتمام المتصفحات الشهيرة (أمثال : الانترنت اكسبلورر و النت سكيب ) بإضافة وسوم هتمل إضافية هي الوسوم الخاصة بتنسيق النص و التي تعرفنا عليها في الفصل السابق . قامت جمعية W3C باعتماد هذه التقنية لتساعد على نقل المواقع قديمة الطراز – تلك التي لا تحتوي على وسوم التنسيق – إلى الطراز الجديد من صفحات إنترنت .
معلومة إضافية
W3C هو اختصار لـ World Wide Web Consortium و هي الجمعية المسؤولة عن إصدار نسخ قياسية من لغة HTML .
************************************************** *********
نتابع معا الدرس مفصل الثانى مهم جدا للجميع[/
COLOR]
كما قلنا ، فإن الأنماط تحدد التنسيق لأوسمة الهتمل المختلفة التي تعرفت عليها في دروس الهتمل . تستطيع تحديد تنسيق معين لوسم الفقرة أو تنسيق معين للجداول و هكذا . إذاً لابد أن نتوقع بأن الصيغة العامة لأوسمة السي اس اس ستتضمن وسم هتمل الذي سيطبق عليه النمط و كذلك التنسيق ، كما توضح هذه الصيغة تماماً :
{"القيمة" : المتغير } : وسم هتمل
كما نلاحظ فإن الصيغة تقتضي كتابة وسم هتمل الذي سيطبق عليه النمط ثم نقطتان رأسيتان ثم قوسين معقوفين نكتب بداخلها المتغير و القيمة مفصولين بنقطتين رأسيتين أخريتين .
لنأخذ بعض الأمثلة الحقيقية لتتضح الصورة :
رمز PHP:
<code style="white-space:nowrap"> <code> a { color: #008000; font-size: 1em }
body { border-style: solid }
h2 { color: #800000 }
p { border-style: solid; border-color: #FF00FF }
table { border-right-style: solid }
</code> </code>
هل تريد تجربة هذه الوسوم بنفسك ؟ انتظر قليلاً حتى ننتهي من شرح طريقة الصيغة العامة للأنماط و سنتعرف على طريقة إدراج الأنماط في الجزء التالي إن شاء الله .
دعنا نركز قليلاً على الأمثلة السابقة . هل لاحظت الوسم الأول (a) ؟ إنه يحتوي على متغيرين بدلاً من متغير واحد . قمنا بفصل المتغيرات المختلفة باستخدام الفاصلة المنقوطة (;). يمكنك أن تجعل أنماطك أكثر وضوحاً بكتابة كل متغير في سطر منفصل! هكذا :
رمز PHP:
<code style="white-space:nowrap"> <code> [COLOR=#0000BB]a {
color: #008000;
font-size: 1em
}
</code> </code>
أفضل كثيراً أن تستخدم عادات جيدة أثناء كتابة الأنماط أو غيرها من الشفرات لأن ذلك هو طريقك لكتابة برامج يمكن أن نطلق عليها مصطلح "برامج نظيفة" ! أو كما نقول باللهجة المحلية "تفتح النفس" !
تعرفنا في المثال السابق على كيفية تخصيص أكثر من متغير لوسم هتمل واحد . ماذا لو أردنا تخصيص متغير واحد بقيمة واحدة مكررة مع أكثر من وسم هتمل ؟
أكثر الأمثلة التي توضح ذلك هي التي تحدد تنسيق وسوم رأس الفقرة (h1-h6) أو وسوم الرابط التشعبي (a) . لنأخذ مثالاً يوضح ذلك :
رمز PHP:
<code style="white-space:nowrap"> <code> h1,h2,h3,h4,h5,h6 { color: #008000; }
</code> </code>
هل راقبت ذلك ؟ الأمر في غاية السهولة . كل ما عليك هو أن تضيف الفاصلة (,) بين الأوسمة المختلفة ثم تستخدم الصيغة العامة التي أصبحت تعرفها الآن
فى الختام
السلام الى الجميع
تحياتى لكم
اخوكم
احمد المنفلوطى
ألعاب الأندرويد مجانا و حصريا (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)©
