تخصيص تنسيق في CSS باستخدام ال class وال id –أولويات التنسيق

هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت

الدرس: تخصيص تنسيق في CSS باستخدام ال class وال id –أولويات التنسيق

المدة: 5 دقائق

وصف مختصر:

تعلم كيفية تجاوز الأنماط الافتراضية للعناصر باستخدام CSS وفهم الأولويات بين الأنماط المعتمدة على الصفوف والمعرفات.

وصف الدرس

مقدمة: تجاوز الأنماط في CSS باستخدام الصفوف والمعرفات


تعد القدرة على التحكم في أنماط عناصر HTML باستخدام CSS مهارة أساسية لكل مطور ويب. يساعد فهم كيفية تجاوز الأنماط باستخدام الصفوف (class) والمعرفات (id) في منحك المرونة الكاملة لتخصيص وتعديل التصميمات وفقًا لمتطلباتك. في هذا الدرس، سنغطي كيفية تطبيق وتجاوز الأنماط على عناصر معينة باستخدام CSS، مع مراعاة أولويات الأنماط التي تأتي من ملفات CSS الخارجية وعلامات النمط الداخلية.

CSS وأولوية الأنماط


في CSS، تُعطى الأولوية للأنماط بناءً على كيفية تحديدها في الكود. الأنماط المطبقة من خلال الصفوف والمعرفات هي الطرق الأكثر استخدامًا لتجاوز الأنماط الافتراضية أو الأنماط الموروثة من عناصر HTML. يتم ترتيب الأنماط وفقًا للتالي:

  1. الأنماط العامة مثل الأنماط المطبقة على جميع العناصر (body, h1, إلخ).

  2. الأنماط المطبقة باستخدام class: يتم استخدامها لتطبيق الأنماط على مجموعة من العناصر المتعددة.

  3. الأنماط المطبقة باستخدام id: تُستخدم لتطبيق أنماط خاصة على عنصر واحد فقط، مما يجعلها ذات أولوية أعلى مقارنة بالصفوف.


كيفية تجاوز الأنماط باستخدام class و id في CSS


لنتعرف على كيفية تجاوز الأنماط باستخدام الصفوف والمعرفات في الكود التالي:

html






<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تجاوز الأنماط في CSS</title><link rel="stylesheet" href="style.css">
<style>
h1 {
color: yellow;
}
</style>
</head>
<body>
<h1> H1 مرحباً </h1>
<h2> H2 مرحباً </h2>
<h3> H3 مرحباً </h3>
<h2 class="text-yellow"> H2 مرحباً (أصفر)</h2>
<h2 id="title"> H2 مرحباً (عنوان) (أصفر)</h2><input type="text">
<input type="password">
<input type="email">
</body>
</html>



وفي ملف style.css:

css






body {
background-color: red;
color: white;
}h1 {
color: green;
font-size: 190px;
}.text-yellow {
color: yellow;
}

#title {
font-size: 99px;
color: black;
background-color: white;
}

input {
/* أنماط الإدخال هنا */
}



في هذا المثال:

  • يتم تجاوز الأنماط العامة باستخدام الصفوف (class) لتطبيق لون أصفر على عناصر h2 المحددة بالصف text-yellow.

  • يتم تجاوز الأنماط أيضًا باستخدام المعرفات (id) لتطبيق حجم خط خاص وخلفية على عنصر h2 الذي يحمل المعرف title.


أهمية فهم أولويات الأنماط


فهم أولويات الأنماط في CSS يمكن أن يكون فارقًا كبيرًا في جعل تصميم موقعك يبدو بالشكل المطلوب. عند التعامل مع عدة أنماط تطبق على نفس العنصر، يمكنك التحكم فيما سيتم تطبيقه باستخدام class أو id بناءً على ما تريد تجاوزه من أنماط. تعلم هذا الأمر يفتح الباب أمام تصميم صفحات ويب مخصصة واحترافية.

خاتمة


بتعلمك لتجاوز الأنماط في CSS باستخدام الصفوف والمعرفات، ستصبح قادرًا على تعديل وتخصيص أي عنصر في صفحات الويب الخاصة بك بالشكل الذي يناسب احتياجاتك. انضم إلى دورتنا الآن وابدأ رحلتك نحو احتراف تطوير الويب مع شهادة معتمدة.

الفيديوهات

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات

فيديو الدرس التعليمي تخصيص تنسيق في CSS باستخدام ال class وال id –أولويات التنسيق

المصادر

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر

أوامر بناء صفحة إنترنت مستخدمة في هذا الدرس

أوامر تنسيق مستخدمة في هذا الدرس

ملحقات ال PDF

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF

ملف الشرح المرجعي وصول لعناصر صفحات الإنترنت وتنسيقها

هذا الدرس من الدورة التدريبية

دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت

  • 225 دقيقة من الفيديوهات التفاعلية الحصرية
  • 71 مصدر إضافي
  • 41 ملحقات PDFs
  • 3 تطبيق نظري وعملي
  • الوصول على جميع الأجهزة
  • وصول مدى الحياة
  • شهادة أوروبية لإتمام الدراسة
  • ا لحصول على شهادة دبلوم موثقة

للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج كورس تعلم لغة CSS لإنشاء تصاميم وتنسيق مواقع الإنترنت
اضغط هنا ابدأ التعلم أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج

الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت

دورات تدريبية أخرى في برمجة

كورس تعلم HTML من الصفر لبناء صفحات ويب

تعلم أساسيات بناء صفحات ومواقع الإنترنت وكل شيء عن المتصفحات وملفات برمجة المواقع HTML

دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية

دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة الوحدة...

دورة تديبية في تصميم وبناء قواعد البيانات MySQL

دورة شاملة لتعلم تصميم وتطوير قواعد البيانات باستخدام MySQL، تشمل أساسيات التصميم، إدارة البيانات، وتحسين الأداء مع تطبيقات عملية

مقالات ذات صلة

الوصول وتشغيل استعلامات واوامر قواعد بيانات عبر برنامج XAMPP

النص الأصلي الأساسي باللغة الإنجليزي تم ذكره بعد هذا الوصف باللغة العربية يمكنك استخدام برنامج الخادم مثل XAMPP. تأكد من تثبيته وتشغيله....

التعرف على محررات الأكواد وأسرار إتقان لغة بناء صفحات الويب HTML

  مقدمة تعتبر لغة HTML (HyperText Markup Language) البنية الأساسية لأي صفحة ويب. تُستخدم هذه اللغة البسيطة والقوية لتحديد هيكل المحتوى على...

لماذا يجب أن تبدأ بتعلم البرمجة وجافاسكربت الآن؟

فوائد تعلم البرمجة وبرنامج جافاسكربت في عالمنا الرقمي المتسارع، أصبحت البرمجة حجر الزاوية الذي تقوم عليه العديد من الابتكارات التقنية التي نشهدها...

has been added to the cart. View Cart