كيف نحدّد الأنماط؟
كيف نحدّد الأنماط؟
كيف نحدّد الأنماط؟ درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 1. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 1 دروس في المجموع.
مقدمة
مرحبًا،
شرحنا ذلك جزئيًا في درسنا السابق. والآن لنعِد شرحه.
يمكن تعريف التنسيقات بثلاث طرق في CSS،
- التنسيق المضمّن
- بين وسمَي <style>.
- باستخدام ملف CSS خارجي
التنسيق المضمّن
1. التنسيق المضمّن
كما يتضح من الاسم، يشير ذلك إلى التنسيقات التي نعرّفها بتمرير سمة style إلى كل عنصر بشكل مضمّن.
لا يُفضَّل استخدام هذه الطريقة لأنها تقلل قابلية إعادة استخدام كل تنسيق، كما أن وضوحه منخفض جدًا.
في المثال أدناه، أتاح تنسيق letter-spacing ترك مسافات بمقدار 15px بين كل حرف في النص.
<p style="letter-spacing:15px">
Inline Style
</p>باستخدام وسم style
2. بين وسمَي <style>.
يمكن تعريفه بين وسمَي style. ولا يُفضَّل هذا التعريف أيضًا، باستثناء بعض الحالات، مثل منطقة المحتوى الظاهرة في الجزء العلوي من الصفحة.
سنواصل استخدام وسمَي style للحفاظ على تنظيم أمثلتنا. ومع ذلك، لا أوصي باستخدامه في تطبيقاتكم، باستثناء الحالات الخاصة التي ذكرتها.
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>ملف CSS خارجي
3. ملف CSS خارجي
لنتعلّم الآن كيفية استخدام ملفات CSS الخارجية.
هذا هو تعريف الأنماط الذي سنستخدمه غالبًا. أولًا، يُنشأ ملف يحتوي على محددات CSS فقط.
بعد ذلك، يمكن تعريف ملف CSS ذي الصلة لعنصر link الموجود بين وسمَي head.
في المثال أدناه، يُسنَد الملف style.css إلى عنصر link من خلال السمة href.
<link rel = "stylesheet" href = "styles.css">
تُعد هذه الميزة الحل الأفضل لاستدعاء ملف CSS نفسه من قِبل العديد من الملفات، ولزيادة قابلية إعادة الاستخدام.
في المثال أدناه، أُنشئ تعريف نمط يحدد الصنف external.
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
في المثال أدناه، أُنشئ تعريف نمط يحدد الصنف external.
لنحفظ هذه العبارة في الملف المسمى test 1.css ونسندها إلى عنصر link.
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>تهانينا
تهانينا 🎉
في هذا القسم، تعلمنا أنواع تعريف الأنماط في CSS.
في القسم التالي، سنتعلم محدد id.
الأسئلة الشائعة
هل درس «كيف نحدّد الأنماط؟» مجاني؟
نعم — نص درس «كيف نحدّد الأنماط؟» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 1 دروس في المجموع.
ماذا ستتعلم في «كيف نحدّد الأنماط؟»؟
كيف نحدّد الأنماط؟ تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 1.
كم من الوقت يستغرق درس «كيف نحدّد الأنماط؟»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.