عرض 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 زائفة على عنصر ما. تتوافق "أدوات مطوري البرامج" مع :active أو :focus أو :focus-within أو :target أو :hover أو :visited أو focus-visible.

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

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

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

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

4. ضَع علامة في مربّع الاختيار :hover. يتغير لون الخلفية كما كان من قبل، على الرغم من أنك لا تحوم في الواقع فوق العنصر.

تغيير أبعاد عنصر

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

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

   تغيير الهامش!

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

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

4. انقر نقرًا مزدوجًا على الهامش الأيسر في نموذج Box. ولا يحتوي العنصر حاليًا على هوامش، لذا فإن قيمة margin-left هي -.

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

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

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