1. ما هي CSS؟
CSS (Cascading Style Sheets) هي لغة تُستخدم لتنسيق وتجميل صفحات الويب. بينما تُستخدم HTML لبناء الهيكل الأساسي للصفحة، تُستخدم CSS للتحكم في شكل هذا الهيكل، مثل الألوان، الخطوط، الهوامش، والتخطيطات.
2. أهمية CSS
- فصل المحتوى عن التصميم: يمكنك كتابة المحتوى (HTML) بشكل مستقل عن التصميم (CSS)، مما يجعل الصفحة أكثر مرونة وسهولة في التعديل.
- التوافق مع الشاشات المختلفة: تساعد CSS في جعل الموقع متجاوبًا مع الشاشات المختلفة (مثل الهواتف المحمولة والحواسيب).
- إعادة الاستخدام: يمكنك استخدام نفس ملف CSS في عدة صفحات، مما يوفر الوقت والجهد.
3. طرق إضافة CSS إلى HTML
هناك ثلاث طرق لإضافة CSS إلى HTML:
1. Inline CSS: يتم إضافة الأنماط مباشرة داخل وسوم HTML باستخدام السمة `style`
كود html
<p style="color: red;">هذا نص باللون الأحمر</p>
2. Internal CSS: يتم إضافة CSS داخل ملف HTML باستخدام وسم `<style>` في قسم `<head>`
كود html
<head>
<style>
p {
color: blue;
}
</style>
</head>
3. External CSS: يتم إنشاء ملف CSS خارجي وربطه بملف HTML باستخدام وسم `<link>` في قسم `<head>`
كود html
<head>
<link rel="stylesheet" href="styles.css">
</head>
في ملف `styles.css`:
كود css
p {
color: green;
}
4. هيكل قواعد CSS
كل قاعدة في CSS تتكون من:
- المحدد (Selector): يحدد العنصر الذي سيتم تطبيق الأنماط عليه.
- الخاصية (Property): خاصية من خصائص العنصر (مثل اللون أو الحجم).
- القيمة (Value): القيمة التي سيتم تعيينها لتلك الخاصية.
مثال:
كود css
h1 {
color: blue;
font-size: 24px;
}
في هذا المثال:
`h1` هو المحدد.
`color` و`font-size` هما الخصائص.
`blue` و`24px` هما القيم.
5. الخطوة الأولى: إنشاء ملف HTML وCSS
- قم بإنشاء ملف HTML أساسي، وليكن اسمه `index.html`.
- قم بإنشاء ملف CSS، وليكن اسمه `styles.css`.
- اربط ملف CSS بملف HTML باستخدام وسم `<link>` كما تم شرحه سابقًا.
كود html
<!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` وأضف الكود التالي:
كود css
h1 {
color: blue;
text-align: center;
}
p {
color: gray;
font-size: 18px;
}
ثم افتح ملف HTML في المتصفح لترى تأثير CSS على النص.
الواجب:
- حاول تغيير الألوان في `styles.css` ولاحظ تأثيرها.
- جرب إضافة المزيد من الخصائص مثل `background-color` و `font-family` للعناصر.
0 تعليقات