أساسيات CSS: دليل المبتدئين لفهم وتطبيق لغة التنسيق

أهلاً وسهلاً بكم في هذا المقال حول أساسيات CSS! إذا كنت جديدًا في عالم تصميم واجهات المستخدم وتجربة المستخدم، فإن فهم لغة التنسيق CSS (Cascading Style Sheets) يعتبر خطوة مهمة لك. لماذا؟ لأن CSS هو الأداة التي تمنحك القدرة على تنسيق وتزيين صفحات الويب الخاصة بك، وجعلها لا تُنسى وسهلة الاستخدام. في هذا الدليل، سنتناول مجموعة من الموضوعات التي تبدأ من تعريف CSS وصولاً إلى كيفية استخدام الأقواس المتعرجة والفواصل المنقوطة بشكل صحيح.

لن نقم فقط بتقديم النظريات، بل سنعطيك أمثلة عملية يمكنك تطبيقها مباشرة. ونعدك أنك بحلول نهاية هذا المقال، ستكون لديك فهم جيد للأساسيات التي تحتاج إليها للبدء في مشروعك التالي.

يرجى مراعاة أن كلمة “CSS” هي اختصار لـ “Cascading Style Sheets”، وهي تعني “ورقات التنسيق المتدرجة” بالعربية.

تعريف CSS (Definition of CSS)

CSS، أو “ورقات التنسيق المتدرجة” (Cascading Style Sheets)، هو لغة التنسيق التي تُستخدم لوصف مظهر وتصميم صفحة ويب كتبت بلغة HTML. وهو يوفر للمطورين والمصممين القدرة على التحكم الدقيق في التصميم، من الألوان والخطوط، وصولاً إلى التباعد والهيكل العام للصفحة. إنه يضعك في السيطرة على كيفية عرض المحتوى.

والجميل في CSS هو أنه يُمكن للمصممين من تطبيق مجموعة محددة من القواعد لعناصر HTML متعددة، وذلك دون الحاجة لتكرار التعليمات مرارًا وتكرارًا. وهذا يُسهل عملية الصيانة ويجعل تصميم الموقع مُتجانسًا.

يُفضل دائمًا البدء بفهم أساسيات CSS قبل التعمق في مفاهيم أكثر تعقيداً مثل Flexbox أو Grid. لذا، في هذا المقال، سنركز على شرح الأساسيات التي ستُمكنك من البدء في تنسيق صفحاتك بثقة.

قواعد صياغة CSS (CSS Syntax Rules)

في CSS، يتم استخدام “القواعد” لتحديد كيف سيتم تنسيق العناصر داخل صفحات الويب. كل “قاعدة” تتألف من جزأين رئيسيين: “المحدد” (Selector) و”كتلة الإعلان” (Declaration Block).

• المحدد (Selector): هو العنصر الذي ترغب في تنسيقه داخل صفحتك. مثلاً، إذا كنت ترغب في تنسيق جميع عناوين الفقرات في صفحتك، يمكن استخدام المحدد p.
• كتلة الإعلان (Declaration Block): تحتوي على مجموعة من “الإعلانات” التي تُحدد كيف سيتم تنسيق المحدد. كل إعلان يتألف من “الخاصية” (Property) و”القيمة” (Value).

/* مثال على قاعدة CSS */
p {
  color: red;
  font-size: 16px;
}

في هذا المثال، “p” هو المحدد، و”color: red” و”font-size: 16px” هما الإعلانات التي تُحدد كيفية تنسيق هذا المحدد.

من الجدير بالذكر أن CSS هو لغة حساسة لحالة الأحرف، مما يعني أن “Color” و”color” ليستا متماثلتين.

بفهمك لقواعد الصياغة في CSS، ستكون قادرًا على التعبير عن نفسك بشكل أفضل في عالم التصميم وتجربة المستخدم.

المحدد في CSS (CSS Selector)

المحددات في CSS هي الأدوات التي تُمكنك من “اختيار” العناصر التي ترغب في تطبيق القواعد عليها. ببساطة، المحدد يُحدد لأي عنصر ترغب في تطبيق الستايل. وهناك العديد من أنواع المحددات، مثل:

• المحدد العنصري (Element Selector): يتيح لك تطبيق القواعد على كل عنصر من نوع معين، مثل <p> أو <h1>.

p {
  color: blue;
}

المحدد الصفي (Class Selector): يتيح لك تطبيق القواعد على العناصر التي تحتوي على صف معين.

.my-class {
  font-size: 18px;
}

المحدد المعرف (ID Selector): يتيح لك تطبيق القواعد على العنصر الذي يحتوي على معرف معين.

#my-id {
  background-color: yellow;
}

وهناك المزيد من أنواع المحددات والتي تُمكنك من اختيار العناصر بطرق مُتقدمة ودقيقة، مثل المحددات النسبية والمحددات الجذرية. ولكن في هذا المقال، نركز على الأساسيات لمساعدتك على البدء.

كتلة الإعلان في CSS (CSS Declaration Block)

كتلة الإعلان هي الجزء من القاعدة الذي يحتوي على واحدة أو أكثر من الإعلانات لتحديد كيفية تنسيق المحدد. كتلة الإعلان تبدأ وتنتهي بفتح وإغلاق الأقواس المعقوفة {}.

داخل هذه الأقواس، تكتب الإعلانات والتي تتألف من “الخاصية” (Property) و”القيمة” (Value)، ويفصل بينهما برمز النقطتين :. يُنهي الإعلان بفاصلة منقوطة ;.

/* مثال على كتلة إعلان */
p {
  color: green;
  text-align: center;
  font-size: 14px;
}

في هذا المثال، الخاصيات هي color, text-align, و font-size, والقيم المُقابلة لها هي green, center, و 14px.

إذا قمت بنسيان وضع الفاصلة المنقوطة ; بعد الإعلان، قد تواجه مشاكل في تنسيق الصفحة لأن القاعدة التالية لن تُطبق.

من الجدير بالذكر أنه يمكنك تطبيق نفس الإعلانات على محددات متعددة عن طريق فصلهم بفاصلة.

h1, h2, p {
  color: red;
}

بفهمك لكتلة الإعلان، تُصبح لديك القدرة على كتابة قواعد CSS بطريقة مُنظمة وفعّالة.

الخصائص والقيم في CSS

في عالم CSS، الخصائص والقيم تعتبر العناصر الأساسية التي تُحدد كيفية تنسيق العناصر على صفحة الويب. تُستخدم الخصائص لتحديد الجوانب المختلفة للتنسيق، مثل اللون، الحجم، الموقع وغيرها.

• الخصائص (Properties): تُحدد الجانب من التنسيق الذي ترغب في تغييره. مثل color, font-size, margin, padding وغيرها.
• القيم (Property Values): تُحدد القيمة التي تُطبق على الخاصية المُحددة. مثل red, 16px, auto, 50% وغيرها.

/* مثال على استخدام الخصائص والقيم */
p {
  color: red;         /* خاصية: color, قيمة: red */
  font-size: 16px;    /* خاصية: font-size, قيمة: 16px */
  text-align: center; /* خاصية: text-align, قيمة: center */
}

في هذا المثال، تم تحديد لون النص باللون الأحمر وحجم الخط بـ 16 بكسل ومحاذاة النص إلى المركز.

توجد قائمة طويلة من الخصائص والقيم التي يُمكن استخدامها في CSS، ويُمكن العثور على مراجع مُفصلة على الإنترنت للتعرف على المزيد.

تطبيق نفس القواعد على عناصر متعددة

في بعض الحالات، قد ترغب في تطبيق نفس القواعد على عناصر متعددة. بدلاً من كتابة القاعدة مرارًا وتكرارًا لكل عنصر، يُمكنك استخدام فاصلة , لفصل بين المحددات.

h1, h2, p {
  color: blue;
}

في هذا المثال، تم تطبيق اللون الأزرق على العناوين h1 و h2 بالإضافة إلى الفقرات p.

هذا ليس فقط يُسهل عليك التحكم في التنسيق، ولكنه يجعل الكود أكثر قابلية للصيانة. إذا قررت تغيير اللون إلى الأخضر، مثلاً، يمكنك تغييره في مكان واحد فقط بدلاً من تغييره في كل مكان.

وبهذه الطريقة، تُسهل عملية تطوير المواقع وتوفير الوقت والجهد.

الأقواس المعقوفة في CSS

في لغة CSS، الأقواس المعقوفة (Curly braces) {} تُستخدم لتحديد بداية ونهاية كتلة الإعلانات. يُمكنك النظر إليها كبوابات تفتح للإعلانات للدخول وتغلق لإبقائها داخل.

/* مثال على استخدام الأقواس المعقوفة */
div {
  background-color: yellow;  /* بداية الكتلة */
  border: 1px solid black;    /* نهاية الكتلة */
}

في هذا المثال، تم استخدام الأقواس المعقوفة لتحديد كتلة الإعلان التي تُطبق على جميع عناصر div.

إذا نسيت واحدة من هذه الأقواس، ستُعطل جميع القواعد التي تأتي بعدها ولن تُطبق على الصفحة، لذا من المهم دائمًا التأكد من أن كل قاعدة لديها فتحة { وإغلاق }.

ترتيب الخصائص والقيم في CSS

في CSS، يُفضل اتباع ترتيب مُحدد عند كتابة الخصائص والقيم للحفاظ على قواعد التنسيق نظيفة ومنظمة. على الرغم من أن متصفحات الويب لا تفرض ترتيبًا مُحددًا، إلا أن اتباع معايير الأفضليات يُعزز من جودة الكود.

الترتيب المُفضل عادةً ما يكون:

1. الخصائص المُتعلقة بالموقع، مثل position, top, left, إلخ.
2. الخصائص المُتعلقة بالحجم، مثل width, height, margin, إلخ.
3. الخصائص المُتعلقة بالتنسيق، مثل color, font-size, text-align, إلخ.

/* مثال على ترتيب الخصائص والقيم */
div {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px;
  color: red;
}

في هذا المثال، تم ترتيب الخصائص بما يُتوافق مع المعايير الشائعة للترتيب.

استخدام الفاصلة المنقوطة (Semicolons) لإغلاق الإعلان

في CSS، يُستخدم الفاصلة المنقوطة ; لإغلاق كل إعلان داخل كتلة القواعد. إنها تعمل كفاصل بين إعلانات متعددة داخل نفس الكتلة.

/* مثال على استخدام الفاصلة المنقوطة */
p {
  color: red;  /* الفاصلة المنقوطة تغلق الإعلان */
  font-size: 16px; /* الفاصلة المنقوطة تغلق الإعلان */
}

في هذا المثال، تُستخدم الفاصلة المنقوطة لإغلاق كل من الخصائص color و font-size. إذا نسيت إضافة الفاصلة المنقوطة بعد الإعلان، ستُعطل القواعد التالية ولن تُطبق.

تأكد دائمًا من وضع الفاصلة المنقوطة بعد كل إعلان للحفاظ على سلامة الكود.

الختام

لقد تناولنا في هذا المقال مفهوم الـ CSS وكيفية استخدامه لتنسيق صفحات الويب. تعرفنا على مكونات الـ CSS من محددات، وكتل الإعلان، والخصائص، والقيم. وتناولنا أيضًا كيفية تطبيق نفس القواعد على عناصر متعددة، وأهمية الأقواس المعقوفة، والفاصلة المنقوطة في الـ CSS. إذا اتبعت هذه المبادئ البسيطة، ستجد أن عملك في تطوير المواقع سيصبح أسهل وأكثر فعالية.

الأسئلة الشائعة (FAQ)