يمكنك بسهولة العثور على العديد من البرامج التعليمية على الويب باستخدام: الفئة الزائفة الهدف. ومع ذلك ، لن نتبع رمز شخص آخر ، ولكن نحاول فهمه وفهم كيف يعمل؟ بالطبع ، لا يخلو من الأمثلة.
ما هو الهدف؟
في 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 ثانية ؛ -o-الانتقال: اللون 0.5 ثانية ؛ -ms-الانتقال: اللون 0.5 ثانية ؛ الانتقال: اللون 0.5 ثانية ؛)
يعد إبراز العنوان النشط أمرًا جيدًا ، ولكن ماذا لو كنت بحاجة إلى تغيير مظهر النص الذي يليه؟ يمنحنا CSS هذه الفرصة. تبدو هكذا:
H1: الهدف + p (الخلفية: #eaea ؛ الحشو: 10 بكسل ؛)
في هذه الحالة ، تشير علامة الجمع إلى أنه يجب تطبيق النمط على الفقرة التي تلي العنوان. هكذا، عند تغيير العنوان النشط - نقوم أيضًا بتغيير تصميم القسمبالنص الذي "يخصه".
دعم المتصفح
تنتمي الفئة الزائفة الهدف إلى الإصدار الثالث من CSS وهي مدعومة تمامًا من قبل جميع المتصفحات باستثناء IE ، أقدم من الإصدار 9. لذلك ، يجب ألا تقوم بتطبيقها إذا كان جمهورك يستخدم هذا المتصفح. على الرغم من وجود مخرج - هذا هو Selectvizr ، مكتبة JS التي يمكنك من خلالها جعل IE يعمل مع CSS3. فقط أضف النص وهذا كل شيء ، إنه يعمل.
الشيء الوحيد ، إذا كنت لا تستخدم JQuery أو MooTools ، فأنت بحاجة إلى توصيله حتى يعمل هذا البرنامج النصي. يوجد في الموقع الرسمي جدول بالمكتبات التي تدعمها. إذا كنت مهتمًا ، اقرأها. هو - هي .
استنتاج
قد يبدو استخدام الفئات الزائفة مهمة شاقة ، ولكن بمجرد فهم كيفية عملها ، يمكنك القيام بأشياء مذهلة باستخدام CSS فقط ولا شيء آخر. الفئة الزائفة الهدف- تأكيد ممتاز لهذا. بمساعدتها ، يمكنك تغيير تفاعل الصفحة مع الزائر بشكل جذري. المثال أعلاه هو الأبسط ، ولكنه يضيف أيضًا القليل من التفاعل إلى الصفحة. لكن هذا مجرد سطرين من التعليمات البرمجية.
لا تبالغ في دعم الجمال والمتصفح ويجب أن تكون بخير.
طاب يومك
بشكل افتراضي ، عند النقر فوق ارتباط ، يتم فتح المستند في النافذة أو الإطار الحالي. إذا لزم الأمر ، يمكن تغيير هذا الشرط من خلال السمة الهدف للعلامة. ... في XHTML ، يحظر استخدام هذه السمة.
بناء الجملة
...السمة المطلوبة
القيم
القيمة هي اسم النافذة أو الإطار المحدد بواسطة سمة الاسم. إذا تم تعيين اسم غير موجود ، سيتم فتح نافذة جديدة. يتم استخدام ما يلي كأسماء محجوزة.
فارغ يقوم بتحميل الصفحة في نافذة متصفح جديدة. _self يقوم بتحميل الصفحة في النافذة الحالية. _parent يقوم بتحميل الصفحة إلى الإطار الأصلي ، إذا لم تكن هناك إطارات ، فستعمل هذه القيمة مثل _self. _top يلغي كل الإطارات ويحمل الصفحة في نافذة متصفح كاملة ، إذا لم تكن هناك إطارات ، فستعمل هذه القيمة مثل _self.
القيمة الافتراضية
تصديق
تم إهمال استخدام هذه السمة من خلال مواصفات HTML ، ولا يتم الحصول على رمز صالح إلا باستخدام مؤقت .
HTML5 IE Cr Op Sa Fx
افتح في نافذة جديدة
مرحبا أعزائي قراء موقع المدونة. قررت تكريس منشور اليوم لأهم جانب من جوانب إتقان الويب ، حيث سأحاول أن أشرح بكل التفاصيل ما هو الارتباط التشعبي ، الذي يرتبط ارتباطًا وثيقًا ، والذي بدوره ، دون مبالغة ، هو أساس الإنترنت.
ولكن من أجل إنشاء ارتباطات تشعبية بشكل صحيح وإدراجها في كود صفحات الويب (على سبيل المثال ، موقعك) ، فإنك تحتاج إلى دراسة المنطقة المقابلة من لغة ترميز النص التشعبي () ، حيث يتم تشكيل هذه العناصر باستخدام HTML a العلامة ، والتي لديها القدرة على تحديث الارتباط إلى الأنواع المرغوبة.
لذلك ، سنقوم اليوم بتحليل الأجزاء التي يتكون منها الارتباط التشعبي ، وكيف يتيح استخدام السمة الفارغة الهدف فتح صفحة في نافذة جديدة (علامة تبويب) ، وكيفية جعل أي صورة ارتباطًا ، والعديد من التفاصيل المهمة الأخرى. من بين أشياء أخرى ، ستعمل هذه المعلومات على تقدمك في تعلم لغة HTML.
ما هو الارتباط التشعبي وهل يمكن تسميته ارتباط؟
ردا على السؤال المطروح في العنوان ، سأقول أن مصطلح "رابط" له نطاق دلالي أوسع (رابط إلى سيبيريا ، بنك لتحديد الدافع ، نص في كتاب ، وما إلى ذلك) ، بما في ذلك المعنى المتأصل في مفهوم "الارتباط التشعبي" ، الذي يرتبط فقط بالنص التشعبي ، مما يجعل من الممكن الإدراك غير الخطي للمعلومات.
هكذا، الارتباط التشعبي هو حالة خاصة للارتباطلذلك ، من الممكن تمامًا استخدامها في موضوع اليوم على قدم المساواة. سأستفيد من هذا في "اهتماماتي الأنانية" في سياق منشور اليوم ، باستخدام كلا المصطلحين لتجنب البريد العشوائي غير الضروري بالكلمات الرئيسية.
ولكن هناك أيضًا خدمة غير مرئية ، تم إنشاؤها بمساعدة وضمن الحدود ، تتمثل مهمتها في إرسال إشارات وأوامر عديدة إلى المتصفحات لأداء وظيفة معينة.
على سبيل المثال ، باستخدام الارتباطات التشعبية للخدمة ، من الممكن عرض رمز. يمكن رؤيتها فقط كجزء من كود HTML (للقيام بذلك ، انقر فوق أي صفحة مفتوحة في المتصفح):
في الوقت الحالي ، دعنا نترك روابط الخدمة بمفردها ونأخذ في الاعتبار النمط العام لإنشاء الارتباطات التشعبية. القاسم المشترك بينهم هو أنهم جميعًا لديهم سمة href المطلوبة، قيمته هي عنوان المستند (). يمكن أن يؤدي ارتباط HTML إلى صفحة داخلية للموقع ومستند خارجي.
ملاحظة مهمة أخرى. يؤدي استخدام السمة href إلى جعل الارتباطات التشعبية قابلة للنقر ، أي أنها تتيح للمستخدمين الانتقال تلقائيًا إلى الصفحة المقابلة لموقع الويب عند النقر فوقها.
كيفية إنشاء ارتباط تشعبي في HTML باستخدام href
لذلك ، نحن نعلم بالفعل أنه لإنشاء ارتباط ، يلزم وجود علامة وسمة href ، ويمكن أن تكون معلماتهما عناوين URL من أنواع مختلفة. بقدر ما أهذا ، ثم بين الافتتاح والختاميحتوي على محتوى سيتم عرضه على صفحة الويب.
هو - هي المحتوى يسمى مرساةويمكن تقديمها في شكل نص أو صورة (سنتحدث بمزيد من التفصيل أدناه عن كيفية جعل الصورة رابطًا). كما ذكرت ، سيكون المرساة قابلة للنقر. لنفكر في مثال على ارتباط تشعبي بمحتوى نصي. هذا ما سيبدو عليه بنائه في كود HTML:
قليلا عن المراسي
بالإضافة إلى HTTP ، يمكن استخدام بروتوكول HTTPS الآمن. ليس من الضروري أن يؤدي الارتباط إلى صفحة الويب. كل هذا يتوقف على قيمة href ، والتي يمكن أن تكون المسار إلى بعض الملفات:
//site/wp-content/uploads/2012/05/giperssylqi-v-html.jpg
تحميل
سيبدو هذا الرابط على صفحة الويب كما يلي:
المتصفح "يفهم" أنه لا يمكن استخدام كائن بامتداد .zip إلا للتنزيل ، وهو ما يقترح المستخدم القيام به.
بالمناسبة ، يتم تحديد المسار إلى أي ملف أحيانًا عبر FTP (). بعد ذلك ، في عنوان URL المستخدم كمعامل لسمة href ، يجب عليك ببساطة استبدال بروتوكول HTTP (HTTPS) بـ FTP. سيبدو ارتباط الملف كما يلي:
التحميل من الخادم
لكن هذا ليس كل شيء. بطريقة مماثلة يتم إنشاء ارتباط إلى بريد إلكتروني باستخدام بروتوكول pseudo-mailtoللوصول السريع إلى أداة كتابة الرسائل:
اكتب رسائل
بعد النقر على هذا الرابط ، يجب أن تظهر نافذة لعميل البريد الافتراضي ، حيث يمكنك كتابة نص الرسالة وإرسالها إلى العنوان المحدد بالفعل ، المأخوذ ، كما خمنت على الأرجح ، من href.
من الناحية العملية ، غالبًا ما تم استخدام الارتباطات التشعبية للبريد من قبل مشرفي المواقع وأصحاب الموارد الكبيرة لضمان راحة المستخدمين والعملاء الذين يمكنهم الوصول إلى النموذج البريدي بنقرة واحدة.
لكن هذا النوع من الاتصال على موارد الويب لم يعد شائعًا (خاصة أنه يمكن إنشاؤه ، على سبيل المثال ،) ، لأن عناوين البريد المفتوحة بهذه الطريقة يتم اعتراضها بنشاط بواسطة البرامج واستخدامها من قبل جميع أنواع مرسلي البريد العشوائي.
لقد أشرت كمثال فقط على البروتوكولات الأكثر شيوعًا المضمنة في عنوان URL ، والتي بدورها تعد معلمة لخاصية href عند تكوين ارتباط تشعبي. بالإضافة إلى HTTP (HTTPS) و FTP و mailto ، هناك مشكلات أخرى لحل مشكلات ملف التعريف الأضيق. ربما سننظر فيها بمزيد من التفصيل في المنشورات الأخرى.
أنواع الارتباطات التشعبية
لنحاول الآن تصنيف الروابط وفقًا لخاصية أو أخرى.
حسب مجال عملهم:
1. خارجي- تؤدي إلى صفحات موجودة خارج الموقع الذي تم نشرها فيه ؛
2. داخلي- ربط صفحات الويب الموجودة داخل نفس مورد الويب.
حسب التنسيق:
2. بيانياو - في هذه الحالة ، يكون مرساة الارتباط التشعبي صورة (بما في ذلك الصورة المصغرة) ، لافتة ، زر ، إلخ.
حسب نوع عنوان URL الذي يعمل كقيمة لخاصية href:
1. مطلق، والتي تحتوي على إشارة صريحة إلى بروتوكول نقل البيانات (على سبيل المثال ، HTTP) واسم مجال الموقع (في كل شيء يتعلق بالمجالات).
يتم استخدام هذه الروابط بشكل أكثر شيوعًا عند الارتباط بصفحات مصادر خارجية. في هذه الحالة ، ستتضمن قيمة href المسار الكامل للملف المطلوب أو صفحة الويب. فيما يلي مثال على ارتباط تشعبي مطلق:
السياق - ما هو
2. نسبيا، أحد خيارات الإنشاء والذي سيكون المسار المحدد بالنسبة للمجلد الجذر لموقع الويب (ومن هنا جاء اسم هذا النوع من الارتباطات التشعبية). في هذه الحالة ، ستتم إزالة البروتوكول (HTTP) ومجال الموقع من عنوان URL:
السياق - ما هو
يمكن أن توفر الارتباطات التشعبية النسبية الموجودة على صفحة الويب روابط لصفحات داخلية. على هذا النحو ، فهي أقصر ، مما يجعل استخدام HTML أسهل. بالطبع ، كل شيء ليس بهذه البساطة ، ويتطلب تغطية أوسع ، كما يمكنك معرفة ما إذا كنت تتبع الرابط المقدم.
سمات العلامة
الآن دعنا نرى ما هي السمات الأخرى الموجودة إلى جانب href المطلوب ، وكيف يمكن أن تؤثر على إنشاء ارتباط تشعبي. البيانات الأكثر اكتمالا في هذا الصدد ، إذا جاز التعبير ، "مباشرة" يمكن العثور عليها على الموقع الرسمي لاتحاد W3C الدولي ، حيث تظهر أحدث المعلومات بشكل أسرع.
إنها متطابقة تمامًا وتبدأ في فتح صفحة ويب في علامة التبويب الحالية. إذا كنت تريد أن تفتح الصفحات في علامة تبويب جديدة عند النقر على الروابط ، فعليك الإضافة عند تكوين الرابط السمة الهدف مع معلمة فارغة:
السياق - ما هو
على الرغم من أن بعض مشرفي المواقع وتحسين محركات البحث يعتقدون أنه من الأفضل منح الزائر الفرصة للاختيار (أي عدم وصف الهدف فارغًا) ، لأنه إذا لزم الأمر ، في علامة تبويب جديدة ، يمكن أيضًا فتح الصفحة باستخدام قائمة السياق ( حرك المؤشر إلى الرابط ، وانقر بزر الماوس الأيمن وانقر فوق العنصر المقابل):
علاوة على ذلك ، كما ترى ، في هذه الحالة يتمتع المستخدم بميزة أنه من الممكن فتح صفحة ويب ليس فقط في علامة تبويب جديدة ، ولكن أيضًا في نافذة جديدة(لا يمكن تنفيذ هذا الخيار باستخدام HTML ، فقط باستخدام البرامج النصية).
لكنني أعتقد أنه ليس كل المستخدمين المبتدئين على دراية كاملة بقدرات وإعدادات المتصفحات الشائعة (). من الممكن تمامًا أن يقوم القارئ ، بعد اتباع الارتباط التشعبي الخارجي وفقدان رؤية الصفحة المصدر (سيظهر مستند المستلم بدلاً من ذلك) ، بإغلاق علامة التبويب في قلوبهم.
وبالتالي ، قد لا يفقد مالك مورد الويب زائرًا واعدًا فحسب ، بل قد يتدهور أيضًا في العوامل السلوكية () ، مما يؤدي إلى فقدان مواقع الصفحة في الترتيب.
بالإضافة إلى ذلك ، يعد فتح صفحة في علامة تبويب مجاورة أمرًا ملائمًا للغاية من وجهة نظر سهولة الاستخدام (). يتابع المستخدم الارتباط التشعبي إلى صفحة الويب ، ويتلقى معلومات إضافية ، كما لو لم يحدث شيء ، يواصل دراسة المواد الرئيسية.
لإنشاء صورة موضوعية ، يجب إضافة أن تطبيق "target =" _blank "على أي روابط خارجية ، كما يتضح ، محفوف ببعض المخاطر الأمنية. إذا كان أي شخص مهتمًا ، فيمكنك قراءة مكان تقديم التوصيات حول كيفية استكشاف المشكلات وإصلاحها عند استخدام الهدف فارغًا ، بالإضافة إلى الخيارات البديلة لتنفيذ مهمة فتح صفحة ويب في علامة تبويب جديدة.
يبدو أنه لاحظ جميع إيجابيات وسلبيات استخدام القيمة الفارغة لفتح ارتباط تشعبي في علامة تبويب جديدة. إذا كنت تقرأ مقالات على مدونتي ، فربما تكون قد خمنت بالفعل بشأن موقفي من هذه المعلمة الخاصة بالسمة الهدف.
في الوقت الحالي ، بالنسبة لي ، فإن إيجابياته تفوق السلبيات ، وأنا مؤيد مطلق لها. بناءً على الحقائق المذكورة أعلاه ، يمكنك تكوين رأيك حول هذه المسألة. على الرغم من ... نظرًا لظهور ظروف جديدة ، فقد يتغير ذلك.
كيفية إنشاء روابط التجزئة والمراسي ولماذا هناك حاجة إليها؟
بعد ذلك ، ألفت انتباهك إلى نوع آخر من الارتباطات التشعبية التي يمكن أن تكون مفيدة إذا كانت المادة الموجودة على صفحة الويب ضخمة جدًا ويجب تنظيمها لتحسين التنقل.
ليس عليك البحث بعيدًا عن مثال ، ما عليك سوى إلقاء نظرة على جدول محتويات هذا المنشور في البداية. انظر ، هناك قائمة بأقسام المقال؟ الارتباطات التشعبية لهذه الأقسام هي مجرد روابط تجزئة. بعد النقر فوق أي منها ، سيقوم المتصفح بتمرير الصفحة إلى النقطة التي يبدأ فيها الجزء المقابل.
تم تصميم هذه الروابط بكل بساطة. أولا تحتاج إلى إنشاء مذيع الأخبارمن خلال وضع التسمية المناسبة في المكان المطلوب على الصفحة في شكل معرّف ، وهو أحد السمات العامة المطبقة على أي علامة HTML.
نظرًا لعالمية المعرفات ، يمكن وضع علامات الربط هذه في أي مكان تقريبًا على صفحة الويب. نظرًا لأن النص ينقسم عادةً إلى فقرات ، فيمكن تطبيقها عليه. أضع المراسي بشكل أساسي ، والتي تقسم المقالات إلى أجزاء منطقية:
بعد وضع علامة بهذه الطريقة على جميع الأماكن الضرورية في كود HTML ، نقوم بإنشاء ارتباطات تشعبية لهم. للقيام بذلك ، في النهاية بعد الشرطة المائلة الأخيرة "/" في عنوان URL (والتي ، كما تعلم بالفعل ، هي قيمة السمة href) ، نكتب على التوالي علامة الجنيه "#" واسم العلامة ( هوية شخصية):
كيفية إنشاء روابط التجزئة والمراسي؟
علاوة على ذلك ، إذا تم وضع رابط الارتساء هذا على نفس الصفحة مثل الروابط ، فيمكن حذف جزء من عنوان url حتى آخر شرطة مائلة قبل التجزئة الشاملة ويمكن استخدام "#" بالإضافة إلى اسم المعرف فقط كمعامل href (في الواقع ، هذا أحد الروابط النسبية):
كيفية إنشاء روابط التجزئة والمراسي؟
أي عند تجميع جدول محتويات للدليل لتحسين كود HTML ، يمكنك بسهولة استخدام هذا الخيار خفيف الوزن. إذا وضعت علامة رطل واحدة فقط كعنوان URL ، بدون اسم المعرف ، فحينئذٍ من المكان الذي يوجد فيه هذا الرابط ، ستنتقل الصفحة إلى الأعلى:
فوق
في الواقع ، هذا هو الخيار الأبسط ، والذي يعمل مرة أخرى كميزة إضافية لإمكانية استخدام الموارد ، لأنه يجعل الحياة أسهل للزوار. يمكنك استخدام صورة جذابة كمرساة لإنشاء زر.
إزالة التسطير وتغيير لون الارتباط
لقد فكر مطورو HTML في جميع الفروق الدقيقة تقريبًا التي يمكن أن تساعد في تحسين جانب أو آخر ، وينطبق الشيء نفسه على الارتباطات التشعبية. على سبيل المثال ، بعد ارتباط تشعبي إلى صفحة ويب أخرى ، ثم العودة مرة أخرى ، سيرى المستخدم أن الارتباط التشعبي قد تغير لونه.
إذا احتاج إلى تكرار مثل هذه الإجراءات أكثر من مرة ، فيمكنه تحديد الروابط التي نقر عليها بالفعل وأيها لم ينقر عليها بسرعة. يتم تضمين هذا الخيار في كل متصفح تقريبًا. ليست هناك حاجة لشرح مدى ملاءمته وكم من الوقت يوفره.
بشكل افتراضي وبدون استخدام ارتباطات CSS التشعبية مظللة بخيارات تسطير وثلاثة ألوان، لكل منها سمة خاصة به من أجل:
- الارتباط - يضبط لون الارتباط التشعبي على صفحة الويب (أزرق افتراضيًا ، يُشار إليه بالرمز # 0000ff) ؛
- alink - لون الارتباط التشعبي النشط للفترة الزمنية أثناء معالجته بواسطة مستعرض الويب (أحمر # ff0000) ؛
- vlink - لون الارتباط الذي يزوره المستخدم (بنفسجي ، # 800080).
كيف تستبدل ألوان الروابط التي تعرضها المتصفحات لموقعك؟ حسنًا ، بالنسبة إلى موقع HTML بسيط حيث يتم تشكيل الصفحات يدويًا (وأعتقد أنه لا توجد عمليًا أي موارد تعمل بكامل طاقتها من هذا النوع في الواقع الحديث ، باستثناء اليوميات البسيطة والصفحات المقصودة) ، ما عليك سوى العثور على العلامة الافتتاحية
ووصف المعلمات اللازمة له (بالمناسبة ، يمكنك استخدام اسمه لتعيين لون) ، على سبيل المثال:
إذا قمت بتثبيت نظام إدارة المحتوى () لإدارة مورد الويب الخاص بك ، فبغض النظر عن نوع المحرك الذي تستخدمه ، فأنت بحاجة إلى فتح الملف المسؤول عن إخراج الرأس (الرأس) ، حيث يتم الفتح العلامة موجودة
.إذا كان المورد الخاص بك يعمل تحت سيطرة WordPress ، فعند التنفيذ العملي لهذه الفكرة ، يمكنك استخدامه كأداة لإدراج صورة تلقائيًا داخل ارتباط تشعبي ، حيث تختار أولاً من المكتبة أو تقوم بتحميل الصورة المطلوبة وإدراجها في النص:
ثم حدد رمز الصورة المستلمة واضغط على الزر "رابط" للمحرر ، ثم الصق الارتباط التشعبي المنسوخ الضروري في النافذة التي تظهر:
اليوم سوف نتحدث عن الوظائف الرئيسية ذات الصلة مع فئة زائفة : استهدافوكيف يمكنك استخدامه لإنشاء تأثيرات CSS نقية مذهلة ، وتعلم كيفية إنشاء عروض شرائح باستخدام css وغير ذلك الكثير.
ما هو الهدف؟
h1 (الخط: 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.
استنتاج
قد يبدو استخدام الفصول الزائفة أمرًا شاقًا في البداية ، ولكن لماذا تفهم كيف يمكن أن تجعل عملك أسهل وتجعل موقعك أكثر تشويقًا. المحدد الزائف
: استهدافمثال جيد. فقط تأكد من عدم المبالغة في الأنماط.
حالة استخدام أخرى مثيرة للاهتمام : استهداف
للانتقال إلى الجزء المحدد من المستند ، تتم كتابة الرمز # في العنوان ويشار إلى اسم المعرف. على سبيل المثال ، في العنوان http://www.w3.org/TR/css3-selectors/#target-pseudoهناك انتقال إلى العنصر ، يتم تعيين سمة المعرف الخاصة به على أنها target-pseudo. يسمى سجل العنوان هذا "العنصر الهدف". ينطبق: target pseudo-class على العنصر الهدف ، بمعنى آخر ، على المعرف المحدد في شريط عنوان المتصفح.
التعيينات
| وصف | مثال | |
|---|---|---|
| <тип> | يشير إلى نوع القيمة. | <размер> |
| أ && ب | يجب عرض القيم بالترتيب الموضح. | <размер> && <цвет> |
| أ | ب | يشير إلى أنه يجب تحديد قيمة واحدة فقط من القيم المقترحة (أ أو ب). | عادي | أحرف صغيرة |
| أ || ب | يمكن استخدام كل قيمة بمفردها أو بالاشتراك مع قيم أخرى بأي ترتيب. | العرض || عدد |
| قيم المجموعات. | [اقتصاص || تعبر] | |
| * | كرر صفر مرة أو أكثر. | [,<время>]* |
| + | كرر مرة واحدة أو أكثر. | <число>+ |
| ? | النوع أو الكلمة أو المجموعة المحددة اختيارية. | أقحم؟ |
| (أ ، ب) | كرر على الأقل أ ، لكن ليس أكثر من ب مرة. | <радиус>{1,4} |
| # | كرر مرة واحدة أو أكثر ، مفصولة بفواصل. | <время># |
مثال
- القصة 1
- القصة 2
القصة 1
قصة كيف كان لا بد من صنع القبر ، بدأوا في حفره ، ثم دفنه ، وماذا جاء منه.
القصة 2
قصة ظهور آثار أقدام وردية غامضة بستة أصابع بالقرب من غرفة الطعام ، ولماذا حدث ذلك.
في هذا المثال ، يتم تمييز العنصر الهدف بلون الخلفية.
ملحوظة
في Safari قبل الإصدار 3.0 ، لا يتم تطبيق قواعد النمط إذا كان المستخدم يستخدم التنقل في المتصفح (أزرار الخلف والأمام).
تخصيص
تمر كل مواصفة بعدة مراحل من الموافقة.
- توصية - تمت الموافقة على هذه المواصفات من قبل W3C ويوصى بها كمعيار.
- توصية المرشح ( توصية ممكنة) - اقتنعت المجموعة المسؤولة عن المعيار بأنه يلبي أهدافها ، لكن مساعدة مجتمع المطورين مطلوبة لتنفيذ المعيار.
- التوصية المقترحة ( التوصية المقترحة) - في هذه المرحلة ، يتم تقديم الوثيقة إلى المجلس الاستشاري W3C للموافقة النهائية.
- مسودة العمل - نسخة أكثر نضجًا من المسودة بعد المناقشة والمراجعة لمراجعة المجتمع.
- مسودة المحرر ( مسودة تحريرية) - نسخة مسودة للمعيار بعد تحريرها من قبل محرري المشروع.
- مشروع ( مواصفات المسودة) هي المسودة الأولى للمعيار.
المتصفحات
يتم استخدام الاصطلاحات التالية في جدول المتصفح.