المغربي الجديد
19-03-2011, 07:11 PM
مقدمة في
CSS اختصار للجملة Cascading Style Sheets
والتي معناها باللغة العربية صفحات الأنماط الإنسابية
وهي "ليست لغه برمجه" ولكنها تقنية تتهتم بتحديد شكل وتصميم المواقع ، وينطبق ذلك على الألوان والخطوط والصور والخلفيات التى تستخدم فى الصفحات ، بمرونة وسهولة تامه.
وهذه التقنيه تساعدك جدا على إنشاء وإدارة صفحات المواقع بشكل فريد يتميز عن من يعتمد في التصميم على html التى تسبب مشكله وهى ان الموقع لا ينفصل عن محتوياته ..
وتعال نتخيل سوياً على أنك قبلت تنفيذ موقع متوسط الحجم لأحد العملاء ، و بطبيعة الحال تحتاج لبرمجة ما يزيد عن العشر صفحات ـ
وفرضاً أيضاً أنك انتهيت من الموقع بعد عمل متواصل ـ وعرضت الموقع على العميل وتعتقد أنه أصبح جاهز للاستخدام الآن .
ماذا لو فاجأك العميل بطلب تغيير حجم الخط من القيمة "2" إلى القيمة "3" مثلاً هل ستضطر لفتح كل صفحة و التعديل في كل فقرة من فقراتها لتغير هذه القيمة!
ماذا لو كان الموقع مكوناً من 50 صفحة ؟!
و ماذا لو كان يعمل على المشروع أكثر من شخص بشكل منفصل ؟
في الواقع هذه القصة والعملية المتعبة جدا فى التعديل ستواجهك كثيراً عند التعامل مع عملاءك وتجعلك تفكر في الإنتقال من استخدام لغة html وحدها
إلى أخرى تعطيك مرونة أكبر وتقدم لك الحل وتوفر الجهد
اقتباس:
الفكرة باختصار تكمن في فصل التنسيق عن المحتوى و من ثم وضع التنسيق في ملف منفصل يمكنك التعديل عليه لتغيير شكل صفحات موقعك بسهولة بعد ذلك دون الرجوع اليها مرة أخرى.
فوائد إستخدام تقنية CSS
فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد بإمتداد css.
إضافة مزيد من الأحترافية والسهولة
لتصميم المواقع والحريه في تصميم مواقع تزيد عن العشرة والعشرين صفحة.
لن ترهقك بعد اليوم طلبات العملاء والتعديلات الكثيرة التى يطلبوها ويروها سهله ولكنك تراها مرهقه مع كثرة الأعمال.
تقليل حجم صفحات الموقع، مما يعني أن المستخدم سيقضي وقتاً أقل لكي تظهر له صفحات الموقع بشكل كامل.
تقليل حجم الموقع الكلي بنسبة تصل إلى 50% مما يعني أن سعة الموجة bandwidth التي يحتاجها الموقع ستقل.
ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى كالحواسيب الكفية وذلك بفضل فصل المحتوى عن ملف التصميم.
كيف يتعرف متصفح الإنترنت على هذه التقنية ؟
1- Browser Defaults
..في الحقيقة إننا نستخدم نوعاً من أنواع الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا المثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
</head>
<body>
<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
لاحظ فلم يتم تحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة بإستخدام المتصفح ستجد تنسيقاً معيناً لنوع الخط و حجمه و لونه ـ
وهذا التنسيق قد يختلف من جهاز لآخر بحسب الإعدادات الافتراضية للعرض لدى الزائر.
هنا كأننا نقول بأن المتصفح يحتفظ بملف يحتوي أنماط معينة من التنسيق يستخدمها إذا لم تحدد التنسيق بشكل واضح في صفحتك او موقعك .
وتقنية css تعتمد نفس المبدأ . وتقريباً لن تكتب أي تنسيق في الصفحة الأساسية لكنك ستحدد في ملف خارجي واحد التنسيق مفصلاً ـ
وبعدها يربط ذلك الملف بالموقع حتى يأخذ المتصفح تنسيق الصفحات منه دون الاعتماد على إفتراضياته هو ويطبق على جميع الصفحات مما يضمن ظهور الموقع بنفس الشكل على كل الأجهزة.
طرق تعريف CSS داخل الصفحات
2- External
ملف منفصل بإمتداد css تسمية بإي أسم يحتوى على كافة تنسيقات الموقع ومن ثم تربط به جميع صفحات الموقع كما في المثال التالي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
الوسم <link /> يكتب فيه مسار ملف css سواء كان بمجلد خاص أو بنفس مكان الصفحات ومن ثم يوضع الكود بالكامل برأس كل الصفحات بين الوسم <head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
وهذا الملف المنفصل المربوط به الصفحات تكتب فيه أكواد css مباشرة داخل ملف txt ومن ثم تحفظ بإمتداد css.
كما ذكرنا ولو شاهدنا هذا الملف ستجدة يحتوى على الأكواد فقط كالتالي
.me {
color: #FFFFFF;
background-color: #333;
border: 2px solid #666;
font-family: Tahoma;
width: 100px;
}
p.you {
color: #EAEAEA;
background-color: #333;
border: 2px solid #666;
font-family: Tahoma;
width: 50px;
}
3- Internal
فيها يتم إضافة جميع قيم css برأس الصفحه بين وسمين <style> لتعريفهم على المتصفح ومن ثم توضع ايضا داخل برأس الصفحة بين الوسم <head>
كما في الحالة السابقة ومنه تطبق هذه الأوامر على جميع فقرات الصفحه.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
<style type="text/css">
<!--
p.you {
color: #FFFFFF;
background-color: #333;
border: 2px solid #666;
font-family: Tahoma;
width: 100px;
}
-->
</style>
</head>
<body>
<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
الوسم <style> وهو الوسم الذى من خلالة يتعرف المتصفح على قيم css المختلفة المكتوبة بداخله ويكتب بهذا الشكل برأس الصفحة
<style type="text/css">
CSS styles here
</style>
المتصفحات القديمة لا تفهم الوسم style ولا تدعم تقنيه CSS لذا فهى عادة تتجاهلة وتعرض مابين هذا الوسم من أوامر على أنه محتوى ضمن الصفحة!
ولتفادى هذه العملية في تلك المتصفحات التعيسة نقوم بوضع جميع أوامر css داخل تعليق comment element
حتى إن حدث لا قدر الله وظهر موقعك لأحد مستخدمي هذه المتصفحات لا تظهر له الأوامر كمحتويات بالصفحة
<style type="text/css">
<!--
CSS styles here
-->
</style>
4- in-line
وفيها تطبق أوامر الـ css مباشرة داخل اوسمه html كما بالمثال التالي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
</head>
<body>
<p style="font:normal 12px Tahoma; color:#FF0000; background:#FFDDFF;">تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
منقول للفائدة
CSS اختصار للجملة Cascading Style Sheets
والتي معناها باللغة العربية صفحات الأنماط الإنسابية
وهي "ليست لغه برمجه" ولكنها تقنية تتهتم بتحديد شكل وتصميم المواقع ، وينطبق ذلك على الألوان والخطوط والصور والخلفيات التى تستخدم فى الصفحات ، بمرونة وسهولة تامه.
وهذه التقنيه تساعدك جدا على إنشاء وإدارة صفحات المواقع بشكل فريد يتميز عن من يعتمد في التصميم على html التى تسبب مشكله وهى ان الموقع لا ينفصل عن محتوياته ..
وتعال نتخيل سوياً على أنك قبلت تنفيذ موقع متوسط الحجم لأحد العملاء ، و بطبيعة الحال تحتاج لبرمجة ما يزيد عن العشر صفحات ـ
وفرضاً أيضاً أنك انتهيت من الموقع بعد عمل متواصل ـ وعرضت الموقع على العميل وتعتقد أنه أصبح جاهز للاستخدام الآن .
ماذا لو فاجأك العميل بطلب تغيير حجم الخط من القيمة "2" إلى القيمة "3" مثلاً هل ستضطر لفتح كل صفحة و التعديل في كل فقرة من فقراتها لتغير هذه القيمة!
ماذا لو كان الموقع مكوناً من 50 صفحة ؟!
و ماذا لو كان يعمل على المشروع أكثر من شخص بشكل منفصل ؟
في الواقع هذه القصة والعملية المتعبة جدا فى التعديل ستواجهك كثيراً عند التعامل مع عملاءك وتجعلك تفكر في الإنتقال من استخدام لغة html وحدها
إلى أخرى تعطيك مرونة أكبر وتقدم لك الحل وتوفر الجهد
اقتباس:
الفكرة باختصار تكمن في فصل التنسيق عن المحتوى و من ثم وضع التنسيق في ملف منفصل يمكنك التعديل عليه لتغيير شكل صفحات موقعك بسهولة بعد ذلك دون الرجوع اليها مرة أخرى.
فوائد إستخدام تقنية CSS
فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد بإمتداد css.
إضافة مزيد من الأحترافية والسهولة
لتصميم المواقع والحريه في تصميم مواقع تزيد عن العشرة والعشرين صفحة.
لن ترهقك بعد اليوم طلبات العملاء والتعديلات الكثيرة التى يطلبوها ويروها سهله ولكنك تراها مرهقه مع كثرة الأعمال.
تقليل حجم صفحات الموقع، مما يعني أن المستخدم سيقضي وقتاً أقل لكي تظهر له صفحات الموقع بشكل كامل.
تقليل حجم الموقع الكلي بنسبة تصل إلى 50% مما يعني أن سعة الموجة bandwidth التي يحتاجها الموقع ستقل.
ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى كالحواسيب الكفية وذلك بفضل فصل المحتوى عن ملف التصميم.
كيف يتعرف متصفح الإنترنت على هذه التقنية ؟
1- Browser Defaults
..في الحقيقة إننا نستخدم نوعاً من أنواع الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا المثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
</head>
<body>
<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
لاحظ فلم يتم تحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة بإستخدام المتصفح ستجد تنسيقاً معيناً لنوع الخط و حجمه و لونه ـ
وهذا التنسيق قد يختلف من جهاز لآخر بحسب الإعدادات الافتراضية للعرض لدى الزائر.
هنا كأننا نقول بأن المتصفح يحتفظ بملف يحتوي أنماط معينة من التنسيق يستخدمها إذا لم تحدد التنسيق بشكل واضح في صفحتك او موقعك .
وتقنية css تعتمد نفس المبدأ . وتقريباً لن تكتب أي تنسيق في الصفحة الأساسية لكنك ستحدد في ملف خارجي واحد التنسيق مفصلاً ـ
وبعدها يربط ذلك الملف بالموقع حتى يأخذ المتصفح تنسيق الصفحات منه دون الاعتماد على إفتراضياته هو ويطبق على جميع الصفحات مما يضمن ظهور الموقع بنفس الشكل على كل الأجهزة.
طرق تعريف CSS داخل الصفحات
2- External
ملف منفصل بإمتداد css تسمية بإي أسم يحتوى على كافة تنسيقات الموقع ومن ثم تربط به جميع صفحات الموقع كما في المثال التالي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
الوسم <link /> يكتب فيه مسار ملف css سواء كان بمجلد خاص أو بنفس مكان الصفحات ومن ثم يوضع الكود بالكامل برأس كل الصفحات بين الوسم <head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
وهذا الملف المنفصل المربوط به الصفحات تكتب فيه أكواد css مباشرة داخل ملف txt ومن ثم تحفظ بإمتداد css.
كما ذكرنا ولو شاهدنا هذا الملف ستجدة يحتوى على الأكواد فقط كالتالي
.me {
color: #FFFFFF;
background-color: #333;
border: 2px solid #666;
font-family: Tahoma;
width: 100px;
}
p.you {
color: #EAEAEA;
background-color: #333;
border: 2px solid #666;
font-family: Tahoma;
width: 50px;
}
3- Internal
فيها يتم إضافة جميع قيم css برأس الصفحه بين وسمين <style> لتعريفهم على المتصفح ومن ثم توضع ايضا داخل برأس الصفحة بين الوسم <head>
كما في الحالة السابقة ومنه تطبق هذه الأوامر على جميع فقرات الصفحه.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
<style type="text/css">
<!--
p.you {
color: #FFFFFF;
background-color: #333;
border: 2px solid #666;
font-family: Tahoma;
width: 100px;
}
-->
</style>
</head>
<body>
<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
الوسم <style> وهو الوسم الذى من خلالة يتعرف المتصفح على قيم css المختلفة المكتوبة بداخله ويكتب بهذا الشكل برأس الصفحة
<style type="text/css">
CSS styles here
</style>
المتصفحات القديمة لا تفهم الوسم style ولا تدعم تقنيه CSS لذا فهى عادة تتجاهلة وتعرض مابين هذا الوسم من أوامر على أنه محتوى ضمن الصفحة!
ولتفادى هذه العملية في تلك المتصفحات التعيسة نقوم بوضع جميع أوامر css داخل تعليق comment element
حتى إن حدث لا قدر الله وظهر موقعك لأحد مستخدمي هذه المتصفحات لا تظهر له الأوامر كمحتويات بالصفحة
<style type="text/css">
<!--
CSS styles here
-->
</style>
4- in-line
وفيها تطبق أوامر الـ css مباشرة داخل اوسمه html كما بالمثال التالي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
</head>
<body>
<p style="font:normal 12px Tahoma; color:#FF0000; background:#FFDDFF;">تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
منقول للفائدة