Formation développement web en arabe
تشير الأحرف في اسم اللغة إلى الأحرف الأولى من العبارة الإنجليزية التالية :
Sheets Style Cascading
و تعني (صفحات الأنماط الانسيابية) . و اختصارها هو : . CSS
ينبغي أن لا تأخذ هذه الدروس من وقتك الكثير ! نصف ساعة من الزمان تعتبر مدة جيدة .
في الواقع فإننا نستخدم نوعاً من أنواع صفحات الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا المثال البسيط :
آما لاحظت ، لم أقم بتحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة باستخدام المتصفح ستجد تنسيقاً معيناً لنوع الخط و حجمه و لونه . هذا التنسيق قد يختلف من جهاز لآخر بحسب الإعدادات
الافتراضية للعرض .
إذاً ، آأننا نقول بأن المتصفح يحتفظ بملف يحوي أنماط معينة من التنسيق يستخدمها إذا لم تحدد التنسيق بشكل واضح في صفحتك .
في الواقع ، إن تقنية السي اس اس تعتمد نفس المبدأ . لن تكتب أي تنسيق في صفحة الهتمل الأساسية لكنك ستحدد بالتفصيل التنسيق الذي تريده في ملف منفصل .
لنلقي نظرة على الطريقة بالتفصيل من خلال هذه السلسلة من الدروس..
معلومة إضافية
ظهرت الحاجة لاستخدام هذه التقنية – CSS – بعد اهتمام المتصفحات الشهيرة (أمثال : الانترنت اآسبلورر و النت سكيب ) بإضافة وسوم هتمل إضافية هي الوسوم الخاصة بتنسيق النص و التي تعرفنا عليها في الفصل السابق . قامت جمعية W3C باعتماد هذه التقنية لتساعد على نقل المواقع قديمة الطراز – تلك التي لا تحتوي على وسوم التنسيق – إلى الطراز الجديد من صفحات إنترنت .
معلومة إضافية
W3C هو اختصار لـ Consortium Web Wide World و هي الجمعية المسؤولة عن إصدار نسخ قياسية من لغة HTML.
اختبار قصير على الدرس :إلى ماذا يشير الاختصارCSS ؟
Creative Style Sheetsnmlkj
Cascading Style Sheetsnmlkj
Colorful Style Sheetsnmlkj
Computer Style Sheetsnmlk
الصيغة العامة للنمط
آما قلنا ، فإن الأنماط تحدد التنسيق لأوسمة الهتمل المختلفة التي تعرفت عليها في دروس الهتمل .
تستطيع تحديد تنسيق معين لوسم الفقرة أو تنسيق معين للجداول و هكذا . إذاً لابد أن نتوقع بأن الصيغة العامة لأوسمة السي اس اس ستتضمن وسم هتمل الذي سيطبق عليه النمط و آذلك التنسيق ، آما توضح هذه الصيغة تماماً :
{"القيمة" : المتغير } : وسم هتمل آما نلاحظ فإن الصيغة تقتضي آتابة وسم هتمل الذي سيطبق عليه النمط ثم نقطتان رأسيتان ثم قوسين معقوفين نكتب بداخلها المتغير و القيمة مفصولين بنقطتين رأسيتين أخريتين .
لنأخذ بعض الأمثلة الحقيقية لتتضح الصورة :
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 }
هل تريد تجربة هذه الوسوم بنفسك ؟ انتظر قليلاً حتى ننتهي من شرح الصيغة العامة للأنماط و سنتعرف على طريقة إدراج الأنماط في الجزء التالي إن شاء االله .
دعنا نرآز قليلاً على الأمثلة السابقة . هل لاحظت الوسم الأول (a (؟ إنه يحتوي على متغيرين بدلاً من متغير واحد . قمنا بفصل المتغيرات المختلفة باستخدام الفاصلة المنقوطة (؛). يمكنك أن تجعل أنماطك أآثر وضوحاً بكتابة آل متغير في سطر منفصل! هكذا :
a {
color: #008000;
font-size: 1em
}
أفضل آثيراً أن تستخدم عادات جيدة أثناء آتابة الأنماط أو غيرها من الشفرات لأن ذلك هو طريقك لكتابة برامج يمكن أن نطلق عليها مصطلح "برامج نظيفة" ! أو آما نقول باللهجة المحلية "تفتح النفس" !
تعرفنا في المثال السابق على آيفية تخصيص أآثر من متغير لوسم هتمل واحد . ماذا لو أردنا تخصيص متغير واحد بقيمة واحدة مكررة مع أآثر من وسم هتمل ؟
أآثر الأمثلة التي توضح ذلك هي التي تحدد تنسيق وسوم رأس الفقرة (h6-h1 (أو وسوم الرابط التشعبي(a . (لنأخذ مثالاً يوضح ذلك :
h1,h2,h3,h4,h5,h6 { color: #008000; }
هل راقبت ذلك ؟ الأمر في غاية السهولة . آل ما عليك هو أن تضيف الفاصلة (،) بين الأوسمة المختلفة ثم تستخدم الصيغة العامة التي أصبحت تعرفها الآن .
اختبار قصير على الدرس : ما هي الصيغة العامة الصحيحة للCSS ؟
kj{\"القيمة\" : المتغير : وسم هتمل}
nmlkj\"القيمة\" : المتغير : وسم هتمل
nmlkj{\"القيمة\" : المتغير } : وسم هتمل
nmlkj{\"القيمة\" = المتغير } : وسم هتمل
ستخدام الفئات(Classes (
لنحاول الوصول إلى أبعد قليلاً مما توصلنا إليه في الدرس السابق :
ماذا لو آنت تريد استخدام أآثر من تنسيق للصفحة الواحدة ، بمعنى أن تنسق الفقرة الأولى في مستندك باستخدام اللون الأحمر و الفقرة الثانية باللون الأخضر و الثالثة باللون الأصفر ! هل تعطيك تقنية السي اس اس هذه المرونة ؟
بالطبع نعم !
آل ما علينا هو أن نتعرف على خاصية الفئات ((Classes ، من خلال المثال التالي :
تستطيع شرح الطريقة بنفسك ! قمنا بكتابة اسم الوسم المطلوب ، ثم نقطة ، ثم الاسم الذي نختاره للفئة الجديدة و نكمل آما تعودنا .
و المثال التالي يعرفنا بالطريقة التي نستخدمها مع أآواد هتمل لتحديد فئة معينة دون أخرى : ستكون النتيجة في المتصفح هكذا :
…
ملاحظة للتذآير : إذا أردت أن تتعلم CSS حقاً فلا تتكاسل في تجربة هذه الأمثلة بنفسك ! صدقني ستكتشف أشياء جديدة آلما جربت
لميحة ذآية
لتضيف فئة يمكن استخدامها مع جميع الوسوم في صفحتك استخدم الطريقة
التالية :
.red{ color: “red” }
احذف اسم الوسم و اآتفي بوضع نقطة مع اسم الفئة !
اختبار قصير على الدرس : الهدف من استخدام الفئات هو:
nmlkjتطبيق أآثر من ننسيق على وسم هتمل معين
nmlkjتطبيق تنسيق محدد على جميع وسوم هتمل
nmlkjالجواب الأول و الثاني صحيح
nmlkjآلا الإجابات غير صحيحة
طريقة إدراج الأنماط في الصفحة
تعرفنا على الهيكل العام لصفحات الأنماط الانسيابية ... بقي علينا أن نتعرف على آيفية إدراج هذه الأنماط في صفحات هتمل أو آيفية ربطها بها ؟
هناك ثلاث طرق لإدراج الأنماط في صفحتك :
أ- باستخدام ملف خارجي (.(file external
ب- عن طريق رأس الصفحة (. (Head
جـ - داخل الوسم (.(Inline
سنقوم بشرح آل طريقة بالأمثلة :
أ- باستخدام ملف خارجي (external): file
هذه الطريقة هي الخيار الذآي لمن يفكر في برمجة مشاريع من عدة صفحات . ضع آل التنسيقات التي تريدها في هذا الملف الخارجي ثم أدرج رابط لهذا الملف في آل صفحة تريد استخدام الأنماط فيها (جميع صفحات مشروعك عادة) .
إذا طلب منك عميلك تغيير لون الخط المستخدم من اللون الأزرق النيلي إلى اللون الأزرق الغامق – و اللذان قد لا يختلفان آثيراً لكن عليك أن ترضي ذوق العميل ! فقط قم بتغيير سطر واحد في هذا الملف و انتهينا .
هذا الملف يجب أن يحفظ بالامتداد .css ، يمكنك آتابته عن طريق برنامج المفكرة، يمكنك الاطلاع على نموذج من هذا الملف في الصورة التالية المأخوذة من الدرس الأول .
استخدم الوسم التالي في رأس آل صفحة من صفحات الهتمل :
ب- عن طريق رأس الصفحة (: (Head
تستخدم هذه الطريقة فقط إذا آنت تريد تطبيق تنسيق معين على صفحة واحدة فقط ، بحيث يلمزك تغيير صفحة واحدة فقط إذا أردت أن تعدل على التنسيق . سندرج الأنماط عن طريق الوسم اختبار قصير على الدرس : ما هو المتغير الصحيح الذي يلزمنا استخدامه لإدراج نمط داخل وسم هتمل؟
stylenmlkj
css
nmlkj
classnmlkj
font
أشباه الفئات(class-Pseudo (
تعرفنا على الفئات ، فما هي أشباه الفئات يا ترى ؟ إن أقرب مثال يوضح الفكرة هو مثال تنسيق الروابط التشعبية .
تأخذ أشباه الفئات الصيغة العامة التالية :
{"القيمة" : المتغير } شبه الفئة: وسم هتمل
أو (في حالة وجود فئة أيضاً):
{"القيمة" : المتغير } شبه الفئة:فئة. وسم هتمل
قد تبدو مزعجة للوهلة الأولى ! لكنك ستكتشف مدى سهولته بعد المثال التالي :
في المثال السابق : حددنا اللون (#٠٠٠٠٨٨ (للرابط العادي الذي لم يزار بعد . آما حددنا تنسيق النص بلا شيء حتى لا يظهر خط سفلي تحت الرابط . حددنا اللون الأحمر للرابط الذي سبقت زيارته ! آذلك حددنا اللون الزهري مع خط بأسفل النص و حجم (١٠ نقاط) للنص . أما الرابط النشط (الحالي) فقد حددنا له اللون الأزرق الفاتح .
الطريقة سهلة ، جربها بنفسك الآن .
تحذير
أنصحك بكتابة أنماط الروابط التشعبية بالترتيب الوارد في المثال السابق (link ثم visited ثم hover ثم active (و إلا فإن الأخريين لن يعملا بالشكل الصحيح !
سنأخذ مثالاً آخر يوضح آيفية استخدام الفئات مع أشباه الفئات في مثال واحد :
المثال يشرح نفسه ، حددنا الفئة (main (للرابط الذي لم يزار باللون الأخضر و في المقابل حددنا الفئة (sub (للرابط الذي لم يزار أيضاً باللون الأحمر .
يجب استخدام الطريقة المشروحة في جزء الفئات عند استخدامك إحدى الفئتين بالطبع .
اختبار قصير على الدرس : الصيغة العامة لإضافة شبه فئة هي:
nmlkj{\"القيمة\" : المتغير: شبه الفئة} وسم هتمل
nmlkj{\"القيمة\" : المتغير } (شبه الفئة) وسم هتمل