تعلم CSS – ما هي الـ CSS مقدمة وتعريفات

نبذة عامة

كما تعلمنا في لغة الـ HTML ،  فأن مواقع الإنترنت مكونه من ثلات أشياء أساسية ، أولها الهيكلية العامة الخاصة بالموقع وما هي العناصر التي سوف تكون بالموقع والمسئول عن ذلك هو الـ HTML وأيضاََ قد قلنا أن صفحة الويب تتكون أيضا من تنسيقات وألوان وأماكن تواجد بعض العناصر الخاصة بالـ HTML والمسئول عن الاستايل والتنسيق هو الـ CSS ، وهذا ما سنقوم بشرحة في هذه السلسلة هو الـ CSS ، سنتعرف كيف نقوم بعمل التنسيق للمواقع ، وما هي الخصائص المسئولة عن ذلك ، وكيف يتم كتابة أكواد الـ CSS وأين يتم كتابتها .

ما هي لغة CSS ؟

تخيل معي أحد المواقع المشهورة مثل فيس بوك مثلاََ بدون تنسيقات كيف سيكون !

كما نلاحظ من الفيديو ، فالموقع بدون Style سيكون فقط مجرد عناصر HTML  مرصوصة أسفل بعضها حسب كتابتها في المحرر وبدون أي تنسيقات، ولذلك جاءت لغة الـ CSS لتعمل على تنسيق العناصر الخاصة بالـ HTML وظهورها بشكل منسق وجميل ومناسب في صفحة الويب .

للتوضيح بشكل أكبر ، تخيل معي اي منزل موجود ، تخيل أن الأعمدة والغرف والشبابيك والهيكليه العامة لهذا المنزل هو عبارة عن الـ HTML ، ونأتي بعد ذلك لتزين المنزل من خلال الدهان والطلاء وعمل بعض الزخارف فيه ليظهر بشكل أجمل وذلك ما يشبه الـ CSS

بعد أن فهمنا وظيفة الـ CSS وقبل البدء في بعض الأساسيات في هذه المقالة ، أؤكد عليك أن تكون قد راجعت الـ HTML جيداََ وان تكون ملماََ بها

لماذا CSS ؟

بعد إختراع لغة الـ HTML في بداية التسعينات وبعد انتشار الويب كان هناك الحاجة الكبيرة لزيادة جمالية صفحات الويب وفي ذلك الوقت كانوا يستخدمون هذه العناصر لتحسين المظهر من هذه العناصر :

عنصر الـ Font

ويستخدم لتحديد نوع خط النص وحجمه ولونه ايضاََ .

<font face="Tahoma" size="10" color="red"> Old Tag HTML </font>

عنصر الـ Center

ويستخدم لمحاذاة النص في وسط الصفحة

<center> Align Text Center </center>

هيكلية الصفحة ما قبل إختراع الـ CSS

في الماضي كان الإعتماد على الجداول <table> في تقسيم صفحات الويب ، من أجل تقسيم صفحة الويب إلى صفوف وأعمدة ، كانت الجداول هي الطريقة الوحيدة التي يمكن من خلالها عمل تخطيط مرئي

<table width="100%" height="200px" border="1">
	<thead>
		<tr>
			<th>Logo</th>
			<th colspan="2">Menu</th>
		</tr>
	</thead>
	<tbody>
		<tr align="center">
			<td>Left Content</td>
			<td>Main Content</td>
			<td>Right Sidebar</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th colspan="3">Copyright 2020</th>
		</tr>
	</tfoot>	
</table>

ويجب ان تعلم ان هذا كان منذ زمن ، ولا يجوز استخدام الان الجداول في تقسيم هيكلية صفحة الويب ، لإنك ستقوم بكتابة العديد من العناصر بإمكانك الإستغناء عنها بالاستعانة بالـ CSS ، بخلاف انها ستكون صعبة ومعقدة وغير مرتبة ، تخيل ان لديك جدول بداخل جدول وهكذا !

وللإجابة على السؤال السابق لماذا CSS ؟

تخيل معي انك تقوم بإستخدام الجداول ، جدول داخل جدول ، وتخيل ايضاََ انك تقوم بإستخدام عنصر الـ <font> من أجل تغير نوع الخط ولونه وحجمه ، الصفحة ستكون مليئة جداََ بهذا العنصر ، ماذا لو أردت تغير اللون الموجود حالياََ للون أخر ، ماذا لو كان لديك موقع يحتوي على عشرات الصفحات !

هل ستقوم بتغير اللون لمئات الأسطر وعشرات الصفحات ، هذا الأمر مرهق جداََ ومضيع للوقت  ولذلك لغة الـ CSS أصبح بإمكانك ربط ملف واحد CSS مع صفحاتك الـ HTML المراد تغير الاستايل الخاص بها ، وتغير بعض الأكواد القليلة فقط ولن يأخد منك الأمر أكثر من دقيقة !

في الدرس التالي سنتعلم كيف نقوم بكتابة الـ CSS وأين نقوم بكتابتها ، تابع معنا أورجو لك الإستفادة .