[4] دورة تصميم استايل vCard3 و تركيبه بالكامل .. تنسيق الاستايل CSS

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

أهلاً و سهلاً بكم في الحلقة الرابعة على التوالي من دورة تصميم استايل في كارد النسخة 3 ،،،

* الحلقات السابقة :

[1] الحلقة الأولى .. تصميم الاستايل و زخرفته
[2] الحلقة الثانية .. تقطيع الاستايل
[3] الحلقة الثالثة .. إنشاء الجداول و تركيبها في السكربت

باسم الله نبدأ :

في هذه الحلقة سوف نتطرق لشرح كيفية التعديل على ألوان الصفحات و أحجام الخطوط بالتعديل على CSS و هي اختصار لـ Cascading Style Sheet ... و أهم شيء معرفة أنه لتغيير اللون يجب معرفة الكود الخاص به مثل :

#FF0000 = اللون الأحمر
#00FF00 = اللون الأخضر
#0000FF = اللون الأزرق

و يمثلون RGB Colors و هي :
Red = R
Green = G
Blue = B
طبعاً على التوالي فلاحظ إذا وضعنا حرف F مرتين من اليسار و الباقي صفر أي أنه تعبئة اللون أحمر فقط و حرف F يعني Fill أو تعبئة ... هذه بداية لمعرفة كيفية اختيار الألوان و ما إلى ذلك ،،،

و بالنسبة للخطوط فكتابة 8pt لا تعني 8px فالبكسل أصغر من النقطة
px = بكسل Pixel
pt = نقطة Point

بعض من خيارات و خصائص CSS التي يجب معرفتها :

[1] font-size = حجم الخط بالبكسل أو النقطة مثل 8pt - 8px
تكتب كالتالي :
اقتباس:
font-size: 8pt
[2] font-weight = عرض الخط مثل bold عريض أو normal عادي
تكتب كالتالي :
اقتباس:
font-weight: bold
[3] font-family = نوع الخط مثل Tahoma أو Arial
تكتب كالتالي :
اقتباس:
font-family: Tahoma
[4] background-color = لون الخلفية مثل #FFFFFF و هو اللون الأبيض
تكتب كالتالي :
اقتباس:
background-color: #FFFFFF
[5] background-image = صورة للخلفية
تكتب كالتالي :
اقتباس:
background-image:url(allulu/image1.gif)
[6] border = حجم الحدود للجدول و تكتب إما بالبكسل 50px أو بالنسبة المئوية 50% و solid تعني متكامل و dotted تعني منقط
تكتب كالتالي :
اقتباس:
border: 50px solid
[7] ****-decoration = زخرفة الخط إما underline تحته خط أو italic مائل أو none لاشيء
تكتب كالتالي :
اقتباس:
****-decoration: underline
[8] ****-align = محاذاة الخط إما بالوسط center أو لليسار left أو لليمين right
تكتب كالتالي :
اقتباس:
****-align: center
مثال شامل لما تم ذكره :

اقتباس:
**** {font-family: Tahoma; font-size: 11px; color: #000000; background-color:#FFFFFF; ****-align:center;}
و **** تعني المحتوى بالكامل و خصائص المحتوى كالتالي :

font-family نوع الخط : Tahoma
font-size حجم الخط : 11px
color لون الخط : أسود
background-color لون الخلفية : أبيض
****-align المحاذاة : بالوسط

و ما إلى ذلك من خصائص كثيرة و لكن هذا ما يهمنا مبدئياً لمعرفة كيفية التعديل على خيارات تنسيق الاستايل ،،،

نأتي الآن للتعديل على القالب الخاص بخيارات CSS لتنسيق الاستايل بالألوان المناسبة و الخطوط الملائمة ... نقوم الآن بالدخول إلى لوحة تحكم الإدارة vCard Administrator Section و نقوم بتحرير القالب التالي :

page_header_include

و كيفية تحرير القالب تم ذكرها في الحلقة السابقة ... نأتي الآن للبدأ بتعديل كل خاصية و خيار في القالب :

في البداية قم باستبدال الكود الموجود بداخل المرفق page_header_include.txt بالكود الموجود بداخل القالب و ستجد أن كل خاصية مرقمة و سيتم شرح كل خاصية و مهمتها كما في التالي :

/* CSS1 */

الشرح : تعديل خصائص الروابط في الاستايل و تستطيع تعديل خاصية الزخرفة و كتابة underline بدلاً من none ليصبح تحت الروابط خط

/* CSS2 */

الشرح : تعديل خصائص وضع المؤشر على الرابط فعند وضع المؤشر يتغير اللون مثلاً أو زخرفة الخط و ما إلى ذلك

/* CSS3 */

الشرح : تعديل خصائص المحتوى بالكامل و خلفية الصفحة و ما إلى ذلك

/* CSS4 */

الشرح : تعديل خصائص الجداول كما هو مبين في الصور التالية :

/* CSS5 */

الشرح : المدخلات في البحث مثلاً و الاختيارات المتعددة باختيار نقطة للخيار و تعبئة الفورم و الاختيارات بوضع علامة صح بجانب الخيار المطلوب كما في الصورة التالية :

/* CSS6 */

الشرح : تعديل خصائص الأزرار كما في الصورة :

/* CSS7 */

الشرح : حدود الصورة و الافتراضي هو صفر و تستطيع أن تجعلها 1 بكسل أو أكثر

/* CSS8 */

الشرح : تعديل حدود الجداول مثل تغيير اللون و شكل الإطار منقط مثلاً و الخلفية الداخلية للجدول و الأفضل أن تترك باللون الأبيض كما هي

/* CSS9 */

الشرح : تعديل خصائص جدول و ألوان و خطوط الروابط العلوية و السفلية كما في الصورة :

/* CSS10 */

الشرح : تعديل ألوان الروابط في الأعلى و الأسفل أيضاً كما في الصورة و الخاصية السابقة

/* CSS11 */

الشرح : تعديل جدول الترحيب بالزائر و مدخلاته كما في الصورة التالية :

/* CSS12 */

الشرح : تعديل لون و خصائص الحقوق Copyright في الأسفل

/* CSS13 */

الشرح : تعديل خصائص الخلية المبينة بالصورة :

/* CSS14 */

الشرح : تعديل خصائص الخلية المبينة بالصورة :

/* CSS15 */

الشرح : تعديل خصائص الخلية المبينة بالصورة :

/* CSS16 */

الشرح : لتغيير خلفية و خط و لون الأقسام الفرعية كما في الصورة :

/* CSS17 */

الشرح : لتعديل لون و نوع خط الروابط للخاصية السابقة

/* CSS18 */

الشرح : لتغيير خلفية و خط و لون الأقسام الرئيسية كما في الصور التالية :

/* CSS19 */

الشرح : لتعديل لون و نوع خط الروابط للخاصية السابقة

/* CSS20 */

الشرح : لتغيير لون الخلفية و الخطوط و أنواعها لما تحت الأقسام كما في الصور التالية :

/* CSS21 */

الشرح : لتغيير لون الخلفية و الخطوط و أنواعها و حدود الجداول للخلايا و المناطق المبينة في الصور التالية :

/* CSS22 */

الشرح : لتغيير لون الخلفية و الخطوط و أنواعها و حدود الجداول للخلايا و المناطق المبينة في الصورة التالية :

/* CSS23 */

الشرح : لتغيير اللون للحدود و الخلفية و المناطق المحددة في الصورة التالية :

/* CSS24 */

الشرح : لتغيير لون الخط و حدود الجدوال و الخلفية لأرقام الصفحات كما في الصورة التالية :

/* CSS25 */

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

/* CSS26 */

الشرح : لتغيير لون الخط و حدود الجدوال و الخلفية للصفحة التي نقوم بتصفحها حالياً كما هو مبين في الصورة :

/* CSS27 */

الشرح : لتغيير ألوان الروابط للخواص الثلاثة السابقة و هو عند اختيار رقم صفحة ما إذا كان هناك تعدد للصفحات

/* CSS28 */

الشرح : لتغيير لون شريط التمرير Scrollbar كما في الصورة التالية :

و بالنهاية قم بحفظ القالب بالضغط على زر تحديث و ستلاحظ التناسق بالألوان مع استايلك بإذن الله .. أتمنى للجميع التوفيق بإذن الله و إن كان هناك نقطة غير واضحة فالموضوع مفتوح للجميع بالاستفسارات و شكراً لكم على متابعتكم و السلام عليكم :icon31: