دليل استخدام محددات CSS

الـ CSS أو ورقات التنسيق المتتالية (Cascading Style Sheets) هي لغة تصميم تُستخدم لتحديد مظهر وتخطيط الوثائق المكتوبة بلغة البرمجة (HTML). ومن الأدوات الأساسية التي تُستخدم في الـ CSS هي المحددات (Selectors). في هذا المقال، سنُركز على أنواع مختلفة من محددات CSS وكيفية استخدامها بفعالية لتحسين تجربة المستخدم وتصميم الواجهات. سيكون هذا الدليل مفيدًا للأشخاص الذين يبدأون رحلتهم في عالم تصميم UX/UI وحتى المُستخدمين متوسطي المستوى.

نقطة البداية في هذا الدليل ستكون معرفة الفارق بين محددات CSS المختلفة وكيف يمكن استخدام كل منها لتحقيق التصميم المطلوب.

CSS Universal Selector (محدد CSS العام)

التحكم الكامل في تصميم الصفحة مع محدد CSS العام.

محدد CSS العام، الذي يُعبّر عنه بالرمز *، يُمكنه تطبيق الأساليب على جميع العناصر داخل الصفحة، بغض النظر عن نوع العنصر أو الوسم. هذا يُعطي المصممين قدرة فائقة للتحكم في شكل الصفحة بأكملها بسهولة.

مثال (Example):

* {
  margin: 0;
  padding: 0;
}

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

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

إذا كنت مبتدئًا في عالم تصميم UX/UI، فإن فهم متى وكيفية استخدام محدد CSS العام يُعدّ خطوة مهمة لتحقيق تصاميم جذابة وفعّالة.

CSS Element Type Selector (محدد نوع العنصر في CSS)

تطبيق الأنماط على جميع العناصر من نوع معين.

المحددات النوعية في CSS تُمكنك من استهداف جميع العناصر التي تحمل نفس الوسم داخل الصفحة الويب. ببساطة، إذا كنت ترغب في تحديد مظهر جميع عناصر <p> مثلًا، يمكنك استخدام المحدد النوعي p للقيام بذلك.

مثال (Example):

p {
  font-size: 16px;
  color: #333;
}

في هذا المثال، تم تطبيق الأنماط على جميع عناصر <p> لتكون حجم الخط 16 بكسل ولون النص #333.

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

من الجيد للمصممين المبتدئين تعلم كيفية استخدام المحدد النوعي بطريقة تحقق التوازن بين الفعّالية والتحكم في تصميم الواجهة.

CSS Class Selector (محدد الفئة في CSS)

كيفية إعطاء العناصر مظهرًا مُوحدًا باستخدام محددات الفئة.

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

مثال (Example):

.button {
  background-color: #007bff;
  color: white;
  padding: 14px 20px;
}

في هذا المثال، يتم تطبيق الأنماط على كل عنصر يحمل الصفة class مع القيمة “button”. بمعنى أن كل عنصر HTML مثل <button class="button">Click Me</button> سيحصل على الأنماط المُعرفة داخل .button.

يُعتبر محدد الفئة مناسبًا جدًا للمصممين المبتدئين والمتوسطين في UX/UI لأنه يُوفر التوازن بين التحكم والقدرة على إعادة الاستخدام. ببساطة، يُمكنك تطبيق نفس الفئة على عدد من العناصر لتحقيق مظهر وتصميم مُوحد.

CSS ID Selector (محدد المعرّف في CSS)

تصميم عناصر فريدة بدقة عالية باستخدام محددات المعرّف.

في CSS، يُستخدم محدد المعرّف لتطبيق الأنماط على عنصر واحد فقط داخل الصفحة، الذي يحمل الصفة id مع قيمة مُعينة. يُعبّر عن محدد المعرّف باستخدام الرمز #.

مثال (Example):

#header {
  background-color: #f1f1f1;
  text-align: center;
  padding: 20px;
}

في هذا المثال، يتم تطبيق الأنماط على العنصر الذي يحمل الصفة id بالقيمة “header”. بالتالي، سيتم تطبيق هذه الأنماط على عنصر <div id="header">Welcome to My Website</div>.

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

CSS Combinator Selector (محدد المُركب في CSS)

دمج وتنسيق الأنماط باستخدام محددات المُركب لأدق التحكم.

محددات المُركب في CSS تُمكّنك من تطبيق الأنماط بناءً على العلاقة بين العناصر. تُستخدم محددات المُركب لتحديد كيف ينبغي تطبيق الأنماط على العناصر بناءً على موقعها النسبي لعناصر أخرى في الشجرة الهيكلية للصفحة.

مثال (Example):

div > p {
  color: red;
}

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

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

CSS Pseudo-Class Selector (محدد الفئة الوهمية في CSS)

التفاعل مع حالات معينة للعناصر باستخدام الفئات الوهمية.

الفئات الوهمية في CSS تُمكّنك من تطبيق الأنماط على العناصر بناءً على حالتها، وليس استنادًا فقط إلى اسمها أو موقعها. مثلًا، يمكنك تغيير لون الرابط عندما يمر عليه المؤشر.

مثال (Example):

a:hover {
  color: green;
}

في هذا المثال، يتم تغيير لون النص للرابط عندما يمر عليه المؤشر (hover). يُطبق الأسلوب باستخدام الفئة الوهمية :hover.

يُعتبر محدد الفئة الوهمية من الأدوات المتقدمة في تصميم الواجهات ويُفضل استخدامه لتحسين تجربة المستخدم عن طريق التفاعل مع حالات مختلفة للعناصر.

CSS Pseudo-Element Selector (محدد العنصر الوهمي في CSS)

إضافة تأثيرات تصميمية على جزء معين من العنصر باستخدام العناصر الوهمية.

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

مثال (Example):

p::first-letter {
  font-size: 24px;
  color: blue;
}

في هذا المثال، يتم تغيير حجم الخط ولون الحرف الأول في جميع عناصر <p> باستخدام محدد العنصر الوهمي ::first-letter.

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

CSS Attribute Selector (محدد السمة في CSS)

تحديد العناصر بناءً على السمات وقيمها لمزيد من التحكم في التصميم.

محدد السمة في CSS يُمكّنك من تحديد العناصر بناءً على وجود سمة معينة أو قيمة محددة لها. هذا يوفر لك إمكانية أكبر في التحكم بتصميم العناصر المُختلفة.

مثال (Example):

input[type="text"] {
  width: 100%;
}

في هذا المثال، سيتم تطبيق الأنماط على جميع عناصر <input> التي تحتوي على سمة type بالقيمة “text”. بالتالي، ستصبح عرض هذه العناصر 100%.

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

Using CSS Element Type Selectors (استخدام محددات نوع العنصر في CSS)

أساسيات تطبيق الأنماط على نوع العنصر لبناء واجهات جذابة.

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

مثال (Example):

p {
  text-align: justify;
}

في هذا المثال، سيتم محاذاة جميع النصوص في عناصر <p> على حدود الصفحة من اليمين واليسار.

Using CSS Class Selectors (استخدام محددات الفئة في CSS)

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

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

مثال (Example):

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

في هذا المثال، سيتم تطبيق الأنماط على جميع العناصر التي تحتوي على سمة class بالقيمة “button”.

Using CSS ID Selectors (استخدام محددات المعرّف في CSS)

تطبيق الأنماط على عنصر فريد في الصفحة باستخدام محدد المعرّف.

محددات المعرّف في CSS تُمكنك من تحديد عنصر فريد في الصفحة باستخدام سمة id. عادةً ما يُستخدم هذا النوع من المحددات للتصميمات التي يُفضل ألا تُطبق سوى على عنصر واحد.

مثال (Example):

#header {
  background-color: grey;
  text-align: center;
}

في هذا المثال، سيتم تطبيق الأنماط على العنصر الذي يحتوي على سمة id بالقيمة “header” فقط.

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

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