مرحبًا بك مرة أخرى في تعلم البرمجة: HTML & CSS ! اليوم، سنغوص بشكل أعمق في عالم التصميم. حتى الآن، كنا نقوم بتصميم العناصر بشكل مباشر. ولكن ماذا لو كان لديك عنصرين

وتريد أن يبدو كل منهما مختلفًا؟ أدخل محددات CSS!

محددات العناصر

أنت على دراية بهذه الأمور بالفعل، ولكن دعنا نلخصها:

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

تستهدف مجموعة القواعد هذه جميع عناصر

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

يجب أن تبدو متشابهة. للحصول على تصميم أكثر تحديدًا، نحتاج إلى رفع مستوى لعبتنا!

محددات الطبقة

دروس الإنقاذ! هل تريد أن تبدو علامتا

مختلفتين؟ إضافة فئات:

This text is BIG and red.
This text is small and blue.

تحتوي كل علامة

على فئتين. في CSS الخاص بك، استهدف هذه الفئات باستخدام .:

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

بوم! الأنماط المطبقة. قد تتساءل: "لماذا لا يتم دمج الأنماط في فئات أقل؟" سؤال جيد! أحب أن أبقي الفصول الدراسية مرنة. أنت لا تعرف أبدًا متى قد ترغب في إعادة استخدام الحجم الصغير بدون اللون الأزرق.

محددات الهوية

بالنسبة للعناصر الفريدة، استخدم المعرفات. تحقق من ذلك:

My Name is Nolan!

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

#name {
  text-decoration: underline;
}

بسيطة، أليس كذلك؟

أنماط متضاربة

الآن، ماذا لو كان العنصر يحتوي على فئة ومعرف؟ مثله:

Will I be red or blue?

سيكون لونه أحمر! لماذا؟ لأن المعرفات أكثر تحديدًا من الفئات. إليك مثال سريع:

I’m styled by three rulesets!

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

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

تحدي

حان الوقت لرفع مستوى صفحتك الخاصة بمعلومات عني! ها هي مهمتك:

• قم بتعيين الأنماط الافتراضية لـ

  و

  و

  باستخدام محددات العناصر.

• أضف شعارًا تحت اسمك باستخدام علامة

  وقم بتصميمه باستخدام معرف.

• أضف لمسة جمالية على النصوص الأخرى باستخدام محددات الفصل.

العب بالأنماط المتضاربة واكتشف القواعد التي تفوز. هل يمكنك معرفة السبب؟

شكرا على القراءة! اسمحوا لي أن أعرف إذا كان هناك أي موضوعات أخرى ترغبون في استكشافها في هذه السلسلة في التعليقات، أو أخبروني فقط عن مدى استمتاعكم بالسلسلة!