عرض CSS وتغييره

Kayce Basques

Sofia Emelianova

أكمِل هذه البرامج التعليمية التفاعلية للتعرّف على أساسيات عرض ملف CSS للصفحة وتغييره باستخدام أدوات مطوّري البرامج في Chrome.

عرض ملف CSS الخاص بعنصر

1. انقر بزر الماوس الأيمن على نص Inspect me! أدناه واختَر فحص. يتم فتح لوحة العناصر في "أدوات مطوّري البرامج".

   فحصنا

2. لاحظ عنصر Inspect me! المميّز باللون الأزرق في شجرة نموذج DOM.

   

3. في شجرة نموذج عناصر المستند (DOM)، ابحث عن قيمة سمة data-message للعنصر Inspect me!.

4. أدخِل قيمة السمة في مربّع النص أدناه.

5. في علامة التبويب العناصر > الأنماط، ابحث عن قاعدة الفئة aloha.

   تعرض علامة التبويب الأنماط قواعد CSS التي يتم تطبيقها على أي عنصر يتم اختياره في شجرة نموذج DOM، والذي من المفترض أن يظل العنصر Inspect me!.

6. تحدّد فئة aloha قيمة لسمة padding. أدخِل هذه القيمة ووحدتها بدون مسافات في مربّع النص أدناه.

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

إضافة تعريف CSS إلى عنصر

استخدِم علامة التبويب الأنماط عندما تريد تغيير تعريفات CSS أو إضافتها إلى عنصر.

1. انقر بزر الماوس الأيمن على النص Add a background color to me! أدناه واختر فحص.

   إضافة لون للخلفية

2. انقر على element.style بالقرب من أعلى علامة التبويب الأنماط.

3. اكتب background-color واضغط على Enter.

4. اكتب honeydew واضغط على Enter. في شجرة DOM، يمكنك رؤية أنّه تم تطبيق تعريف نمط مضمّن على العنصر.

إضافة فئة CSS إلى عنصر

استخدِم علامة التبويب الأنماط للاطّلاع على كيفية ظهور العنصر عند تطبيق فئة CSS على عنصر أو إزالته منه.

1. انقر بزر الماوس الأيمن على العنصر Add a class to me! أدناه واختَر فحص.

   أضِف صفًا إليّ.

2. انقر على .cls. تعرض "أدوات مطوّري البرامج" مربّع نص يمكنك من خلاله إضافة فئات إلى العنصر الذي تم اختياره.

3. اكتب color_me في مربّع نص إضافة صف جديد، ثم اضغط على مفتاح Enter. يظهر مربّع اختيار أسفل مربع نص إضافة فئة جديدة، حيث يمكنك تفعيل الفئة أو إيقافها. إذا تم تطبيق أي فئات أخرى على العنصر Add a class to me!، ستتمكّن أيضًا من تفعيلها أو إيقافها من هنا.

إضافة حالة زائفة إلى فئة معيّنة

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

1. مرِّر مؤشر الماوس فوق نص Hover over me! أدناه. يتغيّر لون الخلفية.

   مرِّر مؤشر الماوس فوقي.

2. انقر بزر الماوس الأيمن على النص Hover over me! واختَر فحص.

3. في علامة التبويب الأنماط، انقر على :hov.

4. ضع علامة في مربّع الاختيار :hover. يتغيّر لون الخلفية كما في السابق، حتى إذا لم يكن مؤشر الماوس فوق العنصر.

لمزيد من المعلومات، يُرجى الاطّلاع على تبديل فئة زائفة.

تغيير سمات عنصر

استخدِم الرسم البياني التفاعلي نموذج المربّع في علامة التبويب الأنماط لتغيير العرض أو الارتفاع أو الحشو أو الهامش أو طول الحدّ لعنصر معيّن.

1. انقر بزر الماوس الأيمن على العنصر Change my margin! أدناه واختَر فحص.

   تغيير الهامش

2. للاطّلاع على نموذج المربّع، انقر على الزر إظهار الشريط الجانبي في شريط الإجراءات ضمن علامة التبويب الأنماط.

3. في الرسم البياني نموذج المربّع في علامة التبويب الأنماط، مرِّر مؤشر الماوس فوق المسافة البادئة. يتم تمييز سمة الحشو للعنصر في إطار العرض.

4. انقر مرّتين على الهامش الأيمن في نموذج العلبة. لا يتضمّن العنصر حاليًا هوامش، لذا تكون قيمة margin-left هي -.

5. اكتب 100 واضغط على Enter.

يتم ضبط نموذج Box تلقائيًا على وحدات البكسل، ولكنه يقبل أيضًا قيمًا أخرى، مثل 25% أو 10vw.

ملاحظة مهمة: بدلاً من ذلك، في تعريفات القواعد في علامة التبويب الأنماط، يمكنك تغيير خصائص الطول ووحداتها باستخدام المؤشر.