فئة div مقابل المعرف
https://stackoverflow.com/questions/84378
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
عند استخدام div متى يكون من الأفضل استخدام فئة مقابل معرف؟
هل من الأفضل استخدام الفئة، على سبيل المثال متغير الخط أو العناصر داخل HTML؟ثم استخدم المعرف للهيكل/الحاويات؟
هذا شيء كنت دائمًا غير متأكد منه قليلاً، وأي مساعدة ستكون رائعة.
المحلول
يستخدم id لتحديد العناصر التي لن يكون هناك سوى مثيل واحد لها على الصفحة.على سبيل المثال، إذا كان لديك شريط تنقل واحد تضعه في موقع محدد، فاستخدمه id="navigation".
يستخدم class لتجميع العناصر التي تتصرف جميعها بطريقة معينة.على سبيل المثال، إذا كنت تريد أن يظهر اسم شركتك بخط غامق في النص الأساسي، فيمكنك استخدام <span class='company'>.
نصائح أخرى
أهم شيء يجب فهمه هو أن المعرفات يجب أن تكون فريدة:يجب أن يوجد عنصر واحد فقط بمعرف معين داخل الصفحة.وبالتالي، إذا كنت تريد الإشارة إلى عنصر معين في الصفحة، فغالبًا ما يكون هذا هو أفضل شيء يمكنك استخدامه.
إذا كان لديك عناصر متعددة متشابهة بطريقة ما، فيجب عليك استخدام فئة العناصر لتحديدها.
إحدى الحقائق المفيدة جدًا وغير المعروفة على نحو مدهش هي أنه يمكنك بالفعل تطبيق فئات متعددة على عنصر واحد عن طريق وضع مسافات بين أسماء الفئات.وبالتالي، إذا قمت بنشر سؤال كتبه المستخدم الذي قام بتسجيل الدخول حاليًا، فقد يتم تعريفه به <div class="questioncurrentAuthor">.
فكر في الجامعة.
<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />
طالب بطاقة تعريف البطاقات متميزة.لن يكون هناك طالبين في الحرم الجامعي لديهم نفس الطالب بطاقة تعريف بطاقة.ومع ذلك، يمكن للعديد من الطلاب مشاركة واحدة على الأقل وسيقومون بذلك فصل مع بعض.
لا بأس بوضع عدة طلاب تحت واحد فصل العنوان: علم الأحياء 101.لكن ليس من المقبول أبدًا وضع عدة طلاب تحت طالب واحد بطاقة تعريف.
عند العطاء قواعد عبر نظام الاتصال الداخلي بالمدرسة، يمكنك إعطاء قواعد إلى أ فصل:
"هل من الممكن أن يرتدي طلاب صف الأحياء قمصانًا حمراء غدًا؟"
.BiologyClass {
shirt-color:red;
}
أو يمكنك إعطاء قواعد لطالب معين، من خلال الاتصال بطالب فريد بطاقة تعريف:
"هل من الممكن أن يرتدي جوناثان سامبسون القميص الأخضر غدًا؟"
#JonathanSampson {
shirt-color:green;
}
يجب أن تكون المعرفات فريدة ولكن في CSS لها أيضًا الأولوية عند معرفة أي من التعليماتين المتعارضتين يجب اتباعه.
<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}
سيكون النص باللون الأبيض.
تعتبر الفصول رائعة عندما تريد تطبيق أنماط مشابهة على العديد من divs أو العناصر المختلفة.تعتبر المعرفات جيدة عندما تريد معالجة عنصر معين للتنسيق أو للتحديث باستخدام جافا سكريبت.
من المزايا الإضافية لاستخدام المعرف القدرة على استهدافه في علامة ربط:
<h2 id="CurrentSale">Product I'm selling</h2>
سيسمح لك في مكان آخر بالارتباط مباشرة بهذا المكان على الصفحة:
<a href="#CurrentSale">the Current Sale</a>
الاستخدام الشائع لذلك هو إعطاء كل عنوان في مدونة معرفًا مختومًا بالتاريخ (على سبيل المثال id = "date20080408") مما يسمح لك باستهداف هذا القسم من صفحة المدونة على وجه التحديد.
من المهم أيضًا أن تتذكر أن هناك قواعد تسمية أكثر تقييدًا للمعرفات، خاصة أنها لا يمكن أن تبدأ برقم.انظر سؤال SO مماثل: ما هي القيمة الصالحة لسمات المعرف في HTML
معيار HTML نفسه يجيب على سؤالك:
لا يجوز أن يكون لكائنين نفس المعرف، ولكن يمكن لعدد الكائنات أن يكون لها نفس الفئة.
لذا، إذا كنت تريد تطبيق سمات نمط CSS معينة على عنصر DIV واحد فقط، فسيكون ذلك معرفًا.إذا كنت تريد تطبيق سمات نمط معينة على DIVs متعددة، فيجب أن تكون هذه فئة.
لاحظ أنه يمكنك مزج كليهما.يمكنك جعل اثنين من DIVs ينتميان إلى نفس الفئة، ولكن مع منحهما معرفات مختلفة.يمكنك بعد ذلك تطبيق النمط المشترك لكليهما على الفصل، والأشياء الخاصة بأي منهما على المعرف الخاص بهم.سيقوم المتصفح أولاً بتطبيق نمط الفئة ثم نمط المعرف، بحيث يمكن لأنماط المعرف أن تحل محل أي فئة تم تعيينها من قبل.
بعض الأشياء الأخرى التي يجب وضعها في الاعتبار:
- عند استخدام ASP.Net، ليس لديك سيطرة كاملة على معرف العناصر، لذلك يتعين عليك استخدام الفئة (لاحظ أن هذا أقل صحة مما كان عليه من قبل).
من الأفضل استخدامه لا, ، عندما يمكنك مساعدته.بدلاً من ذلك، حدد نوع العنصر وهو كذلك نوع الوالدين.على سبيل المثال، يمكن تمييز قائمة غير مرتبة موجودة داخل div مع فئة navarea بهذه الطريقة:
div.NavArea ul { /* styles go here */ }
الآن يمكنك تصميم التقسيم المنطقي لكثير من منطقة نافاريا بأكملها مع تطبيق فئة واحدة.
يجب أن تكون المعرفات فريدة.يجب مشاركة الفصول الدراسية.لذا، إذا كان لديك بعض تنسيقات CSS التي سيتم تطبيقها على DIV متعددة، فاستخدم فئة.إذا كان هناك واحد فقط (كشرط، وليس كصدفة)، فاستخدم المعرف.
أعتقد أننا جميعًا نعرف ما هو الفصل، ولكن إذا كنت تفكر في المعرفات كمعرفات بدلاً من أدوات التصميم، فلن تخطئ كثيرًا.تحتاج إلى معرف عند محاولة استهداف شيء ما وإذا كان لديك أكثر من عنصر بنفس المعرف، فلن تتمكن من التعرف عليه بعد الآن...
عندما يتعلق الأمر بكتابة CSS الخاص بك للمعرفات والفئات، فمن المفيد استخدام الحد الأدنى من فئات CSS قدر الإمكان وحاول ألا تصبح ثقيلًا جدًا مع المعرفات حتى تضطر إلى ذلك، وإلا فسوف تهدف دائمًا إلى كتابة تصريحات وإعلانات أقوى سيكون لديك قريبًا ملف CSS مليء بـ !important.
مكان استخدام المعرف مقابل الفصل الدراسي
والفرق البسيط بين الاثنين هو أنه بينما يمكن استخدام الفصل بشكل متكرر على الصفحة، يجب استخدام المعرف مرة واحدة فقط لكل صفحة.لذلك، من المناسب استخدام معرف على عنصر div الذي يقوم بترميز المحتوى الرئيسي في الصفحة، حيث سيكون هناك قسم محتوى رئيسي واحد فقط.في المقابل، يجب عليك استخدام فئة لإعداد ألوان الصفوف البديلة على الجدول، حيث سيتم استخدامها بحكم التعريف أكثر من مرة.
المعرفات هي أداة قوية بشكل لا يصدق.يمكن أن يكون العنصر ذو المعرف هدفًا لجزء من JavaScript يتلاعب بالعنصر أو محتوياته بطريقة ما.يمكن استخدام سمة المعرف كهدف للارتباط الداخلي، واستبدال علامات الربط بسمات الاسم.أخيرًا، إذا جعلت معرفاتك واضحة ومنطقية، فيمكن أن تكون بمثابة نوع من "التوثيق الذاتي" داخل المستند.على سبيل المثال، لا تحتاج بالضرورة إلى إضافة تعليق قبل الكتلة ينص على أن كتلة التعليمات البرمجية ستحتوي على المحتوى الرئيسي إذا كانت العلامة الافتتاحية للكتلة تحتوي على معرف، على سبيل المثال، "رئيسي"، "رأس"، "تذييل" "، إلخ.
إذا كان النمط الذي تريد استخدامه في أماكن متعددة على الصفحة، فاستخدم فئة.إذا كنت تريد قدرًا كبيرًا من التخصيص لكائن واحد، مثل شريط التنقل الموجود على جانب الصفحة، فإن المعرف هو الأفضل، لأنه من غير المحتمل أن تحتاج إلى هذه المجموعة من الأنماط في أي مكان آخر.
من المفترض أن يكون المعرف هو المعرف الفريد للعنصر في الصفحة، مما يساعد على التعامل معه.أي نمط محدد خارجيًا في CSS ومن المفترض استخدامه في أكثر من عنصر واحد يجب أن ينتقل إلى سمة الفئة
<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>
استخدم معرفًا لعنصر فريد في الصفحة تريد القيام بشيء محدد جدًا به، وفئة لشيء يمكنك إعادة استخدامه في أجزاء أخرى من الصفحة.
ال بطاقة تعريف يتم استخدام السمة للعناصر لتعريفها بشكل فريد داخل المستند، في حين أن فصل يمكن أن يكون للسمة نفس القيمة المشتركة بين العديد من العناصر في نفس المستند.
لذا، في الواقع، إذا كان هناك عنصر واحد فقط في كل مستند سيستخدم النمط (على سبيل المثال، #title)، فانتقل إلى بطاقة تعريف.إذا كان بإمكان عناصر متعددة استخدام النمط، فاستخدمه فصل.
أود أن أقول أنه من الأفضل استخدام فصل دراسي عندما تعتقد أن عنصر النمط سوف يتكرر على الصفحة.تعمل عناصر مثل HeaderImage وFooterBar وما شابه بشكل جيد كمعرف نظرًا لأنك ستستخدمه مرة واحدة فقط وسيساعدك ذلك في منعك من تكراره عن طريق الخطأ، نظرًا لأن بعض المحررين سوف ينبهونك عندما يكون لديك معرفات مكررة.
يمكنني أيضًا أن أرى أنه من المفيد إذا كنت ستقوم بإنشاء عناصر div ديناميكيًا، وتريد استهداف عنصر معين للتنسيق؛يمكنك فقط منحه المعرف المناسب عند الإنشاء بدلاً من البحث عن العنصر ثم تحديث فئته.
نكهتي المفضلة هي استخدام تعريف الفئة عند تطبيق أنماط CSS على عدة divs بنفس الطريقة.إذا تم تطبيق البنية أو الحاوية مرة واحدة فقط، أو يمكن أن ترث نمطها من النمط الافتراضي، فلا أرى أي سبب لاستخدام تعريف الفئة.
لذا فإن الأمر يعتمد على ما إذا كان قسمك واحدًا من عدة أقسام؛على سبيل المثال، يمثل div سؤالاً للإجابة على موقع ويب stackoverflow.هنا قد ترغب في تحديد نمط فئة "الإجابة" وتطبيق ذلك على كل قسم "إجابة".
إذا كنت تستخدم عناصر تحكم ويب .Net، فمن الأسهل في بعض الأحيان استخدام الفئات فقط حيث يقوم .Net بتغيير معرف div لوحدة تحكم الويب في وقت التشغيل (حيث يستخدمون runat = "server").
يتيح لك استخدام الفئات إنشاء أنماط بسهولة باستخدام فئات منفصلة للخطوط والمسافات والحدود وما إلى ذلك.أستخدم عمومًا ملفات متعددة لتخزين أنواع منفصلة من معلومات التنسيق، على سبيل المثال.basic_styles.css للتنسيق البسيط على مستوى الموقع، ie6_styles.css للأنماط الخاصة بالمتصفح (في هذه الحالة IE6) وما إلى ذلك و template_1.css لمعلومات التخطيط.
مهما كانت الطريقة التي تختارها، حاول أن تكون متسقًا للمساعدة في الصيانة.
كذلك، يمكن معالجة العنصر الذي تعطيه معرفًا محددًا عبر أوامر JavaScript وDOM - GetElementById، على سبيل المثال.
بشكل عام، أجد أنه من المفيد إعطاء معرف لجميع الأقسام الهيكلية الرئيسية - حتى لو لم يكن لدي في البداية أي قواعد CSS محددة لتطبيقها، لدي هذه القدرة هناك للمستقبل.من ناحية أخرى، أستخدم الفئات لتلك العناصر التي يمكن استخدامها عدة مرات - على سبيل المثال، div يحتوي على صورة وتعليق - قد يكون لدي عدة فئات، لكل منها قيم تصميم مختلفة قليلاً.
تذكر أنه مع تساوي كل الأشياء، فإن قواعد النمط في مواصفات المعرف لها الأسبقية على تلك الموجودة في مواصفات الفئة.
بالإضافة إلى كون المعرفات والفئات رائعة لتحديد النمط على عنصر فردي مقابل مجموعة مماثلة من العناصر، هناك أيضًا تحذير آخر يجب تذكره.كما يعتمد ذلك على اللغة إلى حد ما.في ASP.Net، يمكنك إضافة Div والحصول على معرفات.ولكن إذا استخدمت لوحة بدلاً من Div فسوف تفقد المعرف.
الفئات مخصصة للأنماط التي قد تستخدمها عدة مرات على الصفحة، أما المعرفات فهي معرفات فريدة تحدد حالات خاصة للعناصر.تنص المعايير على أنه يجب استخدام المعرفات مرة واحدة فقط في الصفحة.لذلك يجب عليك استخدام الفئات عندما تريد استخدام نمط على أكثر من عنصر واحد في الصفحة، ومعرف عندما تريد استخدامه مرة واحدة فقط.
شيء آخر هو أنه بالنسبة للفئات، يمكنك استخدام قيم متعددة (عن طريق وضع مسافات بين كل فئة، على غرار "class='blagh blah22 blah') بينما مع المعرفات، يمكنك فقط استخدام المعرف لكل عنصر.
الأنماط المحددة للمعرفات تتجاوز الأنماط المحددة للفئات، لذلك في إعدادات نمط #uniquething ستتجاوز نمط .whatever إذا كان هناك تعارض بين الاثنين.
لذلك ربما ينبغي عليك استخدام المعرفات لأشياء مثل الرأس أو "الشريط الجانبي" الخاص بك أو أي شيء آخر، وما إلى ذلك - الأشياء التي تظهر مرة واحدة فقط في كل صفحة.
لي : إذا كنت تستخدم الفئات عندما سأفعل شيئًا ما في CSS أو أضيف اسمًا إلى العناصر ويمكنني استخدامه في جميع العناصر في الصفحة.
لذلك أستخدم المعرفات للعنصر الفريد
السابق :
<div id="post-289" class="box clear black bold radius">
CSS :
.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}
