مقدمة في CSS
1. ما هي CSS؟
CSS (Cascading Style Sheets) هي لغة تستخدم لتنسيق وتجميل صفحات الويب. بينما تُستخدم HTML لبناء الهيكل الأساسي للصفحة، تُستخدم CSS للتحكم في شكل هذا الهيكل، مثل الألوان، الخطوط، الهوامش، والتخطيطات.
2. أهمية CSS
- فصل المحتوى عن التصميم: يمكنك كتابة المحتوى (HTML) بشكل مستقل عن التصميم (CSS)، مما يجعل الصفحة أكثر مرونة وسهولة في التعديل.
- التوافق مع الشاشات المختلفة: تساعد CSS في جعل الموقع متجاوبًا مع الشاشات المختلفة (مثل الشاشات الصغيرة للهواتف والشاشات الكبيرة للحواسيب).
- إعادة الاستخدام: يمكنك استخدام نفس ملف CSS في عدة صفحات، مما يوفر الوقت والجهد.
3. كيفية إضافة CSS إلى HTML
هناك ثلاث طرق لإضافة CSS إلى HTML:
-
Inline CSS: إضافة CSS مباشرة داخل وسوم HTML باستخدام السمة
style.<p style="color: red;">هذا نص باللون الأحمر</p> -
Internal CSS: إضافة CSS داخل ملف HTML باستخدام وسم
<style>في قسم<head>.<head> <style> p { color: blue; } </style> </head> -
External CSS: إنشاء ملف CSS خارجي وربطه بملف HTML باستخدام وسم
<link>في قسم<head>.<head> <link rel="stylesheet" href="styles.css"> </head>وفي ملف
styles.css:p { color: green; }
4. الهيكل الأساسي لقواعد CSS
كل قاعدة CSS تتكون من:
- المحدد (Selector): يحدد العنصر الذي سيتم تطبيق الأنماط عليه.
- الخاصية (Property): خاصية من خصائص العنصر (مثل اللون، الحجم).
- القيمة (Value): القيمة التي سيتم تطبيقها على الخاصية.
مثال:
h1 {
color: blue;
font-size: 24px;
}
في هذا المثال:
h1هو المحدد.colorوfont-sizeهما الخصائص.blueو24pxهما القيم.
5. الخطوة الأولى: إنشاء ملف HTML وCSS
- قم بإنشاء ملف HTML أساسي مثل
index.html. - قم بإنشاء ملف CSS باسم
styles.css. - اربط ملف CSS بملف HTML باستخدام وسم
<link>كما تم شرحه سابقًا.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الدرس الأول في CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>مرحبًا بك في عالم CSS!</h1>
<p>هذا النص سيتم تنسيقه باستخدام CSS.</p>
</body>
</html>
6. تجربة بسيطة
افتح styles.css وأضف الكود التالي:
h1 {
color: blue;
text-align: center;
}
p {
color: gray;
font-size: 18px;
}
ثم افتح ملف HTML في المتصفح لترى تأثير CSS على النص.
الواجب:
- حاول تغيير الألوان في
styles.cssولاحظ تأثيرها. - جرب إضافة المزيد من الخصائص مثل
background-colorوfont-familyللعناصر.
بهذا نكون قد انتهينا من الدرس الأول. في الدرس القادم سنتعمق في أنواع المحددات (Selectors) واستخداماتها.
