مثال CSS
- الصفحة السابقة عنصر الشبكة CSS
- الصفحة التالية اختبار CSS
محددات CSS
ألوان CSS
خلفيات CSS
حواف CSS
- تحديد عرض جميع الحدود
- تحديد عرض الحدود العلوية
- تحديد عرض الحدود السفلية
- تحديد عرض الحدود اليسرى
- تحديد عرض الحدود اليمنى
- تحديد نمط جميع الحدود
- تحديد نمط الحدود العلوية
- تحديد نمط الحدود السفلية
- تحديد نمط الحدود اليسرى
- تحديد نمط الحدود اليمنى
- تحديد لون جميع الحدود
- تحديد لون الحدود العلوية
- تحديد لون الحدود السفلية
- تحديد لون الحدود اليسرى
- تحديد لون الحدود اليمنى
- جميع خصائص الحدود في بيانات واحدة
- إضافة زوايا دائرية إلى العنصر
- تحديد حدود مختلفة لكل جانب
- جميع خصائص الحدود العلوية في بيانات واحدة
- جميع خصائص الحدود السفلية في بيانات واحدة
- جميع خصائص الحدود اليسرى في بيانات واحدة
- جميع خصائص الحدود اليمنى في بيانات واحدة
الجروحات CSS
- تحديد الهوامش الخارجية المختلفة لأطراف العنصر
- استخدام الخاصية margin المختصرة ذات القيم الأربعة
- استخدام الخاصية margin المختصرة ذات القيم الثلاثة
- استخدام الخاصية margin المختصرة ذات القيمتين
- استخدام الخاصية margin المختصرة ذات القيمة الواحدة
- ضبط الهوامش الخارجية على auto للوسطاء العنصر داخل صندوقها
- جعل الهوامش الخارجية اليسرى تورث من العنصر الأم
- تجميع الهوامش الخارجية
الجوانب الداخلية CSS
- تحديد الهوامش الداخلية المختلفة لأطراف العنصر
- استخدام الهوامش الداخلية المختصرة ذات القيم الأربعة
- استخدام الهوامش الداخلية المختصرة ذات القيم الثلاثة
- استخدام الهوامش الداخلية المختصرة ذات القيمتين
- استخدام الهوامش الداخلية المختصرة ذات القيمة الواحدة
- الهوامش الداخلية وعرض العنصر (لا إعداد box-sizing)
- الهوامش الداخلية وعرض العنصر (إعداد box-sizing)
- إعداد الهوامش الداخلية اليسرى للعنصر
- إعداد الهوامش الداخلية اليمنى للعنصر
- إعداد الهوامش الداخلية العلوية للعنصر
- إعداد الهوامش الداخلية السفلية للعنصر
CSS الارتفاع/العرض
نموذج الصندوق CSS
الشكل CSS
نص CSS
خط النص CSS
روابط CSS
قوائم CSS
جداول CSS
- تحديد الحواف السوداء لـ table, th و td
- استخدام border-collapse
- الحافة الواحدة للجدول
- تحديد عرض الجدول وارتفاعه
- ضبط التوجيه الأفقي للمحتوى
- ضبط التوجيه الرأسي للمحتوى
- تحديد الحواف الداخلية لـ th و td
- مفصل أفقي
- جدول قابلة للتمرير
- جدول شرائحي
- تحديد لون حواف الجدول
- ضبط موقع عنوان الجدول
- جدول مرونقي
- إنشاء جدول جميل
عرض CSS
توجيه CSS
- وضع العنصر بشكل نسبي بالنسبة إلى نافذة المتصفح
- وضع العنصر بشكل نسبي بالنسبة لموضع العنصر الطبيعي
- توجيه العنصر بشكل مطلق
- تثبيت التوجيه
- التشابك العناصر
- ضبط شكل العنصر
- استخدام قيمة البكسل لضبط الحافة العلوية للصورة
- استخدام قيمة البكسل لضبط الحافة السفلية للصورة
- استخدام قيمة البكسل لضبط الحافة اليسرى للصورة
- استخدام قيمة البكسل لضبط الحافة اليمنى للصورة
- توجيه نص الصورة (في الزاوية العلوية اليسرى)
- توجيه نص الصورة (في الزاوية العلوية اليمنى)
- توجيه نص الصورة (في الزاوية السفلية اليسرى)
- توجيه نص الصورة (في الزاوية السفلية اليمنى)
- توجيه نص الصورة (في الوسط)
CSS Overflow
- استخدام overflow: visible - لم يتم قطع التدفق. يتم عرضه خارج حاوية العنصر.
- استخدام overflow: hidden - يتم قطع التدفق، ويتم إخفاء المحتوى المتبقي.
- استخدام overflow: scroll - يتم قطع التدفق، ولكن تم إضافة شريط التدول لرؤية المحتوى المتبقي.
- استخدام overflow: auto - إذا تم قطع التدفق، يجب إضافة شريط التدول لرؤية المحتوى المتبقي.
- استخدام overflow-x و overflow-y
CSS Floating
- استخدام float بسيط
- تحريك الصورة المزينة بالحواف والهوامش إلى اليمين داخل الفقرة
- تحريك الصورة المزينة بالعنوان إلى اليمين
- تحريك الحرف الأول من الفقرة إلى اليسار
- إغلاق floating (باستخدام الخاصية clear)
- إغلاق floating (باستخدام hack clearfix)
- إنشاء صندوق floating
- إنشاء صورة متوازية
- إنشاء صندوق متساوٍ في الارتفاع (من خلال flexbox)
- إنشاء قائمة أفقية
- إنشاء مثال لشبكة الويب
CSS Inline-block
توجيه العناصر في CSS
- توجيه في الوسط باستخدام الهوامش
- توجيه النص في الوسط
- توجيه الصورة في الوسط
- تحقيق التوجيه الأيسر والأيمن باستخدام position
- تحقيق التوجيه الأيسر والأيمن باستخدام position - حل متعدد المتصفحات
- تحقيق التوجيه الأيسر والأيمن باستخدام float
- تحقيق التوجيه الأيسر والأيمن باستخدام float - حل متعدد المتصفحات
- تحقيق التوجيه العمودي باستخدام padding
- التوجيه الأفقي والعمودي
- تحقيق التوجيه الأفقي والعمودي باستخدام line-height
- تحقيق التوجيه الأفقي والعمودي باستخدام position
مزيجات CSS
الشعارات CSS
الإشارات CSS
إنشاء محتوى CSS
شفافية CSS
قائمة التصفح CSS
قائمة منسدلة CSS
صورة الأشعة الصغيره CSS
محددات الخصائص CSS
- اختيار جميع عناصر <a> التي تحتوي على خاصية target
- اختيار جميع عناصر <a> التي تحتوي على خاصية target="_blank"
- اختيار جميع العناصر التي تحتوي على خاصية title تحتوي على قائمة كلمات منفصلة بالفضاءات، واحدة من الكلمات هي "flower"
- اختيار جميع العناصر التي تحتوي على قيمة خاصية class تبدأ بـ "top" (يجب أن تكون الكلمة بأكملها)
- اختيار جميع العناصر التي تحتوي على قيمة خاصية class تبدأ بـ "top" (لا يجب أن تكون الكلمة بأكملها)
- اختيار جميع العناصر التي تحتوي على قيمة خاصية class تنتهي بـ "test"
- اختيار جميع العناصر التي تحتوي على قيمة خاصية class تحتوي على "te"
نماذج النماذج CSS
الأشكال CSS
صور الحواف CSS
خلفيات CSS
التدرجات CSS
- التدرج الخطي - من الأعلى إلى الأسفل
- التدرج الخطي - من اليسار إلى اليمين
- التدرج الخطي - الزاوية المائلة
- التدرج الخطي - الزاوية المحددة
- التدرج الخطي - علامات اللون المتعددة
- التدرج الخطي - اللون المزخرف + النص
- التدرج الخطي - الشفافية
- التدرج الخطي - التدرج الخطي المكرر
- التدرج البعيد - توزيع متساوٍ للعلامات اللونية
- التدرج البعيد - علامات اللون المختلفة في المسافة
- التدرج البعيد - تعيين الشكل
- التدرج البعيد - الكلمات الرئيسية لحجم المختلفة
- التدرج البعيد - التدرج البعيد المكرر
تأثير الظل (CSS Shadow)
- تأثير الظل البسيط
- إضافة الألوان إلى الظل
- إضافة الغموض إلى الظل
- نص أبيض مع ظل أسود
- ظل مضيء أحمر
- ظل مضيء أحمر وأزرق
- نص أبيض مع ظل أسود، أزرق وأزرق داكن
- إضافة box-shadow بسيط إلى العنصر
- إضافة الألوان إلى box-shadow
- إضافة الألوان والغموض إلى box-shadow
- إنشاء بطاقة ورقية مثل النص
- إنشاء بطاقة ورقية مثل الصور البولارويد
أثر النص CSS
الخطوط على الإنترنت (CSS Web Font)
تحويل CSS 2D
- translate() - إزالة العنصر من الموقع الحالي
- rotate() - تدوير العنصر بالاتجاه المعاكس
- rotate() - عكس التدوير العكسي للعنصر
- scale() - زيادة العنصر
- scale() - تقليل العنصر
- skewX() - تميل العنصر على محور X
- skewY() - تميل العنصر على محور Y
- skew() - تميل العنصر على محور X وY
- matrix() - إدارة، تضخيم، تحريك وتميل العنصر
تحويل CSS 3D
过渡 CSS
رسوم متحركة CSS
مؤشرات الأدوات CSS
صور بلون CSS
- صور بجوانب مستديرة
- صور دائرية
- الشريط الصغير
- الشريط الصغير كرابط
- صورة تفاعلية
- نص على صورة (الجزء العلوي اليسرى)
- نص على صورة (الجزء العلوي اليمين)
- نص على صورة (الجزء السفلي اليسرى)
- نص على صورة (الجزء العلوي اليمين)
- نص على صورة (مركز)
- صور بولاريو
- مرشح صورة درامية
- مقدمة - تنفيذ نافذة الصورة باستخدام CSS وJavaScript
CSS Object-fit
أزرار CSS
صفحات CSS
مستويات CSS
واجهة المستخدم CSS
متغيرات CSS
حجم الصندوق CSS
صندوق CSS الليفي
- صندوق ليفي يحتوي على ثلاثة عناصر ليفية
- صندوق ليفي يحتوي على ثلاثة عناصر ليفية - باتجاه اليمين
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- ترتيب العناصر الليفية
- Margin-right: auto;
- Margin: auto; = مركز مثالي
- تعيين align-self على العنصر الليفي
- تحديد طول العنصر الليفي، بالنسبة للبقية من العناصر الليفية
- إنشاء مكتبة صور ردوية باستخدام القوالب الليفية
- إنشاء موقع ردوي بالقوالب الليفية
استعلامات الإعلام CSS
استعلام الإعلام CSS - أمثلة إضافية
- تعيين لون الخلفية المختلف بناءً على عرض الشاشة
- قائمة التوجيه التفاعلية
- استخدام الارتجاع للصفوف التفاعلية
- استخدام الصندوق المرن للصفوف التفاعلية
- إخفاء العناصر باستخدام استعلام الإعلام
- حجم الخط التفاعلي
- مكتبة الصور التفاعلية
- موقع الويب التفاعلي
- تغيير تخطيط الصفحة بناءً على اتجاه المتصفح
- أكبر عرض صغير إلى أكبر عرض كبير
تصميم موقع الويب التفاعلي CSS
شبكة CSS
- الصفحة السابقة عنصر الشبكة CSS
- الصفحة التالية اختبار CSS
