تعلم CSS
ابدأ رحلتك في تعلم CSS من خلال دروس مرتبة ومنهجية تأخذك من البداية حتى الاحتراف. شرح مبسط وتطبيقات عملية.
مقدمة إلى CSS - دليلك الشامل للبدء في تنسيق صفحات الويب
تعرف على CSS من الصفر: ما هي CSS، أهميتها في تصميم المواقع، وعلاقتها بـ HTML. درس شامل للمبتدئين يشرح أساسيات تنسيق صفحات الويب بطريقة سهلة ومبسطة.
مقدمة شاملة إلى Selectors في CSS - كيفية اختيار وتنسيق عناصر HTML
تعلم أساسيات Selectors في CSS خطوة بخطوة. اكتشف كيف تختار العناصر لتطبيق الأنماط عليها باستخدام أنواع المحددات الأساسية مثل العنصر، الـ ID، والـ Class، مع أمثلة عملية مبسطة.
دليل المبتدئين لاستخدام Grouping Selectors في CSS
تعلم كيفية استخدام Grouping Selectors في CSS لتجميع محددات متعددة وتطبيق نفس الأنماط عليها، مما يقلل من تكرار الكود ويجعله أكثر تنظيماً وسهولة في الصيانة للمبتدئين.
تعلم استخدام التعليقات (Comments) في CSS لتنظيم وتحسين أكوادك
هل تريد تحسين أكواد CSS وجعلها قابلة للقراءة؟ تعلم في هذا الدرس كيفية كتابة التعليقات (Comments) في CSS لشرح الكود، تعطيل أجزاء منه مؤقتاً، وتنظيم عملك بشكل احترافي.
دليل المبتدئين لفهم وإصلاح أخطاء CSS الشائعة
تعلم كيفية التعرف على أنواع أخطاء CSS المختلفة وإصلاحها خطوة بخطوة. اكتشف أدوات المطورين لاكتشاف الأخطاء، ونصائح عملية لتجنبها في مشاريعك المستقبلية.
دليل المبتدئين للتعامل مع الألوان في CSS - الطرق والنماذج
تعلّم كيفية استخدام الألوان في CSS خطوة بخطوة! اكتشف طرق تحديد الألوان (الأسماء، HEX، RGB، HSL) وكيفية تطبيقها على النصوص والخلفيات. ابدأ في تلوين موقعك الآن.
تغيير لون الخلفية في CSS - دليل شامل للمبتدئين
تعلم كيفية تغيير لون خلفية العناصر في CSS باستخدام خاصية background-color خطوة بخطوة. شرح شامل مع أمثلة عملية سهلة لتطبيق الألوان بالكود والاسم والأنظمة اللونية.
تعلم استخدام خاصية Background Image في CSS لتزيين صفحات الويب
تعرف على كيفية إضافة وتخصيص صور الخلفية في CSS خطوة بخطوة. شرح شامل لخصائص background-image و background-size و background-repeat مع أمثلة عملية مبسطة للمبتدئين.
شرح خاصية Background Attachment في CSS مع أمثلة عملية
تعلم كيفية استخدام خاصية background-attachment في CSS للتحكم في سلوك الصورة الخلفية عند التمرير. شرح شامل مع أمثلة عملية لـ fixed، scroll، و local.
Background Shorthand في CSS - اختصر 5 خصائص في سطر واحد
تعلم كيف تستخدم خاصية Background Shorthand في CSS لاختصار 5 خصائص مختلفة في سطر واحد من الكود، مما يجعل أكوادك أنظف وأسهل في القراءة والصيانة.
دليل شامل للحدود (Borders) في CSS - من الأساسيات إلى مستوي متقدم
تعلم كل شيء عن خاصية CSS Borders خطوة بخطوة: كيفية إضافة الحدود، تغيير لونها ونمطها وسماكتها، وزواياها الدائرية. دليل عملي مع أمثلة برمجية واضحة للمبتدئين.
تعلم كيفية استخدام خاصية border-radius في CSS لتطبيق حواف دائرية
اكتشف كيفية استخدام خاصية border-radius في CSS لإنشاء حواف دائرية وناعمة للعناصر. شرح شامل خطوة بخطوة مع أمثلة عملية لتحسين مظهر موقعك الإلكتروني بسهولة.
شرح خاصية Margin في CSS - التحكم الكامل بالمسافات الخارجية
تعلم كيفية استخدام خاصية Margin في CSS للتحكم في المسافات الخارجية حول العناصر. شرح شامل للمبتدئين يشمل جميع الطرق لتعيين الهوامش مع أمثلة عملية مبسطة.
ما هو الـ Padding في CSS وكيف تستخدمه لتنسيق المسافات الداخلية؟
تعلم كل شيء عن خاصية الـ Padding في CSS في هذا الدرس الشامل. اكتشف كيفية إضافة مسافات داخلية حول محتوى العناصر لتحسين التصميم والمظهر باستخدام أمثلة عملية مبسطة.
Box Sizing في CSS - فهم وضبط أبعاد العناصر بدقة
تعلم كيفية استخدام خاصية Box Sizing في CSS للتحكم الكامل في أبعاد العناصر. اكتشف الفرق بين content-box و border-box مع أمثلة عملية مبسطة. ابدأ الآن!
تعلم التحكم في الأبعاد - شرح خاصيتي Height و Width في CSS
تعرف على أساسيات التحكم في أبعاد العناصر باستخدام خاصيتي height و width في CSS. شرح شامل للمبتدئين يتضمن الوحدات المختلفة مثل البكسل والنسب المئوية مع أمثلة عملية مبسطة.
تعلم استخدام Min/Max Height و Min/Max Width في CSS
اكتشف في هذا الدرس كيفية استخدام خصائص CSS القوية `min-height`، `max-height`، `min-width`، و `max-width` للتحكم في الحدود الدنيا والعليا لأبعاد العناصر، مما يجعل تصميماتك أكثر مرونة واستجابة.
شرح Box Model في CSS - فهم المكونات الأساسية لتخطيط الصفحات
تعلم كل شيء عن Box Model في CSS: ما هي مكوناته (المحتوى، الحشوة، الحدود، الهامش) وكيفية التحكم بها. درس شامل مع أمثلة عملية مبسطة للمبتدئين لفهم أساسيات تنسيق العناصر.
دليل شامل لخاصية Outline في CSS - الفرق بينها وبين Border
تعلّم كل شيء عن خاصية Outline في CSS: ماهيتها، كيف تختلف عن Border، وكيفية استخدامها لتحديد العناصر وتحسين إمكانية الوصول في تصميم موقعك بخطوات بسيطة.
شرح خاصية Outline Shorthand في CSS لتحسين إطارات العناصر
تعلم كيفية استخدام خاصية Outline Shorthand في CSS لتعريف عرض ولون ونمط الإطار الخارجي للعناصر باختصار برمجي واحد. درس شامل مع أمثلة عملية للمبتدئين.
تعلم التحكم في ألوان النصوص باستخدام CSS - دليل شامل للمبتدئين
اكتشف كيفية تغيير لون النص في CSS بسهولة. تعلم استخدام خاصية color، الألوان المسماة، أكواد HEX و RGB. درس مبسط مع أمثلة عملية لتحسين مظهر موقعك الإلكتروني.
دليل المبتدئين الشامل لمحاذاة النصوص في CSS
تعلم كيفية محاذاة النصوص في CSS باحترافية. شرح مفصل لخاصية text-align مع أمثلة عملية على المحاذاة لليسار، اليمين، الوسط، والضبط. ابدأ في تنسيق نصوص موقعك بسهولة.
Text Decoration في CSS - دليلك الشامل لتزيين النصوص
تعلم كيفية استخدام خاصية text-decoration في CSS لتزيين النصوص بإضافة خطوط تحتية، فوقية، أو شطبة. درس شامل مع أمثلة عملية مبسطة للمبتدئين.
Text Decoration في CSS - دليلك الشامل لتنسيق النصوص
تعلم كيفية استخدام خاصية text-decoration في CSS لتطبيق تأثيرات الخطوط على النصوص مثل الخطوط التحتية، العلوية، والمشطوبة. درس شامل مع أمثلة عملية مبسطة للمبتدئين.
دليل تحويل النصوص في CSS - text-transform و text-decoration
تعلم كيفية التحكم في مظهر النصوص باستخدام خصائص CSS مثل text-transform لتغيير حالة الأحرف و text-decoration لإضافة خطوط وتزيين النصوص. درس شامل مع أمثلة عملية للمبتدئين.
تحكم كامل في المسافات بين النصوص في CSS
تعلم كيفية استخدام خصائص CSS الثلاثة line-height و letter-spacing و word-spacing لتحسين المسافات بين الأسطر والحروف والكلمات في نصوص موقعك، مما يرفع من سهولة القراءة وجمالية التصميم للمبتدئين.
تعلم خاصية Text Shadow في CSS لإضافة ظلال جميلة للنصوص بسهولة
تعرف على كيفية استخدام خاصية text-shadow في CSS لإضافة ظلال للنصوص لتحسين جمالية وتأثير النص في موقعك. شرح خطوة بخطوة مع أمثلة بسيطة للمبتدئين.
تنسيق الخطوط في CSS - دليل شامل للتحكم في الـ Fonts
تعلم كيفية تنسيق النصوص في صفحات الويب باستخدام CSS. ستتعرف في هذا الدرس على خصائص font-family و font-size و font-weight و font-style بخطوات عملية وأمثلة واضحة للمبتدئين.
دليل المبتدئين لتنسيق الروابط في CSS - الألوان، الأنماط، والحالات
تعلّم كيفية تنسيق الروابط في CSS خطوة بخطوة. غيّر ألوان الروابط، تخلّص من الخط التحتيلي، أضف تأثيرات عند المرور بالمؤشر، وغيرها من الخصائص الأساسية لتجعل موقعك أكثر احترافية.
تعلم استخدام الأيقونات في CSS - Font Awesome، SVG
دليل شامل للمبتدئين حول إضافة الأيقونات إلى صفحات الويب باستخدام CSS. تعلم كيفية استخدام مكتبة Font Awesome، الأيقونات المدمجة في المتصفح، وصور SVG بطرق احترافية وبسيطة.
دليل CSS الشامل لتنسيق القوائم - الأنماط، الرموز النقطية والترقيم
تعلم كيفية تنسيق القوائم في CSS باحترافية! اكتشف كيفية تغيير الرموز النقطية، التحكم في الترقيم، إزالة التنسيق الافتراضي، وإنشاء قوائم أفقية لتحسين تصميم موقعك. درس شامل للمبتدئين.
تعلم إضافة وتخصيص حدود الجداول في CSS خطوة بخطوة
هل تريد تحسين مظهر جداول موقعك؟ في هذا الدرس الشامل، ستتعلم كيفية إضافة حدود للجداول في CSS وتخصيص سمكها ولونها ونمطها بسهولة، مع أمثلة عملية مبسطة.
كيفية التحكم في حجم وعرض الجداول في CSS - شرح شامل للمبتدئين
تعلم كيفية التحكم في حجم وعرض الجداول باستخدام CSS خطوة بخطوة. ستتعرف في هذا الدرس على خصائص width و height و max-width و box-sizing لتنسيق جداولك بشكل احترافي وسريع الاستجابة.
كيفية محاذاة الجداول في CSS - شرح text-align و vertical-align
تعلم كيفية محاذاة النصوص والعناصر داخل الجداول في CSS باحترافية. شرح مفصل لخاصيتي text-align و vertical-align مع أمثلة عملية لتنسيق الجداول وتحسين مظهرها.
دليل شامل لتنسيق الجداول باستخدام CSS للمبتدئين خطوة بخطوة
تعلم كيفية تنسيق الجداول في CSS باحترافية. هذا الدرس يغطي أساسيات إضافة الأنماط، الألوان، الحدود، والتخطيط لجعل جداولك جذابة وسهلة القراءة. ابدأ الآن!
كيفية تصميم جداول متجاوبة باستخدام CSS للمواقع الإلكترونية
تعلم كيفية تحويل الجداول العادية إلى جداول متجاوبة Responsive Tables باستخدام تقنيات CSS مثل overflow وdisplay: block. درس شامل خطوة بخطوة مع أمثلة عملية لضمان ظهور الجداول بشكل مثالي على جميع الشاشات.
تعلم خاصية Display في CSS - دليل المبتدئين الشامل
اكتشف أساسيات خاصية Display في CSS وكيف تتحكم في طريقة عرض العناصر على صفحة الويب. تعلم الفرق بين Block و Inline و Inline-Block مع أمثلة عملية مبسطة.
التحكم في ظهور العناصر في CSS - دليل شامل لخاصية visibility
تعلم كيفية استخدام خاصية visibility في CSS للتحكم في ظهور وإخفاء العناصر في صفحات الويب. اكتشف الفرق بين visibility و display مع أمثلة عملية مبسطة للمبتدئين.
شرح خاصية Position في CSS لتحديد مواقع العناصر بدقة
تعلم كيفية التحكم في موضع العنصر باستخدام خاصية Position في CSS. اكتشف الفرق بين Static, Relative, Absolute, Fixed, وSticky مع أمثلة عملية مبسطة للمبتدئين.
تعلم CSS Sticky Positioning - دليل شامل للمبتدئين مع أمثلة عملية
اكتشف قوة الـ Sticky Positioning في CSS! تعلم كيف تثبت العناصر أثناء التمرير بسهولة. شرح مبسط خطوة بخطوة مع أمثلة برمجية واقعية للمبتدئين.
شرح خاصية z-index في CSS - كيفية التحكم في ترتيب العناصر
تتعلم في هذا الدرس من أكاديمية كودكس كيفية استخدام خاصية z-index في CSS للتحكم في ترتيب العناصر المتداخلة فوق بعضها البعض، مع أمثلة عملية مبسطة للمبتدئين.
شرح خاصية overflow في CSS - التحكم في المحتوى الزائد
تعلم كيفية استخدام خاصية overflow في CSS للتحكم في المحتوى الذي يتجاوز حدود العنصر. اكتشف قيمها المختلفة مثل hidden و scroll و auto مع أمثلة عملية مبسطة.
شرح خاصيتي overflow-x و overflow-y في CSS بالتفصيل للمبتدئين
تعلم كيفية التحكم في المحتوى الزائد باستخدام overflow-x و overflow-y في CSS. شرح مبسط مع أمثلة عملية للتحكم في التمرير الأفقي والرأسي لعناصر HTML. اكتشف متى تستخدم كل خاصية وكيفية تطبيقها.
تعلم خاصية Float في CSS لتنسيق الصور والنصوص والمربعات بسهولة
تعرف على خاصية Float في CSS وكيفية استخدامها لإنشاء تخطيطات ديناميكية، مثل تحريك الصور داخل النصوص وإنشاء الأعمدة البسيطة. درس شامل مع أمثلة عملية للمبتدئين.
شرح خاصية Opacity في CSS: كيفية التحكم في شفافية العناصر
تعلم كيفية استخدام خاصية opacity في CSS بسهولة للتحكم في شفافية أي عنصر على صفحة الويب، من خلال أمثلة عملية مبسطة للمبتدئين.
إضافة الظلال في CSS - دليل شامل لخصائص box-shadow و text-shadow
تعلّم كيفية استخدام خاصيتي box-shadow و text-shadow في CSS لإضافة ظلال عميقة وجميلة لعناصر موقعك. درس مبسط خطوة بخطوة مع أمثلة عملية واضحة.
تعلم أساسيات التحريك في CSS - دليل شامل للمبتدئين
اكتشف قوة التحريك في CSS! في هذا الدرس، ستتعلم خطوة بخطوة كيفية إضافة حركات سلسة وجذابة لموقعك باستخدام خاصيتي `transition` و `animation`، مع أمثلة عملية مبسطة. ابدأ في إحياء تصميماتك الآن.
التحكم في توقيت الحركات CSS Animation Timing
تعلم كيفية التحكم الدقيق في توقيت حركات CSS باستخدام خصائص animation-duration و animation-delay و animation-timing-function. درس شامل يشرح كيفية جعل حركاتك أكثر سلاسة واحترافية خطوة بخطوة.
خصائص الأنيميشن في CSS - دليل شامل لتحريك عناصر الويب
تعلم كيف تستخدم خصائص CSS للتحريك (Animation Properties) خطوة بخطوة. ستتعرف على `animation-name`، `animation-duration`، `animation-timing-function` وغيرها لإنشاء حركات سلسة وجذابة لموقعك.
شرح خاصية !important في CSS وكيفية استخدامها بشكل صحيح
تعلم كل شيء عن قاعدة !important في CSS: معناها، كيفية كتابتها، متى تستخدمها، ومخاطر الإفراط في استخدامها. درس شامل مع أمثلة عملية مبسطة للمبتدئين.
شرح الكومبيناتورز في CSS - أدوات ربط وتحديد العناصر بدقة
تعلم كيف تستخدم الكومبيناتورز في CSS لربط وتحديد العناصر بناءً على علاقاتها داخل شجرة HTML، مما يمنحك تحكماً دقيقاً في التصميم. درس شامل للمبتدئين خطوة بخطوة.
شرح Pseudo-classes في CSS - دليل المبتدئين الشامل
تعلم كيفية استخدام Pseudo-classes في CSS لتغيير نمط العناصر بناءً على حالتها. اكتشف أهم الفئات الزائفة مثل :hover و :focus و :nth-child() مع أمثلة عملية مبسطة. ابدأ الآن!
شرح Pseudo-elements في CSS - دليل المبتدئين الشامل
تعلم كيفية استخدام Pseudo-elements في CSS لإضافة محتوى وتصميمات ديناميكية لعناصر HTML دون الحاجة لتعديل الـ HTML نفسه. شرح مبسط مع أمثلة عملية. ابدأ الآن!
دليل المبتدئين لتحريك العناصر في CSS باستخدام Translate و Rotate
تعلم كيفية تحريك ودوران العناصر في صفحة الويب دون التأثير على التخطيط المحيط باستخدام خصائص CSS الرائعة: transform: translate() و transform: rotate(). شرح سهل مع أمثلة عملية.
تحويل العناصر في CSS: Scale و Skew لتغيير الحجم والإمالة
تعلم كيفية استخدام دالتي `scale()` و `skew()` في CSS لتكبير العناصر أو تصغيرها، وإمالتها بزوايا مختلفة. درس شامل خطوة بخطوة مع أمثلة عملية لتطبيق التحويلات على الصور والنصوص.
شرح خاصية Transform Origin في CSS لتحديد نقطة التحول للمكونات
تعلم كيف تستخدم خاصية transform-origin في CSS للتحكم في نقطة البداية أو المحور الذي تدور أو تتغير حوله العناصر، مما يمنحك تحكماً دقيقاً في تأثيرات الحركة والتحويل.
تعلم CSS Variables - المتغيرات في CSS لتصميم أكثر مرونة وسهولة
اكتشف قوة CSS Variables (المتغيرات) في هذا الدرس الشامل. تعلم كيفية تعريفها واستخدامها لتسهيل تعديل الألوان والخطوط والقيم في مشروعك بأكمله، مما يجعل كود CSS أكثر تنظيماً وقابلية للصيانة.
شرح خاصية @property في CSS لتخصيص المتغيرات والتحكم بها
تعلم كيفية استخدام قاعدة @property في CSS لتحديد خصائص متغيرات CSS المخصصة (Custom Properties) بدقة، مما يتيح لك التحكم في نوعها، وراثتها، والقيمة الابتدائية، وغيرها من الإعدادات المتقدمة.
Media Queries في CSS - دليل شامل لتصميم مواقع متجاوبة
تعلم استخدام Media Queries في CSS لإنشاء مواقع ويب متجاوبة تتكيف مع جميع أحجام الشاشات. خطوة بخطوة، سنشرح كيفية تطبيقها لتحسين تجربة المستخدم على الجوال والتابلت.
دليل المبتدئين الشامل لفهم Flexbox في CSS خطوة بخطوة
تعلم أساسيات Flexbox في CSS ببساطة! هذا الدرس يشرح مفهوم الحاوية المرنة، محوريها الأساسيين، وكيفية محاذاة العناصر داخلها. ابدأ في بناء تخطيطات ويب متجاوبة بسهولة.
تعلم CSS Flexbox - دليل شامل للتحكم في تخطيط الصفحات
اكتشف قوة Flex Container في CSS لتخطيط عناصر صفحتك بمرونة وسهولة. تعلم كيفية استخدام خاصية display: flex وخصائص المحورين الرئيسي والجانبي لإنشاء تصميمات متجاوبة احترافية من الصفر.
شرح خاصية Justify Content في CSS لتوزيع العناصر بشكل احترافي
تعلم كيفية استخدام خاصية justify-content في CSS للتحكم في توزيع العناصر داخل الحاوية المرنة (Flexbox) باحترافية. اكتشف قيمها المختلفة مثل flex-start و center و space-between مع أمثلة عملية مبسطة.
شرح خاصية align-items في CSS لتنسيق العناصر داخل الحاوية
تعلم كيفية استخدام خاصية align-items في CSS للتحكم في محاذاة العناصر الفرعية عمودياً داخل حاوية Flexbox، مع أمثلة عملية توضح جميع قيمها مثل stretch و center و flex-start.
خصائص Flex Items في CSS - دليل المبتدئين للتحكم في العناصر المرنة
تعلم كيفية التحكم في العناصر الفرعية داخل حاوية Flexbox باستخدام خصائص Flex Items الأساسية مثل order و flex-grow و flex-shrink و flex-basis لإنشاء تخطيطات مرنة ومتجاوبة.
دليل المبتدئين الشامل لتعلم CSS Grid Layout من الصفر
تعرف على نظام CSS Grid، أقوى أداة لإنشاء تخطيطات صفحات ويب معقدة ومرنة. في هذا الدرس، ستتعلم أساسيات Grid خطوة بخطوة مع أمثلة عملية مبسطة.
دليل CSS Grid Container الشامل - التحكم في تخطيط الصفحات
تعلم كيفية استخدام Grid Container في CSS لإنشاء تخطيطات معقدة ومرنة لصفحات الويب. ابدأ بتعريف الحاوية وضبط الأعمدة والصفوف بسهولة. درس مبسط خطوة بخطوة.
شرح Grid Tracks في CSS - دليل المبتدئين لإنشاء تخطيطات ديناميكية
تعلم كيفية استخدام Grid Tracks في CSS Grid لإنشاء أعمدة وصفوف بمرونة تامة. اكتشف كيفية تحديد أحجامها بالبكسل، النسبة المئوية، ووحدات fr لبناء تخطيطات ويب احترافية خطوة بخطوة.
شرح خاصية Grid Gap في CSS لتحسين تنسيق المسافات بين العناصر
تعلم كيفية استخدام خاصية Grid Gap في CSS لإنشاء مسافات متساوية وجميلة بين عناصر الـ Grid. درس شامل يشرح gap و row-gap و column-gap مع أمثلة عملية مبسطة.
كيفية التحكم في العناصر داخل CSS Grid - دليل شامل لـ Grid Items
تعلم كيفية التحكم الدقيق في العناصر داخل CSS Grid باستخدام خصائص Grid Items. في هذا الدرس، ستتعلم محاذاة العناصر، تحديد حجمها، وضبط موقعها في الشبكة خطوة بخطوة مع أمثلة عملية.
شرح خاصية Order في CSS لترتيب العناصر المرنة
تعلم كيفية استخدام خاصية Order في CSS للتحكم في الترتيب البصري للعناصر داخل الحاوية المرنة (Flexbox) بسهولة، مع أمثلة عملية مبسطة للمبتدئين.