مقدمة لتعلم CSS
لغة CSS أو Cascading Style Sheets تعتبر واحدة من أهم الأدوات الأساسية لتنسيق صفحات الويب. فهي اللغة التي تمنح صفحات HTML الشكل الجمالي والتنظيمي الذي يجعل الموقع يظهر بشكل احترافي.
ما هي CSS؟
CSS هي اختصار لـ Cascading Style Sheets، وهي لغة تنسيق مسؤولة عن التحكم في ألوان النصوص والخلفيات، نوع الخطوط وأحجامها، المسافات بين العناصر، وتوزيع العناصر داخل الصفحة. يمكننا أن نشبّه HTML بالهيكل العظمي، بينما CSS هي الملابس والألوان التي تجعل الشكل جذاباً.
أهمية CSS
تخيل أنك تمتلك موقعاً يحتوي على مئات الصفحات، وأردت تغيير لون العناوين أو الخطوط. بدون CSS ستضطر إلى تعديل كل صفحة يدوياً، أما باستخدام CSS يمكنك إجراء التغيير مرة واحدة فقط من خلال ملف واحد، وينعكس على كل الصفحات في الموقع. هذا يجعلها أداة قوية توفر الوقت والجهد وتضمن تنسيقاً موحداً عبر الموقع كله.
تركيب القواعد في CSS
أي قاعدة في CSS تتكون من ثلاثة أجزاء رئيسية:
-
Selector: العنصر الذي تريد تنسيقه، مثل
pللفقرات أوh1للعناوين. -
Property: الخاصية التي ترغب في تغييرها مثل
colorأوfont-size. -
Value: القيمة التي تمنحها للخاصية مثل
redأو20px.
h1 {
color: blue;
text-align: center;
}طرق استخدام CSS
يمكن إدراج CSS في صفحات الويب بثلاث طرق رئيسية:
-
Inline CSS: كتابة التنسيق مباشرة داخل الوسم باستخدام خاصية
style. -
Internal CSS: وضع القواعد داخل وسم
<style>داخل ملف HTML نفسه. -
External CSS: وهي الأفضل، حيث يتم إنشاء ملف مستقل بامتداد
.css وربطه بصفحة HTML باستخدام وسم
<link>.
مفهوم Box Model
كل عنصر في صفحة الويب يتم التعامل معه في CSS على أنه صندوق. هذا الصندوق يتكون من:
- المحتوى (Content): النص أو الصورة نفسها.
- Padding: المسافة داخل العنصر حول المحتوى.
- Border: الإطار المحيط بالعنصر.
- Margin: المسافة الخارجية بين العنصر والعناصر الأخرى.
أمثلة عملية
لنأخذ بعض الأمثلة البسيطة:
body {
background-color: lightblue;
}p {
color: green;
font-size: 18px;
font-family: Arial;
}h1 {
color: white;
background-color: black;
text-align: center;
}الخاتمة
في هذه المقدمة تعرفنا على ما هي CSS، أهميتها، كيفية كتابة القواعد، طرق استخدامها، بالإضافة إلى مفهوم بسيط عن الـ Box Model وبعض الأمثلة العملية. CSS تعتبر حجر الأساس الذي يمنح صفحات الويب الشكل الاحترافي. في الدروس القادمة يمكن التعمق أكثر والتعرف على أدوات متقدمة مثل Flexbox و Grid.
إذا أعجبك الموضوع لا تنسَ مشاركته مع أصدقائك، ومتابعة المدونة للمزيد من الدروس في تصميم وتطوير المواقع.