هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
الدرس: محددات CSS: استهداف العناصر، العناصر المباشرة، والعناصر المحددة
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
كيفية استخدام محددات CSS لتطبيق التنسيقات على العناصر المختلفة
في هذا الدرس، سنتناول كيفية استخدام محددات CSS لتطبيق التنسيقات على عناصر HTML. هذه المهارات تتيح لك التحكم الكامل في كيفية ظهور العناصر المختلفة على صفحة الويب، بما في ذلك تطبيق التنسيقات على عدة عناصر، استهداف العناصر المباشرة، وتحديد العناصر الخاصة مثل الأول والأخير من نوع معين.
تطبيق نفس خصائص CSS على عدة عناصر باستخدام محددات متعددة
يمكنك تطبيق نفس التنسيقات على عدة عناصر في وقت واحد باستخدام محددات متعددة مفصولة بفواصل. هذه الطريقة تجعل الكود أكثر كفاءة وتقلل من التكرار. على سبيل المثال:
body, header {
background-color: lightgray;
padding: 10px;
}
في هذا المثال، نطبق الخلفية والتباعد على كل من عنصر
<body> و<header> بنفس التنسيقات.استهداف جميع العناصر داخل عنصر معين باستخدام محدد المسافة
محدد المسافة في CSS يسمح لك بتطبيق التنسيقات على جميع العناصر داخل عنصر آخر. على سبيل المثال:
body div {
color: red;
}
هذا يعني أن جميع عناصر
<div> داخل عنصر <body> ستأخذ لون النص الأحمر.استهداف العناصر المباشرة فقط باستخدام المحدد المباشر ">"
المحدد المباشر يتيح لك استهداف العناصر المباشرة فقط داخل عنصر آخر. في المثال التالي:
body > header > nav {
background-color: lightgreen;
padding: 5px;
}
نطبق هذه التنسيقات فقط على عنصر
<nav> المباشر داخل عنصر <header>.استهداف العنصر الأول باستخدام محدد ":first-of-type"
يمكنك استهداف أول عنصر من نوعه داخل عنصر محدد باستخدام محدد
:first-of-type:
body > div:first-of-type {
background-color: blue;
}
في هذا المثال، يتم تغيير خلفية أول
<div> مباشرةً داخل عنصر <body> إلى اللون الأزرق.استهداف العنصر الأخير باستخدام محدد ":last-of-type"
لتطبيق تنسيقات على العنصر الأخير من نوع معين، يمكنك استخدام محدد
:last-of-type:
body > div:last-of-type {
background-color: yellow;
}
هنا يتم تغيير خلفية آخر
<div> مباشرةً داخل عنصر <body> إلى اللون الأصفر.استهداف عنصر بناءً على ترتيبه باستخدام محدد ":nth-of-type"
محدد
:nth-of-type يتيح لك استهداف عناصر بناءً على ترتيبها داخل عنصر آخر. على سبيل المثال:
body > div:nth-of-type(2) {
background-color: pink;
}
في هذا المثال، يتم تطبيق الخلفية الوردية على ثاني
<div> داخل عنصر <body>.اكتسب المهارات المتقدمة في CSS الآن!
من خلال تعلم كيفية استخدام محددات CSS المتقدمة، يمكنك التحكم الكامل في كيفية ظهور وتصميم مواقع الويب. انضم إلى دوراتنا الآن واحصل على شهادة معتمدة في تطوير الويب. مهاراتك المكتسبة ستجعلك مؤهلاً لبناء مواقع ويب احترافية وعصرية.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي محددات CSS: استهداف العناصر، العناصر المباشرة، والعناصر المحددة
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
أوامر بناء صفحة إنترنت مستخدمة في هذا الدرس
أوامر تنسيق مستخدمة في هذا الدرس
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
ملف الشرح المرجعي وصول لعناصر صفحات الإنترنت وتنسيقها
- 225 دقيقة من الفيديوهات التفاعلية الحصرية
- 71 مصدر إضافي
- 41 ملحقات PDFs
- 3 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
كورس تعلم لغة CSS لإنشاء تصاميم وتنسيق مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
دورات تدريبية أخرى في برمجة
دبلوم بناء وتنسيق وبرمجة مواقع إنترنت تفاعلية
دبلوم تطوير واجهة مستخدم HTML وCSS وJavaScript شاهد آراء مهندسين البرمجيات الذين حصلوا على عمل بعد إكمالهم الدورات التدريبية مع مدرب البورد...
كورس تعلم HTML من الصفر لبناء صفحات ويب
تعلم أساسيات بناء صفحات ومواقع الإنترنت وكل شيء عن المتصفحات وملفات برمجة المواقع HTML
تعلم البرمجة من الصفر وتطوير صفحات الويب الإحترافية مع لغة جافاسكربت JavaScript
تعلم البرمجة من الصفر وبدون خبرة حتى احتراف صناعة تطبيقات الويب التفاعلية باستخدام لغة العصر جافاسكربت JavaScript
مقالات ذات صلة
لغة JSON: أساس تبادل البيانات في تطبيقات الويب الحديثة
مقدمة في عالم تطوير الويب الحديث، أصبحت لغة JSON (JavaScript Object Notation) حجر الزاوية في تبادل البيانات بين مختلف الأجزاء من تطبيق...
فهم الشبكات: المفاهيم الأساسية والأدوات
دور الشبكات والخوادم وأدوات البرمجة في تطوير مواقع الإنترنت في عصر التكنولوجيا المتقدمة، أصبح بناء مواقع الإنترنت وتطبيقات الويب يعتمد بشكل كبير...
فهم شبكات الإنترنت وخوادم الويب: مقدمة شاملة
الإنترنت هو أحد الابتكارات الأكثر تأثيرًا في العالم الحديث، حيث يلعب دورًا أساسيًا في تقريب العالم وجعل المعلومات والمعرفة في متناول الجميع....
