هذا الدرس يتطلع إلى تحسين صور HTML باستخدام أوراق نمط متتالية (CSS). سنبدأ بمحددات CSS - أدوات لاستهداف عناصر HTML محددة.

أوراق نمط متتالية (CSS)

CSS تملي شكل مكونات HTML: اللون ، التباعد ، الحجم ، وأكثر من ذلك. بينما يمكنك تصميم العناصر الفردية باستخدام السمات المضمونة يتضمن نهجًا أكثر فعالية استخدام عنصر داخل

قسم من html أو ملف css منفصل (مثل ]) مرتبط بـ HTML باستخدام :

أو

هذا ينطبق نفس النمط على جميع العناصر

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

اختيار عناصر html

The

p في p {color: red ؛ }

يختار كل العناصر

. للهياكل الأكثر تعقيدًا ، id و class السمات توفر تحكمًا أدق. class and id selectors

يمكن أن يكون لكل عنصر معرف فريد

. محددات المعرف (#idname

) عناصر الهدف بواسطة معرف

. ومع ذلك ، يجب أن يكون المعرف معرف فريدًا ، مما يحد من مرونتها. توفر الفصول براعة أكبر. يمكن لعناصر متعددة مشاركة نفس الفصل. محددات الفئة (. className ) عناصر الهدف مع تلك الفئة. يمكن أن تحتوي العناصر على فئات متعددة (على سبيل المثال ،

).

. red-text {color: red ؛ } أنماط جميع العناصر مع red-text

class.

مخططات combinator يمثل نموذج كائن المستند (DOM) بنية الصفحة كشجرة. محددات combinator الاستفادة من هذا التسلسل الهرمي. div p : تحدد الكل

عناصر داخل عناصر (أحفاد).

div> p

: يختار فقط الأطفال المباشرين

• عناصر عناصر. p span : يختار
• مباشرة بعد
  . p ~ span : يختار كل
• شقيقات يتبعون
  .
• يتم تثبيط مجموعات combinator المعقدة بشكل مفرط. يمكنك دمجها مع محددات الفصل (على سبيل المثال ، . intro p ).
pseudo-selectors

عناصر نمط الفئة الزائفة على أساس حالتها (على سبيل المثال ، a: hover ، a: نشط

، a: زيارة ). مستهدف محددات العناصر الزائفة الأجزاء لعنصر (على سبيل المثال ،

:: First-Letter

).

محددات أخرى

*: المحدد العالمي ، اختيار جميع العناصر. محددات المجموعة (على سبيل المثال ، H1 ، H2 ، P

): حدد أنواع العناصر المتعددة.

محددات السمات (على سبيل المثال ، p [lang]

،

• مزيد من القراءة:
• تصميم مستجيب
• صور مستجيبة الرسوم المتحركة CSS
ظهر هذا المنشور في الأصل على thedevspace.