مثال كامل CSS

نص CSS

• إعداد لون النص

• توازي النص

• التقريب للنص

• زينة النص

• إعداد الفواصل بين الحروف

• إعداد الفواصل بين الكلمات

• إعداد الفواصل بين الأسطر في النص

• حفظ الفراغات والخطوط الفاصلة

• تبديل النص داخل العنصر

• تحديد التوازي للصورة العمودي في النص

خط CSS

• إعداد الخط للنص

• إعداد حجم الخط

• إعداد نمط الخط

• إعداد الخط المتغير

• إعداد الخط الكبير

• إعداد جميع خصائص الخط في بيانات واحدة - خصائص الخط المختصرة

روابط CSS

• تعيين النمط للروابط في مختلف الحالات

• إزالة الخط الافتراضي تحت الروابط

• إزالة الهيكل الخيالي من الروابط

• إنشاء مربع رابط

• الاستدارة في الصورة

قائمة CSS

• تحديد نوع السهم أو الرقم في القائمة

• تعيين موقع علامة العنصر في القائمة

• تعيين الصورة كعلامة للعنصر في القائمة

• إنشاء قائمة منسدلة بسيطة

• إعداد جميع خصائص القوائم في بيانات واحدة - خصائص القوائم المختصرة

جدول CSS

• تحديد حدود الجدول

• تحديد حجم الجدول

• إنشاء جدول أفضل من خلال طي حدود الجدول

• تحديد التزامن الأفقي للنص داخل خلية الجدول

• تحديد التزامن العمودي للمحتوى

• تحديد كيفية عرض الخلايا الفارغة

• تحديد الحشو للخلايا في الجدول

• تحديد خوارزمية التخطيط للجدول - تلقائي أو ثابت

• تحديد موضع عنوان الجدول

خلفية CSS

• تحديد لون الخلفية للعنصر

• تحديد الصورة كخلفية للعنصر

• تكرار صورة الخلفية أفقيًا أو عموديًا

• تحديد موضع صورة الخلفية

• صورة خلفية ثابتة، لن تزحف مع العناصر المضمنة

• تحديد جميع خصائص الخلفية في مرة واحدة - مختصر الخلفية

• تحديد حجم صورة الخلفية

• تحديد القطع للخلفية

• تحديد نقطة البداية للخلفية

• إضافة عدة خلفيات للعنصر

وحدات CSS

• استخدام الوحدات المطلقة (مثل px،pt،cm،إلخ)

• استخدام وحدات النسبية (مثل em،ex،%،إلخ)

حجم CSS

• تحديد عرض العنصر وأعلى العنصر

• تحديد أطول العنصر وأعلى العنصر

• تحديد أطول العنصر وأعلى العنصر

• تحديد الازدحام

تحديد التزامن CSS

• تحديد التزامن للنص والأعمدة داخل العنصر الكبير

• تحديد التزامن الوسطي للأعمدة باستخدام خصائص الهوامش

• تحديد التزامن الأفقي للأعمدة باستخدام خاصية float

• تحديد التزامن للأعمدة والأسطر باستخدام خاصية position

• منع تدمير الورثة بواسطة خاصية clear

• إنشاء قائمة هوريزونتالية بسيطة

تحديد موضع CSS

• تحديد موضع العنصر بناءً على نافذة المتصفح

• تحديد موضع العنصر بناءً على عنصر الوالدين

• تحديد موضع العنصر بناءً على موقعه الطبيعي

• تعريض العنصر عبر خاصية z-index

عرض CSS

• إخفاء العنصر باستخدام خاصية الظهور

• إزالة العنصر من DOM باستخدام خاصية display

• عرض العنصر كعنصر مدمج

• عرض العنصر كعنصر مكعب

• إلفاق عناصر الجدول

حدود CSS والهالة

• رسم حدود حول العنصر

• رسم حدود حول الأطراف للعنصر

• تحديد أنواع النمط المختلفة للحدود

• تحديد جميع خصائص الحدود في مرة واحدة - مختصر الحدود

• إنشاء زوايا رأسية حول العنصر

• إنشاء حدود باستخدام الصور

• رسم هالة حول العنصر

• رسم حدود حول العنصر دون التأثير على العناصر المحيطة

هوامش CSS والحشو

• تحديد هوامش الأطراف للعنصر

• تحديد جميع خصائص الهوامش في مرة واحدة - مختصر الهوامش

• تحديد حشو الأطراف للعنصر

• تحديد جميع خصائص الحشو في مرة واحدة - مختصر الحشو

شفافية CSS

• تحديد تشفافية العنصر

• أثر الانعكاس والتشفافية للصور

• نص داخل دائرة شفافة

المحتوى الذي يصنعها CSS

• تحديد الأقواس

• جزء من الترقيم التلقائي والفئات

• استخدام CSS لإنشاء محتوى مدمج

ممثلو CSS

• تحديد النمط للأحداث المختلفة لرابط URL

• استخدام: focus الممثل لتحديد النمط للعنصر المتجه للنص

• استخدام: first-child الممثل لتحديد النمط للعنصر الأول من بين الأبناء

• استخدام: first-child الممثل لتحديد النمط للعنصر الأخير من بين الأبناء

• ضبط النمط للnth-child الخاصية

• ضبط النمط لغة مع خاصية :lang()

• استخدام الظواهر الوهمية مع مُختارات

العناصر الوهمية CSS

• إنشاء تأثير إنزلاق الحرف الأول باستخدام العنصر الوهمي:: first-letter

• ضبط النص الأولي باستخدام العنصر الوهمي:: first-line

• إدراج بعض المحتويات قبل أو بعد العنصر باستخدام العنصر الوهمي:: before أو:: after

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

تدرج CSS3

• إنشاء تدرج خطي من الأعلى إلى الأسفل

• إنشاء تدرج خطي من اليسار إلى اليمين

• إنشاء تدرج خطي على طول الزوايا

• ضبط اتجاه التدرج الخطي باستخدام الزاوية

• إنشاء تدرج خطي باستخدام عدة علامات اللون

• ضبط موقع التوقف لللون في إنشاء التدرج

• تكرار التدرج الخطي

• إنشاء تدرج راديالي

• ضبط شكل التدرج الراديالي

• ضبط حجم التدرج الراديالي

• تكرار التدرج الراديالي

• استخدام الشفافية في التدرج

ظلال CSS3

• إنشاء تأثير ظل الحافات

• إضافة عدة ظلال الحواف إلى حافات العنصر

• إنشاء تأثير ظل النص

تحويل CSS3 ثنائي الأبعاد

• تحريك العنصر باستخدام طريقة translate()

• تدوير العنصر باستخدام طريقة Rotate()

• توسيع أو تقليل حجم العنصر باستخدام طريقة scale()

• تطبيق تحويل ثنائي الأبعاد باستخدام طريقة matrix()

• تطبيق تحويلات متعددة على العنصر

تحويل CSS3 ثلاثي الأبعاد

• تحريك العنصر في الفضاء الثلاثي الأبعاد باستخدام طريقة translate3d()

• تدوير العنصر في الفضاء الثلاثي الأبعاد باستخدام طريقة rotate3d()

• توسيع العنصر في الفضاء الثلاثي الأبعاد باستخدام طريقة scale3d()

• تطبيق تحويل ثلاثي الأبعاد باستخدام طريقة matrix3d()

• تطبيق عدة تحويلات ثلاثية الأبعاد على العنصر

تحويل CSS3

• تطبيق تأثير التحول على اللون الخلفي

• تطبيق تأثير التحول على عدة خصائص

• ضبط جميع خصائص التحويل في وقت واحد - خصائص مختصرة للتحويل

تحرك CSS3

• عناصر التحرك على صفحة الويب

• تحديد إطارات الحركة عند إنشاء التحرك

• ضبط جميع خصائص التحرك في وقت واحد - خصائص مختصرة للتحرك

تخطيط الأعمدة المتعددة CSS3

• إنشاء تخطيط متعدد الأعمدة

• ضبط عدد الأعمدة أو العرض

• ضبط الفجوة بين الأعمدة

• إضافة خط أو خط عمودي بين الأعمدة