http://ww2.dkit.ie/var/ezwebin_site/storage/images/media/images/css_logo/5547-1-eng-GB/css_logo_medium.png

  • تـعــــريف بـالـــ CSS ..
  • مقـدمــــــــــــــــــه ..
  • لماذا الــ CSS تحديـداً..
  • الخـــــــــــــاتمــــــه..

كثيرا ما تتطاير علي مسامعنا بعض المصطلحات الغريبة مثـل .. HtmlXmlCssjava والعديد من المصطلحات الاخري .. ، حديثنا اليوم سـيكون عن لغـه الـ Css ..
Css هو اختصـار لـ Cascading Style Sheets وهي تعني بلغتنا العربية .. صفحات التنسيق المتراصة او اوراق النمط المنظم والمتسلسل .. والبعض يفضل ان يلقبها بـ صفحات الانماط الانسيابية .. وتمثل هذة الاوراق او الصفحات .. ثورة في عالم الويب .. فقد اصبح هنـاك ما يسمي بمعاير الويب القياسيـه .. ومع تطور الويب وكثره المذاهب والاضافات .. اصبح من الصعب ان تحصل علي صفحات ويب مطابقة للمعاير القياسية من دون الـ Css..




الـ Css لغه نشأت من اجل ان تقوم بفصل الجزء الذي يحدد الشـكل عن الجزء الذي يحدد البنيه في صفحات الويب .. فالجميع يعتقد ان الـ Html هي لغه مسؤله عن شـكل الصفحات .. وهذه معلومات خاطئة تماما ..
الـ Html .. لم تصمم من اجل التحكم في الشكل او المظهر لصفحات الويب .. كان الهدف منها فقط هو تحديد بنيه الصفحات وابراز العناصر التي بداخل كل صفحة .. ولكن اصبح مصممي الويب متعطشين الي ما يساعدهم في تطوير ادواتهم فهم غير مقتنعين بما يقدمة الـ Html وحده .. فـلما طورت Netscape ادوات جديدة ساعدت المصممين علي التحكم في المظهر بشكل اكبر .. ظهرت العديد من الطرق المختلفة والملتويه والمعقدة واصبح كود الـ Html اكثر واكثر تعقيدا .. وتضاربت المعاير من متصفح الي اخـر .. فكلما اراد مصمم ان يصل الي اسلوب جديد يصبح الكود اكثر تعقيدا ومن هنا بدأت تظهر الاخطاء في كتابة الكود ..

ومع ظهور الـ Css اصبح المصمم يستطيع التحكم في الشكل والمظهر بشـكل اكبر واكبر .. وليس هذا فقط .. بل يخرج الكود خالي من الاخطاء .. ويصبح كود الـ Html نظيفا وبسيطا ومسؤولا عن بنيه الصفحات فقط .. اما كود الـ Css يمثل المتحكم الخارجي في الشـكل والمظهـر .. وبهذا تم فصل بنيه الصفحات .. عن شكلها ومظهرها .. في شـكل قالبين مترابطين .. HtmlCss

مـراحل تطـور الـ Css

 

مرت لغـه الـ Css بـ 4 مستويات او اصدارات .. ويعتبر كل اصدار منهم بعض الاضافات الجديدة علي الاصدار الذي يسبقة وهي ..
Css 1 | وكان بدعم من W3C وهو اختصار الي The World Wide Web Consortium وتعني بلغتنا العربية اتحاد شبكة الويب العالمية .. ويعتبر هذا الاصدار هو البدائي للغه الـ Css اوصي به من قبل الاتحاد في ديسمبر 1996 وتمت مراجعتة بشكل نهائي في ابريل 2008 وكان يدعم خصائص الخط كالحجم والنوع واللون، الخلفيات، المسافة بين النصوص والسطور والكلمات وغيرها، محاذاة النصوص والجداول والصور، الحدود والأبعاد لمعظم العناصر وغيرها من الخصائص الأساسية.
Css 2 | خرج الي النور في مايو 1998 بدعم وتطوير من W3C واضيفت له الكثير من الخصائص والادوات الاضافية .
Css 2.1 | هي نسخة صدرت من اجل تعديل بعض الاخطاء التي ظهرت في النسخة السابقة .. وقد بدأ العمل عليها في يونيو 2005 وتم اعتمادها كنسخة نهائية من قبل W3C في ابريل 2008.
Css 3 | حتي الان يخضع لتطوير من قبل W3C ..

,, وهذا تاريخ الـ Css حتي وقتنا هذا..



قد يري البعض ان الـ Css لغه ليست اساسية في تصميم صفحات الويب .. او انها فقط تكمل الـ Html فلا حاجة الي تعلمها او اتقانها .. فهي مجرد اضافات .. اذا كنت تحمل في ذهنك هذا الاعتقاد .. دعني اسرد اليك الاسباب التي ستدعوك لاتقان تلك اللغة الرائعة ..

 

  • تستطيع ان تفصل بين الشكل والمظهر وبنيه وعناصر الصفحات بكل سهولة ..
  • تحكم شبه كامل في خصائص العناصر من شكل وحجم والوان وخطوط وصور وخلفيات .
  • تستطيع تنسيق عدد لا نهائي من الصفحات الويب عن طريق قالب واحد فقط ويظهر هذا التنسيق حسب القالب الذي اعددته .. والمثير في الامر انك تستطيع التعديل علي هذا العدد الا نهائي من الصفحات عن طريق تعديل هذا القالب !! .
  • توافق اكثر مع معظم المتصفحات المختلفة .
  • كود نظيف وخالي من الاخطاء .
  • توفير في الوقت والجهد فانت تصنع قالب واحد يصنع لك صفحات الي ما لا نهاية ..
  • يساعد علي سـرعه ظهور الصفحات ..

والان اليك مثال بسيط لتفهم كيف تعمل الـ Css
بفرض اننا انشأنا صفحة جديدة باسم Index.html ووضعنا بداخلها هذا الكود ..

 

كود:

<html>

<head>
<title>منتديات مكسات</title>
</head>

<body>
<h2>Hatshy</h2>
<h3>mexat.com</h3>
<p>منتديات مكسات .. www.mexat.com/vb</p>
</body>

</html>

سيظهر الكود بدون اي نمط خاص .. خلفية افتراضية بيضاء واحجام الخطوط الطبيعية حتي نمط الخط كذلك ..
فمثلا اذا كنت تريد تغير لون خلفية الصفحة الي اللون الاسود عن طريق الـ Html سيكتب الكود هكذا ..

 

كود:

كود PHP:
<html>

  <head>
    <
title>منتديات مكسات</title>
  </
head>

  <body style="background-color: #000">
    <
h2>Hatshy</h2>
    <
h3>mexat.com</h3>
    <
p>منتديات مكسات .. www.mexat.com/vb</p>
  </
body>

</html  >


لاحظ التغير في الكود باللون الاحمر .. تخيل انك ستصنع موقع ويب يتكون من 50 صفحة .. ستعدل علي كل الصفحات ليظهر الشكل متطابق في كل الصفحات .. فماذا لو اردت استبداله بلون اخر فيما بعد .. ستضطر الي اعاده تعديلة في الصفحات جميعا بنفس الطريقة ..
امال في حال استخدام لغة الـ Css ستقوم بفصل الخصائص كما يظهر اليك الان ..
وبفرض انك انشأت ملف جديد بأسم style.css في نفس المجلد الذي يحتوي صفحة الـ Html و ستفصل داخلة كود الشكل كما يلي ..

 

كود PHP:
     body {
  
background-color#000;

والان نأتي الي الجزء الاهم وهو الربط بين قالب الـ Css وصفحة الـ Html ويتم عن طريق الاضافة باللون الاحمر في الكود التالي ..

 

كود PHP:
<html>

  <head>
    <
title>منتديات مكسات</title>
 <
link rel="stylesheet" type="text/css" href="style.css" />
  </
head>

  <body>
    <
h2>Hatshy</h2>
    <
h3>mexat.com</h3>
    <
p>منتديات مكسات .. www.mexat.com/vb</p>
</html>  </body

اذا طابقت الكود الاول الخالي من الخصائص والاخطاء بالكود المربوط بقالب الـ Css ستجدهم متطابقين .. وتخيل انك لو اردت التعديل علي 1000000 صفحة مربوطة بنفس القالب يكفي فقط تغيرها من قالب style.css وحفظ التعديل وسيتم التعديل علي كافة القوالب بنفس الشكل تماما ..

وهذا يعتبر ابسط مثال يمكن ان تشاهده .. فصفحات الويب تكون مكتظة بالاكواد وكلما كانت الخصائص كثيرة زادت الاكواد تعقيد ..



اذا كنت مصمم مواقع ولا تتقن الـ Css ادعوك الي ركوب حافلة التطور لتصبح في تواكب مع عالم الويب الجديد الخالي من الاخطاء والمطابق للمعاير القياسية .. وتوفر علي نفسك الوقت والجهد ..
اذا كنت مهتم بتصميم الموقع وتسعي لتصبح مصمم يوماً ما .. ادعوك لوضع الـ Css نصب عينك .. لتوفر علي نفسك طريق طويل وتوفيرا للوقت والمجهود ..

معلومات اخيـره .. حتي لا يفهم الموضوع خطأ ..
لا يمكن ان تعتمد علي تلك اللغة فقط في بناء صفحة ويب ..
بمعني انك يمكن ان تنشئ صفحة ويب بلغة الـ Html فقط ..
ولكن لا تستطيع ان تنشئ صفحة ويب بالـ Css فقط ..
ولذلك .. لن يفيد ان تتقن الـ Css دون ان يسبقة اتقان الـ Html ..

تم بحمـد الله ..

وترقبوا قريبا بعض الدروس البسيطة في تلك اللغة الرائعة ..

ارجو عدم نقل الموضوع من دون ذكر المصـدر .. منتديات مكسات ..

Tagged in:

, , , , ,