CSS بناء الجملة
محدد عنصر
محدد الهوية
محدد فئة (لجميع العناصر)
محدد فئة (فقط <p> العناصر)
تجميع محددات
خلفيات CSS
تعيين لون خلفية الصفحة
تعيين لون الخلفية من العناصر المختلفة
تعيين صورة كخلفية للصفحة
كيفية تكرار صورة الخلفية فقط أفقيا
كيفية وضع صورة خلفية
الصورة الثابتة (وهذه الصورة لا التمرير مع بقية الصفحة)
جميع خصائص الخلفية في إعلان واحد
مثال خلفية متقدمة
CSS حدود
تعيين عرض من الحدود الأربعة
تعيين عرض الحد العلوي
تعيين عرض الحد السفلي
تعيين عرض الحد الأيسر
تعيين عرض الحد الأيمن
تعيين نمط من الحدود الأربعة
تعيين نمط من الحد العلوي
تعيين نمط من الحد السفلي
تعيين نمط الحدود الأيسر
تعيين نمط الحدود الصحيح
تعيين لون الحدود الأربعة
تعيين لون الحد العلوي
تعيين لون الحد السفلي
تعيين لون الحد الأيسر
تعيين لون الحد الأيمن
جميع خصائص الحدود في إعلان واحد
وضع حدود مختلفة على كل جانب
جميع كبار خصائص الحدود في إعلان واحد
جميع خصائص الحدود السفلية في إعلان واحد
جميع خصائص الحد الأيسر في إعلان واحد
جميع خصائص الحدود الصحيحة في إعلان واحد
هوامش CSS
تحديد هوامش مختلفة عن كل جانب من عنصر
اسمحوا تكون موروثة الهامش الأيسر من العنصر الأصلي
الخاصية هامش الاختزال
تعيين هامش لصناعة السيارات لتركز على عنصر داخل الحاوية الخاصة به
CSS الحشو
تعيين الحشو تبقى من عنصر
تعيين الحشو الأيمن من عنصر
تعيين الحشو العلوي من عنصر
تعيين الحشو السفلي من عنصر
كافة الخصائص الحشو في إعلان واحد
النص المغلق
تعيين لون النص من العناصر المختلفة
محاذاة النص
إزالة خط تحت الروابط
تزيين النص
السيطرة على الحروف في النص
نص البادئة
تحديد المسافة بين الأحرف
تحديد المسافة بين السطور
تعيين اتجاه النص من عنصر
زيادة المساحة البيضاء بين الكلمات
تعطيل التفاف النص داخل عنصر
المحاذاة العمودية للصورة داخل النص
CSS الخطوط
تعيين الخط للنص
ضبط حجم الخط
تعيين حجم الخط في مقصف
تعيين حجم الخط في طب الطوارئ
تعيين حجم الخط في المئة وم
تعيين نمط الخط
تعيين البديل من الخط
تعيين جرأة الخط
كل خصائص الخط في إعلان واحد
روابط CSS
إضافة ألوان مختلفة لزار الروابط / التي لم تتم زيارتها
استخدام النص الزينة على وصلات
تحديد لون الخلفية لروابط
إضافة أنماط أخرى إلى الارتباطات التشعبية
المتقدم - إنشاء صناديق صلة
المتقدم - إنشاء صناديق صلة مع الحدود
قوائم CSS
كل مختلف العلامات قائمة البند في القوائم
تعيين صورة كقائمة البند علامة
ضع قائمة البند علامة
جميع العقارات القائمة في إعلان واحد
قوائم الاسلوب مع الألوان
عرض كامل القائمة يحدها
جداول CSS
تحديد الحدود السوداء للطاولة، عناصر عشر، والدفتيريا
استخدام الحدود الانهيار
الحدود واحد حول طاولة
تحديد عرض وارتفاع طاولة
تعيين المحاذاة الأفقية المحتوى (النص محاذاة)
تعيين المحاذاة العمودية المحتوى (الرأسية محاذاة)
تحديد الحشو لعناصر عشر والدفتيريا
فواصل الأفقية
الجدول Hoverable
الجداول مخطط
تحديد لون حدود الجدول
تعيين موضع التسمية التوضيحية الجدول
الجدول تستجيب
إنشاء جدول الهوى
CSS صندوق نموذج
تحديد عنصر مع العرض الكلي 250px
CSS المخطط
رسم خط حول عنصر (الخطوط العريضة)
تعيين نمط مخطط
تعيين لون مخطط
تعيين عرض مخطط
CSS البعد
ضبط ارتفاع وعرض عنصر
تعيين العرض الأقصى للعنصر
تعيين الطول والعرض من العناصر المختلفة
ضبط ارتفاع وعرض صورة باستخدام المئة
تعيين مين العرض وماكس-عرض عنصر
مجموعة دقيقة الارتفاع والحد الأقصى للطول عنصر
CSS العرض
كيفية إخفاء عنصر (visibility:hidden)
كيفية يتم عرض عنصر (display:none)
كيفية عرض عنصر على مستوى الكتلة كعنصر مضمنة
كيفية عرض عنصر المضمنة كعنصر مستوى الكتلة
كيفية استخدام CSS مع جافا سكريبت لإظهار محتوى مخفي
CSS لتحديد المواقع
وضع أحد أفراد عائلتهم عنصر لنافذة المتصفح
وضع أحد أفراد عائلتهم عنصر إلى وضعها الطبيعي
ضع عنصر مع قيمة مطلقة
عناصر متداخلة
تعيين شكل عنصرا
كيفية إنشاء شريط التمرير عندما محتوى عنصر هو كبير جدا لاحتوائه
كيفية تعيين متصفح للتعامل مع تجاوز تلقائيا
تعيين الحافة العلوية من الصورة باستخدام قيمة بكسل
تعيين الحافة السفلية للصورة باستخدام قيمة بكسل
تعيين الحافة اليسرى للصورة باستخدام قيمة بكسل
تعيين الحافة اليمنى من الصورة باستخدام قيمة بكسل
تغيير المؤشر النص صورة الوظيفة (أعلى الزاوية اليسرى)
النص صورة الموقف (أعلى الزاوية اليمنى)
النص صورة الموقف (الزاوية اليسرى السفلى)
النص صورة الموقف (الزاوية اليمنى السفلى)
النص صورة الموقف (توسيط)
CSS العائم
والاستخدام البسيط للممتلكات تعويم
صورة مع الحدود والهوامش التي تعوم إلى الحق في فقرة
صورة مع التعليق أن يطفو إلى اليمين
دع الحرف الأول من تعويم فقرة إلى اليسار
إنشاء معرض الصور مع خاصية الطفو
إيقاف تعويم (باستخدام الخاصية واضحة)
إنشاء قائمة أفقية
إنشاء صفحة رئيسية دون الجداول
CSS محاذاة عناصر
مركز التوفيق مع هامش
يسار / يمين التوفيق مع موقف
يسار / محاذاة اليمين مع موقف - التوافقية مع متصفحات الويب الحل
يسار / يمين التوفيق مع تعويم
يسار / محاذاة اليمين مع تعويم - التوافقية مع متصفحات الويب الحل
CSS Combinators
محدد أصل أفريقي
محدد الطفل
مجاور محدد الشقيق
الشقيق عامة محدد
CSS المحتوى المقدم
أدخل عنوان URL بين قوسين بعد كل وصلة مع الخاصية المحتوى
ترقيم الأقسام والأقسام الفرعية مع "Section 1", "1.1", "1.2" ، الخ
تحديد علامات الاقتباس مع الخاصية يقتبس
CSS الزائفة الطبقات
إضافة ألوان مختلفة إلى ارتباط تشعبي
إضافة أنماط أخرى إلى الارتباطات التشعبية
استخدام: التركيز
:first-child - تطابق أول عنصر ص
:first-child - تطابق العنصر الأول لي في جميع عناصر ص
:first-child - تطابق كل ما العناصر في جميع عناصر ص الطفل الأول
استخدام من :lang
CSS الزائفة العناصر
جعل الحرف الأول خاص في النص
جعل السطر الأول خاص في النص
جعل الحرف الأول، وأول خط خاص
الاستخدام: قبل إدراج بعض المحتويات قبل عنصر
الاستخدام: بعد إدراج بعض المحتوى بعد عنصر
البارات CSS الإنتقال
شريط التنقل العمودي على غرار تماما
شريط التنقل الأفقي على غرار تماما
CSS DROPDOWNS
نص القائمة المنسدلة
القائمة المنسدلة
القائمة المنسدلة محاذاة إلى اليمين
صورة المنسدلة
شريط التنقل القائمة المنسدلة
CSS تلميحات
تلميح الأدوات الصحيح
تلميح ترك
كبار تلميح الأدوات
تلميح الأدوات السفلي
تلميح الأدوات مع السهم
الرسوم المتحركة تلميح الأدوات
معرض المغلق صورة
CSS صورة التعتيم
خلق الصور الشفافة - تأثير تمرير الماوس
إنشاء صندوق شفاف مع النص على صورة خلفية
العفاريت المغلق صورة
والعفريت صورة
والعفريت صورة - قائمة الملاحة
والعفريت صورة مع تأثير تحوم
CSS السمة المختارون
يختار كل <a> عناصر ذات سمة الهدف
يختار كل <a> عناصر مع الهدف = "_ فارغة" سمة
تحديد كافة العناصر ذات سمة العنوان الذي يحتوي على قائمة مفصولة مساحة من الكلمات، واحد منها هو "زهرة"
تحديد كافة العناصر مع قيمة سمة الفئة التي تبدأ مع "top" (يجب أن تكون الكلمة بأكملها)
تحديد كافة العناصر مع قيمة سمة الفئة التي تبدأ مع "top" (يجب أن لا تكون الكلمة بأكملها)
تحديد كافة العناصر مع قيمة سمة الفئة التي تنتهي مع "test"
تحديد كافة العناصر مع قيمة سمة الطبقة التي تحتوي على "te"
أشكال CSS
حقل إدخال كامل العرض
حقل إدخال مبطن
حقل إدخال يحدها
أسفل حقل إدخال يحدها
حقول الإدخال الملونة
حقول الإدخال المركزة
حقول الإدخال ركز 2
المدخلات مع رمز / صورة
مدخلات البحث متحركة
تيكستارياس التصميم
التصميم تحديد القوائم
التصميم أزرار الإدخال
عدادات CSS
إنشاء عداد
عدادات المتداخلة 1
عدادات المتداخلة 2
CSS3 مدور الزوايا
إضافة تدوير الزوايا لعناصر
جولة كل ركن على حدة
إنشاء زوايا بيضاوي الشكل
صور CSS3 الحدود
إنشاء الحدود صورة حول عنصر، وذلك باستخدام الكلمة مستديرة
إنشاء الحدود صورة حول عنصر، وذلك باستخدام الكلمة تمتد
الحدود صورة - القيم شريحة مختلفة
خلفيات CSS3
إضافة العديد من الصور الخلفية لعنصر
تحديد حجم صورة خلفية
حجم صورة الخلفية باستخدام "احتواء" و "غطاء"
تحديد أحجام متعددة الصور الخلفية
الحجم الكامل صورة الخلفية (ملء تماما ناحية المحتوى)
استخدام خلفية الأصل لتحديد مكان صورة الخلفية في موقع استراتيجي
استخدام خلفية مقطع لتحديد منطقة اللوحة الخلفية
CSS3 التدرجات
الخطي التدرج - أعلى إلى أسفل
الخطي التدرج - اليسار إلى اليمين
الخطي التدرج - قطر
الخطي التدرج - مع زاوية محددة
الخطي التدرج - مع نقاط متعددة الألوان
الخطي التدرج - لون قوس قزح + النص
الخطي التدرج - مع الشفافية
الخطي التدرج - الانحدار الخطي التكرار
شعاعي الانحدار - متباعدة بشكل متساو توقف اللون
متدرجة شعاعي - توقف اللون متباعدة بشكل مختلف
شعاعي الانحدار - شكل مجموعة
شعاعي الانحدار - مختلف الكلمات الرئيسية حجم
شعاعي الانحدار - التدرج الشعاعي المتكرر
CSS3 تأثيرات الظل
تأثير الظل بسيط
إضافة لون إلى الظل
إضافة طمس الأثر في الظل
نص أبيض مع الظل الأسود
ونيون أحمر توهج الظل
والأحمر والأزرق النيون توهج الظل
نص أبيض مع أسود، أزرق، أزرق غامق والظل
إضافة بسيطة مربع الظل لعنصر
إضافة لون مربع الظل ل
إضافة لون وطمس الأثر إلى مربع الظل
إنشاء بطاقات ورقة تشبه (النص)
إنشاء بطاقات ورقة تشبه (صور بولارويد)
نص CSS3
حدد كيفية مخفي، يجب أن تكون الإشارة محتوى فاضت إلى المستخدم
كيفية عرض المحتوى فاضت عندما تحوم فوق العنصر
السماح الكلمات الطويلة لتكون قادرة على أن تكون مكسورة والتفاف على السطر التالي
تحديد خط كسر القواعد
CSS3 الخطوط
استخدام الخطوط الخاصة بك "الخاصة" في @font-face الحكم
استخدام الخطوط الخاصة بك "الخاصة" في @font-face القاعدة (جريئة)
CSS3 2D التحويلات
translate() - نقل عنصر من موقعها الحالي
rotate() - تدوير في اتجاه عقارب الساعة عنصر
rotate() - تدوير عنصر عكس اتجاه عقارب الساعة
scale() - زيادة عنصر
scale() - خفض عنصر
skewX() - يشوه عنصر على طول محور X
skewY() - يشوه عنصر على طول المحور Y
skew() - يشوه عنصر على طول X و Y المحور
matrix() - تدوير، والحجم، وتحرك، والانحراف عنصر
CSS3 التحويلات 3D
rotateX() - تدوير عنصر حول محور X له عند درجة معينة
rotateY() - تدوير عنصر حول Y-محورها في درجة معينة
rotateZ() - تدوير عنصر حول محور Z لها في درجة معينة
CSS3 التحولات
عرض تغيير عنصر - تحول
الانتقال - عرض التغيير وارتفاع عنصر
تحديد منحنيات السرعة مختلفة للانتقال
حدد مهلة للحصول على تأثير التحول
إضافة التحول إلى تأثير انتقال
تحديد جميع خصائص المرحلة الانتقالية في الخاصية المختصرة واحد
CSS3 متحركة
ربط الرسوم المتحركة إلى عنصر
الرسوم المتحركة - تغيير لون الخلفية لعنصر
الرسوم المتحركة - تغيير لون الخلفية والموقف من عنصر
تأخير للرسوم المتحركة
تشغيل الرسوم المتحركة 3 مرات قبل أن يتوقف
تشغيل الرسوم المتحركة من أي وقت مضى
تشغيل الرسوم المتحركة في الاتجاه المعاكس
تشغيل الرسوم المتحركة في دورات بديلة
منحنيات السرعة لالمتحركة
الرسوم المتحركة الخاصية المختصرة
صور CSS3
صورة مقربة
صورة دائري
صورة مصغرة
الصورة المصغرة كرابط
صورة تستجيب
النص صورة (أعلى الزاوية اليسرى)
النص صورة (أعلى الزاوية اليمنى)
النص صورة (الزاوية اليسرى السفلى)
النص صورة (الزاوية اليمنى السفلى)
النص صورة (توسيط)
صور بولارويد
صورة مرشح الرمادي
المتقدمة - صورة مشروط مع CSS وجافا سكريبت
أزرار CSS3
أزرار CSS الأساسية
الألوان زر
أحجام زر
أزرار مدورة
الحدود زر ملون
أزرار Hoverable
أزرار الظل
أزرار للمعاقين
عرض زر
مجموعة زر
مجموعة زر يحدها
زر الرسوم المتحركة (تحوم تأثير)
زر الرسوم المتحركة (تموج تأثير)
زر الرسوم المتحركة (الحاح تأثير)
CSS3 ترقيم الصفحات
ترقيم الصفحات بسيط
ترقيم الصفحات نشاطا وhoverable
مدورة ترقيم الصفحات نشاطا وhoverable
تأثير انتقال Hoverable
ترقيم الصفحات يحدها
ترقيم الصفحات تحدها مدورة
ترقيم الصفحات مع الفضاء بين الروابط
حجم ترقيم الصفحات
ترقيم الصفحات مع الفضاء بين الروابط
ترقيم الصفحات توسيط
فتات الخبز
أعمدة متعددة CSS3
إنشاء أعمدة متعددة
تحديد الفجوة بين الأعمدة
تحديد نمط للحكم بين الأعمدة
تحديد عرض حكم بين الأعمدة
تحديد لون من حكم بين الأعمدة
تحديد العرض والأسلوب واللون من حكم بين الأعمدة
تحديد عدد الأعمدة عنصر يجب أن تمتد عبر
تحديد اقترح، عرض الأمثل للأعمدة
CSS3 واجهة المستخدم
السماح للمستخدم تغيير حجم عرض عنصر
السماح للمستخدم تغيير حجم ارتفاع عنصر
السماح للمستخدم تغيير حجم كل من العرض والارتفاع عنصر
إضافة مسافة بين الخطوط العريضة والحدود عنصر
CSS3 مربع تحجيم
عرض العناصر بدون مربع التحجيم
عرض العناصر مع مربع التحجيم
عناصر النموذج + مربع التحجيم
CSS3 حول flexbox
حول flexbox مع ثلاثة بنود المرن
حول flexbox مع ثلاثة عناصر المرنة - الاتجاه RTL
المرن الاتجاه - الصف العكس
المرن الاتجاه - العمود
المرن الاتجاه - عمود للعكس
تبرير المحتوى - فليكس نهاية
تبرير المحتوى - مركز
تبرير المحتوى - الفضاء بين
تبرير المحتوى - الفضاء حول
محاذاة البنود - امتداد
محاذاة البنود - المرن بدء
محاذاة البنود - فليكس نهاية
محاذاة البنود - مركز
محاذاة البنود - خط الأساس
المرن الختامية - بلا التفاف
المرن التفاف - التفاف
المرن التفاف - التفاف عكسي
محاذاة المحتوى - مركز
من أجل هذه البنود المرن
الهامش اليمين: السيارات.
هامش: السيارات. = تمركز مثالي
محاذاة الذاتي على العناصر المرنة
تحديد طول هذا البند المرن، نسبة إلى بقية العناصر المرنة
إنشاء موقع على شبكة الانترنت تستجيب مع حول flexbox
CSS3 وسائل الإعلام استعلامات
تغيير لون الخلفية لlightgreen إذا كان العرض هو 480px واسعة أو على نطاق أوسع
تظهر القائمة التي سوف تطفو على الجهة اليسرى من الصفحة إذا كان العرض هو 480px واسعة أو على نطاق أوسع
وأوضحت CSS3 استفسارات وسائل الإعلام
CSS3 وسائل الإعلام استعلامات - المزيد من الأمثلة
صفحة HTML
عرض من 520 إلى 699px - تطبيق رمز البريد الإلكتروني إلى كل وصلة
عرض من 700 إلى 1000px - تمهيد الروابط مع النص
العرض فوق 1001px - تطبيق عنوان البريد الإلكتروني إلى روابط
عرض فوق 1151px - إضافة رمز كما كنا من قبل
استخدام قائمة من الروابط البريد الإلكتروني على الشريط الجانبي في صفحة ويب
استفسارات وسائل الإعلام CSS3 أوضح الأمثلة