لا يوفر CSS نفسه وظيفة تغيير التسطير في روابط HTML بشكل مباشر، ولكن طالما أننا نستخدم بعض التقنيات، فلا يزال بإمكاننا جعل التسطير الرتيب لروابط الويب ملونًا.
1. المبادئ الأساسية
أولاً، الخطوة الأولى لتخصيص التسطير في روابط HTML هي إنشاء رسم كرر هذا الرسم في الاتجاه الأفقي لتكوين تأثير التسطير. إذا كنت تريد إظهار خلفية صفحة الويب خلف التسطير، فيمكنك استخدام رسم .gif شفاف.
ثانيًا، إذا كان ارتفاع الرسم المسطر كبيرًا، فيجب زيادة ارتفاع النص بشكل مناسب بحيث يكون هناك مسافة أكبر بين أسفل سطر واحد من النص وأعلى السطر التالي من النص، مثل p { ارتفاع الخط: 1.5 }.
رابط مخصص تسطير المثالثالثًا، لعرض تسطير مخصص، يجب إخفاء التسطير الافتراضي، أي { زخرفة النص: لا شيء }.
رابعًا، قم بتعيين الرسم المسطر لعنصر الارتباط وإنشاء تسطير مخصص. بافتراض أن الرسم المسطر هو underline.gif، فإن كود CSS لإعداد الرسم المسطر هو {background-image: url(underline.gif }.
خامسًا، نحتاج إلى جعل الرسم الذي تحته الخط يتكرر في الاتجاه الأفقي، وليس في الاتجاه الرأسي، وإلا فسيتم إخفاؤه خلف النص. الكود الذي يتطلب تكرار التسطير في الاتجاه الأفقي فقط هو: a { تكرار الخلفية: تكرار x }.
سادسا، للتأكد من ظهور الرسم أسفل نص الرابط (بغض النظر عن حجم الخط)، استخدم خاصية موضع الخلفية لوضع الرسم في أسفل عنصر الرابط. بالنسبة للرسومات المسطرة مثل الأسهم، قد تحتاج أيضًا إلى مراعاة المحاذاة الأفقية للرسومات. لنفترض أنك تريد وضع الرسم المسطر في الزاوية اليمنى السفلية، فإن رمز CSS هو: a { الخلفية: 100% 100% }.
سابعا، يجب إضافة مساحة بيضاء مناسبة لإتاحة مساحة للرسومات المخصصة أسفل نص الرابط. يرتبط الموضع المحدد للرسم المسطر بالنسبة لنص الارتباط بحجم النص، ولكن بشكل عام، يمكنك أولاً جعل الهامش السفلي مساويًا لارتفاع الرسم المسطر، ثم ضبطه إذا لزم الأمر. على سبيل المثال: { الحشو أسفل: 4px }.
ثامنًا، بما أن الرسم المسطر يتم وضعه أسفل عنصر الرابط، فيجب التأكد من أن الرابط لا يقطع السطر (إذا سمح للرابط بالامتداد على عدة أسطر، فإن نص الارتباط الموجود في السطر التالي فقط سيكون له علامة تسطير مخصص). استخدم سمة المسافة البيضاء في CSS لمنع التفاف نص الارتباط، أي { مسافة بيضاء: nowrap }.
للتلخيص، المثال الكامل لتحديد خصائص نمط CSS لعنصر الارتباط سيكون:
أ {
زخرفة النص: لا شيء؛
الخلفية: url(underline.gif) كرر-x 100% 100%؛
الحشو السفلي: 4 بكسل؛
المساحة البيضاء: nowrap؛
}
إذا كنت تريد أن يظهر التسطير المخصص فقط عند تحريك الماوس ، فما عليك سوى تغيير خاصية خلفية CSS التي تم تعيينها في الأصل مباشرة على عنصر الارتباط إلى:hover، على سبيل المثال:
أ {
زخرفة النص: لا شيء؛
الحشو السفلي: 4 بكسل؛
المساحة البيضاء: nowrap؛
}
أ:تحوم {
الخلفية: url(underline.gif) كرر-x 100% 100%؛
}
2. تقدير الأمثلة
لنفترض أن هناك رسمين مسطرين diagonal.gif (خط مموج) وflower.gif (زهرة)، ارتفاع وعرض الأول هما 3 و9، وارتفاع وعرض الأخير هما 11 و15. فيما يلي مثال كامل لإعداد نوعين من التسطير:
مثال على تسطير الارتباط المخصصالكود المصدري لصفحة الويب هو كما يلي:
ملحوظة: تم نسخ diagonal.gif وflower.gif إلى نفس الدليل الذي توجد به صفحة الويب.
<أتش تي أم أل>
<الرأس>
<العنوان>على سبيل المثال</العنوان>
<نوع النمط=نص/css>
أ#مثال1أ {
زخرفة النص: لا شيء؛
الخلفية: url(diagonal.gif) كرر-x 100% 100%؛
المساحة البيضاء: nowrap؛
الحشو السفلي: 2 بكسل؛
}
أ#example1b {
زخرفة النص: لا شيء؛
المساحة البيضاء: nowrap؛
الحشو السفلي: 2 بكسل؛
}
أ#example1b:تحويم {
الخلفية: url(diagonal.gif) كرر-x 100% 100%؛
}
أ#مثال2أ {
زخرفة النص: لا شيء؛
الخلفية: url(flower.gif) كرر-x 100% 100%;
المساحة البيضاء: nowrap؛
الحشو السفلي: 10 بكسل؛
}
أ#مثال2ب {
زخرفة النص: لا شيء؛
المساحة البيضاء: nowrap؛
الحشو السفلي: 10 بكسل؛
}
أ#example2b:تحويم {
الخلفية: url(flower.gif) كرر-x 100% 100%;
}
-->
</نمط>
</الرأس>
<الجسم>
<p>مثال:</p>
<p> <a href=# id=example1a>تسطير ثابت مموج</a>،
<a href=# id=example1b>الخط المموج الذي يظهر عند انتهاء الماوس</a>. </ص>
<p> <a href=# id=example2a>تسطير ثابت على شكل زهرة</a>،
<a href=# id=example2b>تسطير الزهرة الذي يظهر عند انتهاء مؤشر الماوس</a>. </ص>
</الجسم>
</html>