بدايتك لتعلم CSS واستخداماتها
أهلاً بك في أول خطوة نحو تحويل صفحات الويب الجامدة إلى لوحات فنية تفاعلية. في هذا الدرس، سنتعرف على لغة CSS، وهي العصب الرئيسي لجماليات الويب. هذا الدرس هو مجرد مقدمة نظرية وتطبيقية بسيطة لتعرف “ماذا ستدرس”. لا تقلق من كثرة التفاصيل، ففي الدروس القادمة سنقوم بشرح كل خاصية وكل كود بالتفصيل الممل، خطوة بخطوة. اعتبر هذا الدرس خريطة الطريق لما هو قادم.
ما هي لغة CSS ولماذا نحتاجها؟
لغة CSS هي اختصار لـ (Cascading Style Sheets)، أو “أوراق الأنماط المتتالية”. إذا كانت لغة HTML تمثل “الهيكل العظمي” للموقع، فإن CSS تمثل “الجلد والملابس والمظهر العام”.
مفهوم CSS ببساطة
- الدور الأساسي: هي اللغة المسؤولة عن وصف كيفية عرض عناصر HTML على الشاشة. هي التي تحدد الألوان، الخطوط، المسافات، وتخطيط الصفحة (Layout).
- التشبيه المعماري: تخيل أنك تبني منزلاً.
- الـ HTML هو الجدران الخرسانية والأعمدة (البناء الأساسي).
- الـ CSS هو الدهانات، الديكور، ترتيب الأثاث، الإضاءة، وشكل النوافذ (التصميم والجماليات).
- فصل المحتوى عن التصميم: أهم ميزة لـ CSS هي أنها تمكنك من فصل “محتوى الموقع” (النصوص والصور) عن “تصميم الموقع”. هذا يعني أنه يمكنك تغيير شكل الموقع بالكامل بتعديل ملف واحد فقط دون المساس بملفات HTML.
أهمية استخدام CSS
- التحكم الكامل في المظهر: تمنحك دقة متناهية في التحكم بحجم الخطوط، أنواعها، ألوان الخلفيات، والمسافات بين العناصر بالبيكسل.
- توفير الوقت والجهد: يمكنك كتابة ملف CSS واحد وربطه بمئات من صفحات HTML. إذا أردت تغيير لون العناوين في كل الموقع، تقوم بتعديل سطر واحد فقط في ملف CSS.
- التصميم المتجاوب (Responsive Design): بفضل CSS، يمكننا جعل الموقع يظهر بشكل ممتاز على شاشات الكمبيوتر، وبشكل مختلف ومناسب على شاشات الهواتف المحمولة، باستخدام نفس كود الـ HTML.
- تحسين تجربة المستخدم (UX): المواقع الجميلة والمنظمة تجعل الزائر يبقى لفترة أطول ويتفاعل مع المحتوى بسهولة.
اختر – ما هي الوظيفة الأساسية للغة CSS في تطوير المواقع؟
(أ) بناء الهيكل الأساسي للصفحة وإضافة النصوص. (ب) برمجة الوظائف المعقدة وقواعد البيانات. (ج) التحكم في شكل وتصميم ومظهر عناصر HTML. (د) رفع الموقع على خوادم الإنترنت.
الإجابة: (ج) التحكم في شكل وتصميم ومظهر عناصر HTML. (لأن HTML للهيكل، و CSS للتصميم).
بنية كود CSS (Syntax)
لكي يفهم المتصفح ما تريده، يجب أن تكتب أوامر CSS بطريقة محددة (Syntax). تتكون قاعدة CSS من جزأين رئيسيين: “المُحدد” و “كتلة الإعلان”.
مكونات القاعدة (The Rule Set)
- المُحدد (Selector): هو الجزء الذي يخبر المتصفح “أي عنصر” في الصفحة تريد تنسيقه (مثلاً: هل تريد تنسيق الفقرات p؟ أم العناوين h1؟).
- كتلة الإعلان (Declaration Block): تبدأ بقوس معقوف
{وتنتهي بقوس معقوف}. وداخلها نكتب التنسيقات. - الخاصية (Property): هي الشيء الذي تريد تغييره (مثلاً: اللون
color، حجم الخطfont-size). - القيمة (Value): هي القيمة الجديدة للخاصية (مثلاً: أحمر
red، 20 بيكسل20px). - علامات الترقيم: مهمة جداً! نضع نقطتين رأسيتين
:بين الخاصية والقيمة، ونضع فاصلة منقوطة;بعد كل سطر تنسيق.
مثال عملي على البنية
/* هذا هو المحدد، اخترنا كل الفقرات */
p {
color: red; /* الخاصية: القيمة (تغيير اللون لأحمر) */
font-size: 20px; /* الخاصية: القيمة (تغيير حجم الخط) */
text-align: center; /* الخاصية: القيمة (جعل النص في المنتصف) */
}
شرح الكود أعلاه: في هذا المثال، سيقوم المتصفح بالبحث عن كل وسم <p> في الصفحة، ويقوم بتلوين النص بالأحمر، وجعل حجمه 20 بيكسل، ومحاذاة النص في المنتصف.
اختر – أي من العلامات التالية تُستخدم لإنهاء سطر التنسيق في CSS؟
(أ) النقطتان الرأسيتان (:). (ب) الفاصلة المنقوطة (;). (ج) القوس المعقوف (}). (د) علامة التنصيص (“).
الإجابة: (ب) الفاصلة المنقوطة (;). (يجب وضعها في نهاية كل سطر خاصية وقيمة).
طرق إضافة CSS إلى صفحة HTML
هناك ثلاث طرق لكتابة كود CSS وربطه بصفحة الويب. سنعرف الفروقات بينهم ومتى نستخدم كل طريقة.
مقارنة بين طرق الإضافة الثلاث
| الطريقة | الوصف | مكان الكتابة | الاستخدام المفضل |
|---|---|---|---|
| Inline CSS (الداخلي في السطر) | كتابة التنسيق مباشرة داخل وسم HTML باستخدام خاصية style. | داخل وسم البداية للعنصر نفسه. | نادر جداً (للتجارب السريعة فقط). |
| Internal CSS (الداخلي في الصفحة) | كتابة كود CSS داخل وسم <style> في نفس الصفحة. |
في قسم <head> لملف HTML. |
للمواقع المكونة من صفحة واحدة. |
| External CSS (الخارجي – ملف منفصل) | كتابة الكود في ملف خارجي بامتداد .css وربطه بالصفحة. | ملف منفصل تماماً، ويتم استدعاؤه. | الطريقة الاحترافية والأكثر استخداماً. |
1. External CSS (الملف الخارجي) – الطريقة الأفضل
<!-- يتم وضع هذا الكود داخل قسم head في ملف HTML -->
<head>
<link rel="stylesheet" href="style.css">
</head>
2. Internal CSS (الداخلي في الرأس)
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
</style>
</head>
اختر – لماذا يُفضل استخدام ملف CSS خارجي (External) عن الطرق الأخرى؟
(أ) لأنه يجعل تحميل الصفحة أبطأ. (ب) لأنه يسمح بتطبيق نفس التنسيق على صفحات متعددة من مكان واحد. (ج) لأنه الطريقة الوحيدة لتلوين النصوص. (د) لأنه يعمل فقط مع متصفح كروم.
الإجابة: (ب) لأنه يسمح بتطبيق نفس التنسيق على صفحات متعددة من مكان واحد. (سهولة الصيانة والتعديل).
المحددات الأساسية (Selectors)
كيف تخبر CSS بأنك تريد تلوين “هذا الزر بالتحديد” وليس كل الأزرار؟ هنا يأتي دور المحددات (Selectors). سنشرح أهم 3 أنواع للمبتدئين.
أنواع المحددات
- محدد العنصر (Element Selector): يختار كل العناصر التي لها نفس اسم الوسم (مثل
p,h1,div).- مثال:
p { color: blue; }سيجعل كل الفقرات زرقاء.
- مثال:
- محدد الكلاس (Class Selector): الأكثر استخداماً. يختار العناصر التي تحمل
classمعين. نستخدم قبله نقطة (.).- مثال:
.my-text { color: red; }سيختار أي عنصر لديهclass="my-text".
- مثال:
- محدد المعرف (ID Selector): يستخدم لعنصر واحد فريد في الصفحة. نستخدم قبله علامة الشباك (#).
- مثال:
#header-logo { width: 100px; }سيختار العنصر الذي لديهid="header-logo".
- مثال:
مثال شامل على المحددات
/* 1. تنسيق عام لكل العناوين h2 */
h2 {
color: black;
}
/* 2. تنسيق لعناصر متعددة تحمل كلاس special */
/* نستخدم النقطة (.) للكلاس */
.special {
background-color: yellow;
font-weight: bold;
}
/* 3. تنسيق لعنصر وحيد يحمل آي دي main-button */
/* نستخدم الشباك (#) للآي دي */
#main-button {
background-color: green;
color: white;
padding: 10px;
}
اختر – إذا أردت تطبيق تنسيق على مجموعة من العناصر المختلفة في أماكن متفرقة من الصفحة، ماذا تستخدم؟
(أ) محدد المعرف (ID) باستخدام #. (ب) محدد الكلاس (Class) باستخدام .. (ج) محدد العنصر (Element). (د) لا يمكن فعل ذلك.
الإجابة: (ب) محدد الكلاس (Class) باستخدام .. (الكلاس يمكن تكراره لأكثر من عنصر، بينما الـ ID يجب أن يكون فريداً).
ألوان النصوص والخلفيات
لنختم هذا الدرس بشيء ممتع، وهو كيفية التعامل مع الألوان. في CSS، الألوان هي الروح التي تعطي الحياة للتصميم.
طرق كتابة الألوان
- أسماء الألوان (Color Names): كتابة اسم اللون بالإنجليزية (مثل:
red,blue,green,orange). هناك حوالي 140 اسم لون معروف. - نظام Hex Code (الست عشرية): الأكثر شيوعاً. يبدأ بـ # ثم 6 أرقام وحروف (مثل:
#ff0000للأحمر،#000000للأسود،#ffffffللأبيض). - نظام RGB: تحديد نسبة الأحمر والأخضر والأزرق (مثل:
rgb(255, 0, 0)).
خصائص الألوان والخلفية
body {
/* تغيير لون خلفية الصفحة بالكامل */
background-color: #f0f0f0; /* رمادي فاتح جداً */
}
h1 {
/* تغيير لون النص */
color: #333333; /* رمادي غامق */
/* إضافة لون خلفية للنص فقط */
background-color: gold;
}
p {
/* استخدام نظام RGB */
color: rgb(0, 100, 255); /* أزرق */
}
اختر – أي خاصية مما يلي تستخدم لتغيير لون “خلفية” العنصر؟
(أ) color. (ب) font-color. (ج) background-color. (د) text-background.
الإجابة: (ج) background-color. (خاصية color تستخدم للنص فقط، أما الخلفية فلها background-color).