|
إنضمامك إلي منتديات استراحات زايد يحقق لك معرفة كل ماهو جديد في عالم الانترنت ...
انضم الينا
#1
| ||
| ||
في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML. القواعد الأساسية لكتابة CSSالكثير من خصائص CSS تشبه تلك المستخدمة في HTML، لذلك إذا تعلمت HTML واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة، لنلقي نظرة على هذا المثال الأساسي. لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة: باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة: كود PHP: مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر: كود PHP: body {background-color: #FF0000;} كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS: لكن أين نضع أوامر CSS؟ هذا هو ما سنتعلمه الآن. تفعيل CSS في صفحة HTMLهناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS في ملف منفصل. إحدى الطرق لتفعيل CSS في HTML هي باستخدام خاصية style، لنأخذ مثالاً على أساس المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر كلخفية للصفحة، يمكن تطبيق هذا الأمر بهذا الشكل Example This is a red page الطريقة 2: ضمت ملف HTML باستخدام وسم style هذه طريقة مختلفة بأنها تستخدم وسم ، وهذا مثال لكيفية تطبيق هذه الطريقة: Example body {background-color: #FF0000;} This is a red page الطريقة 3: ملف خارجي هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة. الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css، ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب. مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML: كود: لاحظ كيف أن مسار الملف حددناه باستخدام خاصية href. هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي و كما في المثال الآتي: كود: My document ... هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML. الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML. هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاج إلى تعديل 100 ملف بنفسك، باستخدام CSS يمكن تغيير ما تريد خلال ثواني بتغيير سطر واحد في ملف التصميم. لنتدرب على ما تعلمناه حتى الآن. قم بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات: كود: My document My first stylesheet style.css كود PHP: body { background-color: #FF0000; } الآن قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف.
__DEFINE_LIKE_SHARE__
قم بفتح ملف default.htmفي متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول! أسرع واقرأ الدرس اللاحق حيث سنلقي نظرة على بعض خصائص CSS. |
مواقع النشر (المفضلة) |
| |
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
الدرس الثاني عشر ~الأكشن | ●~мя-язσôσв }~ | دورة الفوتوشوب | 24 | 06-24-2011 05:38 PM |
مقدمة حول css + ما هي تقنية CSS؟ (الدرس الأول) | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 09-22-2009 09:50 AM |
مقدمة حول css + ما هي تقنية CSS؟ (الدرس الأول) | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 09-22-2009 09:40 AM |
[ شرح ] : الدرس الثاني : تحميل وتنصيبه برنامج الفوتوشوب (( الجزء الثاني والمنتظر )) | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 09-11-2009 09:40 AM |
الدرس الثانى من سلسلة تعليم تقنية البرمجة بدون كود بالفيديو | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 05-25-2009 08:20 PM |