كيفية استهداف جزء من صفحة ويب باستخدام محددات CSS

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

يبدأ كل شيء بتحديد أي جزء من الصفحة تريد تصميمه بالضبط.

CSS = المحددات + الإعلانات

يحتوي ملف CSS على سلسلة من القواعد التي تصف كيفية تنسيق ملف HTML. تتكون كل قاعدة من جزأين: ما يجب تصفيفه وكيفية تصميمه. يتم التحكم في الجزء الأول باستخدام سلسلة من المصطلحات المعروفة باسم "المحددات".

كيفية استهداف جزء من صفحة ويب باستخدام محددات CSS

تتضمن الأمثلة في هذه المقالة تعريفات الأنماط ، لكنها ليست محور التركيز: المحددات نفسها.

تاريخيًا ، كانت هناك ثلاثة مستويات (أو إصدارات) لمحدد CSS بدرجات متفاوتة من دعم المتصفح. في عام 2020 ، وفقًا لـ Can I Use ، تتوفر جميعها لأكثر من 99 بالمائة من المستخدمين حول العالم.

محددات المستوى 1

قدم المستوى 1 الأنواع الأساسية الأربعة من المحددات التي تغطي عددًا كبيرًا من الحالات ، حتى اليوم.

نمط	اعواد الكبريت
`E`	جميع العناصر E.
`.c`	كل العناصر مع class = "c"
`#myid`	العنصر ذو المعرف = "myid"
`E F`	عنصر F داخل عنصر E.
الفئات الزائفة
`E:link`	ارتباط تشعبي إلى صفحة لم يتم زيارتها مسبقًا
`E:visited`	ارتباط تشعبي إلى صفحة تمت زيارتها بالفعل
`E:active`	ارتباط تشعبي محدد حاليًا
العناصر الزائفة
`E::first-line`	أول سطر منسق لعنصر E.
`E::first-letter`	أول حرف منسق لعنصر E.

اكتب محدد

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

p { margin-bottom: 0; } b { font-family: sans-serif; }

محدد الفئة

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

.intro { font-weight: bold; }

هذا المحدد سيتطابق مع:

…

لكن لاحظ أنه سيتطابق أيضًا مع:

…

إذا كنت تريد تطبيقه على فقرات المقدمة فقط ، فيمكنك الجمع بين محدد النوع ومحدد الفئة:

p.intro { font-weight: bold; }

محدد الهوية

يجب أن تكون سمة معرف HTML فريدة داخل المستند ، على سبيل المثال إذا كان لديك:

…

يجب أن يكون هذا هو العنصر الوحيد الذي يحتوي على معرف "محتويات". يسمح لك محدد المعرف باستهداف هذا العنصر المحدد في مستند:

#contents { color: #333; }

محدد النسب

بدقة ، "مُدمج" ، لأن هذا المُحدِّد يدور حول المسافة بين اثنين آخرين. HTML هرمي ، كما هو موضح في نظرة عامة على DOM . يسمح المحدد الفرعي بتحديد عنصر من خلال سياقه داخل عنصر آخر:

table b { font-weight: normal; }

فئات وعناصر زائفة

تستهدف المحددات الزائفة الفئات أو العناصر التي لا توجد صراحة ولكنها متاحة على أي حال. فكر فيهم كمكافآت محتوى خاصة:

p::first-line { text-transform: uppercase; }

قوائم المحدد

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

th { padding: 1em; } td { padding: 1em; }

يمكنك كتابة:

th, td { padding: 1em; }

النوعية

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

p.intro { color: black; } p { color: gray; }

في مثل هذه الحالات ، يتم تحديد القاعدة التي تحظى بالأولوية من خلال خصوصيتها ، على النحو التالي:

محددات المعرف ("# محتويات") هي الأكثر تحديدًا.
محددات الفئة (".author") أقل تحديدًا.
محددات النوع (`p`) هي الأقل تحديدًا.

عند حساب الخصوصية ، لا يتم أخذ كل مستوى في الاعتبار إلا إذا كان هناك محددان لهما نفس النتيجة في المستوى الأعلى ، لذا فإن "#contents" أكثر تحديدًا من "article.news p.author.special" لأن "يربح" السابق على محددات المعرفات.

محددات المستوى 2

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

نمط	اعواد الكبريت
`*`	أي عنصر
`E > F`	عنصر F تابع لعنصر E.
`E + F`	عنصر F يسبقه مباشرة عنصر E.
محددات السمات
`E[foo]`	عنصر E بسمة "foo"
`E[foo="bar"]`	عنصر E تكون سمة "foo" له هي "شريط" تمامًا
`E[foo~="bar"]`	عنصر E تكون السمة "foo" الخاصة به عبارة عن قائمة من القيم المفصولة بمسافات بيضاء ، أحدها "شريط"
`E[foo\|="en"]`	عنصر E تحتوي السمة "foo" على قائمة قيم مفصولة بواصلة تبدأ بـ "en"
الفئات الزائفة
`E:first-child`	عنصر E ، الطفل الأول لوالده
`E:lang(fr)`	عنصر من النوع E في اللغة "fr"
العناصر الزائفة
`E::before`	المحتوى الذي تم إنشاؤه قبل محتوى العنصر E.
`E::after`	المحتوى الذي تم إنشاؤه بعد محتوى العنصر E.

محدد عالمي

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

* { margin: 0; }

محددات السمات

تسمح محددات السمات باستهداف الأنماط بشكل محدد للغاية ، وتصفيتها حسب سمة العنصر:

a[title] { text-decoration: underline dotted; }

جهاز دمج الأطفال: عنصر على الفور داخل آخر

مشابه لمجمع السليل ، لكن هذا الموحّد يتطابق فقط مع الأطفال المباشرين ، وليس الأحفاد في أي أسفل الشجرة. على سبيل المثال ، يتطابق "ul> li" مع نص "القسم 1" هنا فقط ، وليس "القسم 1.1":

Section 1
- Section 1.1
- Section 1.2

مجمع الأخوة المجاور: الأخ التالي

h1 + p { font-weight: bold; }

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

Contents

some extra text

Introductory paragraph

Following paragraph

لاحظ أن هذا المحدد يأخذ بعين الاعتبار العناصر فقط - وليس النص - عند تحديد الشقيق التالي.

ميراث

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

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

الموضوعات ذات الصلة: أمثلة بسيطة لرمز CSS يمكنك تعلمها في 10 دقائق

القاعدة الأساسية الجيدة هي استهداف العناصر بشكل عام كما هو منطقي - لا تستهدف كل عنصر على حدة عندما يفعل محدد "الجسم" البسيط.

محددات المستوى 3

تمت إضافة العديد من الفئات الزائفة في هذا المستوى ، جنبًا إلى جنب مع بعض محددات السمات ومُدمج جديد.

نمط	اعواد الكبريت
`E ~ F`	عنصر F يسبقه عنصر E.
محددات السمات
`E[foo^="bar"]`	عنصر E تبدأ سمة "foo" الخاصة به بالسلسلة "bar"
`E[foo$="bar"]`	عنصر E تنتهي صفته "foo" بالسلسلة "bar"
`E[foo*="bar"]`	عنصر E تحتوي السمة "foo" على السلسلة الفرعية "bar"
الفئات الزائفة
`E:root`	عنصر E ، جذر المستند
`E:nth-child(n)`	عنصر E ، الطفل رقم n لوالده
`E:nth-last-child(n)`	عنصر E ، الطفل رقم n لوالده ، يتم حسابه من العنصر الأخير
`E:nth-of-type(n)`	عنصر E ، الأخ من النوع n من نوعه
`E:nth-last-of-type(n)`	عنصر E ، الأخ من النوع n من نوعه ، يتم حسابه من العنصر الأخير
`E:last-child`	عنصر E ، آخر تابع لوالده
`E:first-of-type`	عنصر E ، الأخ الأول من نوعه
`E:last-of-type`	عنصر E ، أخير أخ من نوعه
`E:only-child`	عنصر E ، فقط تابع لوالده
`E:only-of-type`	عنصر E ، شقيق فقط من نوعه
`E:empty`	عنصر E ليس له توابع (بما في ذلك العقد النصية)
`E:target`	عنصر E هو هدف URI المُحيل
`E:enabled`	عنصر واجهة المستخدم E الذي تم تمكينه
`E:disabled`	عنصر واجهة المستخدم E المعطل
`E:checked`	عنصر واجهة المستخدم E الذي تم فحصه
`E:not(s)`	عنصر E لا يتطابق مع المحددات البسيطة

محددات السمات

يمكنك اختيار العناصر ذات سمة الذي يبدأ مع قيمة معينة: a[href^="https:"]، وينتهي مع قيمة معينة: img[src$=".gif"]، أو تحتوي على قيمة: a[*="value"].

فئات الزائفة

تشتمل الفئات الزائفة الإضافية على ": last-child" و ": blank" (لمط��بقة عنصر بدون محتوى) و ": check" الذي يطابق عنصرًا مثل إدخال مربع الاختيار ، ولكن فقط عند تحديده.

مُشترك الأخوة العام: الأخ التالي

على غرار مُجمع الأشقاء المجاورين من المستوى 2 ، يتطابق هذا مع أي شقيق يأتي بعد الآخر ، وليس التالي فقط:

h1 ~ p { font-size: 110%; }

محددات CSS وكيفية استخدامها

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

حقوق الصورة: Pankaj Patel / Unsplash

Tags: #البرمجة #تصميم الويب #المغلق

كيف تكتب وتجمع أول كود سوليتى الخاص بك

Solidity هي لغة البرمجة التي تستخدمها العقود الذكية على Ethereum blockchain. إنها لغة برمجة مكتوبة بشكل ثابت وموجهة للكائنات.

SQL مقابل NoSQL: ما هي أفضل قاعدة بيانات لمشروعك التالي؟

كيفية البحث عن مكعبات ومربعات N-Digit مثالية باستخدام Python و C ++ و JavaScript

يحب العديد من المبرمجين حل المشكلات الرياضية الصعبة باستخدام الكود. يساعد على شحذ العقل وتحسين مهارات حل المشكلات. في هذه المقالة ، ستتعلم كيفية العثور على أصغر وأكبر المربعات والمكعبات الكاملة المكونة من رقم n باستخدام Python و C ++ و JavaScript. يحتوي كل مثال أيضًا على عينة إخراج لعدة قيم مختلفة.

كيفية استخدام بايثون كآلة حاسبة لسطر الأوامر

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

كيفية تضمين التغريدات في منشورات WordPress الخاصة بك

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

ابدأ مع Jupyter Notebook: برنامج تعليمي

إذا كنت عالم بيانات طموحًا يعمل مع Python أو R ، فأنت بحاجة إلى معرفة كيفية استخدام Jupyter Notebook. إنه IDE مفتوح المصدر وقائم على الخادم لمعالجة البيانات ومشاركة التعليمات البرمجية الحية ، فضلاً عن إدارة سير عمل علم البيانات.

الترميز ليس متاحًا للجميع: 9 وظائف تقنية يمكنك الحصول عليها بدونها

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

7 أوامر أساسية لبدء استخدام بايثون للمبتدئين

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

أول تطبيق ويب ASP.NET لديك: كيفية البدء

ASP.NET هو إطار عمل مجاني عبر الأنظمة الأساسية من Microsoft لإنشاء تطبيقات وخدمات الويب. منصة ASP.NET هي امتداد لـ .NET ، وهي منصة مطورة للأدوات ولغات البرمجة والمكتبات المستخدمة لبناء تطبيقات مختلفة.

هل ARCore أو ARKit أفضل لخلق تجارب الواقع المعزز؟

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

كيفية إنشاء فرع جديد في Git

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

كيفية استخدام بيان إذا بايثون

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

أفضل 5 شارات من شأنها تعزيز مستودع GitHub الخاص بك

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

كيفية تثبيت .NET Framework الإصدار 3.5 على نظام التشغيل Windows 10

بصفتك مستخدمًا لنظام التشغيل Windows ، فمن المحتمل أن تكون قد صادفت مرة واحدة على الأقل الكلمات .NET Framework. إنه إطار عمل برمجي مطور من Microsoft يتيح لك إنشاء برامج C # و C ++ و F # و Visual Basic وتشغيلها. أحدث إصدار من .NET هو 4.8 ، ولكن قد يحتاج جهاز الكمبيوتر الخاص بك إلى إصدار أقدم من .NET (مثل .NET 3.5) لتشغيل بعض التطبيقات.

7 بدائل مفتوحة المصدر لنظام إدارة المحتوى في ووردبريس

هل تبحث عن بديل WordPress لبناء موقع الويب الخاص بك؟ لا مزيد من البحث. ستوضح لك هذه المقالة أنظمة إدارة المحتوى (CMS) الأخرى التي يمكنك استخدامها لبناء موقعك.

كيفية إنشاء وإدارة بيئات Python الافتراضية بشكل فعال

لا يمكنك إكمال مشروع واقعي في Python بنجاح بدون بيئة افتراضية. أدوات مثل virtualenvwrapper و virtualenv شائعة لإنشاء وإدارة بيئات افتراضية لتطوير الويب ، بينما يستخدم علماء البيانات أناكوندا على نطاق واسع.

كيفية استخدام وحدة تقويم Pythons

تقدم Python وحدة تقويم مدمجة تتيح لك معالجة التعليمات البرمجية لأيام أو شهور محددة من السنة. يمكنك استخدامه لإخراج سلسلة من جميع أشهر التقويم في السنة ، على سبيل المثال.

Visual Studio 2022 مقابل 2019: هل يجب عليك الترقية الآن؟ شرح

في وقت سابق من هذا العام ، أصدرت Microsoft نسخة المعاينة من Visual Studio 2022 في عالم البرمجة الجامح. هذه أخبار جيدة! إنه IDE شائع للغاية ، ولكن بسبب ضبط أو ربما حتى إصلاح شامل ، نظرًا لوتيرة التغيير في نظام DevOps البيئي الذي يزدهر فيه.

أفضل 8 مدونات جافا للمبرمجين

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

كيفية حساب قيمة nCr

الجمع مفهوم رياضي. يشير إلى ترتيب العديد من العناصر حيث يكون ترتيبها غير ذي صلة. تصف الصيغة الأساسية عدد التركيبات الصالحة.