مرجع W3.CSS
فئات W3.CSS
| فصل |
يعرّف |
|
| حاوية w3 |
حاوية HTML مع مساحة متروكة يمين ويسار 16 بكسل |
|
| |
تستخدم كرأس |
|
| |
تستخدم كتذييل |
|
| w3- لوحة |
حاوية HTML مع حشوة يسار ويمين 16 بكسل وهامش علوي وسفلي 16 بكسل |
|
| |
تستخدم لعرض ملاحظة |
|
| |
تستخدم لعرض الاقتباس |
|
| W3- شارة |
شارة دائرية |
|
| W3 يوم |
علامة مستطيلة |
|
| w3-ul |
قائمة غير مرتبة |
|
| حاوية عرض w3 |
حاوية لفئات w3-display (تتيح تحديد موضع العناصر داخل الحاوية) |
|
| w3 بلوك |
فئة يمكن استخدامها لتحديد عرض كامل لأي عنصر |
|
| w3- كود |
حاوية كود |
|
| w3-codespan |
حاوية التعليمات البرمجية المضمنة (لمقتطفات التعليمات البرمجية) |
|
| w3- المحتوى |
حاوية للمحتوى المتمركز بحجم ثابت |
|
| سيارة w3 |
حاوية للمحتوى المتجاوب المتمركز في الوسط |
|
| امتداد w3 |
فئة تزيل الهوامش اليمنى واليسرى (مفيدة بشكل خاص لتمديد الصفوف المبطنة (w3-row-row-padding)) |
|
| فصل |
يعرّف |
|
| w3 الجدول |
حاوية لجدول HTML |
|
| w3 مخطط |
طاولة مخططة |
|
| w3- الحدود |
جدول بحدود |
|
| w3 يحدها |
الخطوط المتاخمة |
|
| مركز w3 |
طاولة في المنتصف |
|
| w3- تحوم |
طاولة تحوم |
|
| w3- الجدول- جميع |
تعيين كافة الخصائص |
|
| |
مع w3-striped و w3-border و w3-border |
|
| |
برأس ملون |
|
| |
مع w3-response |
|
| |
مع w3-tiny |
|
| |
مع w3- صغير |
|
| |
مع w3- كبير |
|
| |
مع w3-xlarge |
|
| |
مع w3-xxlarge |
|
| |
مع w3-xxxlarge |
|
| |
مع اللون |
|
| |
مع w3-jumbo |
|
| W3- مستجيب |
يقوم بإنشاء جدول سريع الاستجابة |
|
| فصل |
يعرّف |
|
| بطاقة w3 |
مثل w3-card-2 |
|
| w3- بطاقة -2 |
حاوية لأي محتوى HTML (2 بكسل حدود الظل) |
|
| w3- بطاقة -4 |
حاوية لأي محتوى HTML (ظل يحده 4 بكسل) |
|
| فصل |
يعرّف |
|
| w3- صف |
حاوية لصف واحد من المحتوى سريع الاستجابة |
|
| w3-row-padding |
صف حيث تحتوي جميع الأعمدة على مساحة متروكة افتراضية |
|
| سيارة w3 |
حاوية للمحتوى المتجاوب المتمركز في الوسط |
|
| امتداد w3 |
فئة تزيل الهوامش اليمنى واليسرى |
|
| w3 نصف |
حاوية عمود نصف (1/2) غربال |
|
| w3 الثالث |
حاوية عمود الشاشة الثالثة (1/3) |
|
| w3-twothird |
ثلث (2/3) حاوية عمود الشاشة |
|
| w3 الربع |
حاوية عمود غربال ربع (1/4) |
|
| w3 - ثلاثة أرباع |
ثلاثة أرباع (3/4) حاوية عمود غربال |
|
| w3-col |
حاوية العمود لأي محتوى HTML |
|
| w3- الراحة |
تحتل باقي عرض العمود |
|
| |
|
|
| L1 - L12 |
أحجام متجاوبة للشاشات الكبيرة |
|
| م 1 - م 12 |
أحجام متجاوبة للشاشات المتوسطة |
|
| s1 - s12 |
أحجام متجاوبة للشاشات الصغيرة |
|
| |
|
|
| w3- إخفاء-صغير |
إخفاء المحتوى على الشاشات الصغيرة (أقل من 601 بكسل) |
|
| w3- إخفاء-وسط |
إخفاء المحتوى على الشاشات المتوسطة |
|
| w3- إخفاء-كبير |
إخفاء المحتوى على الشاشات الكبيرة (أكبر من 992 بكسل) |
|
| |
|
|
| w3- الصورة |
صورة مستجيبة |
|
| |
|
|
| w3 موبايل |
يضيف استجابة الجوال الأولى لأي عنصر.
يعرض العناصر كعناصر حظر على الأجهزة المحمولة. |
|
| فصل |
يعرّف |
|
| w3- صف الخلية |
حاوية لأعمدة التخطيط (الخلايا). |
|
| W3- خلية |
عمود التخطيط (الخلية). |
|
| w3- أعلى الخلية |
يحاذي المحتوى في أعلى عمود (خلية). |
|
| w3- وسط الخلية |
يحاذي المحتوى في الوسط الرأسي لعمود (خلية). |
|
| w3- الخلية القاع |
يحاذي المحتوى أسفل عمود (خلية). |
|
| فصل |
يعرّف |
|
| w3 بار |
عارضة أفقية |
|
| w3- شريط بلوك |
شريط عمودي |
|
| w3- شريط البند |
يوفر نمطًا مشتركًا لعناصر البار |
|
| w3- الشريط الجانبي |
شريط جانبي |
|
| |
يمكن أن يحتوي الشريط الجانبي على جميع أنواع المحتوى |
|
| |
شريط جانبي يتراكب على المحتوى الرئيسي |
|
| |
شريط جانبي يتراكب على المحتوى الرئيسي |
|
| |
شريط جانبي يحول المحتوى الرئيسي إلى اليمين |
|
| |
شريط جانبي بخلفية متراكبة |
|
| |
شريط جانبي على الجانب الأيمن |
|
| w3- الانهيار |
تُستخدم مع w3-sidebar لإنشاء تنقل جانبي تلقائي سريع الاستجابة. لكي يعمل هذا الفصل ، يجب أن يكون محتوى الصفحة ضمن فئة "w3-main" |
|
| w3 الرئيسي |
حاوية لمحتوى الصفحة عند استخدام فئة w3-collapse للتنقلات الجانبية سريعة الاستجابة |
|
| |
التنقل الجانبي المستجيب التلقائي بالكامل من الجانب الأيمن |
|
| w3- انقر فوق القائمة المنسدلة |
عنصر القائمة المنسدلة القابل للنقر |
|
| w3- المنسدلة-تحوم |
عنصر القائمة المنسدلة القابل للتحويم |
|
| |
عنصر قائمة منسدلة قابل للتحويم (مستخدم في w3-bar) |
|
| |
عنصر قائمة منسدلة قابل للتحويم (مستخدم في w3-bar-block) |
|
| |
عنصر القائمة المنسدلة القابل للتحويم (يُستخدم في الشريط الجانبي w3) |
|
| فصل |
يعرّف |
|
| زر w3 |
زر مستطيل مع خلفية رمادية اللون عند التحويم |
|
| W3-BTN |
زر مستطيل به ظلال عند التحويم |
|
| W3- دائرة |
يمكن استخدامه لإنشاء زر دائري |
|
| w3- تموج |
زر مستطيل مع تأثير تموج |
|
| |
زر عائم دائري مع تأثير تموج |
|
| w3 بار |
يمكن استخدامه لتجميع العناصر (مثل الأزرار) في شريط أفقي |
|
| w3 بلوك |
فئة يمكن استخدامها لتحديد زر w3 كامل العرض |
|
| |
العرض الكامل w3-btn |
|
| |
زر دائري بعرض كامل |
|
| فصل |
يعرّف |
|
| w3 المدخلات |
عناصر الإدخال |
|
| |
استمارة الإدخال كبطاقة |
|
| |
عناصر الإدخال (أعلى التصنيفات) |
|
| |
عناصر الإدخال (التسميات السفلية) |
|
| w3 الاختيار |
نوع إدخال خانة الاختيار |
|
| راديو w3 |
نوع إدخال الراديو |
|
| w3- حدد |
حدد عنصر الإدخال |
|
| w3- تحريك-المدخلات |
تحريك عرض الإدخال إلى 100٪ |
|
| فصل |
يعرّف |
|
| w3- مشروط |
حاوية مشروطة |
|
| w3- محتوى مشروط |
عنصر منبثق مشروط |
|
| w3- تلميح |
عنصر تلميح |
|
| w3- النص |
نص تلميح الأداة |
|
| فصل |
يعرّف |
|
| w3- تحريك القمة |
تحريك عنصر من أعلى -300 بكسل إلى 0 بكسل |
|
| w3- تحريك اليسار |
تحريك عنصر من 300 بكسل لليسار إلى 0 بكسل |
|
| w3- تحريك القاع |
تحريك عنصر من أسفل -300 بكسل إلى 0 بكسل |
|
| w3-تحريك-اليمين |
تحريك عنصر من -300 بكسل إلى 0 بكسل على اليمين |
|
| w3- تحريك-عتامة |
ينعش تعتيم عنصر من 0 إلى 1 |
|
| w3- تحريك-تكبير |
ينعش عنصر من 0 إلى 100٪ في الحجم |
|
| w3- تحريك- يتلاشى |
تحريك تعتيم عنصر من 0 إلى 1 ومن 1 إلى 0 (يتلاشى داخل وخارج) |
|
| w3-تدور |
تدور أيقونة 360 درجة |
|
| |
تدور أي عنصر 360 درجة |
|
| w3- تحريك-المدخلات |
تحريك عرض حقل الإدخال إلى 100٪ |
|
| فصل |
يعرّف |
|
| w3- صغير |
يحدد حجم خط يبلغ 10 بكسل |
|
| w3- صغير |
يحدد حجم خط يبلغ 12 بكسل |
|
| W3- كبير |
يحدد حجم خط يبلغ 18 بكسل |
|
| w3-xlarge |
يحدد حجم خط يبلغ 24 بكسل |
|
| w3-xxlarge |
يحدد حجم خط 32 بكسل |
|
| w3-xxxlarge |
يحدد حجم خط يبلغ 48 بكسل |
|
| w3- جامبو |
يحدد حجم خط 64 بكسل |
|
| w3 واسع |
يحدد نصًا أوسع |
|
| w3-serif |
يغير الخط إلى الرقيق |
|
| w3-sans-serif |
يغير الخط إلى sans-serif |
|
| w3 مخطوطة |
يغير الخط إلى متصل |
|
| w3-monospace |
يغير الخط إلى monospace |
|
| فصل |
يعرّف |
|
| مركز w3 |
محتوى مركزي |
|
| w3 اليسار |
تحريك عنصر إلى اليسار (عائم: يسار) |
|
| W3- الحق |
تحريك عنصر إلى اليمين (عائم: يمين) |
|
| w3- اليسار- محاذاة |
نص بمحاذاة إلى اليسار |
|
| w3- محاذاة لليمين |
نص بمحاذاة اليمين |
|
| ضبط w3 |
نص بمحاذاة اليمين واليسار |
|
| w3 بلوك |
فئة يمكن استخدامها لتحديد عرض كامل لأي عنصر |
|
| W3- دائرة |
محتوى محاط بدائرة |
|
| w3- إخفاء |
محتوى مخفي (عرض: لا شيء) |
|
| عرض w3 |
إظهار المحتوى (عرض: منع) |
|
| w3-show-block |
الاسم المستعار لـ w3-show (العرض: block) |
|
| w3-show-inline-block |
إظهار المحتوى ككتلة مضمنة (عرض: كتلة مضمنة) |
|
| w3- القمة |
محتوى ثابت في أعلى الصفحة |
|
| w3- القاع |
محتوى ثابت في أسفل الصفحة |
|
| حاوية عرض w3 |
حاوية لفئات العرض w3 (الموضع: نسبي) |
|
| w3-display-topleft |
يعرض المحتوى في الركن الأيسر العلوي من حاوية العرض w3 |
|
| w3-عرض-حتى برايت |
يعرض المحتوى في الزاوية اليمنى العليا من حاوية العرض w3 |
|
| w3-display-bottomleft |
يعرض المحتوى في الركن الأيسر السفلي من حاوية العرض w3 |
|
| W3- العرض- القاع |
يعرض المحتوى في الركن الأيمن السفلي من حاوية العرض w3 |
|
| W3- عرض اليسار |
يعرض المحتوى على يسار (يسار الوسط) لحاوية العرض w3 |
|
| w3-display-right |
يعرض المحتوى على يمين (وسط يمين) حاوية w3-display-container |
|
| w3-عرض-وسط |
يعرض المحتوى في منتصف (وسط) حاوية العرض w3 |
|
| w3-display-topmiddle |
يعرض المحتوى في منتصف الجزء العلوي من حاوية العرض w3 |
|
| w3-display-Bottommiddle |
يعرض المحتوى في منتصف الجزء السفلي من حاوية العرض w3 |
|
| w3 عرض موقف |
يعرض المحتوى في موضع محدد في حاوية العرض w3 |
|
| w3-display-hover |
يعرض المحتوى عند التمرير داخل حاوية العرض w3 |
|
| فصل |
يعرّف |
|
| w3- التعتيم |
يضيف عتامة / شفافية إلى عنصر (عتامة: 0.6) |
|
| |
أضف العتامة / الشفافية إلى النص |
|
| W3- التعتيم قبالة |
يطفئ العتامة / الشفافية (العتامة: 1) |
|
| w3- عتامة دقيقة |
يضيف عتامة / شفافية إلى عنصر (عتامة: 0.75) |
|
| w3- عتامة ماكس |
يضيف عتامة / شفافية إلى عنصر (عتامة: 0.25) |
|
| w3- الرمادي- دقيقة |
يضيف تأثير تدرج الرمادي إلى عنصر (تدرج الرمادي: 50٪) |
|
| w3- الرمادي |
يضيف تأثير تدرج الرمادي إلى عنصر (تدرج الرمادي: 75٪) |
|
| w3- الرمادي- ماكس |
يضيف تأثير تدرج الرمادي إلى عنصر (تدرج الرمادي: 100٪) |
|
| w3- بني داكن- مين |
يضيف تأثير بني داكن إلى عنصر (بني داكن: 50٪) |
|
| w3 بني داكن |
يضيف تأثير بني داكن إلى عنصر (بني داكن: 75٪) |
|
| w3- بني داكن- ماكس |
يضيف تأثير بني داكن إلى عنصر (بني داكن: 100٪) |
|
| w3- تراكب |
يخلق تأثير تراكب |
|
| فصل |
يعرّف |
|
| W3- أحمر |
لون الخلفية أحمر |
|
| w3 الوردي |
لون الخلفية وردي |
|
| W3- أرجواني |
لون الخلفية بنفسجي |
|
| w3- ديب بيربل |
لون الخلفية بنفسجي غامق |
|
| w3- نيلي |
لون الخلفية نيلي |
|
| w3- أزرق |
لون الخلفية أزرق |
|
| w3- أزرق فاتح |
لون الخلفية أزرق فاتح |
|
| w3- سماوي |
لون الخلفية سماوي |
|
| w3- أكوا |
لون الخلفية أكوا |
|
| w3- البط البري |
لون الخلفية البط البري |
|
| W3- أخضر |
لون الخلفية أخضر |
|
| w3- الضوء الأخضر |
لون الخلفية أخضر فاتح |
|
| w3- الجير |
لون الخلفية الجير |
|
| w3 الرمال |
لون الخلفية الرمل |
|
| w3-khaki |
لون الخلفية الكاكي |
|
| W3- أصفر |
لون الخلفية أصفر |
|
| w3- العنبر |
لون الخلفية كهرماني |
|
| w3- البرتقالي |
لون الخلفية برتقالي |
|
| W3- برتقالي غامق |
لون الخلفية برتقالي غامق |
|
| w3- أزرق-رمادي |
لون الخلفية أزرق رمادي |
|
| w3- بني |
لون الخلفية بني |
|
| w3- رمادي فاتح |
لون الخلفية رمادي فاتح |
|
| W3- رمادي |
لون الخلفية رمادي |
|
| w3- رمادي غامق |
لون الخلفية رمادي غامق |
|
| w3- أسود |
لون الخلفية أسود |
|
| w3 شاحب أحمر |
لون الخلفية أحمر باهت |
|
| w3-شاحب-أصفر |
لون الخلفية أصفر باهت |
|
| w3- شاحب-أخضر |
لون الخلفية شاحب أخضر |
|
| w3-شاحب-أزرق |
لون الخلفية أزرق باهت |
|
| w3- شفاف |
لون الخلفية الشفاف |
|
فئات ألوان التحوم
يمكن أيضًا استخدام الألوان أعلاه كفئات تحوم:
| فصل |
يعرّف |
|
| w3- تحوم-أبيض |
تحوم اللون الأبيض |
|
| w3- تحوم-أسود |
تحوم اللون الأسود |
|
| w3- تحوم-أحمر |
تحوم اللون الأحمر |
|
| w3- تحوم-الأزرق |
تحوم اللون الأزرق |
|
| w3- تحوم-الخضراء |
تحوم اللون الأخضر |
|
| w3- تحوم-أكوا |
تحوم اللون أكوا |
|
| w3- تحوم-البرتقالي |
تحوم اللون البرتقالي |
|
| w3- تحوم-غراي |
تحوم اللون الرمادي |
|
| w3- تحوم-شاحب-أخضر |
تحوم اللون الأخضر الباهت |
|
| فصل |
يعرّف |
|
| w3- النص الأحمر |
لون النص أحمر |
|
| w3- النص- الأخضر |
لون النص أخضر |
|
| w3- النص الأزرق |
لون النص أزرق |
|
| w3- النص الأصفر |
لون النص أصفر |
|
| w3- نص-رمادي فاتح |
Text color light-grey |
|
| w3-text-grey |
Text color grey |
|
| w3-text-dark-grey |
Text color dark grey |
|
| w3-text-black |
Text color black |
|
| w3-text-white |
Text color white |
|
| w3-text-pink |
Text color pink |
|
| w3-text-purple |
Text color purple |
|
| w3-text-teal |
Text color teal |
|
| w3-text-light-green |
Text color light green |
|
| w3-text-lime |
Text color lime |
|
| w3-text-deep-purple |
Text color deep purple |
|
| w3-text-indigo |
Text color indigo |
|
| w3-text-light-blue |
Text color light blue |
|
| w3-text-blue-grey |
Text color blue grey |
|
| w3-text-cyan |
Text color cyan |
|
| w3-text-aqua |
Text color aqua |
|
| w3-text-amber |
Text color amber |
|
| w3-text-orange |
Text color orange |
|
| w3-text-deep-orange |
Text color deep orange |
|
| w3-text-sand |
Text color sand |
|
| w3-text-khaki |
Text color khaki |
|
| w3-text-brown |
Text color brown |
|
The text classes above can also be used as hover classes:
| Class |
Defines |
|
| w3-hover-text-red |
Hover text color red |
|
| w3-hover-text-green |
Hover text color green |
|
| w3-hover-text-blue |
Hover text color blue |
|
| w3-hover-text-yellow |
Hover text color yellow |
|
| Class |
Defines |
|
| w3-hover-border-color |
Hover border color |
|
| w3-hover-opacity |
Adds transparency to an element on hover (opacity: 0.6) |
|
| w3-hover-opacity-off |
Removes transparency from an element on hover (100% opacity) |
|
| w3-hover-shadow |
Adds shadow to an element on hover |
|
| w3-hover-grayscale |
Adds a black and white (100% grayscale) effect to an element |
|
| w3-hover-sepia |
Adds a sepia effect to an element on hover |
|
| w3-hover-none |
Removes hover effects from an element |
|
| Class |
Defines |
|
| w3-round |
Element rounded (border-radius) 4px |
|
| w3-round-small |
Element rounded (border-radius) 2px |
|
| w3-round-medium |
Element rounded (border-radius) 4px |
|
| w3-round-large |
Element rounded (border-radius) 8px |
|
| w3-round-xlarge |
Element rounded (border-radius) 16px |
|
| w3-round-xxlarge |
Element rounded (border-radius) 32px |
|
| Class |
Defines |
|
| w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
|
| w3-padding |
Padding 8px top and bottom, and 16px left and right. |
|
| w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
|
| w3-padding-16 |
Padding 16px top and bottom |
|
| w3-padding-24 |
Padding 24px top and bottom |
|
| w3-padding-32 |
Padding 32px top and bottom |
|
| w3-padding-48 |
Padding 48px top and bottom |
|
| w3-padding-64 |
Padding 64px top and bottom |
|
| w3-padding-top-64 |
Padding 64px on top |
|
| w3-padding-top-48 |
Padding 48px on top |
|
| w3-padding-top-32 |
Padding 32px on top |
|
| w3-padding-top-24 |
Padding 24px on top |
|
| Class |
Defines |
|
| w3-margin |
Adds an 16px margin to an element |
|
| w3-margin-top |
Adds an 16px top margin to an element |
|
| w3-margin-right |
Adds an 16px right margin to an element |
|
| w3-margin-bottom |
Adds an 16px bottom margin to an element |
|
| w3-margin-left |
Adds an 16px left margin to an element |
|
| w3-section |
Adds an 16px top and bottom margin to an element |
|
| Class |
Defines |
|
| w3-border |
Borders (top, right, bottom, left) |
|
| w3-border-top |
Border top |
|
| w3-border-right |
Border right |
|
| w3-border-bottom |
Border bottom |
|
| w3-border-left |
Border left |
|
| w3-border-0 |
Removes all borders |
|
| w3-border-color |
Displays any defined borders in a specified color (like red, etc) |
|
| w3-bottombar |
Adds a thick bottom border (bar) to an element |
|
| w3-leftbar |
Adds a thick left border (bar) to an element |
|
| w3-rightbar |
Adds a thick right border (bar) to an element |
|
| w3-topbar |
Adds a thick top border (bar) to an element |
|
| w3-hover-border-color |
Hoverable border color |
|
