قائمة طعام
مجاني
التسجيل
الصفحة الرئيسية  /  الملاحون/ Css خط مسطر. نص مسطر في CSS

خط Css مسطر. نص مسطر في CSS

وصف

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

بناء الجملة

زخرفة النص: [وميض || خط من خلال || سطحي || تسطير] | لا شيء | يرث

القيم

وميض ضبط النص الوامض. يختفي هذا النص بشكل دوري بمعدل مرة واحدة في الثانية ثم يعاود الظهور في نفس المكان. تم إهمال هذه القيمة حاليًا بواسطة المستعرضات وتم إهمالها في CSS3 ؛ يوصى باستخدام الرسوم المتحركة بدلاً من ذلك. line-through لإنشاء نص يتوسطه خط (مثال). خط فوق النص يمر السطر فوق النص (مثال). تسطير مجموعات تسطير النص (مثال). لا شيء يلغي كل التأثيرات ، بما في ذلك التسطير الافتراضي للروابط. ترث القيمة موروثة من الأصل.

HTML5 CSS2.1 IE Cr Op Sa Fx

زخرفة النص

هجوم استراتيجي

نموذج الكائن

document.getElementById ("elementID") .style.textDecoration

document.getElementById ("elementID") .style.textDecorationBlink

document.getElementById ("elementID") .style.textDecorationLineThrough

document.getElementById ("elementID") .style.textDecorationNone

document.getElementById ("elementID") .style.textDecorationOverLine

document.getElementById ("elementID") .style.textDecorationUnderline

المتصفحات

لا يدعم Internet Explorer حتى الإصدار 7.0 ويتضمن القيمة الموروثة. الخط الذي تم الحصول عليه باستخدام قيمة line-through أعلى في IE7 منه في المتصفحات الأخرى ؛ IE8 أصلح هذا الخطأ.

مهمة

حل

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

تسطير منقط

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

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

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

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

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

إزالة التسطير من الروابط في جميع أنحاء الموقع

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

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

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

ولكن ماذا لو لم يكن لديك حق الوصول إلى ملف CSS؟

في هذه الحالة ، يُنصح باستخدام علامة النمط في بداية المستند. يعمل بنفس طريقة عمل ملف CSS. من أجل تطبيق الأنماط ، من الضروري في بداية المستند (أو صفحات HTML) أضف بنية يتم فيها تطبيق قواعد نمط CSS المعتادة.

هذه الأنماط تنطبق فقط على صفحة معينة. لن يعملوا في أقسام أو وثائق أخرى من الموقع.

قم بإزالة روابط التسطير عند التمرير

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

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

إن الطبقة الزائفة ": hover" هي المسؤولة عن تزيين العناصر عند التحويم.

بتكوين الاثنين ، يمكننا جعل تسطير الرابط يظهر فقط عند التمرير ، وإلا سيبدو كل شيء كنص عادي:

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

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

استخدام المعرفات والفئات

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

هناك عدة حلول لهذه المشكلة.

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

للقيام بذلك ، تحتاج إلى تحديد معلمة النمط مباشرة في علامة الارتباط:

الخيار الثاني مقبول أكثر.

نقدم فئة أو معرفًا إضافيًا في العنصر ونخصص الأنماط التي نحتاجها إلى هذه المحددات:

الفصل مكتوب بنقطة قبل اسمه:

لا شيء _ زخرفة (

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

يتم الإشارة إلى المعرف بعلامة #:

# بلا_ديكور (

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

تنطبق هذه القاعدة على كل من ملف CSS وعلامة النمط.

تغيير نمط عرض الروابط في النص

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

هذا أيضًا بسيط جدًا للقيام به:

اللون : * حدد اللون المطلوب بأي تنسيق (* أحمر ، # c2c2c2 ، rgb (132 ، 33 ، 65) *) *;

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

استبدال التصميم القياسي

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

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

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

يمكنك أيضًا تغيير موضع السطر بالنسبة إلى النص:

يمكن أن يأخذ إنشاء خط زخرفة النص القيم التالية:


ولون (يجب عدم الخلط بينه وبين لون النص!):

خط زخرفة النص: (أي لون بأي شكل * أحمر ، # c2c2c2 ، RGB (132 ، 33 ، 65) *).

للراحة ، يمكن كتابة المواقف الثلاثة معًا في البناء:

زخرفة النص: أحمر ، خط من خلال ، متموج.

أو استكشاف العلامات التي تنسق نص HTML

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

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

انظر أدناه العلامات التي تنسق نص HTML:

  • العلامات → جريئة نص HTML(خط عريض).
  • العلامات → جريئة نص HTML(خط عريض).
  • العلامات → أحادي المسافة نص HTML(خط أحادي المسافة).
  • العلامات → أحادي المسافة نص HTML(خط أحادي المسافة).
  • العلامات → أحادي المسافة نص HTML(خط أحادي المسافة).
  • العلامات → نص HTML، الحجم أكبر من المعتاد (طباعة كبيرة).
  • العلامات → نص HTML، الحجم أصغر من المعتاد (طباعة صغيرة).
  • العلامات → مائل نص HTML(خط مائل).
  • العلامات → مائل نص HTML(خط مائل).
  • العلامات → مائل نص HTML(خط مائل).
  • العلامات → تحتها خط نص HTML(خط تحته خط).
  • العلامات → يتوسطه خط نص HTML(خط يتوسطه خط).
  • العلامات → نص HTML(الخط) بخط منخفض.
  • العلامات → نص HTML(الخط) مرتفع.

تنسيق نص HTML: يتوسطه خط ونص تحته خط

النتيجة: ... خط أحادي المسافة

النتيجة: ... حجم الخط أكبر من المعتاد

نتيجة: ... خط مائل

النتيجة: نص يتوسطه خط (خط يتوسطه خط)

النتيجة: مرتفع

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

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

ضع خطًا تحت HTML

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

بطاقة شعار الختام ، يجب أن يرافقه... يجب إضافته إلى الترميز بهذه الطريقة:

  1. العنوان الأول

    2. لنا نصفي الفقرة

سيتم وضع خط تحت كلمة "نص".

يمكنك أيضًا تسطير حرف واحد في الكلمة:

  1. العنوان الثاني

    2. هؤلاء لدينا إلىمقالة في الفقرة

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

بالإضافة إلى ذلك ، فإن أنماط الكتابة في css تجعل الشفرة أكثر إحكاما ، مما يعني أن الصفحة سيتم تحميلها بشكل أسرع.

في أغلب الأحيان ، يطبق مصممو المخططات الأنماط عن طريق إضافة حدود أو تسطير في html ، أو نقلهم إلى ملف css منفصل.

تسطير في CSS

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

لتسطير النص بزخرفة النص ، يجب إضافة الخاصية إلى الفئة المطلوبة.

  • الدرجة المطلوبة (
  • زخرفة النص: تسطير ؛

يجب أن نتذكر أن أسماء الفئات تُكتب دائمًا بأحرف لاتينية.

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

  • الدرجة المطلوبة (
  • زخرفة النص: لا شيء ؛

ثم يزين النص بالخاصية التالية:

  • مطلوب فئة (.
  • زخرفة النص: لا شيء ؛
  • الحد السفلي: 2 بكسل أسود متقطع ؛

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

تتم كتابة أنماط الإطار على سطر واحد. بالإضافة إلى نوع التسطير ، تحتاج أيضًا إلى تحديد سمك التسطير واللون. يمكنك تجربة تحديد الحجم ، ولكن عادةً ما تكون 1 أو 2 بكسل كافية. يمكن أيضًا تعيين لون النص على لون التسطير:

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

سيؤدي هذا إلى إنشاء نص أزرق بخط طباعة أزرق. لإرفاق نمط بـ html ، تحتاج إلى إضافة فئة إلى الترميز.

  • العنوان الثالث

    • نصنا في فقرة

هذا كل شيء ، هذه هي أساسيات التسطير في لغة تأشير النص الفائق.