دليل المبتدئين لـ CSS Classes

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

ما هي فئة - CSS Class؟

فئة CSS هي سمة attribute تُستخدم لتعريف مجموعة من عناصر HTML من أجل تطبيق تصميم وتنسيق فريد لتلك العناصر باستخدام CSS.

دعونا نلقي نظرة على مثال لكيفية عمل فئات CSS. أدناه ، لدينا صفحة HTML بسيطة بها ثلاثة عناوين (عناصر h2) وثلاث فقرات (عناصر p). لاحظ كيف تم تصميم العنوان الثاني والعنوان الثالث والفقرة الأخيرة بشكل مختلف عن البقية - وذلك لأن هذه العناصر تم تخصيصها للفئة bright. بالنظر إلى CSS ، نرى المحدد .bright ،الذي يطبق قواعد النمط الخاصة به على جميع العناصر مع فئة السمة = "bright".

See the Pen Product Landing Page FCC by Zaid N AlHulaiba (@thezcode) on CodePen.

يمكنك استخدام فئات CSS لتجميع عناصر HTML ثم تطبيق أنماط مخصصة عليهاو يمكنك إنشاء فئات وتطبيقها على النص أو الأزرار أو الامتدادات أو الاقسام divs أو الجداول أو الصور أو أي عنصر صفحة آخر يمكنك التفكير فيه. دعنا الآن نلقي نظرة فاحصة على كيفية استخدام فئات CSS لتصميم عناصر الصفحة.

كيفية إنشاء فئة في CSS Class؟

دعونا نحاول إنشاء فئة CSS من البداية. لنفترض أنك تريد إنشاء فقرة من النص ونمط كلمات معينة لمزيد من التركيز. يمكنك القيام بذلك عن طريق إنشاء فئة CSS لهذه الكلمات الخاصة ، ثم تعيين هذه الفئة لكلمات فردية بعلامات span tag. ابدأ بكتابة عناصر HTML التي تريد تصميمها. في هذه الحالة ، إنها فقرة من النص:

                      
          <p>تعلم <span> HTML5 CSS3 JavaScript</span> و <span>إنطلق في عالم البرمجة</span> اليوم</p>  
          
          إسحب -->

لقد وضعت أيضًا علامات حول الكلمات التي سنعمل على تنسيقها قريبًا باستخدام فئة CSS. بعد ذلك ، دعنا نضيف سمات الفئة إلى علامات هذه. للقيام بذلك ، أضف فئة السمة = "name" إلى علامة الفتح الخاصة بالعنصر المستهدف ، واستبدل الاسم بمعرف فريد للفئة.

:في المثال التالي، يبدو كما يلي HTML

                                    
                        <p>تعلم <span class="orange-text"> HTML5 CSS3 JavaScript</span> و <span class="orange-text">إنطلق في عالم البرمجة</span> اليوم</p>  
                        
                        إسحب -->

لقد أضفنا هنا فئتي CSS إلى علامات النطاق الخاصة بنا: orange-text النص البرتقالي orange-text والنص الأزرق الآن ، دعنا نتناول بعض الأسئلة التي قد تكون لديك حول فئات CSS

أين يمكنك إضافة فئات CSS في HTML؟

يمكن إضافة فئات CSS إلى أي عنصر HTML. تشمل بعض أكثرها شيوعًا ما يلي:



ةرقفلا Paragragh <p>  
                                            
 <title>العنوان اعلى الصفحة </title> 
                                                            
 <body>  <----  بنية الصفحة 
                                            
   Headers <h1>  عنوان بأحجام مختلفة من ١ الى ٦ </h1> 

Span <span> 

 ءازجأ Divs <div>

 روصلا Images <img>

رارزألا Buttons <button>

 طباور links <a>

 ﺔﻤﺋﺎﻗ ﺮﺻﺎﻨﻋﻭ ﺔﺒﺗﺮﻣ ﻢﺋﺍﻮﻗ Ordered lists and list items <ol> <li>

 ﺔﺒﺗﺮﻣ ﺮﻴﻏ ﺔﻤﺋﺎﻗ ﺮﺻﺎﻨﻋﻭ ﻢﺋﺍﻮﻗ Unordered lists and list item <ul> <li>
                                                    
 
 لوادجلا Tables<table>
                                                           
                                                                
                                                            
بسحإ --->

كم عدد فئات CSS التي يمكنك إضافتها إلى عنصر؟؟

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

ما هو الفرق بين Class الفئة و ID المعّرف في HTML؟

الفرق بين class و ID في HTML هو أن المعرفات فريدة - الفئات ليست كذلك. من الناحية العملية ، يعني هذا أن العناصر المتعددة على الصفحة يمكن أن تحتوي على فئة ، بينما يمكن أن تحتوي العناصر على معرف واحد فقط ويمكن أن تحتوي كل صفحة على عنصر واحد فقط باستخدام هذا المعرف. ضع في اعتبارك تعليقًا محددًا على منشور WordPress. بينما يمكنك استخدام فئة "item" لتحديد جميع التعليقات على نفس الصفحة ، يمكنك أيضًا تعيين قيمة WordPress التي تم إنشاؤها ديناميكيًا للتعليق كمعرف فريد لها. هذا هو المعرف الوحيد الذي يمكن أن يمتلكه العنصر ، ولا يمكن تكراره في أي مكان على الصفحة. يتيح لك استخدام المعرفات تحديد موقع عناصر معينة بسهولة ، كما أن ضمان عدم تكرار نفس المعرف عبر العناصر يعد أمرًا ضروريًا لكي يتم عرض كود HTML الخاص بك بشكل صحيح في الواجهة الأمامية.

متى تستخدم المعرف مقابل الفئة

على الرغم من عدم وجود قاعدة صارمة وسريعة لاستخدام المعرف مقابل الفئة ، فإن الإجماع يؤكد أنه من المفيد استخدام المعرف للعناصر التي تظهر مرة واحدة في كل صفحة - مثل الرؤوس أو التذييلات أو القوائم - بينما يتم استخدام الفئة لعناصر مثل الفقرات والروابط والأزرار التي تظهر أكثر من مرة. كما هو مذكور أعلاه ، يمكن استخدام المعرفات جنبًا إلى جنب مع الفئات. على سبيل المثال ، قد يكون لعنصري الزر نفس الفئات لتحديد حجمهما ونمطهما الأساسيين ، لكنهما مختلفان لتحديد موقعهما على الصفحة. بمجرد إضافة فئة إلى عنصر ، تحتاج إلى إنشاء مجموعات قواعد لهذه الفئات في CSS. "مجموعات القواعد" هي أسطر من التعليمات البرمجية تخبر المتصفح كيف يجب أن تبدو هذه العناصر في الواجهة الأمامية لموقع الويب الخاص بك. يمكننا البدء في إنشاء مجموعات القواعد باستخدام محددات فئة CSS وكتل التصريح. أخيرًا ، تحتاج إلى إنشاء مجموعات قواعد لهذه الفئات في CSS. نقوم بذلك باستخدام محددات فئة CSS Class Selectors وكتل التصريح Declaration Blocks.

ما هو محدد الفئة - CSS class selector؟

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

في مثالنا التالي ، سننشئ كتل إعلان لكل من فئات CSS الخاصة بنا باستخدام المحددات
.orange-text و .blue-text:

               
/* ةئفل ديدحت لوا نع انلعا CSS class */

.blue-text {
color: blue; قرزأ نول جتانلا
font-weight: bold; ضيرع طخ
}

/*  ةئفلل ديدحت يناث نع انلعا CSS class */

.yellow-text {
color: yellow; رفصأ
font-weight: bold; ضيرع 
}
                                                                        
بسحإ --->

عندما نقرن HTML و CSS معًا ، نرى كيف تستهدف فئات CSS لدينا عناصر معينة

ملاحظة : لن تؤدي إضافة سمة فئة إلى عنصر بدون تفعيل CSS إلى تغيير في مظهر العنصر على الصفحة الأمامية أو تنسيقه في الواجهة الأمامية. تحتاج إلى تعيين قواعد CSS للفئة لرؤية التغييرات

كما أنه يساعد في إنشاء أسماء الفئات التي تصف العنصر في الفئة. في المثال أعلاه ، استخدمنا الأسماء. Yellow-text و. blue-text لأننا كنا ننشئ نصًا ملونًا. هذه الأسماء وصفية بما يكفي بحيث يفهم الشخص الذي يقرأ CSS فقط الغرض من الفصل. يمكن أن تكون أسماء الفئات كلمة واحدة أو عدة كلمات. إذا كان اسم الفئة الخاص بك عبارة عن كلمات متعددة ، فاستخدم واصلات حيث تضع مسافات. أيضًا ، من الشائع كتابة أسماء الفئات بأحرف صغيرة.

خصوصية - CSS Specificity

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

Inline CSS : في النسق تظهر كسمات نمط في العلامة الافتتاحية لعناصر HTML. نظرًا لأن CSS هو الأقرب إلى HTML ، فإنه يتمتع بأعلى مستوى من الخصوصية..
ID selectors : محددات الهوية تشبه تطبيقات الويب مواقع الويب ، ولكن بدلاً من ذلك ، يتم تجميعها في صندوق صغير أنيق ، مما يحسن التحكم في الأمان والمزيد.
Class selectors, attribute selectors, and pseudo-class selector : محددات الفئة ومحددات السمات ومحدد الفئة الزائفةأنواع المحددات الثلاثة هذه لها خصوصية متساوية. إذا تم تطبيق الأنواع الثلاثة جميعها على نفس عنصر HTML ، فسيتم تطبيق النوع الذي يظهر في أخر ورقة الأنماط ويتجاوز الباقي .
Type selectors: محددات الأنواع تحدد هذه العناصر جميع عناصر HTML التي لها اسم عقدة (node name) يتم تحديد عنصر واحد ومن خلاله يتم التحكم بالعناصر التي يحتويها العنصر المتحكم به أو عنصر فرعي لها. مثل أسماء العناصر والعناصر الزائفة.

وهذا هو المكان الذي تتألق فيه محددات الهوية ID selectors. نظرًا لأنهم محددون جدًا ، فإن أي نوع آخر من المحددات يواجههم يخسر. من ناحية أخرى ، سيفقد المحدد العام (*) في كل مرة بسبب انخفاض خصوصيته. في بعض الأحيان ، بعد تطبيق فئة CSS على مجموعة من العناصر ، قد ترغب في تجاوز امر معيين لعنصر معين في الصفحة. لنستعرض كيف يمكنك القيام بذلك بسهولة.

كيفية تجاوز فئة CSS

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

قم بإنشاء إعلان أكثر تحديدًا.

القاعدة الأساسية الأساسية عندما يتعلق الأمر بفئتين متضاربتين هي أن الصنف الذي يحتوي على إعلان أكثر تحديدًا يفوز. على سبيل المثال ، محددات المعرفات أكثر تحديدًا من محددات الفئة ، ومحددات الفئة أكثر تحديدًا من محددات النوع. من الناحية العملية ، يعني هذا أن إضافة محدد فئة إلى عنصر به محدد نوع فقط سيؤدي إلى تجاوز الفئة الحالية ، بينما تؤدي إضافة محدد معرف إلى تجاوز أي فئة منافسة أو محدد نوع. بدلاً من ذلك ، استخدم! الإعلان المهم. يمكنك أيضًا استخدام! الإعلان المهم !important كاختصار لتجاوز فئة CSS. في CSS ،المهم يعني ذلك بالضبط - أن التوجيه التالي مهم ويجب تطبيقه. عند وضعها في نهاية الإعلان ، فإن! المهم سيكون له الأسبقية على الفئات الأخرى. ملاحظة؟ قد يكسر هذا الإعلان بشكل فعال وظيفة التتالي الطبيعية لـ CSS ، مما يجعل من الصعب تصحيح التعليمات البرمجية الخاصة بك ، لذلك من الأفضل استخدامها باعتدال.

ليصلك الجديد

Share This Post