في لغة HTML، يمكننا تخصيص شكل العناصر باستخدام الـ Inline style. يتم استخدام الـ Style Attribute لتحديد الأنماط المرئية للعناصر مباشرة في عنصر HTML المحدد.
في هذا المقال، سنقدم شرحًا مفصلاً لكيفية استخدام الـ Inline style في HTML مع الأمثلة العملية.
Style Attribute
الـ Style Attribute هو سمة تستخدم لتحديد الأنماط المرئية لعنصر HTML. يتم وضعها داخل عنصر HTML المحدد باستخدام العلامة <element style=”property:value;”>.
Background Color
يمكننا تغيير لون خلفية العنصر باستخدام الـ Inline style. يتم استخدام الخاصية background-color وتعيين القيمة المطلوبة. على سبيل المثال:
<p style="background-color: yellow;">مرحبًا بك في مدونتنا!</p>Text Color
يمكننا تغيير لون النص داخل العنصر باستخدام الـ Inline style. يتم استخدام الخاصية color وتعيين القيمة المطلوبة. على سبيل المثال:
<p style="color: red;">هذا هو نص أحمر اللون</p>Fonts
يمكننا تغيير نوع الخط وحجمه باستخدام الـ Inline style. يتم استخدام الخاصية font-family لتحديد نوع الخط والخاصية font-size لتحديد حجم الخط. على سبيل المثال:
<p style="font-family: Arial, sans-serif; font-size: 16px;">هذا هو نص بخط Arial وحجم 16 بكسل</p>Text Size
يمكننا تغيير حجم النص داخل العنصر باستخدام الـ Inline style. يتم استخدام الخاصية font-size وتعيين القيمة المطلوبة. على سبيل المثال:
<p style="font-size: 20px;">هذا هو نص بحجم 20 بكسل</p>Text Alignment
يمكننا تحديد محاذاة النص داخل العنصر باستخدام الـ Inline style. يتم استخدام الخاصية text-align وتعيين القيمة المطلوبة. على سبيل المثال:
<p style="text-align: center;">هذا هو نص متوسط الطول محاذاة في الوسط</p>ملخص
في هذا المقال، تعلمنا كيفية استخدام الـ Inline style في HTML لتخصيص شكل العناصر. استخدمنا الـ Style Attribute لتحديد الأنماط المرئية مباشرة في عناصر HTML. قمنا بشرح كيفية تغيير لون خلفية العنصر ولون النص ونوع الخط وحجم الخط ومحاذاة النص. استخدم الأمثلة المعروضة في هذا المقال لتجربة الـ Inline style بنفسك وتخصيص شكل صفحاتك الخاصة.
