دورة برمجة مواقع الانترنت - لغة css - الدرس 2 - أماكن كتابة كود css بالنسبة لصفحة html

السلام عليكم ورحمة الله وبركاته

أهلاً بكم مجدداً في سلسلة دروس برمجة المواقع ومع لغة تنسيق صفحات المواقع css في درسنا الثاني
سنتعرف اليوم على مكان وضع كود css داخل أو خارج صفحة الانترنت
يوجد لدينا ثلاثة أماكن لوضع كود css وهي :
تذكير : يمكن استخدام الصفحة http://tahasoft.com/code.htm لتجربة الكود وحاول عمل بعض التغييرات حتى تتعلم.

1- بشكل داخلي

Inline Styles

:

يمكن وضع كود css داخل وسوم Html باستخدام الخاصة style كما يلي:
مثال :

دورة برمجة مواقع الانترنت على منتدى طه سوفت للبرامج

النتيجة :
دورة برمجة مواقع الانترنت على منتدى طه سوفت للبرامج
حيث قمنا بتلوين النص باللون الأحمر
الجزء التالي هو جزء css :

style="color:red"

لاحظ مكان وضعه داخل الوسم
ملاحظة :
يمكن وضع أكثر من تنسيق css وذلك بوضع فاصلة منقوطة بين كل تنسيق وآخر في css
مثال :

دورة برمجة مواقع الانترنت على منتدى طه سوفت للبرامج

النتيجة :

2- ضمن الهيدر header في الصفحة

أو ما يسمى Internal Style Sheet

حيث يوضع الكود في جزء header من صفحة Html وذلك ضمن وسم اسمه style
مثال :

طه سوفت للبرامج

لاحظ الجزء :

وهو جزء css في الصفحة
حيث تم تنسيق المحتوى كاملاً باستخدام body وتم تنسيق الفقرات p بحيث يكون لون خلفية الصفحة أصفر وحجم نص الفقرات 42 بكسل
وعند تجربة الكود السابق
( تذكير : صفحة التجريب للأكواد http://tahasoft.com/code.htm أو اكتب الكود في صفحة html وجربه بتشغيله على متصفحك )
سيظهر النتيجة التالية :

3- بشكل خارجي External style sheet :

حيث يوضع جزء css في ملف مستقل يكون امتداده ( اللاحقة , extension ) هي css
وفي الهيدر نضع الكود التالي:

وذلك على اعبتار أن اسم الملف هو style.css وموجود بجانب صفحة الانترنت
مثال :
ليكن لدينا صفحة انترنت باسم index.html وصفحة الستايل باسم style.css
نضعهما بجانب بعضهما البعض

وفيها الكود التالي داخل صفحة index.html :

طه سوفت للبرامج

والكود التالي داخل صفحة style.css

body{background:yellow}

p{font-size:42px}

الآن عند تشغيل ملف index.html سنلاحظ أن التنسيقات ستظهر و أن كود css الموجود
على ملف خارجي فعال كأنه في الداخل
حيث أن هذا المثال مطابق للمثال السابق ولكن مع وضع الكود في ملف منفصل

من يرغب في تحميل الملفين المذكورين في المثال اضغط هنا



والآن ربما تتساءل أخي الكريم

أي الطرق أستخدم مما سبق و أيهم الأفضل؟

- في حال وجود صفحة انترنت واحدة قليلة المحتوى ( صغيرة وبسيطة ) نستخدم الشكل الداخلي
- في حال وجود صفحة انترنت كبيرة ومتعددة الوسوم وربما نكرر إحدى التنيسقات على أكثر من وسم نستخدم الشكل الثاني ( في الهيدر )
حيث إن كود css سيكون قابل للاستخدام عدة مرات في عدة أماكن داخل الصفحة
- في حال وجود مشروع كبير ( موقع انترنت ) يحوي الكثير من الصفحات فيفضل الشكل الثالث ( ملف خارجي ) حيث إننا في هذه الحالة سنستطيع استخدام التنسيقات الموجودة في الكود على أكثر من صفحة . أي أن ملف واحد يمكن استخدامه لعدة صفحات
وأيضاً يمكن وبشكل سريع تعديل التنسيق بتعديل ملف css فقط ولا داعي لتعديل التنسيق في كل الصفحات
مثال من الموقع : قسم القرآن الكريم http://tahasoft.com/quran/tahasoft/index.php
يوجد بحدود 70 صفحة لكل قارئ صفحة و إذا أردنا تغيير نوع الخط المستخدم في قائمة القراء مثلاً فإننا بحاجة لتعديل النوع في 70 صفحة ولكن مع css كملف خارجي فإننا نعدل ملف css فقط وسيتم التعديل في الجميع .
وكمثال آخر ستايل المنتدى عبارة عن ملفات css حيث إن أي موضوع جديد يأخذ كامل التنسيق

ماذا لو قمت بتطبيق أكثر من طريقة معاً من الطرق السابقة ؟

من الجدير ذكره و المهم أيضاً هو معرفة ماذا يحصل في حال قمنا باستخدام طريقتين معاً
مثلاً لوقمنا باستخدام الطريقة الثانية والثالثة معاً حيث وضعنا في إحداهما تنسيقات
و في الآخرى تنسيقات أخرى لنفس الوسم فأيهما سيتم اختياره
الجواب :
الاولوية بالدرجة الأولى للشكل الأول ( داخل الوسم ) ثم يليها الشكل الثاني ( في الهيدر ) ثم يليها الشكل الثالث ( في ملف) وهذه النقطة من المهم معرفتها
مثال :

طه سوفت للبرامج

النتيجة :



- في الكود السابق نلاحظ أننا استخدما جزء css في الهيدر لتلوين خلفية الصفحة باللون الأصفر
و جعل حجم النص 42 بكسل
- وأيضاً يوجد أجزاء css داخل وسم body لتلوين الخلفية باللون البرتقالي وجزء css داخلي في النص p لجعل حجم الخط 12 بكسل
- والذي تم تطبيقه هو الأجزاء الداخلية وليس ما هو موجود في الهيدر وذلك لأن الأولوية للأكواد الداخلية

* وكمثال آخر : في حال وجد ملف css خارجي و تنسيق css داخلي فالأولوية للداخلي



في الدرس القادم سنتعرف على طرق تخصيص التنسيق وكيفية إعطاء التنسيقات للوسوم داخل الصفحة
وبعدها سننطلق في التعرف على كافة الخصائص والتنسيقات في بقية دروس الدورة