CSS سطري
جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 6 من 76.
Inline CSS هو طريقة لإضافة أنماط CSS مباشرة إلى عنصر HTML باستخدام سمة style. يسمح لك هذا النهج بتطبيق أنماط فريدة على عناصر فردية دون الحاجة إلى أوراق أنماط خارجية أو داخلية. تعد الأنماط المضمنة مفيدة لإجراء تغييرات سريعة ومحددة في النمط على عنصر واحد.
إليك الصيغة الأساسية لاستخدام CSS المضمن (inline CSS):
<element style="property: value;"></element><element>: عنصر HTML الذي تريد تنسيقه.style: سمة تحتوي على تصريحات CSS.
property: خاصية CSS التي تريد تعيينها (على سبيل المثال، color، font-size).value: القيمة التي تريد تعيينها للخاصية (على سبيل المثال، blue، 16px).
على سبيل المثال:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>في هذا المثال، يحتوي عنصر الفقرة على أنماط مضمنة (inline styles) تحدد لون النص باللون الأزرق وحجم الخط بـ 16 بكسل. ستنطبق هذه الأنماط فقط على عنصر الفقرة المحدد هذا.
التحدي
سهللقد تم تزويدك بمستند HTML يحتوي على عنصر فقرة. استخدم CSS المضمن (inline CSS) لتنسيق الفقرة بالخصائص التالية:
- قم بتعيين لون النص إلى "red".
- قم بتعيين حجم الخط إلى "18px".
تحقق من المثال الموجود في الدرس للتوجيه!
ورقة مرجعية
استخدم سمة style لتطبيق CSS مباشرة على عناصر HTML:
<element style="property: value;"></element>مثال مع خصائص متعددة:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>جرّب بنفسك
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Styling with CSS
4أساسيات النصوص
لون النصعائلة الخطحجم الخطسمك الخطمحاذاة النصزخرفة النصتحدي المراجعة رقم 1تحدي المراجعة رقم 27نموذج الصندوق - الجزء الأول
ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاعتحدي المراجعة
8نموذج الصندوق (Box Model) - الجزء الثاني
تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعة