إنشاء نمط وتطبيقه

Important: تمت ترجمة هذه المقالة ترجمة آلية، راجع إقرار إخلاء المسؤولية. يرجى الاطلاع على النسخة الإنجليزية من هذه المقالة. هنا للرجوع إليها.

نمط هو مجموعه من الخصائص التي تم تعريفها في ورقه انماط متتاليه (CSS) التنسيق. يمكنك تطبيق انماط عليها ل# المحتوي في صفحه ويب، ب# ما في ذلك النص (احرف فرديه او الفقرات ب# الكامل)، رسومات و# الطبقات و# الجداول، و# حتي ل# النص الاساسي ل# صفحه ويب ب# اكمله. تمكنك الانماط من فعاليه اعاده استخدام مجموعه من الخصائص و# قيم دون الحاجه الي تعيين الخصائص في كل مره تريد استخدامها.

تتالي انماط CSS ب# معني ان نمط العمومي يتم تطبيق القواعد علي عناصر HTML الا في حال تجاوز قواعد الانماط المحليه عليها. ب# شكل عام، قواعد الانماط المحليه الاسبقيه علي قواعد نمط عام. علي سبيل المثال، يتجاوز نمط المحدد في CSS داخليه في صفحه ويب نمط المحدد في CSS خارجي. ب# طريقه مماثله، مضمن CSS المعرفه ضمن عنصر HTML واحده علي صفحه ويب تتجاوز انماط اي معرفه ل# هذا العنصر نفسه في اوراق انماط متتاليه خارجيه او داخليه صفحه ويب. تطبيق اجزاء قواعد الانماط العموميه التي لا يتم كونتراديكتيد ب# قواعد نمط CSS المحلي ل# عناصر HTML حتي عند تطبيق الانماط المحليه.

في هذه المقالة

انواع الانماط

انشاء نمط

تطبيق نمط

انواع الانماط

يمكن ان يكون نمط تقيم في انماط متتاليه خارجيه او داخليه المستنده الي فئات او المستنده الي عنصر المستنده الي معرفات. يتم تعريف نمط ب# واسطه مجموعه القواعد، الذي يتكون من محدد، متبوعه ب# كتله تعريفات خاصيه التي تظهر بين قوس كبير ايسر متعرجه ({}) و# قوس متعرج ايمن (}). يتم تمييز كل نوع من نمط انواع الانماط الاخري ب# محدد الخاص به؛ محدد ل# نمط المستنده الي فئات؛ يسبق ب# نقطه (.) علامه رقم (#) يسبق محدد ل# انماط المستنده الي معرفات؛ و# تتكون محدد ل# احد انماط مستنده الي عنصر من عنصر HTML، مثل عنصر H1 فقط.

انماط المستنده الي فئات

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

في المثال التالي، يتم "مقدمه" محدد اسم النمط، و "حجم الخط: صغير" تم تعريف خاصيه واحده، متبوعه ب# تعريف خاصيه ثاني.

مثال ل# قاعده تعيين نمط المستنده الي فئات

.introduction {font-size: small; color: white}

مثال ل# النمط المستنده الي فئات المطبق ل# علامه < p >

<p class="introduction">

انماط مستنده الي عنصر

استخدم الانماط المستنده الي العنصر ل# تحديد مجموعه من الخصائص التي تريدها كل مثيلات عنصر HTML معين ل# استخدامه في صفحه ويب. علي سبيل المثال، ل# انشاء هامش 25 ب# كسل حول كل الفقرات (محاطه ب# علامات < p > المحتوي) في صفحه ويب، يمكنك انشاء المستنده الي عنصر نمط يستخدم عنصر ب# كسل ك# محدد له و# يحتوي علي تعريفات خصائص الهوامش، كما هو مبين في المثال التالي.

مثال ل# قاعده تعيين ل# احد انماط مستنده الي عنصر

p { margin-left: 25px; margin-right: 25px }

الانماط المستنده الي معرفات

استخدم انماط المستنده الي معرفات عندما تريد ل# تعريف مجموعه من الخصائص ل# عنصر واحد او كتله من العناصر التي تريد تمييز من كل محتوي اخر في صفحه ويب او اكثر. استخدم انماط المستنده الي معرفات عندما تريد ب# نمط مفرده عنصر HTML في صفحه ويب.

مثال ل# قاعده تعيين ل# انماط المستنده الي معرفات

#footer {background-color: #CCCCCC; margin: 15px}

مثال ل# الانماط المستنده الي معرفات المطبقه علي علامه < p >

<p id="footer">

الانماط المضمنه

استخدام نمط مضمن عندما تريد تعريف مجموعه من الخصائص ل# عنصر واحد او كتله من العناصر في صفحه ويب و# لا حاجه الي اعاده استخدام نمط هذا. ب# خلاف الانماط المستنده الي معرفات و# المستنده الي عنصر و# المستنده الي فئات، يتم تعريف خصائص الخاصه به في اي من هذين المقطع الرئيسي ل# صفحه ويب (CSS داخلي) او في ملف CSS خارجي، الخصائص داخلي انماط (او تضمين ورقه الانماط المتتاليه) تعريف مباشره في عنصر HTML ب# استخدام النمط.

مثال ل# قاعده تعيين ل# نمط مضمن

<p style="font-weight: bold; font-style: italic; color: #FF0000">

اعلي الصفحه

انشاء نمط

يمكنك انشاء انماط جديده من البدايه او ب# نسخ نمط موجود. في الحالتين، مربع حوار نمط جديد يمكنك من تحديد كل شيء حول النمط الجديد، ب# ما في ذلك نوع محدد و# الخصائص و# ورقه الانماط التي سوف تحتوي علي النمط. عندما تريد انشاء نمط مضمن جديد، يمكنك ايضا استخدام جزء المهام خصائص CSS. عندما تريد انشاء و# تطبيق نمط جديد في الصفحه دون تعيين اي خصائص ل# النمط، يمكنك ايضا استخدام نمط شريط الادوات.

انشاء نمط ب# استخدام مربع حوار نمط جديد

  1. نفّذ أحد الإجراءات التالية:

    • ل# اضافه نمط الي CSS خارجي، افتح ملف css..

    • ل# اضافه نمط الي CSS داخليه، افتح صفحه ويب.

    • ل# اضافه نمط مضمن، و# فتح صفحه ويب، ثم حدد المحتوي الذي تريد النمط.

  2. نفّذ أحد الإجراءات التالية:

    • ل# انشاء نمط جديد    انقر فوق نمط جديد في احد هذه المواقع: جزء المهام تطبيق الانماط او جزء المهام اداره الانماط او شريط ادوات نمط القائمه تنسيق.

    • ل# نسخ نمط موجود    قم ب# واحد مما يلي:

      • في جزء المهام تطبيق الانماط، اشر الي النمط الذي تريد نسخه، و# انقر فوق السهم ل# اسفل الذي يظهر، ثم حدد نسخ نمط جديد.

      • في جزء المهام اداره الانماط او جزء المهام " خصائص CSS "، انقر نقرا مزدوجا فوق النمط الذي تريد نسخه، و# من ثم حدد نسخ نمط جديد.

  3. في مربع الحوار نمط جديد، قم ب# ما يلي:

استخدم هذا الاجراء

لتنفيذ الإجراء التالي

محدد

  • ل# استخدام محدد فئه، اكتب ب# نقطه (.) يليه اسم فريد.

  • ل# استخدام محدد، اكتب علامه رقم (#) يليه اسم فريد.

    Note: يتعذر علي الفئات و# معرف اسماء محدد تحتوي علي مسافات الا اذا كنت تقوم ب# انشاء محدد معقده.

  • ل# استخدام محدد عنصر، اكتب اسم عنصر HTML او انقر فوق مربع القائمه المنسدله محدد و# حدد اسم عنصر.

  • ل# استخدام محدد مضمنه، حدد نمط مضمن.

  • ل# انشاء محدد معقده، اكتب المحدد.

تعريف في

حدد أحد الخيارات التالية:

  • اضافه الصفحه الحاليه نمط جديد الي CSS الداخليه في صفحه ويب الحاليه.

  • اضافه ورقه الانماط الجديده نمط جديد الي CSS خارجيه فارغه جديده.

  • اضافه ورقه الانماط الموجوده نمط جديد الي CSS خارجيه موجود الذي تحدده.

تطبيق نمط جديد ل# تحديد المستند

تطبيق النمط علي التحديد الحالي في صفحه ويب الحاليه.

عنوان URL

اذا قمت ب# تحديد ورقه الانماط الموجوده في تعريف في، ادخل عنوان URL ل# ملف css..

الفئه

حدد اي مما يلي، ثم قم ب# تعيين الخصائص التي تظهر الي اليمين في مربع الحوار:

Tip: الفئات التي تظهر في تطبيق التنسيق الغامق في القائمه الفئه تحتوي علي خصائص مجموعه.

  • خط يقوم ب# تعيين خصائص الخط، ب# ما في ذلك الحجم و# الوزن، و# زينه و# اللون.

  • تعيين كتله ارتفاع الخط و# محاذاه النص، و# نص المسافات البادئه و# تباعد النص.

  • تعيين الخلفيه الخلفيه خصائص الصوره اللون و# الخلفيه.

  • تعيين حد حد و# خصائصه.

  • تعيين مربع خصائص ترك المساحه و# الهامش مربع و# عناصر مستوي الكتله.

  • تعيين موضع الابعاد و# موضع مربع و# عناصر مستوي الكتله.

  • تعيين تخطيط الرؤيه، عائمه و# التفافه سلوك، و# القص و# خصائص اخري ل# تخطيط مربع و# عناصر مستوي الكتله.

  • قائمه ب# تعيين خصائص عناصر القائمه، ب# ما في ذلك نوع و# موضع الصوره.

  • جدول ب# تعيين خصائص عناصر ذات صله ب# جداول، ب# ما في ذلك المسافات و# تخطيط و# خصائص الحدود.

Note: يمكنك ايضا نسخ نمط من CSS واحد الي اخر. في جزء المهام اداره الانماط، اسحب النمط من CSS الذي يحتوي علي نمط هذا ل# اي اسم CSS التي تريد نسخها الي او الي نقطه معينه في القائمه انماط في الهدف CSS.

انشاء نمط مضمن ب# استخدام جزء المهام خصائص CSS

  1. في طريقه عرض التصميم او طريقه عرض التعليمات البرمجيه، في صفحه ويب، حدد المحتوي الذي تريد اضافه نمط مضمن الي.

  2. في جزء المهام " خصائص CSS "، ضمن تطبيق القواعد، انقر ب# زر الماوس محدد الذي تريد تطبيق نمط مضمن ل، او، اذا لم يظهر "(لا توجد قواعد مطبقه) "، انقر ب# زر الماوس في اي مكان ضمن قواعد مطبقه، و# ثم انقر فوق نمط مضمن جديد القائمه المختصره.

  3. ضمن خصائص CSS، عين الخصائص التي تريدها.

انشاء و# تطبيق نمط غير معرف جديد

يمكنك انشاء الانماط و# تطبيقها علي العناصر، و# قم ب# تعريف الانماط لاحقا. علي سبيل المثال، اذا اردت العمل ب# استخدام مصمم ل# انشاء مظهر صفحتك، يمكنك تطبيق انماط غير محدد ل# العناصر في الصفحه الخاصه بك، ثم الجلوس مع مصمم ل# تعريف الانماط لاحقا.

  1. في طريقه عرض التصميم او طريقه عرض التعليمات البرمجيه، في صفحه ويب، حدد العنصر الذي تريد تطبيق نمط عليه.

  2. ل# انشاء و# تطبيق نمط جديد دون تعريف ايه خصائص، علي شريط ادوات النمط، في مربع الفئه او ID، اكتب اسما فريدا ل# النمط الجديد.

اعلي الصفحه

تطبيق نمط

يمكنك استخدام جزء المهام تطبيق الانماط او جزء المهام اداره الانماط او شريط ادوات النمط ل# تطبيق انماط مستنده الي فئه او المستنده الي معرفات من الخاص بك الداخليه و# الخارجيه اوراق الانماط المتتاليه (CSS). جزء المهام تطبيق الانماط تمكنك من تطبيق انماط متعدده ل# تحديد، بينما يتم تحديد جزء المهام اداره الانماط و# شريط ادوات الانماط ب# تطبيق نمط واحد. يمكنك شريط ادوات النمط ل# تسميه و# تطبيق انماط غير معرف الجديد في الصفحه ب# سرعه.

لا تحتاج الي تطبيق الانماط التي تستخدم عنصر ل# محدد (انماط مستنده الي عنصر) ل# انه يتم تطبيق هذه نوع انماط تلقائيا الي عنصر المقترنه الخاصه بهم من خلال صفحه ويب. يسرد جزء المهام تطبيق الانماط الانماط المستنده الي العنصر ضمن محددات السياق، و# الي جانب المهام اداره الانماط يعرض جزء نقطه زرقاء الموجود ب# جانب النمط اسم. شريط ادوات نمط لا يسرد الانماط المستنده الي العنصر.

  1. في طريقه عرض التصميم او طريقه عرض التعليمات البرمجيه، في صفحه ويب، حدد العنصر الذي تريد تطبيق نمط عليه.

  2. نفّذ أحد الإجراءات التالية:

    • ل# تطبيق الانماط الموجوده متعدده    في جزء المهام تطبيق الانماط، اضغط علي CTRL اثناء النقر فوق كل النمط الذي تريده.

    • ل# تطبيق نمط موجود واحد    قم ب# واحد مما يلي:

      • في جزء المهام تطبيق الانماط، انقر فوق فئه او معرف النمط الذي تريده.

      • علي شريط ادوات النمط، اما في فئه او معرف مربع القائمه المنسدله، انقر فوق النمط الذي تريده.

      • في جزء المهام اداره الانماط، انقر ب# زر الماوس النمط فئه او معرف التي تريدها، و# من ثم انقر فوق تطبيق نمط علي القائمه المختصره.

    • ل# انشاء و# تطبيق نمط جديد دون تعريف ايه خصائص    علي شريط ادوات النمط، في مربع الفئه او ID، اكتب اسما فريدا ل# النمط الجديد.

اعلي الصفحه

Note: إقرار إخلاء المسؤولية للترجمة الآلية: تمت ترجمة هذه المقالة بواسطة نظام كمبيوتر دون تدخل العامل البشري. توفر Microsoft هذه الترجمات الآلية لمساعدة المستخدمين الذين لا يتحدثون الإنجليزية على استخدام منتجات Microsoft، وخدماتها، وتقنياتها والاستمتاع بها. قد تحتوي هذه المقالة على أخطاء في المفردات، أو بناء الجملة، أو القواعد نظرًا لترجمتها آليًا.

توسيع المهارات
استكشاف التدريب
الحصول على الميزات الجديدة أولاً
الانضمام إلى Office Insider

هل كانت المعلومات مفيدة؟

نشكرك على ملاحظاتك!

شكراً لك على الملاحظات! يبدو أنه من المفيد إيصالك بأحد وكلاء دعم Office لدينا.

×