دورة CSS

دورة css

اضغط على تصنيف الدروس للذهاب السريع الى قائمة الدروس

  1. أساسيات CSS
  2. التصميم باستخدام CSS
  3. الصندوق النموذجي
  4. الدروس المتقدمة

أساسيات CSS


الدرس 01 : الخطوة الأولى

يمكنك حفظ الكثير من الوقت و الجهد باستخدام لغة CSS .


الدرس 02 : مقدمة CSS

قبل البدء بلغة CSS يجب ان يكون لديك معرفةHTML / XHTML


الدرس 03 : تركيبة CSS

المنتقى , واحد أو أكثر من التصريح .


الدرس 04 : استخدام id و class

يمكن استخدام id و class لتطبيق تصميم معين على وسم HTML


الدرس 05 : كيف استخدم CSS

عندما يقرأ المتصفح صفحة التصميم سيتم عرض صفحة HTML حسب التصميم المخصص


التصميم باستخدام CSS


الدرس 01 : خلفيات CSS

تستخدم خصائص الخلفية لتطبيق تأثيرات معينة على خلفية التصميم بشكل عام


الدرس 02 : النصوص

باستخدام لغة CSS يمكنك استخدام احدى هذه الطرق لتلوين نص معين


الدرس 03 : نوع الخط

تستخدم خاصية نوع الخط في لغة CSS لتحديد عائلة الخط font family و حجم و الشكل لخط النص


الدرس 04 : الروابط التشعبية

يمكن للروابط التشعبية ان تصمم وتعدّل من خلال طرق عديدة


الدرس 05 : القوائم

تسمح لك خاصية القائمة بما يلي :
لوضع العديد من العناصر بقائمة مرقّمة ordered lists
لوضع العديد من العناصر بقائمة غير مرقّمة unordered lists
لتخصيص صورة وتوضع عوضاً عن العلامة المستخدمة في القائمة


الدرس 06 : الجداول

يمكن التعديل على الجداول من خلال CSS بشكل رهيب


الصندوق النموذجي


الدرس 01 : الصندوق النموذجي

يمكن اعتبار وسوم HTML مثل الصندوق , وباستخدام لغة CSS مع الصندوق النموذجي يعني أننا نستخدم التصميم والتخطيط


الدرس 02 : الحدود Borders

تسمح لك خصائص الحدود في CSS لتحديد التصميم واللون لحدود العنصر


الدرس 03 : الحدود الخارجية outline

الحدود الخارجية هو عبارة عن خط مرسوم حول العناصر (خارج الحدود ) لجعل العناصر أكثر سهولة لرؤيتها وملاحظتها .


الدرس 04 : الهوامش الخارجية margin

تحدد خاصية الهوامش الخارجية المسافة حول العنصر


الدرس 05 : الهوامش الداخلية padding

تحدد خاصية الهوامش الداخلية المسافة حول العنصر


الدروس المتقدمة


الدرس 01 : تجميع و تنسيق المنتقى

غالباً مانجد أكثر من منتقى يحتوي على نفس التصميم


الدرس 02 : الاتجاهات dimension

تسمح خاصية الأبعاد dimension بالتحكم بعرض و ارتفاع العنصر .


الدرس 03 : الإظهار والإخفاء

تحدد خاصية الاظهار display فيما اذا أو كيف يجب على العنصر الظهور بينما تحدد خاصية الاخفاء visibility فيما اذا كان العنصر ظاهر visible أو مخفي hidden


الدرس 04 : ترتيب العناصر positioning

يمكن أن يكون الترتيب مخادع أحياناً ولكن كيف ؟؟؟


الدرس 05 : الطفو Float

باستخدام CSS يمكنك طفو العناصر لليمين أو اليسار كما تسمح للعناصر الأخرى بالالتفاف حولهم


الدرس 06 : المحاذاة الأفقية

هناك الكثير من الخاصيات التي تقوم بعمل المحاذاة الأفقية للعناصر


الدرس 07 : التأثيرات الخاصة Pseudo-classes

تسمى التأثيرات الخاصة لأنها تضيف مزايا وتأثيرات خاصة للعنصر توهمك أن هذه التأثيرات من أساسه و لكن في الواقع هي فقط مصطنعة له


الدرس 08 : التأثيرات الخاصة مع العناصر Pseudo-elements

تستخدم التأثيرات الخاصة مع العناصر لاضافة تأثيرات معينة لبعض المنتقون selectors


الدرس 09 : شريط القوائم

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


الدرس 10 : إنشاء ألبوم صور

يمكن إنشاء البوم صور بسهولة عند استخدام لغة CSS


الدرس 11 : صور الشفافية Transparency و التعبئة Opacity

يمكن وبكل سهولة استخدام الشفافية مع الصور لجعلها شفافة .


الدرس 12 : صورة الأيقونات

ان صورة الايقونات هي عبارة عن مجموعة أيقونات تم جمعها بصورة واحدة


الدرس 13 : الوسائط media

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


الدرس 14 : لواحق المنتقى

يمكن تصميم عناصر HTML من خلال لواحق معينة


الدرس 15 : ملخص عام CSS

في هذا الدورة تعلمت إنشاء صفحات تصميم وذلك للتحكم بتصميم وشكل موقع سواء مكون من صفحة أو العديد من الصفحات المختلفة .