مقدمة إلى CSS
مقدمة إلى CSS
مقدمة إلى CSS درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 1. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 1 دروس في المجموع.
المقدمة 1
مرحبًا،
في الفصل السابق، تعلّمنا ما هي CSS ولماذا ينبغي لنا استخدامها. والآن، أودّ أن أقدّم مقدمة سريعة من خلال مثال بسيط.
لنعرّف صفحة HTML بسيطة.
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>النمط المضمّن
والآن، لنغيّر لون عنوان Hello CSS إلى الأحمر. للقيام بذلك، سنستخدم سمة style التي يمكن إضافتها إلى أي وسم HTML تقريبًا.
باستخدام هذه السمة، يمكننا تعريف نمط داخل كل عنصر بشكل مضمّن.
عند النظر إلى قسم المعاينة، سنرى أن لون العنوان يتحول إلى الأحمر.
color: red;
لقد حدّدنا لون خط العنصر باستخدام تعريف نمط.
<h1 style="color:red;">Hello CSS</h1>النمط المضمّن 2
ستتذكرون أننا ذكرنا أننا نستخدم السمات لإسناد السلوك والخصائص إلى الوسوم في HTML.
ومن أهم استخدامات هذه السمات في الأنماط أننا نستخدم سمة style لتعريف نمط للوسوم.
النمط المضمّن 3
والآن، لنضف نمطًا جديدًا. يمكننا زيادة حجم النص باستخدام font-size.
عند تعريف عدة أنماط، يجب فصل الأنماط بفواصل منقوطة.
في المثال أدناه، يُفصل نمطا color وfont-size باستخدام الفواصل المنقوطة.
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>تعريف النمط
تُعدّ الصياغة مهمة عند إضافة نمط.
styleName: styleValue;
لنتذكر مجددًا أننا بحاجة إلى إسناد النمط كما هو موضح أعلاه.
مثال
لنوسّع مثالنا قليلًا الآن.
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>مثال 2
في هذا المثال، نريد تغيير لون كل النص إلى الأحمر. ويمكننا تعريف النمط لكل وسم كما يلي.
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>محدد CSS
لكنها لا تبدو جيدة جدًا بهذه الطريقة، أليس كذلك؟
بما أن لدينا الآن 3 عناصر في الصفحة، غيّرنا لون نص كل عنصر إلى الأحمر. ولكن، إذا وضعنا في الاعتبار أن هذا العدد قد ارتفع إلى 3000، فلن يكون من المنطقي كثيرًا تعريف نمط لكل عنصر منها.
بدلًا من ذلك، نحتاج إلى استخدام محددات CSS بدلًا من تعريف كل عنصر بشكل مضمّن.
المقدمة 12
الآن، لنتعلم مفهوم المحدد.
محددات CSS مسؤولة عن تحديد عنصر HTML ذي الصلة الموجود في المستند، وذلك لتنسيق عناصر HTML.
إذًا، كما يمكننا أن نفهم من الاسم، فهي تختار عناصر HTML. 😂
يجب تعريف محددات CSS بين وسمَي <style> في مستند HTML أو في ملف CSS خارجي.
في أمثلتنا، سنستخدم ما يكون عادةً بين وسمَي style. ومع ذلك، من الأدق تعريف النمط في ملف CSS خارجي.
مقدمة 13
يُستخدم عامل النقطة واسم الفئة لتعريف فئة بين وسمَي style. وتُكتب تعريفات الأنماط بين القوسين المعقوفين.
.class-name {
font-size:22px;
color:red;
}
في المثال أدناه، عرّفنا فئة باسم my-component بين وسمَي style، وعيّنا نمط font-size للفئة المعنية.
<style>
.my-component{
font-size:22px;
}
</style>
لنعرّف الآن عنصرَي فقرة
لنعرّف الآن عنصرَي فقرة يمتلكان الفئة my-component.
بعد هذا التعريف، وبما أن الفقرتين تحملان اسم الفئة نفسه، سيحددهما محدد CSS، وسيتم تحديث font-sizes فيهما إلى 22px.
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>مقدمة 6
يمكننا إسناد أكثر من نمط إلى محدد واحد.
في المثال أدناه، يُحدَّد كل من نمطَي font-size وcolor في المحدد نفسه.
<style>
.my-component{
font-size:22px;
color:red;
}
</style>تداخل محددات CSS
لنحلّل تعليمات HTML البرمجية أدناه.
تم تعريف عنصر فقرة ، وإضافة عنصر span يحتوي على محتوى 'مرحبًا بمحددات CSS' إلى هذا العنصر.
في هذه الحالة، يمكننا القول إن عنصر الفقرة هو العنصر الأب للعنصر span.
من ناحية أخرى، سيكون span أيضًا العنصر الابن للعنصر p.
وكما هو الحال مع الكائنات الحية، سنستخدم عناصر HTML في علاقات الأب والابن وفقًا لموضعها في كتلة التعليمات البرمجية.
<p>
<span>Hello CSS Selectors</span>
</p>تداخل محددات CSS 2
لنوسّع مثالنا قليلًا ونحلل التسلسل الهرمي بين العناصر مرة أخرى.
- وفقًا للمثال أدناه
- العنصران <span> و<a> شقيقان.
- العنصران <span> و<a> من نسل عنصر div.
- العنصران <span> و<a> ابنا العنصر <p>.
- العنصر <p> ابن للعنصر <div>.
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>نموذج شجرة التحليل
لنلقِ نظرةً فاحصةً على الصورة أعلاه.
تم تحويل نموذج HTML التعليمات البرمجية التالي إلى نموذج شجري.
لاحظ أن نموذج الشجرة هو في الواقع انعكاس للتسلسل الهرمي للأب والابن.
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
متى نستخدم هذه العلاقة الهرمية؟
متى نستخدم هذه العلاقة الهرمية؟
لنبدأ بمثال ونطرح مشكلة، ثم نرى كيف يمكننا تقديم حلول باستخدام هذه الهرمية.
لنلقِ نظرة على مثال الشفرة أدناه.
لنفترض أننا نريد جعل نصوص جميع العناصر باللون الأحمر. في هذه الحالة، تعلمنا طريقتين مختلفتين حتى الآن.
- أولًا، وأسوأ هذه الطرق، أن نعرّف سمة التنسيق (style = "color: red") بشكل مضمّن لكل عنصر.
- ثانيًا، أن نعرّف فئة باسم red-txt ونسندها إلى كل عنصر كسمة (class = "red-txt").
لكن توجد طريقة أسهل للقيام بذلك. 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>متى نستخدم هذه العلاقة الهرمية؟ 2
لنلقِ نظرة مرة أخرى على التعليمات البرمجية أعلاه.
عندما ننتبه إلى عنصر div الذي يحمل فئة باسم root، نرى أنه في الواقع سلف جميع العناصر في مثالنا.
تنتقل الصفات الوراثية لدى البشر من الأسلاف إلى نسلهم. وبالمثل، ينعكس النمط المعين لسلف في CSS على العناصر المنحدرة منه.
في هذه الحالة، عندما ننشئ تعريف نمط يحدد عنصر div المعني، يمكننا توقع تأثر جميع العناصر المنحدرة منه بهذا التعيين.
لننفذ ذلك.
متى نستخدم هذه العلاقة الهرمية؟ 3
لنعرّف فئة باسم root بمساعدة عامل النقطة ، وننشئ داخلها تعريف نمط (باستخدام color: red).
سيحدد هذا التعريف جميع العناصر التي تحمل فئة root، ويجعل ألوان النصوص فيها وفي العناصر المنحدرة منها باللون الأحمر.
عند النظر إلى قسم Preview، سنرى أن جميع النصوص أصبحت باللون الأحمر.
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>Inheritance
يمكننا التعبير عن هذا المفهوم في CSS بمصطلح Inheritance. وقد تعلمنا استخدام هذه الميزة لكتابة تعليماتنا البرمجية بشكل أقصر.
كما في المثال السابق، بدلًا من تعريف الخاصية نفسها لكل عنصر على حدة، عرّفناها للعنصر السلف، وتجنبنا تكرار التعليمات البرمجية.
موضع عنصر Head
في الأمثلة السابقة، أضفنا عنصر style بجوار عنصر HTML الذي كتبناه مباشرة.
لكن الموضع الصحيح الذي يجب إدراج وسم style فيه هو بين وسمَي head.
ويكون الاستخدام الأدق كما يلي.
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>كتابة شفراتنا بأقصر صورة ممكنة وقابلة لإعادة الاستخدام
أثناء كتابة الشفرة، نحتاج إلى كتابة شفراتنا بأقصر صورة ممكنة وأن تكون قابلة لإعادة الاستخدام.
تهانينا
تهانينا 🎉
في هذا القسم، تعلمنا معًا مفهومي Selector وInheritance.
في القسم التالي، سنتعلم أنواع تعريف الأنماط في CSS.
الأسئلة الشائعة
هل درس «مقدمة إلى CSS» مجاني؟
نعم — نص درس «مقدمة إلى CSS» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 1 دروس في المجموع.
ماذا ستتعلم في «مقدمة إلى CSS»؟
مقدمة إلى CSS تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 1.
كم من الوقت يستغرق درس «مقدمة إلى CSS»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.