جاري التحميل...

مقدمة CSS

يمكن لـ HTML البسيط عرض نص وروابط، لكن الصفحات تبدو ناقصة حتى تتحكم باللون والمسافات والتخطيط. CSS هي اللغة التي تحوّل الوسم المنظم إلى صفحة مصممة.

ما هو CSS؟

CSS (Cascading Style Sheets) هي اللغة القياسية لتنسيق مستندات HTML. تكتب قواعد تخبر المتصفح كيف يجب أن تظهر العناصر: لون النص والخطوط والهوامش والخلفيات والتخطيط والمزيد. HTML يجيب «ما هذا المحتوى؟» وCSS يجيب «كيف يجب أن يبدو؟»

HTML وCSS يعملان معاً

فكّر في HTML كهيكل الصفحة وفي CSS كالملابس والتشطيب. ما زلت تحتاج HTML متيناً — عناوين وفقرات وروابط ومعالم — حتى يكون لـ CSS عناصر ذات معنى لتنسيقها. تفترض هذه الدورة أنك تعرف أساسيات HTML.

📊 أدوار HTML مقابل CSS

الطبقة	المهمة الرئيسية	أسئلة نموذجية تجيب عنها
HTML	البنية والمعنى	هل هذا عنوان أم فقرة أم رابط؟
CSS	المظهر والتخطيط	ما اللون والحجم والمسافات والترتيب؟
JavaScript (لاحقاً)	السلوك والتفاعل	ماذا يحدث عند النقر؟

ستدرس JavaScript في دورة لاحقة. الآن أبقِ الفصل واضحاً: البنية في HTML والمظهر في CSS.

نظرة أولى على قاعدة CSS

قاعدة CSS لها محدّد (ماذا تنسّق) وتصريحات (كيف تنسّق). التصريحات داخل أقواس معقوفة وتستخدم خاصية وقيمة.

قاعدة بسيطة

css

CSS Code

h1 {
color: navy;
font-size: 2rem;
}

ماذا تفعل هذه القاعدة

h1 هو المحدّد — يستهدف كل عنصر h1
color: navy; يضبط لون النص
font-size: 2rem; يضبط حجم العنوان
ينتهي كل تصريح بفاصلة منقوطة
ستتعلم المحددات والوحدات بعمق لاحقاً. هنا يكفي رؤية شكل القاعدة.

رؤية CSS على الصفحة

تطبّق المتصفحات قواعد CSS على عناصر HTML المطابقة. أدناه، صفحة قصيرة تستخدم كتلة <style> داخلية لترى HTML وCSS في ملف واحد. تغطي الجلسات اللاحقة أوراق الأنماط الخارجية وطرق إضافة CSS الأخرى.

HTML مع كتلة style

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<style>
body {
font-family: Georgia, serif;
background-color: #f5f7fb;
}
h1 {
color: #1a365d;
}
p {
color: #334155;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Styled with CSS</h1>
<p>This paragraph uses the p rule above.</p>
</body>
</html>

ما الذي تغيّر

بدون قواعد <style> تستخدم الصفحة المظهر الافتراضي للمتصفح. مع CSS تلين الخلفية ويصبح العنوان أزرق داكناً وتحصل الفقرة على مسافات مقروءة. نفس محتوى HTML — مظهر مختلف.

لماذا يهم «cascading» (معاينة)

تعني «Cascading» في CSS أن الأنماط قد تأتي من عدة أماكن ويحل المتصفح أي قاعدة تفوز باستخدام cascade وspecificity. لا تحتاج الخوارزمية كاملة بعد. تذكّر الفكرة: يمكن لعدة قواعد استهداف العنصر نفسه، ولـ CSS نظام واضح لاختيار المظهر النهائي. جلسات cascade وspecificity تجعل ذلك عملياً.

جرّبها بنفسك

أنشئ ملفاً باسم intro.html.
الصق مثال HTML-مع-style واحفظه وافتحه في المتصفح.
غيّر color: #1a365d; في قاعدة h1 إلى color: teal; واحفظ وحدّث.
تأكد من تحديث لون العنوان. إن لم يتغير شيء، تحقق من الحفظ والتبويب الصحيح.

أخطاء شائعة

توقع أن ينشئ CSS بنية الصفحة — استخدم عناصر HTML للعناوين والقوائم والروابط؛ نسّقها بـ CSS
كتابة أسماء الخصائص بلا محدّد أو أقواس فيتجاهل المتصفح التصريحات
نسيان الفاصلة المنقوطة بعد التصريح مما قد يكسر الخاصية التالية في نفس القاعدة
وضع المحتوى المرئي في CSS فقط — CSS ينسّق المحتوى ولا يستبدل نص HTML

ملخص

ينسّق CSS صفحات HTML: الألوان والخطوط والمسافات والتخطيط والمظهر
يبني HTML المحتوى؛ ويتحكم CSS في شكله
قاعدة CSS تقرن محدّداً بتصريحات خاصية/قيمة داخل { }
يمكنك البدء بكتلة <style> ثم الانتقال إلى أوراق أنماط خارجية
Cascading يعني أن عدة قواعد قد تُطبَّق؛ الدروس اللاحقة تشرح من يفوز
تمرّن بتعديل قاعدة صغيرة وتحديث المتصفح

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة