HTML & CSS • المستوى الثاني • الدرس 1
العودة لفهرس المستوىمقدمة في CSS وطرق ربط الأنماط بالصفحة
أهداف الدرس العلمية
- فهم دور لغة
CSSفي إضافة التصاميم والجماليات لعناصر HTML. - التعرف على بناء جملة CSS (المحدد، الخاصية، القيمة).
- استيعاب الطرق الثلاث لإدراج CSS: Inline، Internal، External.
- تطبيق تنسيق الألوان على العناصر الأساسية بالصفحة.
1. ما هي لغة CSS وكيف نكتبها؟
كلمة CSS اختصار لـ Cascading Style Sheets (أوراق الأنماط المتلاحقة). إذا كانت HTML هي الهيكل العظمي، فإن CSS هي الطلاء والتنسيق البصري.
css
/* المحدد (Selector) { الخاصية (Property): القيمة (Value); } */
h1 {
color: blue;
font-size: 24px;
}2. الطرق الثلاث لإدراج تنسيقات CSS
1. التنسيق الداخلي (Internal CSS)
كتابة الأنماط داخل <style> في <head> — معتمد في هذا الدرس.
html
<head>
<style>
p { color: green; }
</style>
</head>2. التنسيق المباشر (Inline CSS)
داخل خاصية style في وسم HTML.
html
<h1 style="color: red;">عنوان أحمر</h1>3. التنسيق الخارجي (External CSS)
ربط ملف .css خارجي بـ <link> — الأنسب للمشاريع الكبيرة.
html
<link rel="stylesheet" href="style.css"> التطبيق العملي المباشر
تحدي الدرس الأول: إضافة الأنماط بـ Internal CSS
- إدراج عنوان
<h1>يحمل النص: منصة نهضة التعليمية. - إدراج فقرة
<p>تحمل النص: تعلم البرمجة بالتطبيق المباشر. - داخل
<style>: لون العنوانh1أزرق#3b82f6. - داخل
<style>: لون الفقرةpأخضر#22c55e.
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 16, Col 1UTF-8Spaces: 2
226 chars