أساسيات CSS
مقدمة إلى تنسيق الصفحات باستخدام CSS (نظرة عامة اختيارية)
أساسيات CSS درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.
أساسيات CSS: مقدمة إلى التنسيق باستخدام CSS
مرحبًا بكم في عالم CSS! سنتعلّم اليوم كيفية استخدام أوراق الأنماط المتتالية (CSS) لتنسيق صفحات الويب الخاصة بكم وجعلها تبدو رائعة.
ما CSS؟
يرمز CSS إلى Cascading Style Sheets. وهي لغة تُستخدم للتحكم في مظهر صفحات الويب الخاصة بكم وشكلها.
باستخدام CSS، يمكنكم تغيير الألوان والخطوط والتخطيطات وغير ذلك الكثير!
كيف تعمل CSS
تعمل CSS من خلال تحديد عناصر HTML وتطبيق الأنماط عليها. ويمكنكم استخدام CSS بثلاث طرق:
- مضمّنة: إضافة الأنماط مباشرةً داخل عناصر HTML.
- داخلية: إضافة الأنماط داخل وسم
<style>في<head>. - خارجية: استخدام ملف CSS منفصل.
سنركّز في هذا الدرس على الأنماط الداخلية والخارجية.
CSS الداخلية
تُكتب CSS الداخلية داخل وسم <style> في <head> من مستند HTML الخاص بكم.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
CSS الخارجية
تُكتب CSS الخارجية في ملف منفصل ذي الامتداد .css. وتربطونه بمستند HTML باستخدام وسم <link>.
مثال:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
المحدّدات في CSS
تُستخدم المحدّدات لاستهداف عناصر HTML محددة بغرض تنسيقها. وتشمل المحدّدات الشائعة ما يلي:
- محدّد الوسم: يستهدف جميع العناصر التي تحمل وسمًا محددًا. مثال:
p. - محدّد الفئة: يستهدف العناصر التي تنتمي إلى فئة محددة. مثال:
.myClass. - محدّد المعرّف: يستهدف عنصرًا ذا معرّف محدد. مثال:
#myID.
لنرَ كيفية استخدامها!
محدّدا الفئة والمعرّف
استخدموا الفئة عندما تريدون تنسيق عدة عناصر. واستخدموا المعرّف لعنصر واحد فريد.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
جرّب بنفسك
لننشئ صفحة ويب باستخدام CSS الداخلية. إليكم مثالًا للبدء:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
أحسنتم!
تهانينا! لقد تعلّمتم أساسيات CSS وكيفية استخدامها لتنسيق صفحات الويب الخاصة بكم. تجعل CSS صفحاتكم تبدو احترافية وجذابة بصريًا. في الدرس التالي، سنتعمّق في الألوان والخلفيات لجعل صفحاتكم أكثر حيوية. استعدّوا لإطلاق العنان لإبداعكم!
الأسئلة الشائعة
هل درس «أساسيات CSS» مجاني؟
نعم — نص درس «أساسيات CSS» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.
ماذا ستتعلم في «أساسيات CSS»؟
مقدمة إلى تنسيق الصفحات باستخدام CSS (نظرة عامة اختيارية) تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «أساسيات CSS»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.