ما هو الهدف في المغلق. الهدف في CSS

فئة: target pseudo class هي إحدى الميزات الرائعة لـ CSS3. إنه يتوافق مع العنصر المشار إليه بواسطة المعرف في المستند URI.

يحتوي المعرف في URI على الحرف "#" متبوعًا باسم المعرف الذي يطابق قيمة السمة هوية شخصيةعنصر في المستند.

الدعم

نظرًا لأننا نتحدث عن CSS3 ، فإن الفئة الزائفة مدعومة من قبل جميع المتصفحات الحديثة باستثناء IE 6 إلى 8. لا ينبغي أن يمنعك الإحباط المعتاد من استخدام: target. يدعم IE9 بالفعل: الفئة الزائفة الهدف.

كيف أستخدم: الهدف؟

يمكن أن يكون لهذه الفئة الزائفة أسلوبها الخاص ، تمامًا مثل الفصول الزائفة. : يحوم, : نشيطأو : التركيزللروابط. بالإضافة إلى الفصول الزائفة المذكورة أعلاه : استهدافالمستخدمة في إجراءات معينة مع الموقع. خاصة عند استخدام معرف جزء ، مثل http://example.com/index.html#lorem-ipsum.

برهنة

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

ترميز HTML

يوجد أدناه مثال من العرض التوضيحي. لدينا 4 روابط ونفس عدد الكتل. كل مجموعة لها معرفها الفريد.

  • كتلة 1
  • القالب 2
  • القالب 3
  • القالب 4

Lorem ipsum dolor sit amet، consectetur adipiscing elit. Donec tempus، felis at varius eleifend، neque orci porta magna، التالي aliquam ligula velit quis erat. Aenean porttitor pellentesque risus ، eu tincidunt ipsum blandit in.

Sed lobortis placerat elit tincidunt tempor. نام كريمينسيم euismod quam nec tempor. Sed tortor lorem ، ultricies auctor nec ، auctor ut neque. Aenean varius، urna eget adipiscing feugiat، nunc ligula molestie massa، id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus.

Pellentesque quis Tortor vitae elit cursus vulputate et vel dui. Nunc Commodo premium arcu in ultricies. Nunc velit enim، et tincidunt leo. فئة ملائمة taciti sociosqu ad litora torquent لكل conubia nostra ، per inceptos himenaeos.

Quisque eget tempor sapien. Cras convallis tim orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id Diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas.

CSS

يتيح لك رمز CSS التالي تحقيق التأثير المطلوب ، والذي يتم من خلاله تمييز الكتلة ذات المعرف المقابل (يظهر ظل حول المستطيل).

/ * أضف بعض المساحة * / ul ، div (margin-bottom: 10px ؛) / * نمط الكتلة الافتراضي * / div (الحشو: 10 بكسل ؛ الحد: 1 بكسل صلب #eaea ؛ -moz-border-radius: 5px ؛ الحدود- نصف القطر : 5px؛) / * غيّر عرض الإخراج إذا كان يطابق * / div: target (border-color: # 9c9c9c؛ -moz-box-shadow: 0 0 4px # 9c9c9c؛ -webkit-box-shadow: 0 0 4px # 9c9c9c ؛ مربع الظل: 0 0 4px # 9c9c9c ؛)

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

هل هناك طريقة للتعامل مع أحداث النقر على CSS دون استخدام JavaScript. يمكنك استخدام الطريقة مع : استهداف... ولكن ماذا لو كان لا يمكن استخدامها؟ هناك طريقة أخرى.

شاهد العرض التوضيحي. تم إجراؤه بالكامل في CSS ، وليس سطرًا واحدًا من JavaScript. يعتمد على الاستخدام الأصلي لمحددي: active و: hover.

وصف

أولاً ، تحتاج إلى إنشاء حاوية تحتوي على الزر والكتل التي يتم عرضها عند النقر بالماوس. ستكون بنية الترميز مثل هذا:

  • أبجد هوز دولور الجلوس امات.
  • Consectetur adipiscing النخبة.
    • زر

    تحتاج إلى جعل المحتوى غير مرئي حتى يتم الضغط على زر الماوس على الغلاف. لحل المشكلة ، اضبط العرض: لا شيء خاصية لـ .content. بعد ذلك ، عند النقر فوق .wrapper ، سنقوم بتمكين خاصية display: block لـ .content. للقيام بذلك ، قم بتعيين العرض: خاصية الحظر لـ .wrapper: active .content. في هذه الحالة ، سيكون المحتوى مرئيًا فقط عند الضغط على زر الماوس. إذا تركته ، يختفي المحتوى مرة أخرى. للإصلاح ، دعنا نجعل الأمر بحيث أنه عندما ينتهي مؤشر الماوس .content ، يتم تعيين خاصية display: block إلى العنصر. وهذا يعني أننا قمنا بتعيين خاصية العرض: block لـ .content: hover. سيبدو كود CSS بالشكل التالي:

    المحتوى (عرض: لا شيء ؛). الغلاف: نشط .content (عرض: كتلة ؛). المحتوى: تحوم (عرض: كتلة ؛)

    يبقى فقط "تمشيط" المظهر وإعطائه الوضوح:

    الغلاف (الموضع: نسبي ؛). الزر (الخلفية: أصفر ؛ الارتفاع: 20 بكسل ؛ العرض: 150 بكسل ؛). المحتوى (الموضع: مطلق ؛ الحشوة العلوية: 20 بكسل ؛) المحتوى لي (الخلفية: أحمر ؛)

    سيكون لنص الزر في الكود أعلاه خلفية صفراء ، وستكون المعلومات المعروضة عند الضغط على زر الماوس ذات خلفية حمراء.

    بشكل افتراضي ، عند النقر فوق ارتباط ، يتم فتح المستند في النافذة أو الإطار الحالي. إذا لزم الأمر ، يمكن تغيير هذا الشرط من خلال السمة الهدف للعلامة. ... في XHTML ، يحظر استخدام هذه السمة.

    بناء الجملة

    ...

    السمة المطلوبة

    القيم

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

    فارغ يقوم بتحميل الصفحة في نافذة متصفح جديدة. _self يقوم بتحميل الصفحة في النافذة الحالية. _parent يقوم بتحميل الصفحة إلى الإطار الأصلي ، إذا لم تكن هناك إطارات ، فإن هذه القيمة تعمل مثل _self. _top يلغي كل الإطارات ويحمل الصفحة في نافذة متصفح كاملة ، إذا لم تكن هناك إطارات ، فستعمل هذه القيمة مثل _self.

    القيمة الافتراضية

    تصديق

    تم إهمال استخدام هذه السمة بواسطة مواصفات HTML ، ولا يتم الحصول على رمز صالح إلا باستخدام مؤقت .

    HTML5 IE Cr Op Sa Fx

    علامة ، سمة الهدف

    افتح في نافذة جديدة



    اليوم سوف نتحدث عن الوظائف الرئيسية ذات الصلة مع فئة زائفة : استهدافوكيف يمكنك استخدامه لإنشاء تأثيرات CSS نقية مذهلة ، وتعلم كيفية إنشاء عروض شرائح باستخدام css وغير ذلك الكثير.

    ما هو الهدف؟

    h1 (font: bold 30px / 1.5 "Helvetica Neue"، Arial، Helvetica، Geneva، sans-serif؛) h1: target (font-size: 50px؛ text-decoration: underline؛ color: # 37aee4؛)

    أضف الرسوم المتحركة

    دعنا نفرح تأثيرنا ونضيف بعض الرسوم المتحركة ، مثل انتقال صغير لطيف لتغيير اللون. انظر كيف يعمل.

    h1 (الخط: غامق 30 بكسل / 1.5 "Helvetica Neue"، Arial، Helvetica، Geneva، sans-serif؛ -webkit-transfer: color 0.5s easy؛ -moz-transfer: color 0.5s easy؛ -o-transfer: color 0.5 سهولة s ؛ - مللي ثانية: انتقال اللون 0.5 ثانية ؛ الانتقال: سهولة اللون 0.5 ثانية ؛) h1: الهدف (حجم الخط: 50 بكسل ؛ زخرفة النص: تسطير ؛ اللون: # 37aee4 ؛)

    إدارة الكائن غير الهدف

    لنفترض أننا نريد تغيير أنماط الفقرة التي تتبع العنوان المحدد.

    من السهل جدًا القيام بذلك باستخدام الكود التالي. انظر العرض.

    h1: الهدف + p (الخلفية: # f7f7f7 ؛ الحشو: 10 بكسل ؛)

    إنشاء عرض شرائح بسيط باستخدام CSS

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

    لنقم بإنشاء قائمة غير مرتبة. سيحتوي كل عنصر قائمة على علامة ربط تشير إلى معرف الجزء وصورة بالمعرف المقابل.

    • واحد
    • اثنين
    • ثلاثة
    • أربعة
    • خمسة

    الآن دعنا نضيف أنماطنا:

    * (margin: 0px؛ padding: 0px؛) #slideshow (margin: 50px auto؛ position: dynamic؛ width: 400px؛) ul (list-style: none؛) li (float: left؛ overflow: hidden؛ margin: 0 20px 0 0 ؛) li a (اللون: # 222 ؛ زخرفة النص: لا شيء ؛ الخط: 15 بكسل / 1 Helvetica ، sans-serif ؛ -webkit-transfer: color 0.5s easy؛ -moz-transfer: color 0.5s easy؛ -o-transfer: color 0.5s easy؛ -ms-transfer: color 0.5s easy؛ الانتقال: color 0.5s easy؛) li a: hover (color: # 50b0df؛) li img (الوضع: مطلق ؛ أعلى: 50 بكسل ؛ اليسار: 0 ؛ z-index: -1 ؛ -webkit-transfer: العتامة 1s سهولة في الخروج ؛ -moz-transfer: العتامة 1s سهولة في الخروج ؛ -o-Transition: العتامة 1s سهولة في الخروج ؛ -ms-transfer: opacity 1s easy-in-out ؛ الانتقال: opacity 1s easy-in-out ؛) li img: target (z-index: 1 ؛) li img: not (: target) (عتامة: 0 ؛)

    أولا دعونا نضيف تعويم: اليساركل عناصر قائمتنا. استخدمنا تحديد المواقع المطلق والنسبي للعناصر.

    بعد ذلك ، قم بتثبيت الفهرس z: -1لجميع الصور ثم قم بتعيينها الفهرس z: 1للصور المستهدفة. سيؤدي هذا إلى تغيير الصورة عند النقر فوق عنصر القائمة. لجعل الانتقال أكثر سلاسة ، سنقوم بتعيين قيمة التعتيم للصور الأخرى. 0 .

    شاهد عرض شرائح CSS نقي.

    التوافق عبر المستعرضات

    فئة زائفة : استهدافهو محدد CSS من المستوى 3 ، مما يعني أنه مدعوم في كل متصفح تقريبًا باستثناء (لن تخمن) ... IE. يدعم الحمار القديم الجيد محددات CSS3 فقط في الإصدارين 9 و 10.

    كما هو الحال مع أي مشكلة في عرض محدد CSS3 في IE ، من السهل إصلاح ذلك باستخدام Selectivizr.

    بفضل هذا البرنامج المساعد وسحر الفودو ، سيتم دعم محددات CSS3 المطلوبة حتى في IE6.

    استنتاج

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

    : استهدافمثال جيد. فقط تأكد من عدم المبالغة في الأنماط.

    حالة استخدام أخرى مثيرة للاهتمام : استهداف

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

    ما هو الهدف؟

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

    لا ينبغي الخلط بين الفئات الزائفة والعناصر الزائفة ، والتي يمكنها تحديد جزء معين فقط من عنصر ، مثل الحرف الأول أو السطر الأول من الفقرة.

    الفئات الزائفة:

    • أ: الرابط (اللون: # 111)
    • أ: تحوم (اللون: # 222)
    • div: أول طفل (اللون: # 333)

    العناصر الزائفة:
    • p :: الحرف الأول (اللون: # 444)
    • p :: الخط الأول (اللون: # 555)

    أعتقد أنه من الواضح من بناء الجملة ما يفعله هذا أو ذاك الفئة الزائفة أو العنصر الزائف. الفئة الزائفة الأكثر شيوعًا هي: التمرير ، والتي يصادفها جميع مشرفي المواقع ، فهي تصف أنماط العنصر عند التمرير. الهدف يعمل بطريقة مماثلة ويصف أنماط عنصر عند حدوث موقف معين.

    معرفات الجزء

    باختصار ، هذا هو نوع الشيء الذي ترتبط به صفتنا الزائفة. هذه علامة تصنيف بها كلمة أو عبارة في نهاية العنوان. تبدو هكذا:

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

    يعمل هذا في لغة HTML خالصة ، ولا يلزم إجراء أي تعديلات. المعرفات الصغيرة.

    التعامل مع النقرة باستخدام: الهدف

    الآن دعنا نحاول التأكد من أنه عند النقر فوق القسم المطلوب من القائمة المرتجلة ، يتغير نمط العنوان ، ويظهر الفقرة النشطة حاليًا.

    H1 (الخط: 30 بكسل Arial sans-serif ؛) h1: الهدف (حجم الخط: 50 بكسل ؛ زخرفة النص: تسطير ؛ اللون: # 37aee4 ؛)

    الكود بسيط للغاية - عند النقر عليه ، يغير العنوان حجمه ولونه وتسطيره. يمكنك إضافة الحياة (رسلان ، مرحبًا) وتحريك تغيير لون العنوان:

    H1 (الخط: 30 بكسل Arial sans-serif ؛ -مجموعة الويب-الانتقال: اللون 0.5 ثانية ؛ -موز-الانتقال: 0.5 ثانية-الانتقال: اللون 0.5 ثانية ؛ -ms-الانتقال: اللون 0.5 ثانية ؛ الانتقال: اللون 0.5 ثانية ؛)

    يعد إبراز العنوان النشط أمرًا جيدًا ، ولكن ماذا لو كنت بحاجة إلى تغيير مظهر النص الذي يليه؟ يمنحنا CSS هذه الفرصة. تبدو هكذا:

    H1: الهدف + p (الخلفية: #eaea ؛ الحشو: 10 بكسل ؛)

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

    دعم المتصفح

    تنتمي الفئة الزائفة الهدف إلى النسخة الثالثة من CSS وهي مدعومة تمامًا من قبل جميع المتصفحات باستثناء IE ، أقدم من الإصدار 9. لذلك ، لا ينبغي عليك تنفيذها إذا كان جمهورك يستخدم هذا المتصفح. على الرغم من وجود مخرج - هذا هو Selectvizr ، مكتبة JS التي يمكنك من خلالها جعل IE يعمل مع CSS3. فقط أضف النص وهذا كل شيء ، إنه يعمل.

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

    استنتاج

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

    لا تبالغ في دعم الجمال والمتصفح ويجب أن تكون بخير.

    طاب يومك