http://www.traidnt.net/vb/images/icons/iconrote.gifhttp://www.arabw-pearl.com/vb/images/icons/tanbeh.gifhttp://www.traidnt.net/vb/images/icons/iconrote.gif الرجاء قرائة الموضوع كاملاً وعدم القفز بين السطور لتوضيح ما قد يغيب عنك والإستفادة من إستخدام الشرح لأقصى درجة .

• درس 2: كيف تعمل تقنية CSS ؟

http://www.traidnt.net/vb/images/Google/new.png في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول ،
ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML .
الكثير من خصائص CSS تشبه تلك المستخدمة في HTML ،
لذلك إذا تعلمت HTML واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة ،
لنلقي نظرة على هذا المثال الأساسي .
http://www.khlgy.com/uploads/13314428763.jpg
http://www.traidnt.net/vb/images/Google/new.png القواعد الأساسية لكتابة CSS

لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:
باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:

كود:

مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر :

كود:
body {
background-color: #FF0000;
}
كما تلاحظ ،
أوامر CSS تتشابه كثيراً مع HTML ،
والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS :
لكن أين نضع أوامر CSS ؟

http://www.traidnt.net/vb/images/Google/new.png هذا هو ما سنتعلمه الآن .

http://upload.traidnt.net/upfiles/d9t45483.png

تفعيل CSS في صفحة HTML

هناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML ،
هذه الطرق مشروحة أدناه ،
ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة ،
وهي أن تضع CSS في ملف منفصل .


http://www.traidnt.net/vb/images/Google/new.png الطريقة 1:
ضمن وسوم HTML باستخدام خاصية style

إحدى الطرق لتفعيل CSS في HTML هي باستخدام خاصية style ،
لنأخذ مثالاً على أساس المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر كلخفية للصفحة ،
يمكن تطبيق هذا الأمر بهذا الشكل
كود:


Example


This is a red page




http://www.traidnt.net/vb/images/Google/new.png الطريقة 2:
ضمت ملف HTML باستخدام وسم style

هذه طريقة مختلفة بأنها تستخدم وسم ،
وهذا مثال لكيفية تطبيق هذه الطريقة:
كود:


Example

body {
background-color: #FF0000;
}



This is a red page




http://www.traidnt.net/vb/images/Google/new.png الطريقة 3:
ملف خارجي
هذه هي الطريقة الأفضل ،
وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS ،
خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة.
الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css ،
ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب .
مثلاً ،
لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style ،
هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم

http://upload.traidnt.net/upfiles/PT845828.jpg

المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css) ،
مثل هذا الرابط يمكن إنشائه من خلال سطر واحد في HTML :
كود:

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

كود:


My document



...

هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML .
الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد ،
بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML .

http://upload.traidnt.net/upfiles/iW746041.jpg

هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد ،
إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاج إلى تعديل 100 ملف بنفسك ،
باستخدام CSS يمكن تغيير ما تريد خلال ثواني بتغيير سطر واحد في ملف التصميم.
لنتدرب على ما تعلمناه حتى الآن .

جرب بنفسك

قم بتشغيل برنامج المفكرة ( Notepad ) أو أي محرر نصي ،
وقم بإنشاء ملفين ،
أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات:
http://upload.traidnt.net/upfiles/5fW74184.gifإسم الملف default.htm

كود:


My document



My first stylesheet




http://upload.traidnt.net/upfiles/5fW74184.gifإسم الملف style.css

كود:
body {
background-color: #FF0000;
}
الآن قم بوضع الملفين في نفس المجلد ،
تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف .
قم بفتح ملف default.htm في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية ،

http://upload.traidnt.net/upfiles/5fW74184.gifhttp://upload.traidnt.net/upfiles/IrK49652.gif تهانينا !
لقد قمت بإنشاء ملف التصميم الأول !


http://upload.traidnt.net/upfiles/5fW74184.gif http://upload.traidnt.net/upfiles/5fW74184.gif http://upload.traidnt.net/upfiles/5fW74184.gif http://upload.traidnt.net/upfiles/5fW74184.gifhttp://upload.traidnt.net/upfiles/5fW74184.gifيتبع