تدريب 5

📚 معلومات الصفحة

الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

📝 ملخص الصفحة

📚 تدريب 5: إضافة CSS وتطبيقها على فئة

المفاهيم الأساسية

ورقة التصميم الخارجية (External Style Sheet): ملف CSS منفصل يتم ربطه بصفحة HTML باستخدام رابط (``).

خريطة المفاهيم

```markmap

خصائص CSS للنصوص

حجم الخط (font-size)

الوظيفة

تحديد حجم الخط المستخدم

وحدات القياس

البكسل (px)
النسبة المئوية (%)

مثال تطبيقي

#### لعنوان h1

color: green;
font-size: 50px;

#### لعنوان h2

color: #ee82ee;
font-size: 70%;

#### لعنصر فقرة p

color: rgb(0,75,250);

عائلة الخطوط (font-family)

الوظيفة

تحديد عائلة الخط للنص

آلية العمل

تحديد قائمة خطوط بديلة مفصولة بفواصل
استخدام الخط التالي إذا لم يكن الأول مثبتاً
استخدام خط من العائلة العامة إذا لم يوجد أي خط محدد

مثال تطبيقي

#### لعنوان h1

font-family: Tahoma, sans-serif;

#### لعنوان h2

font-family: Arial, sans-serif;

#### لعنصر فقرة p

font-family: Verdana, Times, sans-serif;

نمط الخط (font-style)

الوظيفة

إنشاء نص مائل

القيم

عادي (normal)
مائل (italic أو oblique)

مثال تطبيقي

#### لعنوان h1

font-style: italic;

عرض الخط (font-weight)

الوظيفة

إنشاء نص غامق

القيم

عادي (normal)
غامق (bold)

مثال تطبيقي

#### لعنوان h2

font-weight: bold;

زخرفة النص (text-decoration)

الوظيفة

تطبيق تأثيرات زخرفية على النص

القيم

none
underline
overline
line-through
blink

مثال تطبيقي

#### لعنوان h1

text-decoration: overline;

#### لعنوان h2

text-decoration: line-through;

#### لعنصر فقرة p

text-decoration: underline;

التطبيق العملي

#### التدريب 1

عدد طرق إدراج ملف CSS داخل مستند HTML

#### التدريب 2

ملء الفراغات بقيمة `text-decoration` بناءً على مثال مرئي
العناصر المستهدفة: h1, h2, p

#### التدريب 3

إضافة قاعدة CSS الداخلية وعنوان HTML
الهدف: تغيير لون كل عنصر في قائمة غير مرتبة إلى لون مختلف

#### التدريب 4

استخدام صفحة الأنماط الداخلية (Internal style sheet)
الهدف: تغيير لون جميع عناصر
إلى الأحمر (red)

#### التدريب 5

إضافة ورقة تصميم خارجية
الهدف: ربط ملف CSS خارجي باسم "mystyle.css"
تطبيق نمط على فئة (class)
الهدف: تغيير لون جميع العناصر ذات الفئة "colortext" إلى الأزرق (blue)

```

نقاط مهمة

يتطلب التدريب خطوتين: أولاً ربط ملف CSS خارجي، ثم كتابة قاعدة CSS داخل ذلك الملف.
القاعدة CSS يجب أن تستهدف الفئة (class) المسماة `"colortext"`.
الخاصية المستخدمة لتغيير اللون هي `color` والقيمة المطلوبة هي `blue`.
مثال الكود المقدم يوضح عناصر HTML ذات الفئة `"colortext"` والتي ستتأثر بالقاعدة الجديدة.

📋 المحتوى المنظم

📖 محتوى تعليمي مفصّل

نوع: محتوى تعليمي

تدريب 5

نوع: محتوى تعليمي

في مقطع برمجي HTML التالي، أضف ورقة تصميم خارجية برابط "mystyle.css"، ثم حرّر المقطع البرمجي لتغيير لون جميع العناصر تحت فئة "colortext" إلى اللون الأزرق (blue).

نوع: محتوى تعليمي

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
  <meta charset="UTF-8"/>
</head>
<body>
  <h1>هذا عنوان</h1>
  <p>هذه فقرة</p>
  <p class="colortext">هذه الفقرة الثانية.</p>
  <p class="colortext">هذه الفقرة الثانية.</p>
</body>
</html>

نوع: METADATA

وزارة التعليم
Ministry of Education
231
2025 - 1447

📄 النص الكامل للصفحة

--- SECTION: تدريب 5 ---
تدريب 5

في مقطع برمجي HTML التالي، أضف ورقة تصميم خارجية برابط "mystyle.css"، ثم حرّر المقطع البرمجي لتغيير لون جميع العناصر تحت فئة "colortext" إلى اللون الأزرق (blue).

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
  <meta charset="UTF-8"/>
</head>
<body>
  <h1>هذا عنوان</h1>
  <p>هذه فقرة</p>
  <p class="colortext">هذه الفقرة الثانية.</p>
  <p class="colortext">هذه الفقرة الثانية.</p>
</body>
</html>

وزارة التعليم
Ministry of Education
231
2025 - 1447

✅ حلول أسئلة الكتاب الرسمية

عدد الأسئلة: 1

سؤال 5: في مقطع برمجي HTML التالي، أضف ورقة تصميم خارجية برابط "mystyle.css"، ثم حرّر المقطع البرمجي لتغيير لون جميع العناصر تحت فئة "class = "colortext إلى اللون الأزرق (blue).

الإجابة: س5: داخل وسم <head> أضف رابط ورقة الأنماط الخارجية: <"link rel="stylesheet" href="mystyle.css> في ملف mystyle.css اكتب قاعدة CSS: .colortext { color: blue; } .

خطوات الحل:

**الشرح:** لنفهم هذا السؤال. السؤال يتكون من جزأين رئيسيين: **الجزء الأول:** يتعلق بإضافة ورقة تصميم خارجية (CSS) إلى صفحة HTML. ورقة التصميم الخارجية هي ملف منفصل يحتوي على قواعد لتنسيق الصفحة، مثل الألوان والخطوط. لإضافتها، نستخدم وسم `<link>` داخل قسم `<head>` من صفحة HTML. الوسم يخبر المتصفح بموقع ملف التصميم (هنا اسمه "mystyle.css") لتحميله وتطبيق قواعده. **الجزء الثاني:** يتعلق بكتابة قاعدة داخل ملف التصميم هذا. القاعدة تستهدف تغيير لون النص لعناصر معينة. في CSS، نستهدف العناصر التي تحمل فئة (class) معينة باستخدام النقطة (.) متبوعة باسم الفئة. هنا اسم الفئة هو "colortext". لتغيير لون النص، نستخدم الخاصية `color`. ونريد تعيين القيمة `blue` لهذه الخاصية. إذن، الإجابة هي: داخل قسم `<head>` في ملف HTML، نضيف سطر `<link rel="stylesheet" href="mystyle.css">`. ثم، داخل ملف "mystyle.css" نفسه، نكتب السطر `.colortext { color: blue; }`.

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 3 بطاقة لهذه الصفحة

أين يجب وضع وسم <link> لربط ورقة الأنماط الخارجية في مستند HTML؟

أ) في بداية قسم <body>
ب) في نهاية قسم <body>
ج) داخل قسم <head>
د) بعد وسم <html> مباشرة

الإجابة الصحيحة: c

الإجابة: داخل قسم <head>

الشرح: 1. قسم <head> في مستند HTML يحتوي على معلومات وصفية (metadata) عن الصفحة. 2. من مهامه الأساسية ربط الموارد الخارجية مثل ملفات CSS وJavaScript. 3. وضع وسم <link> لربط ملف CSS داخل <head> يضمن تحميل الأنماط قبل عرض محتوى الصفحة (<body>).

تلميح: هذا القسم يحتوي على معلومات وصفية عن الصفحة وروابط للموارد الخارجية.

التصنيف: مفهوم جوهري | المستوى: متوسط

أي من الأكواد التالية يضيف ورقة أنماط خارجية (CSS) إلى مستند HTML بشكل صحيح؟

أ) <style src="mystyle.css"></style>
ب) <script rel="stylesheet" href="mystyle.css"></script>
ج) <link rel="stylesheet" href="mystyle.css">
د) <css file="mystyle.css">

الإجابة الصحيحة: c

الإجابة: <link rel="stylesheet" href="mystyle.css">

الشرح: 1. لإضافة ورقة أنماط خارجية (CSS) إلى صفحة HTML، نستخدم وسم <link>. 2. يجب وضع الوسم داخل قسم <head>. 3. يجب أن يحتوي الوسم على السمة `rel` بقيمة "stylesheet" لتحديد نوع العلاقة. 4. يجب أن تحتوي على السمة `href` مع مسار ملف CSS، مثل "mystyle.css".

تلميح: يتم إضافة هذا الوسم داخل قسم <head> لربط ملف خارجي.

التصنيف: صيغة/خطوات | المستوى: سهل

في CSS، ما القاعدة الصحيحة لتغيير لون النص إلى الأزرق لجميع العناصر التي تحمل فئة (class) اسمها "colortext"؟

أ) #colortext { color: blue; }
ب) colortext { color: blue; }
ج) class.colortext { color: blue; }
د) .colortext { color: blue; }

الإجابة الصحيحة: d

الإجابة: .colortext { color: blue; }

الشرح: 1. لاستهداف عنصر حسب فئته (class) في CSS، نستخدم محدد الفئة (class selector). 2. يبدأ محدد الفئة بنقطة (.) متبوعة باسم الفئة، مثل `.colortext`. 3. داخل الأقواس المعقوفة `{}` نحدد الخصائص والقيم. 4. لتغيير لون النص، نستخدم الخاصية `color` والقيمة `blue`.

تلميح: تستخدم النقطة (.) للاستهداف حسب اسم الفئة.

التصنيف: صيغة/خطوات | المستوى: سهل