فهم العنصر الزائف قبل وبعد
الغرض من Cascading Style Sheet (CSS) في المقام الأول هو تطبيق الأنماط على ترميز HTML ، ولكن في بعض الحالات عند إضافة علامات إضافية إلى المستند تكون زائدة عن الحاجة أو غير ممكنة ، هناك بالفعل ميزة في CSS تسمح لنا بإضافة علامات إضافية دون تعطيل الوثيقة الفعلية ، وهي عناصر-الزائفة.
لقد سمعت بهذا المصطلح ، خاصةً إذا كنت تتابع بعض برامجنا التعليمية.
في الواقع هناك عدد قليل من أفراد الأسرة CSS التي تصنف على أنها عناصر-الزائفة مثل ال :السطر الأول, :الرسالة الأولى, ::اختيار, :قبل و :بعد. لكن بالنسبة لهذا المقال ، سنقصر تغطيتنا على فقط :قبل و :بعد, “عناصر-الزائفة” هنا سوف تشير على وجه التحديد إلى كل منهما. سوف ننظر في هذا الموضوع بالذات من الأساسيات.
بناء الجملة ودعم المستعرض
ال عناصر-الزائفة لقد كان بالفعل في جميع أنحاء منذ CSS1, لكن ال :قبل و :بعد التي نناقشها هنا صدرت في CSS2.1. في البداية ، و عناصر-الزائفة استخدم النقطتين المفردتين في بناء الجملة ، ثم تطورت الويب ، في CSS3 عناصر-الزائفة تم تنقيح لاستخدام القولون المزدوج - أن تصبح ::قبل و ::بعد - لتمييزه مع الزائفة الطبقات (أي. :يحوم, :نشيط, وما إلى ذلك وهلم جرا).
ومع ذلك ، سواء كنت تستخدم التنسيق النقطي أو النقطتين النقطيتين ، فستظل المتصفحات تتعرف أيضًا. ونظرًا لأن Internet Explorer 8 يدعم تنسيق النقطتين الأحاديتين فقط ، يصبح استخدام النقطتين الأحاديتين أكثر أمانًا إذا كنت ترغب في توافق مستعرض أوسع.
ماذا تعمل، أو ماذا تفعل?
باختصار ، فإن عناصر-الزائفة سيتم إدراج عنصر إضافي قبل أو بعد عنصر المحتوى ، لذلك عندما نضيفهما كليهما ، تكون متساوية تقنياً ، مع الترميز التالي.
:قبل هذا المحتوى الرئيسي. :بعد
لكن هذه العناصر لا يتم إنشاؤها فعليًا في المستند. لا تزال مرئية على السطح ولكنك لن تجدها على مصدر المستند ، لذا فهي عملية مزورة عناصر.
باستخدام العناصر الزائفة
عن طريق عناصر-الزائفة سهل نسبيا بناء الجملة التالي محدد: قبل سيضيف عنصر قبل محدد المحتوى أثناء بناء الجملة هذا محدد: بعد سيضيف بعد ذلك ، ولإضافة محتوى بداخله يمكننا استخدام يحتوى خاصية.
على سبيل المثال ، سيضيف المقتطف أدناه علامة اقتباس قبل وبعد اقتباس فقرة.
blockquote: قبل content: open-quote؛ blockquote: after content: close-quote؛
تصميم العناصر الزائفة
على الرغم من كونه عنصرا مزيفا ، فإن عناصر-الزائفة فعلا تتصرف مثل “حقيقة” جزء؛ نحن قادرون على إضافة أي إعلان أنماط عليها ، مثل تغيير اللون ، إضافة الخلفية ، ضبط حجم الخط ، محاذاة النص بداخله وما إلى ذلك.
blockquote: قبل content: open-quote؛ حجم الخط: 24pt ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 42 بكسل ؛ اللون: # ff؛ الخلفية: #ddd؛ تعويم: اليسار؛ الموقف: نسبي أعلى: 30 بكسل ؛ blockquote: after content: close-quote؛ حجم الخط: 24pt ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 42 بكسل ؛ اللون: # ff؛ الخلفية: #ddd؛ تطفو: صحيح ؛ الموقف: نسبي أسفل: 40 بكسل ؛
تحديد البعد
العناصر التي تم إنشاؤها هي افتراضيًا عنصر المستوى المضمّن ، لذلك عندما نكون على وشك تحديد الارتفاع والعرض ، يتعين علينا أولاً تحديده كعنصر كتلة باستخدام العرض محجوب إعلان.
blockquote: قبل content: open-quote؛ حجم الخط: 24pt ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 42 بكسل ؛ اللون: # ff؛ الخلفية: #ddd؛ تعويم: اليسار؛ الموقف: نسبي أعلى: 30 بكسل ؛ نصف قطر الحدود: 25 بكسل ؛ / ** عرّفها كعنصر كتلة ** / display: block؛ الارتفاع: 25 بكسل ؛ العرض: 25 بكسل ؛ blockquote: after content: close-quote؛ حجم الخط: 24pt ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 42 بكسل ؛ اللون: # ff؛ الخلفية: #ddd؛ تطفو: صحيح ؛ الموقف: نسبي أسفل: 40 بكسل ؛ نصف قطر الحدود: 25 بكسل ؛ / ** عرّفها كعنصر كتلة ** / display: block؛ الارتفاع: 25 بكسل ؛ العرض: 25 بكسل ؛
إرفاق صورة الخلفية
يمكننا أيضًا استبدال المحتوى بالصورة بدلاً من النص العادي فقط. على الرغم من أن يحتوى يوفر الملكية رابط () سلسلة لإدراج صورة ، ولكن في معظم الحالات أفضل استخدام خلفية خاصية لمزيد من السيطرة على الصورة المرفقة.
blockquote: قبل content: ""؛ حجم الخط: 24pt ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 42 بكسل ؛ اللون: # ff؛ تعويم: اليسار؛ الموقف: نسبي أعلى: 30 بكسل ؛ نصف قطر الحدود: 25 بكسل ؛ الخلفية: url (images / quotationmark.png) -3px -3px #ddd؛ العرض محجوب؛ الارتفاع: 25 بكسل ؛ العرض: 25 بكسل ؛ blockquote: after content: ""؛ حجم الخط: 24pt ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 42 بكسل ؛ اللون: # ff؛ تطفو: صحيح ؛ الموقف: نسبي أسفل: 40 بكسل ؛ نصف قطر الحدود: 25 بكسل ؛ الخلفية: url (images / quotationmark.png) -1px -32px #ddd؛ العرض محجوب؛ الارتفاع: 25 بكسل ؛ العرض: 25 بكسل ؛
ومع ذلك ، كما ترون من المقتطف أعلاه ، ما زلنا نعلن عن يحتوى الملكية وهذه المرة مع سلسلة فارغة. ال يحتوى الملكية هي متطلب وينبغي أن تطبق دائما ؛ وإلا فإن شبه عنصر لن يعمل أيا كان.
مع الجمع بين الطبقات الزائفة
على الرغم من أنها نوع مختلف من زائف, يمكننا استخدام الزائفة الطبقات مع عناصر-الزائفة معا في قاعدة CSS واحدة ، على سبيل المثال ، إذا كنا نريد أن ندير خلفية علامة اقتباس أغمق قليلاً عندما نحوم فوق اقتباس فقرة.
blockquote: hover: after، blockquote: hover: before background-color: # 555؛
مضيفا تأثير الانتقال
ويمكننا حتى تطبيق انتقال خاصية عليها لخلق تأثير انتقال اللون رشيقة.
الانتقال: جميع 350ms. - الانتقال: جميع 350 مللي ثانية ؛ الانتقال -moz: جميع 350ms. -wkkit-الانتقالية: جميع 350ms.
لسوء الحظ ، يبدو أن تأثير الانتقال لا يعمل إلا في أحدث إصدار من Firefox. نأمل أن يلحق المزيد من المتصفحات بالسماح للسماح بتطبيق خاصية النقل عناصر-الزائفة فى المستقبل.
- عرض
- تحميل المصدر
المزيد من الإلهام
لإلهامك ، قمنا باختيار ثلاثة أمثلة رائعة يمكن أن توفر لك أفكارًا لتصميم الويب الخاص بك.
الظلال الرائعة
في هذا البرنامج التعليمي شرح بول أندروود كيفية إنشاء تأثير ظل أكثر واقعية ورائعة باستخدام :قبل و :بعد عناصر-الزائفة. يتم وضع كل منهما بشكل مطلق ووضعهما في العمق مع نفي ض مؤشر القيمة.
تأثير صورة مكدسة
باستخدام عناصر-الزائفة لإنشاء تأثير صورة مكدسة فوضوي فقط مع صورة واحدة على العلامات هو ممكن أيضا. ال عناصر-الزائفة يستخدم لإنشاء وهم من الصور المكدسة في الجزء الخلفي من الصورة الفعلية باستخدام السلبية ض مؤشر.
استنتاج
Pعناصر-seudo هو ببساطة “بارد” وقابلة للاستخدام في نهاية المطاف ، أساسا لدينا عنصرين مكافأة لكل عنصر نضيفه دون التدخل في بنية HTML الفعلية على الإطلاق ، ثم نحولها إلى كل شيء يمكننا تخيله تقريبًا.
هناك بالفعل بعض التحسن ل عناصر-الزائفة التي يجري العمل عليها حاليا ، مثل تداخل العناصر الزائفة div :: before :: before content: "؛ و عناصر الزائفة متعددة div :: قبل (3) content: "؛ التي من الواضح أنها ستفتح المزيد من الاحتمالات في ممارسة تصميم المواقع الإلكترونية في المستقبل. أثناء تنفيذها في المتصفحات الحالية ، دعنا ننتظر بصبر الآن.
