محمود عفيفى
05-05-2011, 08:46 PM
1- الفرق بين Class و ID:-
يمكنك بواسطة CSS تغيير شكل العنصر , و تتيح لك على سبيل المثال لغة HTML في تحديد كيفية استخدام شكل العنصر , فإما أن يكون عنصر فريد في الصفحة و له شكل خاص به فقط أو أن يكون عنصر متكرر في الصفحة و بالتالي يستخدم أكثر من مرة .
و هنا يظهر الفرق في استخدام عنصري Class و ID في كل من HTML و CSS فمثلاً يمكن استخدام ID لعناصر فريدة في الصفحة مثل < body > أو مثلاً لتكوين إطار الصفحة الرئيسي Container باستخدام وسم < div > و يتم تمييز الـ ID في ملف CSS برمز # قبل اسم العنصر:
body {
font-family: Tahoma, Arial, sans-serif;
color:#111;
background:#202020;
}
#container {
width:900px;
overflow:hidden;
background:#eee;
padding:4px;
}
أما Class فتستخدم للعنصر الذي يتكرر أكثر من مرة في الصفحة فمثلاً إذا كان هناك مربعات جانبية في القائمة الجانبية للموقع فهي تتكرر حسب الحاجة إليها و يتم تمييز الـ Class باستخدام رمز النقطة . قبل اسم العنصر :
.widget {
width: 240px;
border: 1px solid #aaa;
background: #d0d0d0;
padding: 3px;
}
2- تجميع العناصر ذات التنسيق المتشابه:-
في الكثير من الأحيان نقوم بتكرار نفس التنسيق مثل نوع الخط font-family برغم وجوده في عناصر أخرى و بالتالي يزيد ذلك و لو بنسبة بسيطة من حجم الصفحة و كذلك تزداد الحيرة في البحث و التعديل في تلك التنسيقات مستقبلاً , لذلك يفضل تجميع العناصر ذات التنسيق المتشابه في نسق واحد .
فمثلاً إذا كانت عناصر الفقرات و العناوين في الموقع تكون بتنسيق واحد لخط الكتابة فيمكن جمعها في نسق واحد :
h1, h2, h3, h4, h5, h6, p, .content {
font-family: Arial, Helvetica, sans-serif;
}
3- عدم الاكثار من المساحات البيضاء:-
هناك الكثيرون لا يعيرون الانتباه إلى أن المساحات البيضاء في ملف تنسيق CSS تأخذ حيز من مساحة الملف ككل . ربما هي أسهل من حيث قراءة كود CSS و لكن الافراط في استخدامها يسبب ثقل حجم الملف و عملية تحميله في الموقع .
4- تحديد الألوان بدون استخدام اسم اللون:-
مازال الكثيرون يستخدمون أسماء الألوان في عملية التنسيق فمثلاً استخدام الاحمر باسم Red بالرغم من أن هناك العديد من درجات اللون الأحمر . في حالة استخدام اسم اللون فأنت تعتمد كمصمم على متصفح معين بحد ذاته و لكن هناك متصفحات أخرى لا يمكنها قراءة اسم اللون و لكنها تستطيع معرفة كود اللون و تمييزه من بين آلاف درجات الألوان سواء كان #ff0 أو #ff4 فسيتمكن أي متصفح من معرفة درجة اللون المطلوبة بدقة .
5- لا تستخدم عناصر التنسيق بشكل خاطىء:-
هناك العديد ممن هم لا يهتمون بكود CSS أو معرفة عناصره الحقيقية بل يحاولون ابتكار عناصر جديدة بأنفسهم . و بالتالي تجد مجموعة من عناصر التنسيق الموجودة بالملف و هي بغير فائدة على الاطلاق لتصميم الصفحة . من الضروري محاولة تنظيف الصفحة من أي أكواد غير مستخدمة أو أي أكواد خاطئة مثل استخدام متغير معين في عنصر لا يقبل هذا المتغير .
6- الفرق بين Margin و Padding:-
من أهم العناصر و التي يكثر استخدامها هي عناصر Margin و Padding و من المهم معرفة الفرق بينهما و كيفية استخدامهما .
فعنصر Margin يشير إلى المساحة الخالية المطلوبة حول النسق المطلوب , أي من خارج العنصر , فمثلاً إذا أردنا أن نضع مساحات خالية بين المربعات الجانبية بعضها ببعض من أعلى و أسفل نستخدم Margin :
.widget {
margin: 10px 0 10px 0;
}
أما Padding فتحدد المساحة الخالية من داخل العنصر , فإذا أردنا أن نحدد مساحة خالية من داخل العنصر حتى لا يلتصق النص بحد العنصر نستخدم padding :
.widget {
width: 240px;
border: 1px solid #aaa;
background: #d0d0d0;
padding: 3px;
}
7- رمز !Important:-
رمز !Important من الرموز القليلة التي تستخدم و لكنها ذات أهمية في عملية التنسيق باستخدام CSS , فمن خلالها يمكنك أن تحدد أي من التنسيقات التي قمت بعملها له أهمية بشكل كبير بغض النظر عن أي تنسيق آخر يتم تكوينه آلياً بواسطة بعض برامج إدارة المحتوى أو سواء تم تكراره من قبل في أي ملف تنسيق آخر بالموقع :
#container {
background: #eee !Important ; background-color:#000;
}
و بالتالي سيتم عمل الخلفية باللون الفاتح لأنه تم تحديده كتنسيق مهم بدلاً من التنسيق باللون الأسود .
8- استبدال النص بصورة:-
عادة ما يقوم المصممون بعمل شعار الموقع كخلفية لعنصر < div > و وضع العنصر بتنسيقه في التصميم , في حين أنه يمكن أن يستفيد المصمم من عنصر مثل < h1 > في وضع الشعار بالموقع من خلال إخفاء النص و وضع صورة الشعار كخلفية للعنصر :
h1.logo {
text-indent:-9999px;
background: url('images/logo.png') no-repeat;
width: 250px;
height: 110px;
}
و بالتالي سيتوفر النص المكتوب داخل عنصر العنوان و لكن بشكل مخفي و هي تعتبر أحياناً من الخدع المستغلة مع محركات البحث .
9- استخدام محررات متخصصة:-
سيفيد المصمم كثيراً إذا استعان بمحررات متخصصة في تكوين ملفات CSS و أحياناً ما تكون مدمجة مع برامح شهيرة و من البرامج التي تميزت في الفترة الأخيرة على نظام Windows برنامج Microsoft Expression Web و الذي تم تحسينه كثيراً في نسخته الثالثة التي صدرت منذ عدة أيام من خلال مجموعة من المميزات , بالإضافة إلى برامج أخرى مثل Adobe Dreamweaver CS4 أو المحرر الأشهر Notepad ++ و برنامج Kompozer و المتوفر لأنظمة ويندوز و ماكنتوش و لينُكس .
10- تعرف على الخطأ و قم بإصلاحه:-
لا يهم إذا كانت هناك أخطاء , و أحياناً من الصعب إيجاد الخطأ و معرفة كيفية حله . و لذلك يجب أن يتم استخدام بعض الأدوات التي تساعدك على ذلك و من أشهرها أداة Firebug (http://getfirebug.com/) فهي تمكنك من استعراض أكواد HTML و CSS جنباً إلى جنب و معرفة مكان وجود خطأ معين في تصميم الصفحة , أو إذا كنت ممن يبحثون عن تنسيقات معينة في مواقع أخرى فهذه الأداة هي الأمثل لذلك .
منقول
يمكنك بواسطة CSS تغيير شكل العنصر , و تتيح لك على سبيل المثال لغة HTML في تحديد كيفية استخدام شكل العنصر , فإما أن يكون عنصر فريد في الصفحة و له شكل خاص به فقط أو أن يكون عنصر متكرر في الصفحة و بالتالي يستخدم أكثر من مرة .
و هنا يظهر الفرق في استخدام عنصري Class و ID في كل من HTML و CSS فمثلاً يمكن استخدام ID لعناصر فريدة في الصفحة مثل < body > أو مثلاً لتكوين إطار الصفحة الرئيسي Container باستخدام وسم < div > و يتم تمييز الـ ID في ملف CSS برمز # قبل اسم العنصر:
body {
font-family: Tahoma, Arial, sans-serif;
color:#111;
background:#202020;
}
#container {
width:900px;
overflow:hidden;
background:#eee;
padding:4px;
}
أما Class فتستخدم للعنصر الذي يتكرر أكثر من مرة في الصفحة فمثلاً إذا كان هناك مربعات جانبية في القائمة الجانبية للموقع فهي تتكرر حسب الحاجة إليها و يتم تمييز الـ Class باستخدام رمز النقطة . قبل اسم العنصر :
.widget {
width: 240px;
border: 1px solid #aaa;
background: #d0d0d0;
padding: 3px;
}
2- تجميع العناصر ذات التنسيق المتشابه:-
في الكثير من الأحيان نقوم بتكرار نفس التنسيق مثل نوع الخط font-family برغم وجوده في عناصر أخرى و بالتالي يزيد ذلك و لو بنسبة بسيطة من حجم الصفحة و كذلك تزداد الحيرة في البحث و التعديل في تلك التنسيقات مستقبلاً , لذلك يفضل تجميع العناصر ذات التنسيق المتشابه في نسق واحد .
فمثلاً إذا كانت عناصر الفقرات و العناوين في الموقع تكون بتنسيق واحد لخط الكتابة فيمكن جمعها في نسق واحد :
h1, h2, h3, h4, h5, h6, p, .content {
font-family: Arial, Helvetica, sans-serif;
}
3- عدم الاكثار من المساحات البيضاء:-
هناك الكثيرون لا يعيرون الانتباه إلى أن المساحات البيضاء في ملف تنسيق CSS تأخذ حيز من مساحة الملف ككل . ربما هي أسهل من حيث قراءة كود CSS و لكن الافراط في استخدامها يسبب ثقل حجم الملف و عملية تحميله في الموقع .
4- تحديد الألوان بدون استخدام اسم اللون:-
مازال الكثيرون يستخدمون أسماء الألوان في عملية التنسيق فمثلاً استخدام الاحمر باسم Red بالرغم من أن هناك العديد من درجات اللون الأحمر . في حالة استخدام اسم اللون فأنت تعتمد كمصمم على متصفح معين بحد ذاته و لكن هناك متصفحات أخرى لا يمكنها قراءة اسم اللون و لكنها تستطيع معرفة كود اللون و تمييزه من بين آلاف درجات الألوان سواء كان #ff0 أو #ff4 فسيتمكن أي متصفح من معرفة درجة اللون المطلوبة بدقة .
5- لا تستخدم عناصر التنسيق بشكل خاطىء:-
هناك العديد ممن هم لا يهتمون بكود CSS أو معرفة عناصره الحقيقية بل يحاولون ابتكار عناصر جديدة بأنفسهم . و بالتالي تجد مجموعة من عناصر التنسيق الموجودة بالملف و هي بغير فائدة على الاطلاق لتصميم الصفحة . من الضروري محاولة تنظيف الصفحة من أي أكواد غير مستخدمة أو أي أكواد خاطئة مثل استخدام متغير معين في عنصر لا يقبل هذا المتغير .
6- الفرق بين Margin و Padding:-
من أهم العناصر و التي يكثر استخدامها هي عناصر Margin و Padding و من المهم معرفة الفرق بينهما و كيفية استخدامهما .
فعنصر Margin يشير إلى المساحة الخالية المطلوبة حول النسق المطلوب , أي من خارج العنصر , فمثلاً إذا أردنا أن نضع مساحات خالية بين المربعات الجانبية بعضها ببعض من أعلى و أسفل نستخدم Margin :
.widget {
margin: 10px 0 10px 0;
}
أما Padding فتحدد المساحة الخالية من داخل العنصر , فإذا أردنا أن نحدد مساحة خالية من داخل العنصر حتى لا يلتصق النص بحد العنصر نستخدم padding :
.widget {
width: 240px;
border: 1px solid #aaa;
background: #d0d0d0;
padding: 3px;
}
7- رمز !Important:-
رمز !Important من الرموز القليلة التي تستخدم و لكنها ذات أهمية في عملية التنسيق باستخدام CSS , فمن خلالها يمكنك أن تحدد أي من التنسيقات التي قمت بعملها له أهمية بشكل كبير بغض النظر عن أي تنسيق آخر يتم تكوينه آلياً بواسطة بعض برامج إدارة المحتوى أو سواء تم تكراره من قبل في أي ملف تنسيق آخر بالموقع :
#container {
background: #eee !Important ; background-color:#000;
}
و بالتالي سيتم عمل الخلفية باللون الفاتح لأنه تم تحديده كتنسيق مهم بدلاً من التنسيق باللون الأسود .
8- استبدال النص بصورة:-
عادة ما يقوم المصممون بعمل شعار الموقع كخلفية لعنصر < div > و وضع العنصر بتنسيقه في التصميم , في حين أنه يمكن أن يستفيد المصمم من عنصر مثل < h1 > في وضع الشعار بالموقع من خلال إخفاء النص و وضع صورة الشعار كخلفية للعنصر :
h1.logo {
text-indent:-9999px;
background: url('images/logo.png') no-repeat;
width: 250px;
height: 110px;
}
و بالتالي سيتوفر النص المكتوب داخل عنصر العنوان و لكن بشكل مخفي و هي تعتبر أحياناً من الخدع المستغلة مع محركات البحث .
9- استخدام محررات متخصصة:-
سيفيد المصمم كثيراً إذا استعان بمحررات متخصصة في تكوين ملفات CSS و أحياناً ما تكون مدمجة مع برامح شهيرة و من البرامج التي تميزت في الفترة الأخيرة على نظام Windows برنامج Microsoft Expression Web و الذي تم تحسينه كثيراً في نسخته الثالثة التي صدرت منذ عدة أيام من خلال مجموعة من المميزات , بالإضافة إلى برامج أخرى مثل Adobe Dreamweaver CS4 أو المحرر الأشهر Notepad ++ و برنامج Kompozer و المتوفر لأنظمة ويندوز و ماكنتوش و لينُكس .
10- تعرف على الخطأ و قم بإصلاحه:-
لا يهم إذا كانت هناك أخطاء , و أحياناً من الصعب إيجاد الخطأ و معرفة كيفية حله . و لذلك يجب أن يتم استخدام بعض الأدوات التي تساعدك على ذلك و من أشهرها أداة Firebug (http://getfirebug.com/) فهي تمكنك من استعراض أكواد HTML و CSS جنباً إلى جنب و معرفة مكان وجود خطأ معين في تصميم الصفحة , أو إذا كنت ممن يبحثون عن تنسيقات معينة في مواقع أخرى فهذه الأداة هي الأمثل لذلك .
منقول