لوحة المتصدرين

لنستخدم CSS لرسم شخصية بيماكس (Baymax) من فيلم Big Hero 6. سنحرّك في هذا المنشور صورة خلفية، بالإضافة إلى تأثير حركة بتوقيت دقيق، ونقوم بإجراء عرض تجريبي CSS من عنصر HTML واحد. تجربة حية. عنصر واحد سنكون قادرين باستخدام العنصر الزائف على إنشاء أجزاء الوجه بعنصر HTML واحد. <div class="baymax"></div> التصميم لضبط المرحلة سنضيف تدرّجًا دقيقًا للشاشة لجعلها تبدو كرأس أبيض منحنٍ. سنستخدم لهذا تدرجًا شعاعيًا على عنصر body. body { background: radial-gradient(circle at center, #fff, #fff 50%, #aaa); background-size: 100% 100%; background-repeat: no-repeat; height: 100vh; } بعد ذلك نضع الوجه في مركز الصفحة. الفم خط أسود بسيط، وسنقوم بذلك باستخدام الخاصية border. .baymax { border-bottom: 1.5em solid #000; position: absolute; top: 50%; left: 50%; width: 50%; transform: translate(-50%, -40%); } تقوم الخاصية الأولى بتعيين إطار سفلي أسود بعرض 1.5em. ثمَّ يتموضع الخط باستخدام الموضع المطلق، فيندفع إلى الأسفل 50% ويتحرك من اليسار 50%. قيم الـ 50% هي بالنسبة إلى حجم العنصر الحاوي (body). المشكلة التي نواجهها الآن هي أنَّ العنصر يبدأ من منتصف طول وعرض الشاشة. إنَّه خارج المركز. لموازنة ذلك، نستخدم تحويلًا لسحب العنصر 50% يسارًا من عرضه، وإلى الأعلى 40% من عرضه. عند هذه المرحلة يصبح الفم في المركز على هذا النحو: إضافة العينين سنستخدم العناصر الزائفة before وafter لإضافة العينين إلى الوجه. لن يحتاج هذا إلى أي عنصر HTML إضافي وتتم معالجته بالكامل باستخدام CSS. .baymax::before { background: #000; border-radius: 50%; content: ""; position: absolute; width: 12em; height: 12em; left: -9em; top: -6em; transform: skewX(-4deg); } .baymax::after { background: #000; border-radius: 50%; content: ""; position: absolute; width: 12em; height: 12em; right: -9em; top: -6em; transform: skewX(4deg); } كل من هذه العناصر الزائفة لها خلفية سوداء، وحواف دائرية -border-radius: 50%; لجعلها دائرية. كلّ منها متموضع في نهاية الفم، وأخيرًا لها تحوّل skew لجعلها تبدو كأنَّها مائلة قليلًا للخلف. ستظهر النتيجة كما يلي: البطارية منخفضة هناك مشهدٌ مضحك في الفيلم حيث تنخفض بطارية بيماكس. فيترنَّح وتتدلَّى جفونه. يمكننا استخدام مزيج من الحركات والتدرّجات في الخلفية لإحداث التأثير. نريد أولًا أن نعطي الخلفية لونين. أسود لجزء العين المفتوح، وأبيض للجفن. يحتاج الجزء الأبيض أن يتموضع خارج العينين في البداية، ثمَّ سنحركه لجعل الجفون تتدلَّى. .baymax::before { background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000); background-position: 0 -100%; background-size: 200% 200%; ... } .baymax::after { background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000); background-position: 0 -100%; background-size: 200% 200%; ... } نحن الآن نضيف تدرّجًا خطيًّا في الخلفية، فنجعله ضعف ارتفاع الحاوية، ثم نحدد موضعه لذا يصبح النصف العلوي خارج الحاوية. مع وجود تدرّجات للخلفية في مكانين، يمكننا أن نضيف حركة keyframes للتحكم في حركة الجفون. @keyframes blink { 0%, 50% { background-position: 0 100%; } 85%, 95% { background-position: 0 75%; } 100% { background-position: 0 100%; } } قاعدة keyframes في الحركات هي طريقة لوصف سلسلة من الإطارات، باستخدام النسبة المئوية. تعود النسبة المئوية لمدى استمرار الحركة، لذا فإنَّ النسبة المئوية 50% منتصف الطريق عبر الحركة. بهذه الطريقة يمكننا ضبط الخلفية للبقاء مستيقظين حتى منتصف الحركة، ثمَّ بين الإطار 50% والإطار85%، تتحرك للأسفل، وثمَّ تستقر في نهاية الحركة. الخطوة التالية هي إخبار العناصر الزائفة أن تستخدم إطارات الحركة هذه. أضف خاصية animation للأنماط الحالية. .baymax::before { animation: blink 6s infinite; ... } .baymax::after { animation: blink 6s 0.1s infinite; ... } أخبرنا المتصفح هنا أن يستخدم حركة blink على كل عنصر. وضبطنا مدة الحركة إلى 6 ثواني وستستمر بشكلٍ لا نهائي. خاصية واحدة إضافية في المثال الثاني: تخبر المدة 0.1s بعد 6s المتصفح أن تتأخر الحركة لـ0.1 ثانية. يخلق هذا تأثير إغلاق العين الثانية بتأخيرٍ عن الأولى. وذلك يضيف التأثير المتدلي والمتعب ويجعلها تبدو أكثر واقعيةً. يجب أن تظهر النتيجة النهائية كما في الصورة: يمكنك مشاهدة تجربة حية. المتصفحات حذفت في أمثلة الشفرة أيّ بادئات معتادة webkit- وmoz-. لكن خاصيّات transform وanimation يجب أن تكون مسبوقة، وأنصحك باستخدام شيء ما مثل Autoprefixer لهذا. نسخة gif قابلة للمشاركة إليك نسخة gif متحركة يمكنك مشاركتها على الإنترنت بسهولة: ترجمة -وبتصرف- للمقال Baymax in CSS

في هذا الدّرس من سلسلة تعلّم CSS، سنشرح بعض طرق تغيير طريقة رصف العناصر في المستند، ونتدرّب على ذلك. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. (هذا الدرس) الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. رصف العناصر (Layout) بالإمكان استخدام CSS لتحديد التأثيرات المرئية المتنوعة الّتي قد تؤثر على ارتصاف العناصر في المستند، بعض هذه التقنيّات متقدّمة المستوى، وهي خارجة عن موضوع هذه السّلسلة. عندما ترغب برصف العناصر في المستند بطريقة متشابهة في جميع المتصفّحات، فإنّ ورقة الأنماط تتفاعل بطرقٍ قد تكون شديدة التّعقيد مع الأنماط المبدئيّة في المتصفّح ومحرّك رصف العناصر، وهذا أيضًا موضوع متقدّم لن نتطرّق له. سنقصر اهتمامنا على تقنيّات بسيطة يمكنك البدء بها. هيكل المستند إن أردت التحكّم بتخطيط المستند، فقد تحتاج إلى تغيير هيكله. ربّما تحوي لغة الرّماز الّتي تستخدمها وسومًا عامّة الأغراض تساعد في الوصول إلى بنية معيّنة، وفي HTML يمكن اللّجوء إلى الوسم <div> لهذا الغرض. مثال في مستندك الّذي تتدرّب عليه، لم يكن للفقرات المُرقّمة تحت العنوان الثّاني عنصر مستقلّ يحويها، ولذلك لم يكن بالإمكان إحاطتها بحدود مستقلّة، فلا يوجد عنصر يمكن استهدافه بمحدّد يحقّق هذه النّتيجة. ولحلّ هذه المشكلة، يمكن إضافة وسم <div> يحيط بالفقرات جميعها، ويكون هذا الوسم فريدًا بمعرّف id: <h3>Numbered paragraphs</h3> <div id="numbered"> <p>Lorem ipsum</p> <p>Dolor sit</p> <p>Amet consectetuer</p> <p>Magna aliquam</p> <p>Autem veleum</p> </div> يمكن الآن كتابة قاعدة تخلق حدودًا حول الفقرات والقائمة: ul, #numbered { border: 1em solid #69b; padding-right:1em; } هكذا تبدو النّتيجة: وحدات القياس استخدمنا وحدة البكسل (px) للقياسات في الدّروس السّابقة، وهي ملائمة لبعض الأغراض كشاشات العرض، ولكنّها قد تعطي نتيجة غير مرغوبة عندما يُغيّر المستخدم الخطّ في المتصفح. قد يكون من الأنسب في حالات عديدة استخدام وحدة مبنيّة على النّسب المئويّة أو em (قياس الخطّ الحالي، أو عرض حرف m في هذا الخطّ بصورة أدقّ)، عندما يغيّر المستخدم حجم الخط، فإنّ تخطيط الصّفحة يتغيّر تلقائيًّا. مثال الحدّ على الجانب الأيسر لهذا النّصّ مُعيّن بالبكسل. الخدّ على الجانب الأيمن مُعيّن بوحدة em. غيّر حجم الخطّ في المتصفّح لديك وشاهد كيف يتغيّر الحدّ الأيمن بينما يبقى الأيسر كما هو: كبّرني! تفاصيل أكثر هناك وحدات أخرى مناسبة للأجهزة المختلفة، سنطّلع على معلومات أكثر في الدّروس القادمة. رصف النصوص هناك خاصّيتان تؤثّران في كيفيّة رصف المحتوى النّصّيّ للعناصر: ‏text-align: ترصف محتوى العنصر، وتقبل إحدى القيم التّالية: left, right, center, justify. ‏text-indent: تدفع السّطر الأوّل من الفقرة بالمقدار المُحدّد. هذه الخواصّ تنطبق على أي محتوى مشابه للنّصوص في العناصر، وليس على النّصوص فقط. تذكّر أنّ القيم المُسندة لهذه الخواص يرثها الأبناء، ولذا قد تحتاج إلى إزالتها من الأبناء لتجنّب نتيجة غير مرغوبة. مثال رصف العناوين في المنتصف: h3 { border-top: 1px solid gray; text-align: center; } وهذه هي النّتيجة: لاحظ أنّ المحتوى المصنّف تحت عنوان ما في HTML لا يقع ضمن العنوان ذاته في بنية المستند، ممّا يعني أن تنصيف العناوين لن يؤدّي إلى تنصيف الفقرات المُدرجة تحت هذه العناوين بشكل مبدئيّ، لأنّها لا ترثها. طفو العناصر (Float) تجبر الخاصّة float العنصر على أن "يطفوَ" إلى اليمين أو إلى اليسار، وهذه طريقة بسيطة للتحكّم بالموضع والحجم. تنساب بقيّة المحتويات في المستند بصورة طبيعيّة حول العنصر الطافي، ويمكن التّحكّم بهذا الانسياب الخاصّة clear على العناصر الأخرى لإبعادها عن العناصر الطّافية. مثال في المستند الّذي تتدرّب عليه، تمتدّ القوائم على كامل عرض النّافذة (وإن كانت نصوص العناصر أقصر من عرضها)، يمكن منع ذلك بجعلها تطفو إلى اليسار. لإبقاء العناوين في مواضعها، يجب أيضًا تحديد الخاصّة clear عليها: ul, #numbered {float: left;} h3 {clear: left;} لتبدو النّتيجة هكذا: (يتطلّب الأمر بعض الحشوة على يمين الصّناديق، لأنّهما الحدود قريبة جدًّا من النّصّ) تحديد مواضع العناصر (Positioning) يمكن تعيين موضع العنصر بإحدى أربع طرق باستخدام الخاصّة position وقيمة من القيم التّالية (تعتبر هذه القيم متقدّمة المستوى، يمكن استخدامها بأساليب بسيطة نسبيًّا، ولهذا أوردناها هنا، ولكنّ استخدامها بطرق معقّدة أمر يتطلّب شيئًا من الخبرة): ‏relative: يُزاح العنصر إلى موضع جديدٍ بالنّسبة لموضع الطّبيعيّ، أي يمكن استخدام هذه الخاصّة لإزاحة العنصر بمقدار معيّن، ويمكن أيضًا استخدام حوافّ العنصر لتحقيق نتيجة مشابهة. ‏fixed: موضع العنصر ثابت، أي بالنّسبة لنافذة المستند، فحتّى عندما يمرّر المستخدم الصّفحة إلى أسفل أو إلى أعلى، يبقى العنصر ثابتًا بالنّسبة للنافذة. ‏absolute: موضع العنصر ثابت بالنسبة لعنصر أبٍ، يُشترط أن يكون العنصر الأب ذا موضع relative أو fixed أو absolute، ويمكن جعل موضع الأب relative بمقدار إزاحة مساوٍ للصفر إذا أردنا استخدام هذه الخاصّة على الابن دون إزاحة الأب. ‏static: القيمة المبدئيّة، استخدمها عند الحاجة للنصّ صراحة على تصفير الموضع. بعد تعيين هذه الخاصّة، استخدم إحدى الخواص التّالية لتعيين إزاحة العنصر (وحجمه): top و right و bottom و left و width و height. مثال لتعيين موضع عنصرين أحدهما فوق الآخر، أنشئ عنصرًا يحويهما في المستند: <div id="parent-div"> <p id="forward">/</p> <p id="back">\</p> </div> ثمّ اجعل موضع الأب relative دون إزاحة، واجعل الابنين absolute: #parent-div { position: relative; font: bold 200% sans-serif; } #forward, #back { position: absolute; margin:0px; /* no margin around the elements */ top: 0px; /* distance from top */ left: 0px; /* distance from left */ } #forward { color: blue; } #back { color: red; } هكذا تبدو النّتيجة: تفاصيل أكثر ضبط مواضع العناصر أمرٌ معقّد. إن كنت تصمّم ورقة أنماط لتعمل في عدّة متصفّحات، فعليك أيضًا أن تأخذ في الحٌسبان الاختلافات في كيفيّة تفسير المتصفّحات للمعيار القياسيّ، وربّما العلل المختلفة في إصدارات كلّ متصفّح. تمرين: رصف العناصر عدّل المستند doc2.html وورقة الأنماط style2.css باستخدام أمثلة من فقرتي "هيكل المستند" و"طفو العناصر" السابق ذكرهما. في مثال طفو العناصر، أضفّ بعض الحشوة لفصل النّصّ عن الحدود بمقدار 0.5em. تمرين عدّل المستند doc2.html مُضيفًا الوسم التّالي قرب نهايته، قبل ‎</body>‎: <img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> إن لم تحفظ الصّورة التّالية من قبل لديك، فاحفظها الآن في المجلّد الّذي يحوي المستند السّابق: تأكّد من أن الصّورة تظهر في موضعها المُتوقّع بتحديث الصّفحة في المتصفّح. أضف قاعدة لورقة أنماطك تجعل الصّورة في الزاوية العلويّة اليُمنى لمستندك. حدّث الصّفحة في المُتصفّح واجعل نافذته صغيرة، تحقّق من كون الصّورة تبقى في الزّاوية العلويّة اليمنى حتّى عند تمرير الصّفحة للأسفل: (A) The oceans Arctic Atlantic Pacific Indian Southern (B) Numbered paragraphs 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum شاهد الحل التّمرين الأوّل تظهر الصّورة في يمين القائمة الثّانية. التّمرين الثاني القاعدة التّالية تُحقّق النّتيجة المطلوبة: #fixed-pin { position:fixed; top: 3px; right: 3px; } ما التالي؟ لقد غطّينا معظم المواضيع الأساسيّة في CSS حتى هذا الدّرس، سنشرح في الدّرس المُقبل المُحدّدات المتقدّمة في قواعد CSS، وبعض التنسيقات الخاصّة بالجداول. ترجمة بتصرّف للدرس Layout من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

في هذا الدرس من سلسلة تعلّم CSS، سنتطرق إلى كيفيّة تطبيق الأنماط على العناصر بطريقة انتقائية، وكيف يكون للمحدّدات المختلفة درجات مختلفة من الأولويّة. سنضيف بعض الخواص (attributes) إلى المستند ثم نستخدمها في ورقة الأنماط. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. (هذا الدرس) كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. ما هي المحددات؟ لـCSS مجموعة من المصطلحات الخاصة الّتي تصف اللّغة. كنّا قد أنشأنا سطرًا في ورقة الأنماط محتواه: strong { color: red; } وفي مصطلحات CSS نقول عن هذا السّطر أنّه قاعدة (rule). تبدأ هذه القاعدة بالكلمة strong والّتي نُسمّيها المحدِّد (selector)، لأنّه يحدّد العناصر في DOM الّتي تُطبّق عليها القاعدة المعنيّة. تفاصيل أكثر نُسمّي الجزء ضمن القوسين من القاعدة التّصريح (declaration). الكلمة color تُسمّى خاصّة (property)، وقيمتها (value) هي red. تفصل الفاصلة اللاتينية المنقوطة ; بين أزواجٍ من القيم والخواص ضمن التّصريح ذاته. سنطلق على المُحدّد strong في هذه السلسلة وصف محدّد لوسم (tag selector)، إلّا أنّه في مصطلحات CSS يُسمّى محدّد لنوع (type selector). يُفصِّل هذا الدرس من السلسلة المحدّدات التي يمكن استخدامها في قواعد CSS، فبالإضافة إلى أسماء الوسوم، يمكن استخدام قيم الخواص (attributes) في المُحدّدات، وهذا ما يسمح لقواعد CSS بتحديد أكثر انتقائيّة للعناصر. للخاصّتين class وid وضع خاصّ في CSS. محددات الأصناف (Class selectors) استخدم الخاصّة class في HTML لإسناد صنف إلى العنصر، بإمكانك اختيار أي اسم للصنف، ويمكن للصّنف الواحد أن يُسند إلى عدّة عناصر في الصّفحة. لاستخدام محدّد الصنف في CSS اكتب اسم الصّنف مسبوقًا بنقطة (.). محددات المعرفات (ID selectors) استخدم الخاصّة id في عنصر لإسناد مُعرّف إلى هذا العنصر، بإمكانك اختيار أي اسم للمُعرّف، ولكن ينبغي أن لا يكون لعنصرين في الصّفحة المُعرّف ذاته. لاستخدام مُحدّد المعرّف في CSS، اكتب اسم المُعرّف مسبوقًا برمز #. مثال: لوسم HTML التالي خاصّتا الصّنف والمعرّف معًا: <p class="key" id="principal"> قيمة الخاصّة id، وهي principal يجب أن تكون فريدة لا تتكرّر في كامل المستند، ولكن يمكن استخدام الصّنف key لأي عدد من العناصر. القاعدة التالية في CSS تجعل كل العناصر في المستند خضراء اللون، حتى وإن تكن جميعها عناصر <p>: .key { color: green; } القاعدة التالية تجعل العنصر الوحيد ذا المعرّف principal عريض الخطّ: #principal { font-weight: bolder; } محددات الخواص (Attribute Selectors) لا تقتصر CSS على الخاصتين class وid، بل يمكنك تحديد خواصّ أخرى باستخدام الأقواس المربّعة []. ضع اسم الخاصة ضمن القوسين وأتبعه بعامل ثم قيمة (غير إلزاميّين). يمكن أيضًا جعل المطابقة غير حسّاسة لحالة الحروف اللّاتينية بإضافة "i" بعد القيمة، ولكن هذه الميزة غير مدعومة في معظم المتصفّحات. أمثلة: ‏‎[disabled]‎: تحدّد كل العناصر التي تملك الخاصّة "disabled". ‏‎[type='button']‎: تحدد كل العناصر من النوع "button". ‏‎[class~=key]‎: تحدّد العناص ذات الصّنف "key" بالضّبط وليس أي كلمة تحوي ضمنها "key" مثل "keyed" أو "monkey". تطابق من حيث الوظيفة المُحدّد .key. ‏‎:[lang|=es]‎ تحدّد العناصر المحدّدة على أنّها باللّغة الإسبانية. هذا يتضمن العناصر "es" و"es-MX" ولكن ليس "eu-ES". ‏‎[title*="example" i]‎ يحدّد العناصر التي يحوي عنوانها "example"، متجاهلًا حالة الحروف اللاتينيّة، قد لا يطابق هذا العنصر أي شيء في المتصفّحات الّتى لا تدعم الإشارة "i". ‏‎a[href^="https://"]‎ يحدّد الرّوابط الآمنة. ‏‎img[src$=".png"]‎ يحدّد الصور بصيغة PNG بطريقة غير مباشرة، إلّا أنه لا يحدد الصور بصيغة PNG إن كانت روابطها لا تنتهي بالحروف ".png". محددات الأصناف الزائفة (pseudo-classes) تعني كلمة "الصّنف الزائف" في CSS حالة خاصّة للعناصر التي يُراد تحديدها، فمثلًا إضافة ‎:hover‎ إلى المحدّد يؤدّي إلى تطبيق القاعدة عندما يُمرّر المستخدم مؤشّر الفأرة فوق العنصر الذي يستهدفه المُحدّد. تسمح الأصناف الزائفة (والعناصر الزائفة) بتطبيق تنسيق على عنصر عندما يخضع لعوامل خارجيّة كتاريخ التّصفّح (‎:visited‎ مثلًا)، أو حالة محتواه (مثل ‎:checked‎)، أو موضع الفأرة (مثل ‎:hover‎)، يمكنك مراجعة القائمة الكاملة للمحدّدات على صفحة توصيف مُحدّدات CSS3. الصيغة selector:pseudo-class { property: value; } قائمة بالأصناف الزائفة :link :visited :active :hover :focus :first-child :last-child :nth-child :nth-last-child :nth-of-type :first-of-type :last-of-type :empty :target :checked :enabled :disabled عمق التحديد (Specificity) قد يكون لعدّة قواعد مُحدّدات تستهدف العنصر نفسه، فإن كانت الخاصّة غير مكرّرة ضمن هذه القواعد، لن يحدث تعارض، وستُعيّن هذه الخاصة على العنصر، أما إن كانت الخاصة واردة في أكثر من قاعدة، فإن CSS تطبّق الخاصّة الأكثر عمقًا في التّحديد، فالمُحدّد الّذي يستهدف العنصر بُمعرّفه أكثر عمقًا من مُحدّدات الصّنف والأصناف الزائفة والخواصّ الأخرى، وهذه بدورها أكثر عمقًا من مُحدّدات الوسوم والعناصر الزائفة. تفاصيل أكثر يمكنك أيضًا جمع المُحدّدات، مُنشِئًا مُحدّدًا أكثر عمقًا، فمثلًا يحدّد key. كل العناصر من الصّنف key، والمُحدّد p.key يحدّد فقط العناصر <p> ذات الصّنف key. إن تساوت المُحدّدات بدرجة العمق، كانت الأولوية للقاعدة الّتي ترد آخرًا في ورقة الأنماط. التحديد تبعا للعلاقات بين العناصر يمكن في CSS تحديد العناصر بناءً على علاقتها بعناصر أخرى، ويمكن بذلك إنشاء مُحدِّدات أكثر عمقًا. المحددات الشائع استخدامها بناء على علاقة العناصر المُحدّد يُحدِّد A E أي عنصر E يكون من سلالة A (أي ابنه أو ابن ابنه...) A > E أي عنصر E يكون ابنًا مباشرًا للعنصر A E:first-child أي عنصر E يكون أوّل ابن لأبيه B + E أي عنصر E يكون أول أخٍ لعنصر B (أي الابن التالي لنفس الأب) يمكن أيضًا جمع أيّ من هذه المُحدّدات للتّعبير عن علاقات أكثر تعقيدًا. يمكن استخدام الرّمز * للإشارة إلى "أي عنصر". مثال لجدول HTML التالي خاصّة id، ولكن ليس لسطوره وخلاياه أيّة مُعرّفات: <table id="data-table-1"> ... <tr> <td>Prefix</td> <td>0001</td> <td>default</td> </tr> ... القواعد التالية تجعل الخليّة الأولى في كل سطر عريضة الخطّ، والثّانية ذات خطّ ثابت العرض، ولا تنطبق هذه القواعد إلا على الجدول السّابق المستند: #data-table-1 td:first-child {text-decoration: underline;} #data-table-1 td:first-child + td {text-decoration: line-through;} هذه هي النّتيجة: تفاصيل أكثر في الحالة العاديّة، كلّما زاد عمق المُحدّد، زادت أولويّته، وبهذا يمكنك تجنب إضافة العديد من الأصناف والمعرّفات على أوسم كثيرة في المستند. عندما يصبح حجم المستند ضخمًا وتكون السّرعة مطلوبة، يمكنك تحسين أداء التنسيقات بتجنبّ القواعد المعقدة المبنيّة على العلاقات بين العناصر. لمزيد من الأمثلة عن الجداول، راجع صفحة الجداول في مرجع CSS. تدريب: استخدام محددات الأصناف والمعرفات حرّر ملفّ HTML الّذي تتدرّب عليه، كرّر الفقرة بنسخها ولصقها. أضف الخاصّتين id وclass إلى النّسخة الأولى من الفقرة، وأضف id إلى الثّانية كما في المثال أدناه، أو يمكنك نسخ كامل المثال: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p id="first"> <strong class="carrot">C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets </p> <p id="second"> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> عدّل CSS مُستبدلًا كامل محتوى الملفّ: strong { color: red; } .carrot { color: orange; } .spinach { color: green; } #first { font-style: italic; } احفظ الملفّات وحدّث المتصفّح لترى النّتيجة: بإمكانك تغير ترتيب الأسطر في CSS للتأكد من أن ترتيبها لا يؤثّر على النّتيجة، لأن مُحدّدات الأصناف carrot. و spinach. مُقدَّمَة على مُحدّد الوسم strong، ومُحدّد المُعرّف first# مُقدّم عليها جميعًا. تمرين بدون تعديل ملف HTML، أضف قاعدة وحيدة إلى CSS تبقي كل الحروف الأولى بنفس لونها الحالي، ولكن تجعل الحروف الأخرى في الفقرة الثّانية زرقاء: عدّل القاعدة الّتي أضفتها للتوّ بحيث تجعل الفقرة الأولى زرقاء أيضًا (بدون تعديل أي شيء آخر): شاهد الحل جعل الفقرة الثانية زرقاء اللون أضف قاعدة تستهدف #second وتصريحًا color: blue; كما يلي: #second { color: blue; } يمكن أيضًا استخدام مُحدّد أكثر عُمقًا مثل p#second. جعل الفقرتين زرقاوين غيّر مُحدّد القاعدة الجديدة ليصبح مُحدّد وسم <p>: p { color: blue; } قواعد الألوان الأخرى لها مُحدّدات أكثر عمقًا، لذا فهي تطغى على لون الفقرات الأزرق. مثال عملي: استخدام محددات الأصناف الزائفة أنشئ ملف HTML بالمحتوى التالي: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> </body> </html> عدّل ملف CSS مستبدلًا كلّ محتواه: a.homepage:link, a.homepage:visited { padding: 1px 10px 1px 10px; color: #fff; background: #555; border-radius: 3px; border: 1px outset rgba(50,50,50,.5); font-family: georgia, serif; font-size: 14px; font-style: italic; text-decoration: none; } a.homepage:hover, a.homepage:focus, a.homepage:active { background-color: #666; } احفظ الملفّين وحدّث المتصفّح لمشاهدة النّتيجة (ضع مؤشر الفأرة فوق الرّابط لمشاهدة التأثير): Go to our Home page تدريب: استخدام المحددات بناء على العلاقات بين العناصر والأصناف الزائفة بالإمكان الوصول إلى طرق معقدة لاستهداف العناصر بناء على العلاقات بين عناصرها والأصناف الزائفة، تشيع هذه التقنيات مثلًا بهدف إنشاء قوائم مُنسدلة باستخدام CSS فقط دون JavaScript. أساس هذه التقنية يعتمد على قواعد مشابهة لهذه: div.menu-bar ul ul { display: none; } div.menu-bar li:hover > ul { display: block; } بحيث تطبّق على بنية HTML مثل هذه: <div class="menu-bar"> <ul> <li> <a href="example.html">Menu</a> <ul> <li> <a href="example.html">Link</a> </li> <li> <a class="menu-nav" href="example.html">Submenu</a> <ul> <li> <a class="menu-nav" href="example.html">Submenu</a> <ul> <li><a href="example.html">Link</a></li> <li><a href="example.html">Link</a></li> <li><a href="example.html">Link</a></li> <li><a href="example.html">Link</a></li> </ul> </li> <li><a href="example.html">Link</a></li> </ul> </li> </ul> </li> </ul> </div> اطّلع على مثالنا الكامل كمساعدة. ما التالي؟ بدأت ورقة الأنماط تصبح معقّدة ومتشابكة، سنناقش كيف نُبسّطها ونجعلها سهلة القراءة في الدّرس القادم: كيفية كتابة تعليمات CSS يسهل قراءتها. ترجمة -وبتصرّف- للمقال Selectors من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.