كل ما تحتاج لمعرفته حول محددات CSS

تقدم هذه المقالة موضوعًا مثيرًا للاهتمام ومهمًا يُعرف باسم CSS Selectors وتتبعه بعرض عملي داعم.

تقدم هذه المقالة موضوعًا مثيرًا للاهتمام ومهمًا يُعرف باسم المحددات ومتابعتها بعرض عملي داعم. سيتم تغطية المؤشرات التالية في هذه المقالة ،

فلنبدأ إذن ،





تصميم عناصر HTML

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

يمكنك فهم CSS بشكل أفضل ، إذا كان لديك فهم جيد لماهية محددات CSS. تتيح لك هذه المحددات استهداف عناصر HTML معينة بحيث يمكنك تطبيق النمط الصحيح عليها.



عينة - محددات CSS - Edurekaدعونا نفهم كيف يمكننا تحديد عناصر HTML ،

كيف تختار العناصر؟

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

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



الانتقال إلى مقالة CSS Selectors

محددات CSS

يتيح لك هذا المحدد تحديد عنصر HTML من خلال اسمه.

ضع في اعتبارك الكود أدناه:

p {text-align: center color: magenta}

سيتم تطبيق هذا النمط على كل فقرة.

الفقرة 1

كيفية ضبط مسار جافا في النوافذ

الفقرة 2

سيعطيك هذا الرمز الناتج التالي:

سيتم تطبيق هذا النمط على كل فقرة

الفقرة 1

الفقرة 2

في الكود أعلاه ، تمت محاذاة عناصر HTML للوسط ولها لون 'أرجواني'.

الانتقال إلى مقالة CSS Selectors

محدد معرف CSS

عن طريق تحديد سمة معرف عنصر HTML ، يمكنك تحديد هذا العنصر المحدد. نظرًا لأن المعرف فريد للصفحة ، يمكنك تحديد العنصر الصحيح باستخدام سمة id.

جافا كيفية إنهاء البرنامج

يمكنك تحديد عنصر HTML باستخدام '#' متبوعًا بمعرف ذلك العنصر. على سبيل المثال ، '#firstname' يحدد العنصر حيث يكون المعرف 'الاسم الأول'.

ضع في اعتبارك الكود التالي:

# الفقرة 1 {text-align: center color: orange}

مرحبا بالعالم

هذه الفقرة لن تتأثر.

ناتج الكود أعلاه هو:

مرحبا بالعالم

هذه الفقرة لن تتأثر.

كما ترى في الإخراج أعلاه ، من خلال تضمين id = ”para1 ، تمكنا من تغيير لون هذا العنصر إلى اللون البرتقالي. العنصر الآخر الذي لا يحتوي على هذا يظل غير متأثر.

الانتقال إلى مقالة CSS Selectors

محدد فئة CSS

باستخدام محدد الفئة ، يمكنك تحديد عناصر HTML التي لها سمة فئة معينة. يمكنك تحديد المحدد باستخدام نقطة (رمز نقطة توقف كاملة) متبوعة باسم الفصل. على سبيل المثال ، يختار .intro العناصر التي يكون فيها الفصل هو 'intro'. شيء واحد يجب مراعاته هو أنه لا يمكنك أبدًا بدء اسم فئة برقم.

ضع في اعتبارك الكود التالي:

.center {text-align: center color: pink}

هذا العنوان وردي اللون ومحاذاة للوسط.

هذه الفقرة باللون الوردي ومحاذاة للوسط.

ناتج الكود أعلاه هو:

هذا العنوان وردي اللون ومحاذاة للوسط.



هذه الفقرة باللون الوردي ومحاذاة للوسط.

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



على سبيل المثال ، ضع في اعتبارك الكود التالي:

p.center {text-align: center color: pink}

هذا العنوان لا يتأثر

هذه الفقرة باللون الوردي ومحاذاة للوسط.

ناتج الكود أعلاه هو:



هذا العنوان لا يتأثر



هذه الفقرة باللون الوردي ومحاذاة للوسط.

كما ترى في الإخراج ، لا يتأثر العنوان h2 بالنمط. نظرًا لأننا حددنا 'p.center' ، فإن الفقرة فقط تتأثر بالنمط.



الانتقال إلى مقالة CSS Selectors هذه ،

محدد CSS العالمي

يمكن اعتبار هذا النوع من المحددات على أنه حرف بدل يحدد كل العناصر في الصفحة. يقوم بتحديد جميع العناصر على الصفحة ، ويتم تحديده بواسطة '*'.

على سبيل المثال ، ضع في اعتبارك الكود أدناه:

الدمية مقابل الشيف مقابل عامل ميناء
* {color: darkgreen font-size: 30px}

هذا اختبار (خط أصغر)

هذه فقرة.

ناتج الكود أعلاه هو:

مرحبا بالعالم

هذا اختبار (خط أصغر)

هذه فقرة.

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

هذا يقودنا إلى نهاية هذا المقال.

تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.

لديك سؤال لنا؟ يرجى ذكرها في قسم التعليقات بالمقال وسنعاود الاتصال بك.