فى مقال سابق تكلمنا عن ماهى الـ 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 وهو ما يمكن ان نتناوله بالتفصيل فى ما بعد على صفحات هذه المدونه .
اتمنى ان اكون نجحت فى توضيح ما هى الـ css وفى ماذا تستخدم والقاكم قريبا بإذن الله
والسلام عليكم ورحمه الله
ليست هناك تعليقات:
إرسال تعليق