المحدد العام
جزء من قسم التنسيق باستخدام CSS في رحلة HTML على Coddy. الدرس 15 من 76.
يُعدّ المحدِّد الشامل محدِّدًا قويًا في CSS يستهدف كل عنصر HTML في الصفحة. يُمثَّل بعلامة النجمة (*).
عند استخدامه، يطبّق المحدِّد العام الأنماط المحددة على جميع العناصر، بغض النظر عن نوعها أو فئتها أو معرّفها. تطبّق المتصفحات أنماطها الافتراضية قبل أنماطك (مثل الهوامش حول العناوين والفقرات، والحشو في القوائم)، لذا يكون المحدِّد العام مفيدًا لتعيين الأنماط العامة أو لإعادة ضبط تلك الإعدادات الافتراضية للمتصفح في المستند بأكمله.
إليك الصياغة الأساسية لاستخدام المحدد الشامل:
* {
property: value;
}على سبيل المثال، لنفترض أنك تريد تعيين لون النص وحجم الخط الافتراضيين لجميع العناصر في صفحة. يمكنك استخدام المحدد الشامل كما يلي:
* {
color: black;
font-size: 14px;
}
التحدي
سهللديك مستند HTML يحتوي على عناصر متنوعة، بما في ذلك العناوين (<h1>، <h2>) والفقرات (<p>) وعنصر تقسيم (<div>). مهمتك هي استخدام المحدد الشامل لتنسيق هذه العناصر. اتبع الخطوات التالية:
- اكتب قاعدة CSS باستخدام المحدد الشامل، بحيث تضبط لون نص جميع العناصر على darkgray وحجم الخط على 16 بكسل.
جرّب بنفسك
<html>
<head>
<title>Universal Selector</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<p>This is a paragraph.</p>
<div>This is a division.</div>
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس التنسيق باستخدام CSS
4أساسيات النصوص
لون النصعائلة الخطحجم الخطسمك الخطمحاذاة النصزخرفة النصتحدي المراجعة رقم 1تحدي المراجعة رقم 27نموذج الصندوق - الجزء الأول
ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاعتحدي المراجعة
8نموذج الصندوق (Box Model) - الجزء الثاني
تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعةتدرّب بنفسك: Playground لـ Web