الدرس الخامس : نافذة الأنماط CSS

السلام عليكم ورحمة الله وبركاته

وكل عام وأنتم بخير ..

في هذا الدرس إن شاء الله نشرح نافذة CSS Styles ،

حيث تظهر هذه النافذة عادة في يمين الشاشة ، إذا لم تكن ظاهرة لديك اذهب إلى القائمة Window تجدها في السطر الثالث انقر على CSS Styles لتظهر لك

وإليك هذه الصورة التوضيحية للنافذة

الدرس-الخامس-1

أي نمط يسمى Rule بمعنى قاعدة ، وهذا النمط هو الذي نطبقه على العناصر في الصفحة التي نقوم بتصميمها ، فمثلاً عندما نقوم بتعيين خاصية اللون الأحمر للقاعدة التي اسمها content فإن ذلك سيطبق على جميع العناصر في الصفحة التي تم طلب تنفيذ القاعدة content عليها

في الجزء الأول من النافذة (الذي يشمل الأرقام في الصورة من 1 إلى 4) يوجد تلك القواعد التي نريد تطبيقها على عناصر صفحة الويب ، ويشير إلى موضع كتابة الأكواد الخاصة بها .

الرقم 1 والرقم 3 : تبين موضع كتابة كود CSS ،

والفرق بينهما أن الرقم 1 مكتوب داخل هذه الصفحة ، أما الرقم 3 فقد كتب في ملف خارجي CSS وتم استدعاؤه لهذه الصفحة

أكواد CSS إذا كانت مكتوبة داخل الصفحة نفسها فسيشار إليها بهذه الطريقة <style> (كما تشاهد في الرقم 1)

أما إذا كانت مكتوبة في صفحة CSS خارجية فسيظهر اسم الصفحة مثال My_Style.css (كما تشاهد في الرقم 3)

الرقم 2 والرقم 4 : اسم القاعدة Rule التي سوف يتم تطبيقها على العناصر في صفحة الويب ،

وتلاحظ الخط على اليسار يدل على أن هذه القاعدة مكتوبة في داخل الصفحة التي تتفرع منها

وتسمية القواعد Rule له ثلاثة أنواع Class,ID,Tag وسوف نشرحها لاحقاً بإذن الله .

الرقم 5 : يشير إلى خصائص القاعدة والقيم المحددة لكل قاعدة

وهو هنا يشير إلى خصائص القاعدة header لأنه تم الإشارة عليها بالماوس وتظليلها كما تشاهد في الرقم 4

الرقم 6 : في اليسار نجد الخصائص مثل اللون ولون الخلفية والعرض والطول والمسافة بين العناصر والحدود … الخ

 

الرقم 7 : أمام كل خاصية القيمة المحددة لها 

 

الرقم 8 : إمكانية إضافة خاصية جديدة لهذه القاعدة بالنقر هنا

 

وهذا الجزء أعني خصائص القاعدة وقيمها (الرقم 6 و 7) مفيد جداً للمصمم حيث يسهل عملية التعديل في خصائص الأنماط دون فتح المربع الحواري او الذهاب للكود

 

أما الأيقونات في الأسفل فهي كالتالي :

A : لاستدعاء ملف CSS خارجي
B : لإنشاء قاعدة جديدة New CSS Rule
C : للتعديل على قاعدة موجودة
D : لإيقاف خاصية من خصائص القاعدة دون حذفها ويكون بعد النقر عليها لتحديدها
E : لحذف خاصية من خصائص القاعدة ويكون بعد النقر عليها لتحديدها

انتهى الجزء الأول ونواصل في الدرس القادم الجزء الثاني إن شاء الله

 

 

تعليق واحد

  1. بارك الله فيك على هذا الجهد المميز ننتظر الدروس القادمة بإذن الله

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *