وظيفة تسطير الكلمات في CSS. تسطير CSS جميل للعناصر

مهمة

حل

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

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

مثال 1: تسطير منقط

HTML5 CSS 2.1 IE Cr Op Sa Fx

وتظهر نتيجة المثال في الشكل. 1.

يتم أيضًا تعيين سمك الخط ولون التسطير للروابط عبر خاصية border-bottom.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لقد أصبح وضع خط تحت الروابط النصية معيارًا معينًا وإشارة إلى أن هذا ليس مجرد نص، بل رابط. وهذا، بالمناسبة، هو أحد أسباب عدم تطبيق التسطير على النص العادي - حيث سيعتقد المستخدمون أنهم يتعاملون مع رابط. إلى جانب استخدام التسطير، وبفضل 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://. ويتم ذلك باستخدام البنية (...) كما هو موضح في المثال 7.

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

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

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

مع ظهور الشكل RGBA(أحمر أخضر أزرق ألفا)في CSS3 يمكن اعتبارها هذه المشكلةتم حلها. باستخدام تنسيق تمثيل الألوان المتقدم، أصبح لدى مصممي الويب الآن القدرة على استخدام شفافية ألفا للون.

على عكس خاصية العتامة، يمكن تطبيقها على الخط والحدود والخلفية للكتلة دون تغيير شفافية محتويات الكتلة. تعد قيم ألوان RGBA امتدادًا لقيم ألوان RGB مع قناة ألفا فقط - والتي تحدد عتامة الكائن.

بناء الجملة

معنى ألوان RGBAالمعطاة بواسطة: RGBA (الأحمر، الأخضر، الأزرق، ألفا).
تمثل المعلمة ألفا رقما من 0.0(شفاف تماما) ما يصل إلى 1.0(مبهمة تماما).

التوافق

يتم دعم قيم ألوان RGBA بواسطة المتصفحات: IE9+، وFirefox 3+، وChrome، وSafari، وOpera 10+.

من نفذ

استفاد استوديو Lebedev، ومكتب تصميم Artyom Gorbunov، وIlya Birman على الفور من هذه الفرصة... بقي تسطير الروابط على مواقعهم، لكنه أصبح أكثر أناقة.

رمز المثال

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

A:رابط (اللون: #0060a0؛ الحد السفلي: 1 بكسل صلب؛ لون الحد السفلي: rgba(0,96,160,0.2);) a:hover (اللون: #d04000; لون الحد السفلي: rgba(255,218,202 ،0.5)؛

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

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

CSS

أولاً، باستخدام خاصية ارتفاع الخط: قم بتعيين تباعد الأسطر اعتمادًا على الخط الأساسي للخط؛ وقد تكون القيمة مختلفة. لنجعل الرابط رابطًا على شكل كتلة، مضمنًا في بنية النص، عن طريق تعيين خاصية العرض الخاصة به على inline-block . دعونا نتخلص من التسطير القياسي عن طريق كتابة text-decoration:none; واملأ الرابط باللون الذي نحتاجه.

a (ارتفاع السطر: 1؛ العرض: كتلة مضمنة؛ اللون:#ffeb3b؛ زخرفة النص: لا شيء؛ المؤشر: المؤشر؛)

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

أ: بعد (العرض: كتلة؛ المحتوى: ""؛ الارتفاع: 2 بكسل؛ العرض: 0%؛ لون الخلفية: #ffeb3b؛ الانتقال: العرض .3 ثانية سهولة الدخول والخروج؛)

كل ما تبقى هو إضافة القليل من الحركة إلى الرابط الخاص بنا. للقيام بذلك، نستخدم فئتين زائفتين: hover و: focus . الأول سيحدد نمط الرابط عند تمرير مؤشر الماوس عليه، والثاني سيعمل عندما يتم وضع المؤشر "بإحكام" على الرابط. سنقوم هنا بتغيير قيمة العرض وضبطها على 100%.
الآن، عند التمرير أو التركيز على رابط، سيظهر تسطير منمق للمستخدم، بسلاسة مع تأخير بالكاد ملحوظ، وقد حددنا وقته بحكمة مسبقًا في خاصية النقل: .

أ:تحويم: بعد، أ:التركيز: بعد (العرض: 100%؛)

ونتيجة لذلك نحصل على الصورة التالية:

سيبدو الكود المجمع بالكامل كما يلي:

أ (العرض: كتلة مضمّنة؛ اللون:#ffeb3b؛ ارتفاع الخط: 1؛ زخرفة النص: لا شيء؛ المؤشر: المؤشر؛) أ:بعد (لون الخلفية: #ffeb3b؛ العرض: كتلة؛ المحتوى: ""؛ الارتفاع: 2 بكسل؛ العرض: 0%؛ -webkit-transition: العرض .3s سهولة الدخول إلى الخارج؛ -moz--transition: العرض .3s سهولة الدخول إلى الخارج a:hover:after، a:focus:after ( العرض: 100%)

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

التحديث والإضافات من 22/10/2017

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

كل شيء بسيط للغاية، ما عليك سوى إضافة بعض الخصائص الجديدة، أي بالنسبة للعنصر الرئيسي أ، حدد الموضع كموضع نسبي: نسبي؛ وبالنسبة للعنصر الزائف أ: بعد الموضع المطلق: المطلق؛ مع المسافة من الحافة اليسرى للعنصر الأصلي إلى اليسار:50%؛ وأيضًا استخدام خاصية التحويل لتحديد التحول الأفقي للعنصر بالقيمة المحددة تحويل:translateX(-50%) .

في الإخراج نحصل على هذه النتيجة:

عند تجميعها، يجب أن تبدو جميع أكواد CSS، لوضع خط تحت الرابط من المركز بسلاسة، كما يلي:

أ (العرض: كتلة مضمّنة؛ اللون:#ffeb3b؛ ارتفاع الخط: 1؛ زخرفة النص: لا شيء؛ المؤشر: المؤشر؛ الموضع: نسبي؛) أ:بعد (لون الخلفية: #ffeb3b؛ العرض: كتلة؛ المحتوى : ""; العرض: 0%; الموضع: مطلق; -webkit-transition: عرض .3 ثانية سهل الإدخال; -moz-transform:translateX(-50% after, a:focus:after ( width: 100%; )

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

مع كل الاحترام، أندرو