CSS اختصار لـ Cascading Style Sheets، وهي لغة تنسيق تُستخدم لتحديد شكل وتصميم صفحات الويب. بمعنى آخر، CSS يُستخدم للتحكم في كيفية عرض عناصر HTML على الصفحة، سواء كان النصوص، الصور، الألوان، الأبعاد، التباعد، أو أي نوع آخر من التنسيقات.
لو فكرنا في HTML كـ “هيكل” الموقع، فإن CSS هو “التصميم” أو “المظهر” الذي يحدد كيفية ظهور هذا الهيكل. CSS يجلب الحياة للصفحة ويجعلها أكثر جاذبية وسهولة في التفاعل.
لماذا نستخدم CSS؟
- الفصل بين المحتوى والتصميم:
يسمح لك CSS بفصل المحتوى (المكتوب باستخدام HTML) عن الشكل (التصميم الذي تضعه باستخدام CSS)، مما يسهل إدارة الموقع. - تحسين تجربة المستخدم:
باستخدام CSS، يمكنك تحسين تجربة المستخدم بتحديد التباعد، الألوان، التفاعلات مع العناصر، وتقنيات التصميم الأخرى مثل التمرير والتأثيرات. - سهولة الصيانة:
CSS يسهل تعديل وتحديث تصميم الموقع، حيث يمكنك تغيير أنماط الموقع بالكامل عن طريق تعديل ملف واحد فقط. - التصميم المتجاوب:
CSS يسمح لك بإنشاء تصميمات متجاوبة (Responsive) تعمل بشكل جيد على أجهزة مختلفة مثل الهواتف، التابلت، وأجهزة الكمبيوتر.
مفاهيم أساسية في CSS
1. تحديد الأنماط (Selectors)
الـ Selector هو العنصر الذي تحدده في CSS لاستهدافه وتحديد الأنماط الخاصة به. يمكن أن يكون Selector:
- عنصر HTML: مثل
p,h1,div. - فئة (Class): مثل
.class-name. - معرف (ID): مثل
#id-name.
مثال:
p {
color: red;
}
.class-name {
font-size: 20px;
}
#id-name {
background-color: blue;
}
في هذا المثال:
pيحدد كل الفقرات ويجعل النص باللون الأحمر..class-nameيحدد العناصر التي تحتوي على الفئةclass-nameويضبط حجم الخط.#id-nameيحدد العنصر الذي يحتوي على المعرفid-nameويضبط خلفيته باللون الأزرق.
2. الخصائص (Properties) والقيم (Values)
في CSS، تقوم بتحديد الخصائص (Properties) التي تريد تعديلها على العنصر، مثل اللون أو الحجم، وتحدد القيم (Values) المناسبة لها.
مثال:
h1 {
color: green; /* الخاصية هي اللون، والقيمة هي الأخضر */
font-size: 30px; /* الخاصية هي حجم الخط، والقيمة هي 30 بكسل */
}
3. التباعد (Spacing)
يمكنك التحكم في التباعد بين العناصر باستخدام الخصائص التالية:
- margin: المسافة بين العنصر والعناصر الأخرى من الخارج.
- padding: المسافة داخل العنصر بين المحتوى وحدوده.
مثال:
div {
margin: 20px; /* مسافة 20 بكسل من الخارج */
padding: 10px; /* مسافة 10 بكسل داخل العنصر */
}
4. الخلفية (Background)
CSS يقدم العديد من الخصائص لتخصيص الخلفية مثل background-color و background-image.
مثال:
body {
background-color: lightblue; /* تحديد اللون الخلفي */
}
div {
background-image: url('image.jpg'); /* تعيين صورة كخلفية */
background-size: cover; /* جعل الصورة تغطي كامل العنصر */
}
5. الخطوط (Fonts)
يمكنك تخصيص الخطوط في CSS باستخدام خصائص مثل font-family و font-size و font-weight.
مثال:
h1 {
font-family: Arial, sans-serif; /* تحديد نوع الخط */
font-size: 24px; /* تحديد حجم الخط */
font-weight: bold; /* جعل الخط عريض */
}
6. التأثيرات (Effects)
CSS يتيح لك إضافة العديد من التأثيرات مثل التحولات (Transitions) والتأثيرات عند المرور بالفأرة (Hover).
- hover: لتحديد تأثير عند مرور الفأرة على العنصر.
- transition: لإضافة تأثيرات سلسة عند تغيير الخصائص.
مثال:
button {
background-color: blue;
color: white;
transition: background-color 0.3s ease; /* تغيير اللون مع تأثير سلس */
}
button:hover {
background-color: green; /* عند المرور على الزر، يتغير اللون إلى الأخضر */
}
7. التصميم المتجاوب (Responsive Design)
CSS يتيح لك إنشاء تصميمات متجاوبة باستخدام media queries. هذه الأداة تسمح لك بتعديل الأنماط بناءً على حجم الشاشة.
مثال:
@media (max-width: 600px) {
body {
background-color: lightgreen;
}
h1 {
font-size: 18px;
}
}
في هذا المثال، عندما يكون عرض الشاشة أقل من 600 بكسل، سيتغير لون الخلفية إلى lightgreen، ويصبح حجم النص h1 18 بكسل.
8. الإطارات (Borders)
يمكنك إضافة حدود (Borders) حول العناصر باستخدام border.
مثال:
div {
border: 2px solid black; /* يضيف حدود 2 بكسل باللون الأسود */
border-radius: 10px; /* يجعل الزوايا دائرية */
}
كيفية إضافة CSS إلى صفحات الويب؟
هناك 3 طرق لإضافة CSS إلى صفحة HTML:
1. إدراج CSS في ملف خارجي (External CSS)
يمكنك ربط صفحة HTML بملف CSS خارجي باستخدام وسم <link> في قسم <head> في صفحة HTML.
مثال:
<head>
<link rel="stylesheet" href="styles.css">
</head>
2. إضافة CSS داخل صفحة HTML (Internal CSS)
يمكنك إضافة CSS داخل الصفحة باستخدام وسم <style> في قسم <head>.
مثال:
<head>
<style>
h1 {
color: red;
}
</style>
</head>
3. إضافة CSS مباشرة داخل العناصر (Inline CSS)
يمكنك إضافة CSS مباشرة داخل العنصر باستخدام السمة style.
مثال:
<h1 style="color: red;">مرحبا بك في HTML!</h1>
الخاتمة
CSS هي لغة أساسية لتنسيق وتصميم صفحات الويب. من خلالها، يمكنك التحكم في كيفية عرض النصوص، الصور، الألوان، والتباعد بين العناصر. تعلم CSS يعتبر خطوة ضرورية لأي مطور ويب، لأنه يسهل عليك جعل مواقع الويب أكثر جمالًا وتفاعلًا.
اترك تعليقاً