صفحات التنسيق النمطية - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

📚 بنية صفحات التنسيق النمطية (CSS)

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

صفحات التنسيق النمطية: تشير إلى قاعدة الأنماط المتتالية التي سيتم تطبيقها على العنصر.

المحددات: تشير إلى كيفية تنسيق العنصر.

التعريف: يشير إلى كيفية تنسيق العنصر.

الخاصية: تشير إلى مظاهر العنصر التي تريد تغييرها.

القيمة: تحدد الإعدادات التي تريد استخدامها مع الخصائص المحددة.

كتلة تعريف: إذا أردت تطبيق قاعدة التصميم على أكثر من عنصر يجب الفصل بين أسماء العناصر بواسطة الفاصلة المنقوطة.

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

```markmap

الوحدة الخامسة: البرمجة المتقدمة باستخدام HTML

تصميم صفحات التنسيق النمطية

مكونات صفحة ويب كاملة الوظائف

• HTML

- الهيكل والمحتوى

- الترويسة

- الفقرات

- القوائم

- الصور

- مقاطع الفيديو

• CSS

- العرض

- الخط

- لون الخط

- لون الخلفية

- عرض الوسائط

- مزايا الاستخدام

- سهولة التعديل على الصفحات

- حجم أصغر للملف

- تحميل أسرع للصفحات

- بنية صفحات التنسيق النمطية

- المحددات (Selectors)

- تشير إلى كيفية تنسيق العنصر

- التعريف (Definition)

- يشير إلى كيفية تنسيق العنصر

- الخاصية (Property)

- تشير إلى مظاهر العنصر التي تريد تغييرها

- القيمة (Value)

- تحدد الإعدادات للخاصية

- كتلة تعريف (Declaration Block)

- فصل أسماء العناصر بالفاصلة المنقوطة

- بناء الجملة

- تحديد عدة خصائص في تعريف واحد

- الفصل بين الخصائص بعلامة الفاصلة المنقوطة

• JavaScript (JS)

- الآلية

- عرض تفاعلي

- الضغط لفتح قائمة مسدلة

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

• المبدأ

- كل لغة برمجة طبقة منفصلة

- كل طبقة تؤدي غرضًا مختلفًا

• طريقة العمل المفضلة

- العمل باللغات بشكل منفصل

- حفظ المقاطع البرمجية في ملفات مستقلة

- الدمج بين اللغات باستخدام:

- صفحات التنسيق النمطية (CSS)

- جافا سكريبت (JavaScript)

• الطبقات والملفات المرتبطة

- طبقة المحتوى (HTML)

- ملفات HTML

- طبقة العرض (CSS)

- ملفات صفحات التنسيق النمطية

- طبقة آلية العمل (JavaScript)

- ملفات جافا سكريبت

```

نقاط مهمة

• يمكنك تحديد العديد من الخصائص في تعريف CSS واحد، حيث يفصل فيما بينها بعلامة الفاصلة المنقوطة.
• مثال على قاعدة CSS: `h1, h2, p { color: yellow; font-family: Arial; }`
• المحددات (مثل h1, h2, p) تشير إلى العناصر التي سيتم تطبيق الأنماط عليها.
• كل تعريف يتكون من خاصية (مثل color) وقيمة (مثل yellow).

صفحات التنسيق النمطية

تشير إلى قاعدة الأنماط المتتالية التي سيتم تطبيقها على العنصر.

المحددات

التعريف

تشير إلى كيفية تنسيق العنصر.

العنصر.

الخاصية

تشير إلى مظاهر العنصر التي تريد تغييرها.

القيمة

تحدد الإعدادات التي تريد استخدامها مع الخصائص المحددة.

كتلة تعريف

إذا أردت تطبيق قاعدة التصميم على أكثر من عنصر يجب الفصل بين أسماء العناصر بواسطة الفاصلة المنقوطة.

بناء جملة صفحات التنسيق النمطية

يمكنك تحديد العديد من الخصائص في تعريف واحد، حيث يفصل فيما بينها بعلامة الفاصلة المنقوطة.

--- SECTION: صفحات التنسيق النمطية --- صفحات التنسيق النمطية تشير إلى قاعدة الأنماط المتتالية التي سيتم تطبيقها على العنصر. --- SECTION: المحددات --- المحددات --- SECTION: التعريف --- التعريف تشير إلى كيفية تنسيق العنصر. --- SECTION: العنصر --- العنصر. --- SECTION: الخاصية --- الخاصية تشير إلى مظاهر العنصر التي تريد تغييرها. --- SECTION: القيمة --- القيمة تحدد الإعدادات التي تريد استخدامها مع الخصائص المحددة. --- SECTION: كتلة تعريف --- كتلة تعريف إذا أردت تطبيق قاعدة التصميم على أكثر من عنصر يجب الفصل بين أسماء العناصر بواسطة الفاصلة المنقوطة. --- SECTION: بناء جملة صفحات التنسيق النمطية --- بناء جملة صفحات التنسيق النمطية يمكنك تحديد العديد من الخصائص في تعريف واحد، حيث يفصل فيما بينها بعلامة الفاصلة المنقوطة. --- VISUAL CONTEXT --- **DIAGRAM**: بنية صفحات التنسيق النمطية Description: A diagram illustrating the structure of cascading style sheets (CSS). It shows relationships between 'صفحات التنسيق النمطية' (Style Sheets), 'المحددات' (Selectors), 'التعريف' (Definition), 'الخاصية' (Property), and 'القيمة' (Value). The diagram also includes a specific CSS rule example. Data: Hierarchical breakdown of CSS structure and components. Key Values: Selectors point to HTML elements., Definitions contain properties and values., Properties define styles, values set them., Multiple declarations are separated by semicolons. Context: Explains the fundamental structure of CSS, how style rules are defined, and how they apply to HTML elements. **DIAGRAM**: بناء جملة صفحات التنسيق النمطية Description: A visual representation of a CSS rule set, showing a selector targeting multiple HTML elements and defining styles. Data: Demonstrates a CSS rule where 'h1', 'h2', and 'p' elements are selected, and their 'color' property is set to 'yellow' and 'font-family' to 'Arial'. Key Values: Selector: h1, h2, p, Property: color, font-family, Value: yellow, Arial, Declaration block separator: ; Context: Provides a concrete example of a CSS rule, illustrating selectors, properties, values, and the syntax for applying styles to multiple HTML elements.