الأنماط المضمّنة
غيّر مظهر العناصر مباشرةً في HTML
الأنماط المضمّنة درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.
إضافة لون للخلفية
يمكنكم إبراز العناصر باستخدام الخاصية background-color.
مثال:
<p style="background-color: yellow;">This text has a yellow background.</p>
الأنماط المضمّنة: إضافة تنسيق بسيط إلى HTML
مرحبًا بكم في درس الأنماط المضمّنة! ستتعلّمون اليوم كيفية تنسيق العناصر مباشرةً في HTML باستخدام السمة style.
ما الأنماط المضمّنة؟
تتيح لكم الأنماط المضمّنة إضافة CSS مباشرةً إلى وسم HTML باستخدام السمة style. وهذه أبسط طريقة لتنسيق صفحتكم.
مثال:
<p style="color: red;">This is red text!</p>
تغيّر color: red; لون النص إلى الأحمر.
تغيير حجم الخط
استخدموا الخاصية font-size لتغيير حجم النص.
مثال:
<p style="font-size: 24px;">This text is 24 pixels large.</p>
دمج أنماط متعددة
تتيح لكم الأنماط المضمّنة دمج عدة خصائص من CSS. افصلوا بين كل خاصية وأخرى بفاصلة منقوطة ;.
مثال:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles!
</p>
تنسيق العناصر الأخرى
تعمل الأنماط المضمّنة مع جميع عناصر HTML، مثل العناوين والأزرار والصور.
مثال:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
Styled Button
</button>
جرّب بنفسك
لننشئ صفحة ويب باستخدام الأنماط المضمّنة. إليكم مثالًا للبدء:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This is an example of inline styling.
</p>
<button style="background-color: lightblue; padding: 10px; border: none;">
Click Me!
</button>
</body>
</html>
أحسنتم!
تهانينا! لقد تعلّمتم كيفية استخدام الأنماط المضمّنة لإضافة تنسيق بسيط وفعّال إلى عناصر HTML. تُعدّ الأنماط المضمّنة مناسبة للتغييرات السريعة، لكنكم ستحتاجون إلى تقنيات تنسيق أكثر تقدمًا مع نمو صفحة الويب الخاصة بكم. في الدرس التالي، سنستكشف أساسيات CSS. استعدّوا لتصميم صفحات ويب احترافية!
استخدام السمة style
ما الأنماط المضمّنة؟
تتيح لكم الأنماط المضمّنة إضافة CSS مباشرةً إلى وسم HTML باستخدام السمة style. وهذه أبسط طريقة لتنسيق صفحتكم.
مثال:
<p style="color: red;">This is red text!</p>
تغيّر color: red; لون النص إلى الأحمر.
<p style="color: red;">This is red text.</p>
الأسئلة الشائعة
هل درس «الأنماط المضمّنة» مجاني؟
نعم — نص درس «الأنماط المضمّنة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.
ماذا ستتعلم في «الأنماط المضمّنة»؟
غيّر مظهر العناصر مباشرةً في HTML تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «الأنماط المضمّنة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الأنماط المضمّنة
- أساسيات CSS
- الألوان والخلفيات
- تنسيق النصوص