بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،
ما هى ملفات style.css أو (صفحات الأنماط الانسيابية) و لماذا نستخدمها؟
بداية الحروف css هى اختصار لكلمات Cascading Style Sheets , أو صفحات الانماط الانسيابية .
هذه الملفات هى عبارة عن تنسيق لمحتويات الموقع , مثل الخط و لونه و حجمه و مربعات النص و اللنكات و الخلفيات , و الى اخره من كل هذه المؤثرات التى نستخدمها فى تنسيق الصفحة .
أغلبنا يقوم بعمل تنسيق يدوى لمحتويات الصفحة عندما يقوم باعداد او تنفيذ لصفحة انترنت , و قد يأخذ هذا الامر بعض الوقت , خاصة اذا كانت محتويات الصفحة التى تقوم باعدادها كثيرة , فانت تقوم بتنسيق الخطوط , و الجداول و الخلفيات و الالوان و الروابط , و الصور , الى اخر هذه الاشياء , تخيل الان انك تقوم باعداد موقع مثلا يتكون من 20 صفحة , فهل ستقوم بعمل نفس الاعدادات على كل صفحة على حده ؟
طبعا عملية مجهدة و تاخذ الكثير من الوقت و المجهود . و حتى لو فرض انك قمت بتنفيذها , ماذا لو اردت ان تقوم بتغيير حجم الخط أو لونه فى كل الصفحات ؟
هل ستقوم بفتح كل صفحة من الصفحات التى قمت باعدادها لكى تقوم بعمل التعديلات الجديدة . بالطبع غير منطقى , خصوصا لو تخيلنا ان الموقع قد زاد عن 20 صفحة ووصل الى 100 صفحة مثلا أو اكثر . و هذه هى وظيفة ملفات الانماط الانسيابية .فببساطة هذه الملفات عبارة عن مرجع نقوم بوضع تعريفات للتنسيقات المختلفة به , و ذلك يشمل جميع تنسيقات الصفحة من الوان و خطوط و خلفيات الخ ..... و نقوم فقط بعمل ارتباط للصفحة التى نريد ان نطبق عليها هذا الستايل بملف امتداده scc , و بذلك تكون المشكلة قد انحلت , فكما ترى فى مثالنا السابق لو ان عدد صفحات الموقع 100 صفحة كل ما علينا الان هو اضافة هذا الكود فى رأس كل صفحة من الصفحات <link rel="stylesheet" type="text/css" href="style.css"> . و بذلك اى تغيير نقوم بعمله فى هذا الملف سيسرى على جميع الصفحات المرتبطة به .
يمكنك معرفة المزيد عن style.scc أو (صفحات الأنماط الانسيابية) , من الموسوعة العربية للكمبيوتر و الانترنت
http://www.c4arab.com/showasection.php?lssid=115
كيف تقوم باضافة ملف style.scc الى اى صفحة بواسطة الفرونت بيج ؟
الموضوع بسيط قم باختيار style sheet links من القائمة Format
لتظهر لك الشاشة التالية , قم باختيار تطبيق التنسيق على الصفحة الحالية فقط ,او على جميع صفحات الموقع , من القائمة التى على اليسار ,
بعد ذلك قم بالضغط على كلمة Add , ستظهر لك هذه الشاشة
م باختيار الملف الذى تريده ثم اضغط موافق .
طريقة التعديل فى ملفات style.css
اذا كان لديك بعض المعرفة بلغة الscc , يمكنك التعديل على هذه الملفات بواسطة فتحها باى محرر نصوص الا أن برنامج الفرونت بيج يوفر لنا وسيلة سهلة للتعديل بهذه الملفات و للقيام بذلك اتبع الخطوات التالية عن طريق الامر open اذهب الى المسار الموجود به ملف الاستايل و قم بفتحه لتظهر لك الشاشة التالية :
هذا هو ملف ال style يمكنك التعديل به يدويا بنفسك اذا كان لديك بعض المعرفة بلغة CSS و هى بسيطة و سهلة جدا , و يمكنك ايضا ان تستخدم الفرونت بيج فى التعديل عن طريق الضغط على الايقونة المسماة style كما هو موضح بالشكل التالى :
بعد الضغط على هذا الشكل ستظهر لك النافذة التالية
كما نرى فى الجزء الايسر من النافذة جميع الاستايلات المعرفة هنا مثل font , body,p,input , و نحن هنا مثلا نريد تغيير الخط فى المجلة فسوف نتعامل مع العناصر font و BODY و ذلك عن طريق النقر المزدوج بالماوس على العنصر المراد تعديله لتظهر لنا النافذة التالية
منتهى السهولة نختار العنصر الذى نريد التعديل به من القائمة المنسدلة التى بالاسفل كما بالشكل السابق فمثلا سوف نختار font
لتظهر لنا نافذة جديدة
من هنا قم بتحديد الخط الذى تريده و الحجم و اللون بكل بساطة , من المستحسن ايضا فى خانة font او الخط المستخدم ان تقوم بتحديد اكثر من خط بحيث اذا لم يتوافر نوع الخط على الجهاز الذى يقوم بعرض الموقع يبحث عن الذى يليه و بامكانك ان تقوم بكتابة الانواع الذى تريد من الخطوط .
و بالمثل باقى العناصر فمثلا :
alink : يمثل الرابط او اللنك من حيث اللون و الحجم و الشكل
a:hover الحالة التى سيكون عليها الرابط عند المرور عليه ابلماوس
a:active الحالة التى سيكون عليها الرابط النشط
a:visted الرابط الذى تمت زيارته او الضغط عليه مسبقا
يمكنك عمل تنسيق مختلف لكل عنصر من العناصر السابقة كما يحلو لك .
ارجو ان تكون قد اخذت فكرة و لو مبسطة عن طريق تعديل ال style
للتحميل بالزر الايمن للماوس و حفظ الهدف باسم
لتحميل الملف بصيغة html اضغط هنا
لتحميل الملف بصيغة word اضغط هنا
لا تنسونا من دعائكم
تحياتى للجميع
