مرجع ميزات CSS

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

اكتشِف مهام سير العمل الجديدة في هذا المرجع الشامل لميزات "أدوات مطوري البرامج في Chrome" المتعلّقة بعرض CSS وتغييره.

يمكنك الاطّلاع على عرض CSS وتغييرها للتعرّف على الأساسيات.

اختيار عنصر

تتيح لك لوحة العناصر في "أدوات مطوري البرامج" عرض CSS لعنصر واحد أو تغييره في كل مرة.

مثال على عنصر تم اختياره

في لقطة الشاشة، العنصر h1 المميّز باللون الأزرق في شجرة نموذج العناصر في المستند (DOM) هو العنصر المحدّد. على يسار الصفحة، يتم عرض أنماط العنصر في علامة التبويب الأنماط. إلى اليسار، يتم تمييز العنصر في إطار العرض، ولكن فقط لأن الماوس يمرر فوقه في شجرة DOM.

راجع عرض CSS لعنصر للحصول على برنامج تعليمي.

هناك العديد من الطرق لتحديد عنصر:

  • في إطار العرض، انقر بزر الماوس الأيمن على العنصر واختَر فحص.
  • في "أدوات مطوري البرامج"، انقر على اختيار عنصر اختيار عنصر أو اضغط على Command+Shift+C (نظام التشغيل Mac) أو Control+Shift+C (في نظامَي التشغيل Windows وLinux)، ثم انقر على العنصر في إطار العرض.
  • في "أدوات مطوري البرامج"، انقر على العنصر في شجرة نموذج العناصر في المستند (DOM).
  • في "أدوات مطوري البرامج"، نفِّذ طلب بحث مثل document.querySelector('p') في وحدة التحكم، وانقر بزر الماوس الأيمن على النتيجة، ثم اختَر عرض في لوحة العناصر.

عرض خدمة مقارنة الأسعار (CSS)

استخدِم علامتَي التبويب العناصر > الأنماط والمحسوبة لعرض قواعد CSS وتشخيص مشاكل CSS.

تعرض علامة التبويب الأنماط روابط في أماكن مختلفة تؤدي إلى أماكن أخرى، بما في ذلك على سبيل المثال لا الحصر:

  • بجانب قواعد CSS، إلى أوراق الأنماط ومصادر CSS. تفتح هذه الروابط لوحة المصادر. إذا تم تصغير ورقة الأنماط، يُرجى الاطلاع على جعل ملف مصغر قابلاً للقراءة.
  • في القسم مُكتسَب من ...، إلى العناصر الرئيسية.
  • في استدعاءات var()، إلى بيانات الموقع المخصص.
  • في animation خاصية مختصرة، حتى @keyframes.
  • روابط مزيد من المعلومات في تلميحات المستندات
  • والمزيد.

فيما يلي بعض هذه العناصر المميزة:

تم تمييز روابط مختلفة.

يمكن تصميم الروابط بشكل مختلف. إذا لم تكن متأكدًا من وجود رابط، فحاول النقر عليه لمعرفة ذلك.

عرض التلميحات مع وثائق CSS والخصوصية وقيم الخصائص المخصصة

يعرض العناصر > الأنماط تلميحات تتضمن معلومات مفيدة عند تمرير مؤشر الماوس فوق عناصر معينة.

الاطّلاع على مستندات خدمة مقارنة الأسعار (CSS)

للاطّلاع على تلميح يتضمن وصفًا قصيرًا لخدمة CSS، مرِّر مؤشر الماوس فوق اسم الخاصية في علامة التبويب الأنماط.

تلميح يتضمّن مستندات على موقع إلكتروني في CSS

انقر على مزيد من المعلومات للانتقال إلى مرجع CSS لخدمة MDN على هذا الموقع الإلكتروني.

لإيقاف التلميحات، ضَع علامة في المربّع مربّع اختيار عدم عرض.

لتفعيلها مرة أخرى، تحقَّق من الإعدادات. الإعدادات > الإعدادات المفضّلة > العناصر > مربّع اختيار عرض تلميح وثائق CSS.

عرض خصوصية أداة الاختيار

مرِّر مؤشر الماوس فوق أداة الاختيار لعرض تلميح يتضمّن وزن خصوصيته.

التلميح الذي يتضمّن ترجيحًا خاصًا لأداة اختيار مُطابِقة

عرض قيم الخصائص المخصصة

مرِّر مؤشر الماوس فوق الرمز --custom-property للاطّلاع على قيمته في تلميح.

قيمة الخاصية المخصّصة في تلميح.

عرض صفحات CSS غير الصالحة والملغاة وغير النشطة وغيرها

تتعرّف علامة التبويب الأنماط على العديد من أنواع مشاكل CSS وتسلّط الضوء عليها بطرق مختلفة.

يمكنك الاطّلاع على التعرّف على لغة CSS في علامة التبويب "الأنماط".

عرض CSS المطبَّقة على عنصر فقط

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

  1. اختيار عنصر
  2. انتقِل إلى علامة التبويب العناصر المحسوبة في لوحة العناصر.

علامة التبويب Computed

ضع علامة في مربّع الاختيار عرض الكل للاطّلاع على جميع المواقع.

يمكنك الاطّلاع على مقالة فهم لغة CSS في علامة التبويب "محسوبة".

عرض خصائص CSS بترتيب أبجدي

استخدِم علامة التبويب الحساب. راجِع عرض CSS المطبَّقة على عنصر فقط.

عرض مواقع CSS المُكتسَبة

ضَع علامة في مربّع الاختيار عرض الكل في علامة التبويب المحسوبة. راجِع عرض CSS المطبَّقة على عنصر فقط.

بدلاً من ذلك، يمكنك الانتقال إلى علامة التبويب الأنماط والعثور على الأقسام المسماة Inherited from <element_name>.

يمكنك عرض القسم &quot;مُكتسَب من...&quot; في علامة التبويب &quot;الأنماط&quot;.

عرض قواعد خدمة مقارنة الأسعار (CSS)

القواعد هي عبارات CSS تتيح لك التحكم في سلوك CSS. العناصر > الأنماط تعرض القواعد التالية في الأقسام المخصّصة:

الاطّلاع على @property قواعد ضمن القواعد

تتيح لك @property CSS في القاعدة تحديد خصائص CSS المخصصة بشكل صريح وتسجيلها في ورقة أنماط بدون تشغيل أي JavaScript.

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

لتعديل قاعدة @property، انقر مرّتين على اسمها أو قيمتها.

الاطّلاع على @supports قواعد ضمن القواعد

تعرض علامة التبويب الأنماط قواعد CSS لـ @supports إذا تم تطبيقها على عنصر. على سبيل المثال، افحص العنصر التالي:

عرض @supports at-rules.

إذا كان المتصفّح يتيح استخدام الوظيفة lab()، سيظهر العنصر باللون الأخضر، وسيصبح لونه أرجوانيًا.

الاطّلاع على @scope قواعد ضمن القواعد

تعرض علامة التبويب الأنماط قواعد CSS @scope إذا تم تطبيقها على عنصر.

تشكل قواعد @scope الجديدة جزءًا من مواصفات المستوى 6 من التوريث والتسلسل التتالي في CSS. تتيح لك هذه القواعد تحديد نطاق أنماط CSS، أي تطبيق الأنماط بشكل صريح على عناصر معيّنة.

يمكنك الاطّلاع على قاعدة @scope في المعاينة التالية:

  1. افحص النص الظاهر على البطاقة في المعاينة.
  2. في علامة التبويب الأنماط، ابحث عن القاعدة @scope.

قاعدة @scope.

في هذا المثال، تلغي القاعدة @scope إعلان CSS background-color العام لجميع عناصر <p> داخل العناصر التي تحتوي على فئة card.

لتعديل قاعدة @scope، انقر عليها مرّتين.

الاطّلاع على @font-palette-values قواعد ضمن القواعد

تتيح لك @font-palette-values CSS في القاعدة تخصيص القيم التلقائية للسمة font-palette. العناصر > الأنماط تعرض هذه القاعدة في قسم مخصص.

عرض القسم "@font-palette-values" في المعاينة التالية:

  1. افحص السطر الثاني من النص في المعاينة.
  2. في الأنماط، ابحث عن قسم @font-palette-values.

قاعدة @font-palette-values

في هذا المثال، تلغي قيم لوحة الخطوط --New القيم التلقائية للخط الملوّن.

لتعديل القيم المخصّصة، انقر عليها مرّتين.

عرض نموذج المربّع لعنصر

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

نموذج المربع.

لتغيير قيمة، انقر مرّتين عليها.

البحث في CSS لعنصر وفلترته

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

جارٍ تصفية علامة التبويب &quot;الأنماط&quot;.

للبحث أيضًا في الخصائص المكتسَبة في علامة التبويب المحسوبة، ضَع علامة في مربّع الاختيار عرض الكل.

فلترة الخصائص المكتسبة في علامة التبويب &quot;تم احتسابه&quot;.

للانتقال إلى علامة التبويب البيانات المحسوبة، اجمع السمات التي تمت فلترتها في فئات قابلة للتصغير عن طريق وضع علامة في المربّع مجموعة.

تجميع السمات التي تمت فلترتها.

محاكاة صفحة مركّزة

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

جرِّب محاكاة صفحة مركّزة على صفحة العرض التوضيحي هذه:

  1. التركيز على عنصر الإدخال يظهر عنصر آخر تحتها.
  2. افتح "أدوات مطوري البرامج". أصبح قسم "أدوات مطوري البرامج" محلّ التركيز الآن بدلاً من الصفحة، وبالتالي يختفي العنصر من جديد.
  3. في العناصر > الأنماط، انقر على :hov، وضَع علامة في مربّع check_box محاكاة صفحة مركزة وتأكَّد من أنّ العنصر محدّد. يمكنك الآن فحص العنصر الموجود أسفله.

قبل تفعيل الخيار &quot;محاكاة صفحة مركّزة&quot; وبعده

يمكنك أيضًا العثور على الخيار نفسه في لوحة العرض.

إيقاف/تفعيل الفئة الزائفة

لإيقاف فئة زائفة، مثل :active أو :focus أو :focus-within أو :target أو :hover أو :visited أو focus-visible:

  1. اختيار عنصر
  2. في لوحة العناصر، انتقِل إلى علامة التبويب الأنماط.
  3. انقر على :hov.
  4. تحقَّق من الفئة الزائفة التي تريد تفعيلها.

تبديل حالة التمرير الزائفة على أحد العناصر.

في إطار العرض، يظهر أنّ "أدوات مطوري البرامج" تطبّق تعريف background-color على العنصر، مع أنّ هذا العنصر لم يتم تمريره فوقه.

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

عرض العناصر المميزة الزائفة والمكتسَبة

العناصر الزائفة تتيح لك تصميم أجزاء معيّنة من العناصر. تمييز العناصر الزائفة هي أجزاء من المستند بالحالة "مختارة"، ويتم تمييزها كعناصر "مميزة" للإشارة إلى هذه الحالة للمستخدم. على سبيل المثال، هذه العناصر الزائفة هي ::selection و::spelling-error و::grammar-error و::highlight.

كما هو مذكور في المواصفات، عندما تتعارض أنماط متعددة، يحدد التتالي النمط الفائز.

لفهم بشكل أفضل الاكتساب وأولوية القواعد، يمكنك الاطّلاع على العناصر الزائفة الموروثة:

  1. افحص النص أدناه.

    اكتسبتُ نمط العنصر الصوري المميّز لدى أحد والدَيّ. اختَرني.

  2. اختَر جزءًا من النص أعلاه.

  3. في علامة التبويب الأنماط، مرِّر لأسفل للعثور على القسم Inherited from ::selection pseudo of....

اعرض القسم &quot;مكتسَبة&quot; في علامة التبويب &quot;الأنماط&quot;.

عرض الطبقات المتتالية

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

لعرض طبقات التتالي، inspect العنصر التالي وافتح العناصر > الأنماط.

في علامة التبويب Styles (الأنماط)، يمكنك الاطّلاع على الطبقات الثلاث المتتالية وأنماطها: page وcomponent وbase.

تدرج الطبقات.

لعرض ترتيب الطبقات، انقر على اسم الطبقة أو على الزر تبديل الطبقات. تبديل عرض طبقات CSS.

تتمتع طبقة page بأعلى خصوصية، وبالتالي تكون خلفية العنصر خضراء.

لعرض صفحة في وضع الطباعة:

  1. افتح قائمة الطلبات.
  2. ابدأ كتابة Rendering واختر Show Rendering.
  3. بالنسبة إلى القائمة المنسدلة محاكاة وسائط CSS، اختَر طباعة.

الاطّلاع على خدمات مقارنة الأسعار (CSS) المستخدمة وغير المستخدَمة في علامة التبويب "التغطية"

تعرض علامة التبويب "التغطية" خدمات CSS التي تستخدمها الصفحة.

  1. اضغط على Command+Shift+P (نظام التشغيل Mac) أو Control+Shift+P (في أنظمة التشغيل Windows وLinux وChromeOS) بينما يكون التركيز على "أدوات مطوّري البرامج" لفتح قائمة الأوامر.

  2. ابدأ الكتابة باللغة coverage.

    جارٍ فتح علامة التبويب &quot;التغطية&quot; من قائمة الطلبات.

  3. انقر على عرض التغطية. ستظهر علامة التبويب "التغطية".

    علامة التبويب &quot;التغطية&quot;

  4. انقر على يمكنك بدء تغطية قياس حالة التطبيق وإعادة تحميل الصفحة. إعادة التحميل. وتوفّر عمليات إعادة تحميل الصفحة وعلامة التبويب التغطية نظرة عامة على مقدار محتوى CSS (وJavaScript) الذي يتم استخدامه من كل ملف يحمِّله المتصفح.

    نظرة عامة على مقدار استخدام CSS (وJavaScript) وغير استخدامه.

    ويمثل اللون الأخضر CSS المستخدمة. ويمثّل اللون الأحمر لغة CSS غير المستخدَمة.

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

    تحليل مفصّل لصفحات الأنماط المتتالية (CSS) المُستخدَمة وغير المستخدَمة

    في لقطة الشاشة، لا يتم استخدام الأسطر من 55 إلى 57 ومن 65 إلى 67 من devsite-google-blue.css، في حين يتم استخدام الأسطر من 59 إلى 63.

فرض وضع معاينة الطباعة

يُرجى الاطّلاع على المقالة فرض تفعيل "وضع معاينة الطباعة" على أدوات مطوّري البرامج.

نسخ CSS

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

بالإضافة إلى ذلك، يمكنك نسخ خصائص CSS في بنية JavaScript. ويكون هذا الخيار مفيدًا إذا كنت تستخدم مكتبات CSS-in-JS.

لنسخ CSS:

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

  3. حدد أحد الخيارات التالية من القائمة المنسدلة:

    • نسخ البيان لنسخ السمة وقيمتها في بنية CSS: css property: value;
    • نسخ الموقع. يتم نسخ اسم property فقط.
    • نسخ القيمة: سيتم نسخ value فقط.
    • نسخ القاعدة سيتم نسخ قاعدة CSS بالكامل: css selector[, selector] { property: value; property: value; ... }
    • انسخ التعريف بتنسيق JavaScript. لنسخ السمة وقيمتها في بنية JavaScript: js propertyInCamelCase: 'value'
    • يُرجى نسخ كل البيانات. تنسخ جميع السمات وقيمها في قاعدة CSS: css property: value; property: value; ...

    • انسخ جميع التعريفات بتنسيق JavaScript. نسخ جميع الخصائص وقيمها في بنية JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • نسخ كل تغييرات خدمة مقارنة الأسعار (CSS) نسخ التغييرات التي تجريها في علامة التبويب الأنماط في جميع التعريفات

    • عرض القيمة المحسوبة ينقلك إلى علامة التبويب الحسابية.

تغيير CSS

يسرد هذا القسم جميع الطرق التي يمكنك من خلالها تغيير CSS في العناصر > الأنماط.

بالإضافة إلى ذلك، يمكنك إجراء ما يلي:

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

ونظرًا لأن ترتيب التعريفات يؤثر في كيفية تصميم العنصر، يمكنك إضافة تعريفات بطرق مختلفة:

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

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

إضافة تعريف مضمّن

لإضافة تعريف مضمّن:

  1. اختيار عنصر
  2. في علامة التبويب Styles (الأنماط)، انقر بين قوسَي القسم element.style. يركز المؤشر، مما يسمح لك بإدخال نص.
  3. أدخِل اسم الموقع واضغط على Enter.

  4. أدخِل قيمة صالحة لهذه السمة واضغط على Enter. في شجرة DOM، يمكنك التأكد من إضافة السمة style إلى العنصر.

    إضافة تعريفات مضمّنة.

    في لقطة الشاشة، تم تطبيق السمتَين margin-top وbackground-color على العنصر الذي تم اختياره. في شجرة نموذج العناصر في المستند (DOM)، يمكنك الاطّلاع على التعريفات التي تظهر في السمة style الخاصة بالعنصر.

إضافة تعريف إلى قاعدة نمط

لإضافة تعريف إلى قاعدة نمط حالية:

  1. اختيار عنصر
  2. في علامة التبويب الأنماط، انقر بين قوسي قاعدة النمط التي تريد إضافة التعريف إليها. يركز المؤشر، مما يسمح لك بإدخال نص.
  3. أدخِل اسم الموقع واضغط على Enter.
  4. أدخِل قيمة صالحة لهذه السمة واضغط على Enter.

تغيير قيمة البيان.

في لقطة الشاشة، تحصل قاعدة النمط على تعريف border-bottom-style:groove الجديد.

تغيير اسم أو قيمة تعريف

انقر مرّتين على اسم الإعلان أو قيمته لتغييره. راجِع تغيير قيم تعداد عددها باستخدام اختصارات لوحة المفاتيح للحصول على الاختصارات لزيادة عدد القيم أو تقليلها بسرعة بمقدار 0.1 أو 1 أو 10 أو 100 وحدة.

تغيير القيم القابلة للتعداد باستخدام اختصارات لوحة المفاتيح

أثناء تعديل قيمة تعدادية لأحد التعريف، مثل font-size، يمكنك استخدام اختصارات لوحة المفاتيح التالية لزيادة القيمة بمقدار ثابت:

  • Option+Up (Mac) أو Alt+Up (في نظامَي التشغيل Windows وLinux) للزيادة بنسبة 0.1.
  • أعلى لتغيير القيمة بمقدار 1 أو بقيمة 0.1 إذا كانت القيمة الحالية تتراوح بين -1 و1.
  • Shift+Up للزيادة بمقدار 10
  • Shift+Command+Up (نظام التشغيل Mac) أو Control+Shift+Page Up (في نظامَي التشغيل Windows وLinux) لزيادة القيمة بمقدار 100

ويمكنك تقليل النتائج أيضًا. ما عليك سوى استبدال كل مثيل للزر Up مذكور سابقًا بالزر أسفل.

تغيير قيم الطول

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

لتغيير وحدة الطول:

  1. مرِّر مؤشر الماوس فوق اسم الوحدة، ولاحظ أنه تحتها خط.

  2. انقر على اسم الوحدة لاختيار وحدة من القائمة المنسدلة.

لتغيير قيمة الطول:

  1. مرر مؤشر الماوس فوق قيمة الوحدة ولاحظ أن المؤشر يتغير إلى سهم أفقي برأسين.

  2. اسحب أفقيًا لزيادة القيمة أو خفضها.

لضبط القيمة بمقدار 10، اضغط مع الاستمرار على Shift عند السحب.

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

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

  1. اختَر العنصر في شجرة DOM.
  2. انقر على .cls.
  3. أدخِل اسم الصف في المربّع إضافة صف جديد.
  4. اضغط على Enter‏.

قسم &quot;فئات العناصر&quot;.

يمكنك محاكاة الإعدادات المفضّلة للمظهر الفاتح والداكن وتفعيل الوضع الداكن التلقائي.

لتفعيل الوضع الداكن التلقائي أو محاكاة المظاهر الفاتحة أو الداكنة التي يفضّلها المستخدم، يُرجى اتّباع الخطوات التالية:

  1. في علامة التبويب العناصر > الأنماط، انقر على يمكنك إيقاف محاكاة العرض الشائعة أو إيقافها.التبديل بين محاكاة العرض الشائعة. يمكنك إيقاف محاكاة العرض الشائعة أو إيقافها.

  2. اختَر واحدًا مما يلي من القائمة المنسدلة:

    • ppris-color-scheme: light تشير هذه السمة إلى أنّ المستخدم يفضّل المظهر الفاتح.
    • prefs-color-scheme: داكن. تشير هذه السمة إلى أنّ المستخدم يفضّل المظهر الداكن.
    • الوضع الداكن التلقائي: يؤدي هذا الخيار إلى عرض صفحتك في الوضع الداكن حتى إذا لم تنفّذها. بالإضافة إلى ذلك، يتم ضبط prefers-color-scheme على dark تلقائيًا.

هذه القائمة المنسدلة هي اختصار لخيارَي محاكاة ميزة وسائط CSS prefers-color-scheme وتفعيل الوضع الداكن التلقائي في علامة التبويب العرض.

إيقاف صف أو إيقافه

لتفعيل فئة في أحد العناصر أو إيقافها:

  1. اختَر العنصر في شجرة DOM.
  2. افتح القسم فئات العناصر. راجِع إضافة فئة إلى عنصر. توجد أسفل المربع إضافة صف جديد جميع الفئات التي يتم تطبيقها على هذا العنصر.
  3. ضَع علامة في مربّع الاختيار بجانب الصف الدراسي الذي تريد تفعيله أو إيقافه.

إضافة قاعدة نمط

لإضافة قاعدة نمط جديدة:

  1. اختيار عنصر
  2. انقر على قاعدة أنماط جديدة قاعدة أنماط جديدة:. تُدرج "أدوات مطوري البرامج" قاعدة جديدة أسفل القاعدة element.style.

جارٍ إضافة قاعدة نمط جديدة.

في لقطة الشاشة، تضيف أدوات مطوّري البرامج قاعدة النمط h1.devsite-page-title بعد النقر على قاعدة أنماط جديدة.

اختيار ورقة الأنماط التي تريد إضافة قاعدة إليها

عند إضافة قاعدة نمط جديدة، انقر مع الاستمرار على قاعدة أنماط جديدة قاعدة أنماط جديدة: لاختيار ورقة الأنماط التي تريد إضافة قاعدة النمط إليها.

اختيار ورقة أنماط.

إيقاف/تفعيل بيان

لتفعيل بيان واحد أو إيقافه، اتّبِع الخطوات التالية:

  1. اختيار عنصر
  2. في علامة التبويب الأنماط، مرِّر مؤشر الماوس فوق القاعدة التي تعرِّف البيان. تظهر مربعات الاختيار بجانب كل تصريح.
  3. ضَع علامة في مربّع الاختيار بجانب البيان أو أزِل العلامة من المربّع. عند محو بيان، تشطبه "أدوات مطوري البرامج" للإشارة إلى أنه لم يعد نشطًا.

إيقاف/تفعيل البيان.

في لقطة الشاشة، إنّ السمة color للعنصر المحدّد حاليًا غير مفعّلة.

تعديل العناصر الزائفة في ::view-transition أثناء الصورة المتحركة

راجِع القسم المقابل في الصور المتحركة.

للحصول على مزيد من المعلومات، يُرجى الاطّلاع على عمليات نقل سلسة وبسيطة باستخدام واجهة برمجة تطبيقات View Transitions API.

محاذاة عناصر الشبكة ومحتواها مع Grid Editor (محرر الشبكة)

اطّلِع على القسم المقابل في شبكة فحص CSS.

تغيير الألوان باستخدام "Color Picker" (منتقي الألوان)

راجِع فحص وتصحيح الأخطاء في الألوان العالية الدقة وغير العالية الدقة باستخدام "أداة اختيار الألوان".

تغيير قيمة الزاوية باستخدام الساعة بزاوية

توفّر ساعة الزاوية واجهة مستخدم رسومية لتغيير <angle> في قيم خصائص CSS.

لفتح الساعة التي تعمل مع الزاوية:

  1. اختيار عنصر يتضمن تعريف الزاوية

  2. في علامة التبويب الأنماط، ابحث عن تعريف transform أو background الذي تريد تغييره. انقر على المربّع معاينة الزاوية بجانب قيمة الزاوية.

    المعاينة بزاوية

    الساعات الصغيرة على يسار -5deg و0.25turn هي معاينات الزاوية.

  3. انقر على المعاينة لفتح الساعة بزاوية.

    ساعة ذات زاوية

  4. يمكنك تغيير قيمة الزاوية من خلال النقر على دائرة زاوية الساعة أو تمرير الماوس لزيادة أو خفض قيمة الزاوية بمقدار 1.

  5. هناك المزيد من اختصارات لوحة المفاتيح لتغيير قيمة الزاوية. تعرّف على المزيد في اختصارات لوحة المفاتيح للوحة "الأنماط".

تغيير المربعات وتظليل النصوص باستخدام "محرِّر التظليل"

يوفّر محرِّر الظل واجهة مستخدم رسومية لتغيير بيانات مقارنة الأسعار text-shadow وbox-shadow.

لتغيير الظلال باستخدام أداة تعديل الظل:

  1. اختيار عنصر باستخدام بيان الظل على سبيل المثال، حدد العنصر التالي.

  2. في علامة التبويب الأنماط، ابحث عن رمز الظل ظل. بجانب بيان text-shadow أو box-shadow.

    أيقونات الظل.

  3. انقر على رمز الظل لفتح محرِّر الظل.

    محرِّر التظليل.

  4. تغيير خصائص الظل:

    • النوع (فقط لـ box-shadow). اختر خارجية أو قائمة داخلية.
    • إزاحة X وY. اسحب النقطة الزرقاء أو حدِّد قيمًا.
    • التمويه: اسحب شريط التمرير أو حدِّد قيمة.
    • نطاق (للنطاق box-shadow فقط). اسحب شريط التمرير أو حدِّد قيمة.

  5. لاحِظ التغييرات التي يتم تطبيقها على العنصر.

تعديل توقيتات الرسوم المتحركة والانتقالات باستخدام "محرِّر تعديل السرعة"

توفِّر محرّرة السرعة واجهة مستخدم تصويرية لتغيير قيمتَي transition-timing-function وanimation-timing-function.

لفتح محرّر تعديل السرعة:

  1. اختَر عنصرًا يتضمّن تعريف دالة التوقيت، مثل العنصر <body> على هذه الصفحة.
  2. في علامة التبويب الأنماط، ابحث عن رمز السهولة. باللون الأرجواني بجانب نماذج transition-timing-function أو نماذج animation-timing-function أو السمة المختصرة transition. رمز &quot;محرّر تعديل السرعة&quot;
  3. انقر على الرمز لفتح محرِّر التخفيف: محرّر تعديل البيانات.

استخدام الإعدادات المسبقة لضبط التوقيتات

لتعديل التوقيتات بنقرة واحدة، استخدِم الإعدادات المسبقة في محرّر تعديل السرعة:

  1. في محرّر تعديل السرعة، لضبط قيمة الكلمة الرئيسية، انقر على أحد أزرار أداة الاختيار:
    • الخطية الزر الخطي.
    • إراحة للداخل والخارج زر التخفيف للداخل والخارج.
    • إراحة زر الإرخاء
    • إراحة زر الإرخاء

  2. في مبدِّل الإعدادات المسبقة، انقر على الزر نحو اليسار أو نحو اليمين لاختيار أحد الإعدادات المسبقة التالية:

    • الإعدادات المسبقة للمساواة بين نقاط الاتصال: elastic أو bounce أو emphasized
    • الإعدادات المسبقة لخدمة Cubic Bezier:
الكلمة الرئيسية للتوقيت الإعدادات المسبقة مكعب بيزيه
إرخاء إلى الداخل والخارج داخل الحائط، جيب جيب cubic-bezier(0.45, 0.05, 0.55, 0.95)
داخلي، تربيعي cubic-bezier(0.46, 0.03, 0.52, 0.96)
داخلي، مكعّب cubic-bezier(0.65, 0.05, 0.36, 1)
أداء سريع وبطيء cubic-bezier(0.4, 0, 0.2, 1)
للداخل والخلف cubic-bezier(0.68, -0.55, 0.27, 1.55)
إرخاء إلى الداخل داخل، جيب الزاوية cubic-bezier(0.47, 0, 0.75, 0.72)
داخلي، تربيعي cubic-bezier(0.55, 0.09, 0.68, 0.53)
داخل، مكعّب cubic-bezier(0.55, 0.06, 0.68, 0.19)
للداخل والخلف cubic-bezier(0.6, -0.28, 0.74, 0.05)
أداء سريع ومباشر cubic-bezier(0.4, 0, 1, 1)
إرخاء إلى الخارج خارج القاعدة، جيب جيبي cubic-bezier(0.39, 0.58, 0.57, 1)
خارج، تربيعي cubic-bezier(0.25, 0.46, 0.45, 0.94)
خارج المباراة، مكعّبة cubic-bezier(0.22, 0.61, 0.36, 1)
خطي، بطيء للداخل cubic-bezier(0, 0, 0.2, 1)
خارج الإطار cubic-bezier(0.18, 0.89, 0.32, 1.28)

ضبط التوقيتات المخصّصة

لتعيين قيم مخصصة لدوال التوقيت، استخدم نقاط التحكم على الأسطر:

  • بالنسبة إلى الدوال الخطية، انقر في أي مكان على السطر لإضافة نقطة تحكم واسحبها. انقر مرّتين لإزالة النقطة.

    سحب نقطة تحكم لدالة خطية.

  • بالنسبة إلى دوال Cubic Bezier، اسحب إحدى نقاط التحكم.

    سحب نقاط التحكم في دالة Cubic Bezier.

يؤدي أي تغيير إلى ظهور حركة على شكل كرة في المعاينة في أعلى المحرِّر.

(تجريبي) نسخ تغييرات CSS

عند تفعيل هذه التجربة، تبرز علامة التبويب الأنماط تغييرات CSS باللون الأخضر.

لنسخ تغيير واحد في بيان CSS، مرِّر مؤشر الماوس فوق البيان الذي تم تمييزه وانقر على الزر نسخ. نسخ.

انسخ تغيير تعريف CSS.

لنسخ جميع تغييرات CSS في جميع نماذج البيانات دفعة واحدة، انقر بزر الماوس الأيمن على أي بيان واختَر نسخ جميع تغييرات CSS.

انسخ كل تغييرات صفحات CSS.

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