من المؤلف:يعد تصميم خطوط الارتباط أمرًا صعبًا للغاية، وأظل أنسى الطريقة الأفضل في أي موقف. ولحسن الحظ، سيساعدنا جون جيمسون على فهم هذا بسرعة في مقالته.

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

تسطير رفيع باللون الأسود مع وجود مسافات حول الحروف مع وسائل شرح سفلية - عمل بواسطة Marcine Witchery من المقالة إنشاء رابط تسطير على الوسيط.

تسطير قياسي جيد وحجم جيد أيضًا ويسمح للأحفاد. أفضل بكثير من معظم المتصفحات الافتراضية. كما اتضح، واجهت شركة Medium الكثير من التحديات على طول الطريق. وحتى بعد عامين، لا يزال التصميم الجيد للتسطير يسبب الكثير من المشاكل.

الأهداف

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

أن تكون موجودة تحت خط الأساس؛

تخطي الحروف السفلية.

تغيير اللون والسمك والأنماط؛

انتقل إلى السطر الجديد.

العمل مع أي خلفية.

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

اقتراب

إذن ما هي الأساليب المتوفرة لدينا لوضع خط تحت النص؟ تذكرت ما يلي:

زخرفة النص؛

الصورة الخلفية؛

مرشحات SVG؛

Underline.js(canvas);

زخرفة النص-*

دعنا نراجع القائمة بأكملها ونفكر في جميع إيجابيات وسلبيات كل نهج.

خاصية زخرفة النص

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

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

الايجابيات

سهل الاستخدام؛

تقع تحت خط الأساس؛

يتخطى السلالات بشكل افتراضي في Safari وiOS؛

يقفز إلى سطر جديد؛

يعمل مع أي خلفية.

السلبيات

لا يتخطى نسل الحروف في المتصفحات الأخرى؛

لا يمكن تغيير اللون والسمك والأنماط.

خاصية أسفل الحدود

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

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

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

يوجد حاليا 4 خصائص للتسطير التصميم. أفضل بكثير من مجرد زخرفة النص.

الايجابيات

يمكنك استخدام خاصية الانتقال وتحريك اللون والسمك؛

ينتقل إلى أسطر جديدة افتراضيًا إذا لم يكن العنصر مضمّنًا؛

السلبيات

يقع الخط بعيدًا جدًا ويصعب تحريكه؛

يلزم استخدام الكثير من الخصائص غير الضرورية لجعل التسطير يبدو جيدًا؛

تمييز النص بشكل سيئ عند استخدام ظل النص.

خاصية ظل الصندوق

ترسم خاصية box-shadow خطًا سفليًا باستخدام ظلين داخليين: أحدهما ينشئ المستطيل والآخر يخفيه. وهذا يعني أنه لكي تعمل الطريقة بشكل صحيح، هناك حاجة إلى خلفية موحدة.

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

الايجابيات

يمكن وضعها تحت خط الأساس.

يمكنك تخطي وسائل الشرح باستخدام ظل النص؛

يمكنك تغيير اللون والسمك.

يقفز إلى خطوط جديدة.

السلبيات

لا يمكن تغيير الأنماط؛

لا يعمل مع جميع الخلفيات.

خاصية صورة الخلفية

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

العرض التوضيحي أدناه لا يستخدم التدرج الخطي. لإنشاء تأثير رائع، يمكنك استخدام صورتك الخاصة.

الايجابيات

يمكن وضعها تحت خط الأساس.

يمكنك تخطي وسائل الشرح السفلية باستخدام ظل النص؛

يمكنك تغيير اللون والسمك (حتى بمقدار نصف بكسل) والأنماط؛

يعمل مع الصور المخصصة.

يقفز إلى خطوط جديدة؛

يعمل مع أي خلفية طالما أنك لا تستخدم ظل النص.

السلبيات

قد يختلف حجم الصورة حسب الدقة والمتصفح ومستوى التكبير/التصغير.

مرشحات SVG

هذه هي الطريقة التي لعبت بها. يمكنك إنشاء عنصر مرشح SVG مضمن لرسم الخط وتوسيع النص لإخفاء أجزاء الخط التي يجب أن تكون شفافة. يمكن إعطاء الفلتر معرفًا والإشارة إليه في CSS باستخدام عامل التصفية: url('#svg-underline').

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

وهذه هي الطريقة التي تبدو بها في Chrome وFirefox:

توجد مشكلات في الدعم في IE وEdge وSafari. من الصعب اختبار دعم مرشحات SVG في CSS. يمكنك استخدام قاعدة @supports على الفلتر، ولكن هذا سيتحقق فقط مما إذا كان الرابط نفسه يعمل، وليس ما إذا كان الفلتر مطبقًا أم لا. طريقتي قاسية جدًا على المتصفحات، لذا كن حذرًا بشكل مضاعف.

الايجابيات

تقع تحت خط الأساس؛

يتخطى القادة السفليين؛

يمكنك تغيير اللون والسمك والأنماط.

يعمل على أي خلفية.

السلبيات

لا يقفز إلى أسطر جديدة؛

لا يعمل في IE وEdge وSafari، ولكن يمكنك تحديد زخرفة النص كإجراء احتياطي. تبدو الخطوط المسطرة في Safari رائعة في حد ذاتها.

Underline.js (قماش)

Underline.js هي مكتبة مذهلة. أنا معجب بما تمكن Wenting Zhang من فعله باستخدام JS والاهتمام بالتفاصيل. إذا لم تكن قد شاهدت العرض التوضيحي التقني لـ Underline.js بعد، فتوقف لمدة دقيقة وألقِ نظرة. هناك خطاب رائع مدته تسع دقائق على الإنترنت حول مبادئ العمل، وسأعيد سرده لك بسرعة الآن. يتم رسم التسطير باستخدام قماش. نهج جديد تماما يعمل بشكل جيد بشكل مدهش.

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

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

خصائص زخرفة النص-*

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

لون زخرفة النص

زخرفة النص تخطي

نمط زخرفة النص

لا تفرح في وقت مبكر، فأنت تعرف عن دعم المتصفح.

خاصية لون زخرفة النص

تتيح لك خاصية text-decoration-color تغيير لون التسطير بشكل منفصل عن لون النص. تتمتع الخاصية أيضًا بدعم جيد للمتصفح. إنه يعمل في Firefox ويسبقه في Safari. هناك جانب سلبي - إذا لم تقم بمسح السطر المحيط بوسائل الشرح، فسيقع في Safari أعلى النص. ثعلب النار:

خاصية زخرفة النص-تخطي

خاصية text-decoration-skip هي المسؤولة عن تخطي بالونات التذييل في النص الذي تحته خط.

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

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

خاصية زخرفة النص

توفر خاصية نمط زخرفة النص نفس مجموعة التسطير مثل خاصية نمط الحدود، ولكنها تضيف أيضًا مظهرًا جديدًا - متموجًا. القيم الممكنة:

في الوقت الحالي، تعمل الخاصية text-decoration-style على متصفح Firefox فقط، وفيما يلي لقطة شاشة:

مجموعة من الخطوط أحادية اللون تبدو متشابهة؟

ما هو الخطأ؟

تعد خصائص text-decoration-* أكثر سهولة من الخصائص الأخرى لتصميم التسطير. ومع ذلك، إذا ألقيت نظرة مختلفة على المتطلبات التي قدمناها سابقًا، ستلاحظ أنه باستخدام هذه الخصائص لا يمكنك تغيير السُمك والموضع. وبعد قليل من البحث وجدت هاتين الخاصيتين:

عرض تسطير النص

نص تسطير الموقف

يبدو أنه تم إسقاط هذه الخصائص من إصدار مبكر من CSS بسبب عدم الاهتمام بها. لم يتم استخدامها قط. مهلا، هذا ليس خطأي.

الاستنتاجات

إذن ما هي أفضل طريقة لتسطير النص؟ كل هذا يتوقف على عوامل مختلفة.

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

بالنسبة للنص الأساسي، استخدم صورة الخلفية. الطريقة ناجحة، تبدو جميلة، وهناك خلطات ساس لها. إذا كان التسطير رفيعًا، أو كان اللون مختلفًا عن النص، فمن المحتمل أن تتمكن من تخطي طريقة تظليل النص. بالنسبة للنص الموجود في سطر واحد، استخدم border-bottom وأي خصائص أخرى.

ولتخطي وسائل شرح الحروف على الخلفيات أو الصور المتدرجة، حاول استخدام مرشح SVG. أو لا تخلط هذه الخلفيات مع التسطير. في المستقبل، عندما يتحسن دعم المتصفح، سيكون من الممكن استخدام خصائص text-decoration-*.

على الرغم من أن التسطير يستخدم تقليديًا لتصميم الروابط النصية، إلا أنه من المقبول أيضًا استخدام طرق أخرى لتغيير مظهر الروابط. وهنا بعض منهم:

• الروابط دون تسطير؛
• تسليط الضوء على الديكور
• تسليط الضوء على لون الخلفية.
• نطاق؛
• الصورة بجانب الرابط.

الروابط دون تسطير

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

مثال 1. لا يوجد تسطير للروابط

لا تحتاج الفئات الزائفة :hover و :visited إلى إضافة زخرفة نصية، فهي ترث خصائص المحدد.

وضع خط تحت الروابط عند المرور فوقها بمؤشر الماوس

لإضافة تسطير إلى الروابط التي تحتوي على زخرفة النص: لا شيء، يجب عليك استخدام الفئة الزائفة :hover. فهو يحدد نمط الارتباط عندما يحوم مؤشر الماوس فوقه. كل ما تبقى هو إضافة خاصية زخرفة النص للفئة الزائفة مع تسطير القيمة (المثال 2).

مثال 2: تسطير الروابط

تسطير الرابط الزخرفية

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

مثال 3: تسطير منقط للروابط

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

أرز. 1. استخدام خط منقط لتمييز الرابط

ليس من الضروري استخدام خط منقط؛ على سبيل المثال، لإنشاء خط مزدوج، تحتاج إلى تحديد قيمة، كما هو موضح في المثال 4.

مثال 4: روابط تسطير مزدوجة

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

باستخدام لون الخلفية

لإضافة خلفية ملونة إلى رابط، ما عليك سوى استخدام خاصية الخلفية، وتخصيص لون لها بأي تنسيق متاح. وبالمثل، يمكنك استخدام الفئة الزائفة :hover، ثم سيتغير لون الخلفية الموجود أسفل الرابط عند تحريك الماوس فوقه (المثال 5).

أرز. 2. تغيير لون الخلفية عند المرور فوق الرابط

إطار حول الرابط

يوضح المثال 6 كيفية تغيير لون الحدود باستخدام خاصية الحدود. يمكن إزالة النص الذي يتم تسطيره عبر زخرفة النص أو تركه دون تغيير.

مثال 6. تغيير لون حدود الروابط

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

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

A (الحدود: 1 بكسل شفاف خالص؛ /* حدود شفافة حول الروابط */ ) a:hover ( الحدود: 1 بكسل أحمر خالص؛ /* حد أحمر عند التمرير فوق رابط */ )

الصور بجانب الروابط الخارجية

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

والشيء الجيد في استخدام الصور القريبة من الروابط الخارجية هو أن الرابط المصمم بهذه الطريقة يختلف بشكل واضح عن الروابط العادية داخل الموقع، والصورة المختارة بشكل صحيح تخبر الزائر أن الرابط يؤدي إلى موقع آخر. لفصل نمط الروابط المحلية والخارجية، سوف نستخدم محدد السمات. نظرًا لأن جميع الروابط إلى المواقع الأخرى مكتوبة باستخدام بروتوكول، على سبيل المثال http، فإنه يكفي تعيين نمط تلك الروابط التي تبدأ قيمة سمة href الخاصة بها بـ http://. ويتم ذلك باستخدام البنية a(...)، كما هو موضح في المثال 7.

توجد صورة الخلفية على يمين الرابط، وحتى لا يتداخل النص مع الصورة، يتم إضافة هامش إلى اليمين من خلال خاصية padding-right. إذا كنت بحاجة إلى إضافة صورة على اليسار، فاستبدل 100% بـ 0، وpadding-right بـ padding-left .

لا يمكن أن يكون البروتوكول http فحسب، بل أيضًا ftp و https؛ بالنسبة لهم تتوقف هذه الوصفة عن العمل. لذا، من أجل تعدد الاستخدامات، من الأفضل تغيير المحدد إلى a، فهو ينص على أنه يجب تطبيق النمط على جميع الروابط التي يحتوي عنوانها على //.

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

إزالة تسطير الرابط

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

أ (زخرفة النص: لا شيء؛)

باستخدام هذا السطر من التعليمات البرمجية، يمكنك إزالة نمط تسطير CSS لجميع الروابط.

تحذير حول إزالة الشرطات السفلية

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

لا تضع خطًا تحت النص غير المرتبط برابط

لا تضع خطًا تحت النص الذي لا يمثل رابطًا. اعتاد الناس على حقيقة أن النص الذي تحته خط ( باستخدام لون التسطير CSS) هو الرابط. إذا قمت بوضع خط تحت المحتوى لتركيز الاهتمام عليه ( بدلاً من وضعها بالخط العريض أو المائل)، أنت تضلل مستخدمي الموقع.

قم بتغيير التسطير الصلب إلى نقاط أو شرطات

إذا كنت تريد الاحتفاظ بتسطير الروابط، مع تغيير النمط الافتراضي (السطر " صلب ")، ويمكن القيام بذلك على النحو التالي. استخدم النقاط بدلاً من الخط المتصل. للقيام بذلك، تحتاج إلى إزالة التسطير واستبداله بالخاصية border-bottom:

a (زخرفة النص: لا شيء؛ الحد السفلي: 1 بكسل منقط؛)

نظرًا لأننا قمنا بإزالة التسطير القياسي لزخرفة نص CSS، فسيتم عرض سطر من النقاط فقط:

يمكن فعل الشيء نفسه للحصول على تسطير منقط. فقط قم بتغيير border-bottom إلى متقطع :

أ (زخرفة النص: لا شيء؛ الحد السفلي: 1 بكسل متقطع؛)

تغيير لون التسطير

هناك طريقة أخرى لجذب انتباه المستخدمين إلى الروابط وهي تغيير لون التسطير. لا تنس أن لون النص الموجود أسفل CSS يجب أن يتطابق مع نظام الألوان الذي تستخدمه:

a (زخرفة النص: لا شيء؛ الحد السفلي: 1 بكسل أحمر خالص؛)

تسطير مزدوج

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

أ (زخرفة النص: لا شيء؛ الحد السفلي: 3 بكسل مزدوج؛)

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

أ (الحد السفلي: 1 بكسل مزدوج؛)

لا تنس حالات الارتباط المختلفة

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

أ (زخرفة النص: لا شيء؛) أ:تحويم (الحدود السفلية: 1 بكسل منقط؛)

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

جيد سيئ

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

يوضح السطر الثاني كيف يتم كتابة كل شيء في صف واحد مع زخرفة النص.

نمط زخرفة النص - نمط تسطير النص

يحدد الخيار مظهر الخط الزخرفي للارتباط /. أضافت إرشادات CSS الجديدة قيمًا متموجة ومزدوجة، لذا يوجد الآن 5 منها:

• صلب - خط صلب؛
• مزدوج - مزدوج (من المثال الأول أعلاه)؛
• منقط - يتكون من سلسلة من النقاط؛
• متقطع - يسمح لك بإنشاء تسطير CSS متقطع؛
• متموج - خط متموج مذهل.

text-underline-position - تحديد موضع التسطير في CSS

باستخدام هذه الخاصية، يمكنك التحكم في موضع الخط بالنسبة للخط الرسومي.
يتوفر إجمالي 4 خيارات:

• تلقائي - يقع في أقرب مكان ممكن من الخط الأساسي للنص؛
• تحت - أسفل الحد الأدنى للخط؛
• يسار ويمين - يسار/يمين للمشاركات المعروضة عموديًا.

فيما يلي اختلاف مرئي بين تسطير النص باستخدام أسفل وتلقائي:

أعتقد أن الفرق واضح تمامًا.

زخرفة النص - تخطي - إزالة التسطير للعناصر

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

أي، على سبيل المثال، باستخدام الحبر، يمكنك إنشاء شرطة سفلية في CSS لا تتقاطع مع الأحرف. تسمح لك كائنات القيمة بتخطي العناصر المضمنة (كتلة مضمنة) - أدخل مسافة، وسوف ينقطع الخط الصلب في المكان المناسب:

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

حيل إضافية لتسطير الروابط

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

كيفية إزالة الرابط الذي تحته خط

أ:تحويم (زخرفة النص: تسطير؛)

يسمح لك كلا المثالين أدناه بفهم منطق كيفية عمل التمرير: إما أن تحدد في البداية تسطير الرابط في CSS، ثم تقوم بإزالته أثناء التمرير، أو العكس.

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