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

فى مقال آخر على مدونه الويب العربى نتكلم عن ماهى الـ HTML

أما اليوم نحاول معا ان نوضح ما هى الـ CSS وفى ماذا تستخدم ؟



قبل ظهور الـ css كان مصممى صفحات الإنترنت يقومون بإستخدام الوسوم لتحديد شكل ومظهر العناصر الموجوده فى صفحاتهم مثل (الصور والنصوص والخطوط والألوان أو لون او صوره خلفيه الصفحه .. وغيرها الكثير). وكان هذا شئ بسيط وسلس طالما ان الصفحات بسيطه والموقع الذى يتم تصميمه يحتوى على بضع صفحات قليله 

ولكن ..
 مع تطور الويب وتطور صفحات الإنترنت فى تعقيد مكوناتها أصبح من الممكن ان يحتوى موقع انترنت واحد على الآف من الصفحات واصبح الأمر مزعجا جدا لمصممين المواقع ..

فمثلا انا اصمم موقع يحتوى على 500 صفحه . واريد ان اجعل جمله معينه لونها اخضر  فهل اقوم بتحديد لون الجمله من خلال كود الـ html لكل صفحه من صفحات الموقع والبالغ عددها 500 صفحه .. بالطبع هذا شئ صعب ومزعج.

ومن هنا نشأت الحاجه الى طريقه مختلفه فى تحديد شكل ومظهر عناصر الصفحات التى يتم تصميمها

 

كان الحل هو ” صفحات الأنماط المتتاليه ” أو الـ CSS 

وفكرتها ببساطه هى فصل الكود الذى يحدد عناصر الصفحه عن الكود الذى يحدد شكل هذه العناصر..

فالأول هو كود الـ html نفسه وهو يقول للمتصفح : ” ضع هذه الصوره فى الصفحه “ أو ” اكتب هذا النص واعرضه لزائر الصفحه.. وهكذا..

اما كود الـ css يقول للمتصفح : ” اجعل الصوره على يمين الصفحهأو ” اجعل هذا النص لونه ازرق وخطه مائل 

 

كيف يتم ذلك ؟

بدلا من ان نقوم بكتابه كامل كود الصفحه فى ملف واحد نقوم بتقسيمه الى ملفين واحد لكود الـ html والآخر لكود css وعند اتباع هذه الطريقه فانه اذا فرضنا ان لدينا موقع انترنت يتكون من صفحه واحده فستكون كالتالى :

 index.html  وهذا هو ملف كود الـ html للصفحه والذى يحدد محتوياتها وعناصرها

theme.css وهذا هو ملف كود الـ css للصفحه والذى يحدد شكل هذه العناصر

 

وماذا يستفاد من فصل الكود الخاص بالشكل والمظهر عن باقى الصفحه ؟

  • اولا تقليل حجم الكود المكتوب فى صفحه html وتنظيمه مما يسهل مراجعتها وتعديلها فى المستقبل.
  •  وايضا يسرع تحميل الصفحه لان حجمها اصبح صغير.
  • لكن الميزه الأكبر والأهم هى حل مشكله كتابه كود مظهر الصفحه اكثر من مره .. فنحن الأن اصبح لدينا ملف واحد theme.css يحدد مظهر عناصر صفحه index.html ويمكن أيضا استخدامه مع ملفindex1.html وايضا index2.html و index3.html … وهكذا يمكن استخدام ملف css واحد مع ملايين من صفحات الـ html مما يوفر الكثير من الوقت والمجهود كما فى الشكل التالى :

    

 

 

 

هل يمكن أن يحتوى موقعى على اكثر من ملف css واحد ؟

نعم بالتأكيد يمكن ان يكون هناك اكثر من ملف ويتم استخدام أى منهم مع اى ملف من ملفات html الموجوده لديك .

 

وكيف يتم ربط ملف كود html مع ملف css المرغوب ؟

يتم ذلك عن طريق كود صغير يتم وضعه فى ملف html مباشره بعد تاج رأس الصفحه وهو يحتوى على اسم ومكان ملف الـ css الذى سوف يتم استخدامه كالتالى :

 

مثلا ملف الـ css الذى تريد استخدامه يسمى ” style.css ” وهو موجود على المسار التالى :  3alm-semsem.blogspot.com/theme/style.css  

فنقوم بالتوجه الى ملف كود الصفحه المكتوب بلغه html وما بين بدايه كود رأس الصفحه <head> ونهايته <head/> تقوم بكتابه الكود التالى :

<link rel=”stylesheet” href=”3alm-semsem.blogspot.com/theme/style.css type=”text/css” />

  

هذا مع العلم ان هناك طرق اخرى يمكن فيها كتابه css للصفحه غير كتابتها فى صفحه اخرى مستقله ولكن لن تناول هذه الطرق الآن .

 

اتمنى ان اكون نجحت فى توضيح ما هى الـ css وفى ماذا تستخدم والقاكم قريبا بإذن الله 

والسلام عليكم ورحمه الله 

 


شركة كشف تسربات المياه

شارك الموضوع لإفادة الآخرين ..

اشترك فى القائمه البريدية

كن على اطلاع دائم بأخر المواضيع فى مدونة الويب العربى

نحترم خصوصيتك . لا بريد مزعج . لا اعلانات . تستطيع الغاء اشتراكك بسهولة فى اى وقت

تعليق على هذه التدوينة

تقييم هذا الموضوع
نجمه واحدةنجمتانثلاثه نجوماربع نجومخمسة نجوم (لا يوجد تقييم ..كن أول من يقيم هذا الموضوع)
Loading...

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

*
*
Website