مساء الخير زملائي الأعزاء، اليوم سندرس موضوعين إضافيين محددالتي تسمى محددات CSS التابعة والمجاورة. إلى حد أكبر، يمكنك الاستغناء عنها، ومع ذلك، من أجل تطويرك، تحتاج إلى تعلمها وأحيانا تطبيقها حتى تظل في ذاكرتك. لذلك، دعونا نناقش ما محدداتهم مجاورون وأيهم أطفال وسنقوم بتحليلهم باستخدام مثال.
محددات CSS التابعة- العناصر الموجودة بالداخل العنصر الأصلي. مثال على ذلك يمكن أن يكون على النحو التالي. لدينا كتلة تحتوي على فقرة وكتلة أخرى وصورة. هذه العناصر الثلاثة هم الأطفال. إذا كان هناك أيضًا عناصر أخرى في كتلة فرعية، فلن تعد عناصر فرعية للكتلة الأولى، ولكنها عناصر فرعية للكتلة التي تقع فيها مباشرة. آمل أن تحصل على هذه النقطة.
المجاورة محددات CSS
- العناصر الموجودة واحدة تلو الأخرى في كود الوثيقة. مثال على ذلك هو هذا. لدينا فقرة والعلامة التالية فترة. كل شيء واضح تمامًا، وعلينا فقط أن ننظر إليه باستخدام أمثلة حقيقية.
النص في الفقرة
النص في المدى
لم يعد النص الفرعي في الفقرة
باستخدام الأنماط، سنضيف نفس النتيجة للعلامة فترة
شعبة >الامتداد (
حجم الخط: 200%؛
}
ص +فترة(
لون احمر؛
}
سيتم تطبيق نتيجة تنفيذ الكود في كلتا الحالتين على العلامة فترة، لأنه تابع للعلامة شعبةوالتالي بعد العلامة ص. ولذلك، أصبح الخط ضعف حجمه ولونه أحمر. الآن تعاملنا معها بالكامل محددات الطفل والجيران في CSS، وكل ما عليك فعله هو تعزيز معرفتك عمليًا، نراكم قريبًا!
بناء جملة CSS بسيط ولا تحتاج إلى درجة الدكتوراه في تكنولوجيا المعلومات لفهمه. ومع ذلك، فهي واحدة من اللغات الشعبية القليلة التي ليست منطقية بالمعنى الحقيقي للكلمة. على عكس لغات برمجة الويب الأخرى مثل JavaScript وPHP، لا تحل CSS المشكلات باستخدام المنطق التقليدي. لا يمكن تنفيذ خوارزميات مثل "إذا X، ثم افعل Y، وإلا فافعل Z" أو "حدد كل Ys، ثم افعل X معهم" بلغة مثل CSS. ببساطة، إنها لغة مصممة للتصميم، لغة المصممين، وليس المطورين. لقد بذل بعض المبرمجين ذوي الخبرة الذين عملت معهم الكثير من الجهد في تعلم إتقان CSS لهذا السبب بالذات.
يبدأ تعلم CSS بالفئات والمعرفات، بالإضافة إلى الاستخدام. و # لتعيين العناصر مباشرة. وهذا يكفي لبناء موقع ويب كامل الوظائف، ولكنه ليس حلاً مرنًا بدرجة كافية في حالة تغيير التصميم بالكامل. دعونا نلقي نظرة على نهج بديل لإدارة هذه العناصر التي يصعب الوصول إليها.
المجاور ذات الصلة combinator
لنبدأ بمحدد مناسب في المواقف المعقدة - أداة الدمج المجاورة ذات الصلة. تتم الإشارة إلى أداة الدمج المجاورة ذات الصلة عن طريق ربط عنصرين باستخدام علامة +:ح1+ص
يؤدي هذا إلى تحديد العنصر p التالي الموجود مباشرةً بعد العنصر h1 في DOM. تقترح نظرية الطباعة أننا يجب أن نستخدم المسافات البادئة في فقرات النص، ولكن فقط إذا كانت تتبع فقرة أخرى. عمليًا، يمكن استخدام هذا لوضع مسافة بادئة لجميع الفقرات باستثناء الفقرة الأولى:
ع + ص (مسافة بادئة للنص: 1em؛)
يعد هذا أكثر ملاءمة من تمييز الفقرة الأولى باستخدام class = "first". ثلاثة أسطر، لا توجد فئات ودعم كامل للمتصفح. إذا قمت بوضع علامات img المتعلقة بمحتوى الموقع داخل علامات p (كما يجب أن تفعل في الواقع)، فيمكنك ببساطة تحريك هوامشها اليسرى مرة أخرى باستخدام قيمة سالبة تبلغ -1em:
p + p img ( الهامش الأيسر: -1em; )
بسيطة جدا، أليس كذلك؟ ماذا لو أردنا تحديد السطر الأول من جميع الفقرات التي تأتي مباشرة بعد العناوين، دون تغيير جميع الفقرات الأخرى؟ مرة أخرى يمكننا استخدام فئة العرض. محدد بسيط مصنوع من مجمع مركب مجاور وعنصر زائف سوف يقوم بالمهمة:
h1 + p::السطر الأول (متغير الخط: أحرف صغيرة؛)
ملحوظة: تم اعتماد العنصر الزائف: السطر الأول في CSS 2.1، لكن CSS 3 يستخدم الترميز :: للتمييز بين الفئات الزائفة والعناصر الزائفة.
الموحد الوراثي
بروتوكول الترميز الشائع هو وضع الأقسام في بعض العناصر المسماة في #page أو #wrap:فلاد ميرزيفيتش
تسمى عناصر صفحة الويب متجاورة عندما تتبع بعضها البعض مباشرة في رمز المستند. دعونا نلقي نظرة على بعض الأمثلة على علاقات العناصر.
لوريم إيبسوم دولوراجلس أميت.
في هذا المثال العلامة هو طفل من العلامة
لأنه داخل هذه الحاوية. على التوالى
يعمل كوالد .
لوريم إيبسوم دولور يجلسأميت.
وهنا العلامات و لا تتداخل بأي شكل من الأشكال وتمثل العناصر المجاورة. حقيقة أنها تقع داخل الحاوية لا يؤثر على موقفهم على الإطلاق. لوريم ipsumدولور سيت أميت, com.consectetuer adipiscing نخبة.
العلامات المجاورة هنا و ، و و . حيث و ولا تتم معالجة العناصر المتجاورة لوجود حاوية بينها .
للتحكم في نمط العناصر المتجاورة، استخدم رمز الزائد (+) بين محددين. بناء الجملة العام هو كما يلي.
المحدد 1 + المحدد 2 (وصف قواعد النمط)
المسافات حول علامة الجمع اختيارية؛ ويتم تطبيق النمط الموجود في هذا الترميز على المحدد 2، ولكن فقط إذا كان مجاورًا للمحدد 1 ويتبعه مباشرة.
يوضح المثال 11.1 بنية كيفية تفاعل العلامات مع بعضها البعض.
مثال 11.1. استخدام المحددات المجاورة
HTML5 CSS 2.1 IE Cr Op Sa Fx
لوريم ipsumدولور سيت أميت, com.consectetuerالنخبة الدهنية.
أبجد هوز دولور الجلوس امات، com.consectetuerالنخبة الدهنية.
وتظهر نتيجة المثال في الشكل. 11.1.
أرز. 11.1. تمييز النص بالألوان باستخدام المحددات المجاورة
يقوم هذا المثال بتغيير لون النص لمحتويات الحاوية عندما يقع مباشرة بعد الحاوية . في الفقرة الأولى يتم تنفيذ هذا الوضع، فتظهر كلمة “consectetuer” باللون الأحمر في المتصفح. وفي الفقرة الثانية، على الرغم من وجود علامة ، ولكن لا توجد علامة في الحي لا، لذلك لم يتم تطبيق أي نمط على هذه الحاوية.
دعونا نلقي نظرة على مثال أكثر عملية. غالبًا ما يصبح من الضروري تضمين الحواشي السفلية والملاحظات المختلفة في نص المقالة. عادة، لهذا الغرض، يمكنك إنشاء فئة نمط جديدة وتطبيقها على الفقرة، وبهذه الطريقة يمكنك بسهولة تغيير مظهر النص. لكننا سنذهب في الاتجاه الآخر ونستخدم المحددات المجاورة. لتسليط الضوء على التعليقات، دعونا ننشئ فئة جديدة، ونسميها sic، ونطبقها على العلامة
. يتم تمييز الفقرة الأولى بعد هذا العنوان بلون الخلفية والمسافة البادئة (مثال 11.2). سيبقى مظهر الفقرات المتبقية دون تغيير.
مثال 11.2. تغيير نمط الفقرة
HTML5 CSS 2.1 IE Cr Op Sa Fx
طرق اصطياد الأسد في الصحراء
طريقة البحث التسلسلي
لنفترض أن الأسد له أبعاد إجمالية L x W x H، حيث L هو طول الأسد من طرف الأنف إلى فرشاة الذيل، وW هو عرض الأسد، وH هو ارتفاعه. بعد ذلك نقسم الصحراء إلى عدد من المستطيلات الأولية التي يتناسب حجمها مع عرض الأسد وطوله. مع الأخذ في الاعتبار أن الأسد قد لا يكون موجودًا بشكل صارم في منطقة معينة، ولكن في نفس الوقت في اثنتين منها، يجب أن يكون قفص الصيد بمساحة أكبر، وهي 2L × 2W. بفضل هذا، سوف نتجنب الخطأ المتمثل في احتجاز نصف الأسد فقط في القفص، أو، الأسوأ من ذلك، ذيله فقط.
ملاحظة مهمة
لتبسيط الحسابات، يمكن التخلص من الذيل وعدم اعتباره خطأ في القياس.
وتظهر نتيجة هذا المثال في الشكل. 11.2.
أرز. 11.2. تغيير مظهر الفقرة باستخدام المحددات المجاورة
في هذا المثال، يتم تنسيق النص باستخدام الفقرات (tag
)، ولكن كتابة H2.sic + P يعين النمط فقط للفقرة الأولى التي تلي العلامة
، والتي تمت إضافة فئة تسمى sic.
تعتبر المحددات المجاورة ملائمة للاستخدام مع تلك العلامات التي تتم إضافة المسافات البادئة إليها تلقائيًا من أجل ضبط مقدار المسافة البادئة بشكل مستقل. على سبيل المثال، إذا كانت العلامات متتالية
و ، فيمكن تعديل المسافة بينهما بسهولة باستخدام المحددات المجاورة. الوضع مشابه للعلامات المتتالية. و
و
وأيضا في حالات أخرى مماثلة. يغير المثال 11.3 مقدار المسافة بين العلامات المحددة بهذه الطريقة.
مثال 11.3. المسافات بين العناوين والنص
HTML5 CSS 2.1 IE Cr Op Sa Fx
عنوان 1
العنوان 2
فقرة!
نظرًا لأنه عند استخدام المحددات المتجاورة، يتم تطبيق النمط فقط على العنصر الثاني، ويتم تقليل حجم الهوامش عن طريق تضمين قيمة سالبة لخاصية أعلى الهامش. في هذه الحالة، يرتفع النص، أقرب إلى العنصر السابق.
أسئلة للتحقق
1. ما هي العلامات المتجاورة في هذا الرمز؟
صيغة حمض الكبريتيك:ح 2لذا 4
و
- و
- و
- و
- و
2. كود HTML التالي متاح:
نظرية فيرما الأخيرة
X ن+ص ن
= ز ن
حيث n عدد صحيح > 2
ما النص الذي سيتم تمييزه باللون الأحمر باستخدام نمط SUP + SUP ( اللون: أحمر؛ )؟
- "ن" الثانية
- الثانية والثالثة "ن".
في المقابل، يتم استخدام المناطق المجاورة بشكل أقل. والفرق الرئيسي هو أنه يجب عليهم اتباع الآخر. ولتسهيل فهم هذا الموضوع، أقترح عليك إلقاء نظرة على هذا الهيكل:
<тег1> <тег2> <тег3> <тег4> <тег5><тег6>...
كما خمنت على الأرجح من الدرس السابق، فإن العلامات 2، 3، 4، 5، 6 هي محددات السياق لـ العلامة1. في المقابل، المحددات المجاورة ستكون: tag2 وtag3، tag4 وtag5، و لكن في نفس الوقت العلامة2و العلامة4ليست متجاورة. سيتم تطبيق خصائص النمط على العنصر الأخير الذي تحدده كعنصر مجاور. عليك فقط اتباع ترتيب المحددات. بناء الجملة العام للكتابة هو:
Selector1 + Selector2+ ...+selectorN ( property1: value; property2: value; ... propertyN: value)
دعونا ننظر إلى هذا المثال:
عنوان
بطاقة شعار صهو محدد مجاور للعلامة h1
