يعد تسطير الخط أداة مهمة لإنشاء عناصر نصية مذهلة ومعبرة على صفحات الويب. هناك عدة أنواع من الشرطات السفلية التي تم تعيينها باستخدام خصائص كس المناسبة. تعلم كيفية تعيين أنواع مختلفة من الشرطات السفلية للخط هو الخطوة الأولى لإنشاء تصميم فريد وجذاب.
واحدة من أسهل الطرق لتعيين تسطير سفلي للنص هي استخدام خاصية زخرفة النص مع تسطير القيمة. هذا يسلط الضوء على النص مع سطر من نفس لون النص نفسه. إذا كنت بحاجة إلى تغيير لون الخط ، يمكنك استخدام خاصية النص-الديكور-اللون.
لكن هذا ليس كل شيء! يحتوي كس على خصائص أخرى تسمح لك بتعيين خيارات تسطير أكثر تشويقا وتعقيدا للخط. على سبيل المثال ، تسمح لك خاصية نمط زخرفة النص بتعيين نمط التسطير: صلب (خط صلب) ، منقط (خط منقط) ، متقطع (خط منقط) وغيرها الكثير. يمكنك أيضا تغيير سمك التسطير باستخدام خاصية النص-الزخرفة-السماكة.
لإنشاء تأثيرات أكثر تعقيدا ، يمكنك دمج خصائص تسطير مختلفة. على سبيل المثال ، يمكنك تعيين التسطير باستخدام الأسهم في نهايات السطر باستخدام خاصية سطر النص والديكور وقيمة التسطير ، واستخدام النمط المزدوج للسطر. ستعمل هذه الطريقة على إنشاء تسطير أنيق ومعبر للنص.
- تعيين أنواع مختلفة من الشرطات السفلية للخط
- لماذا تختار تسطير الخط
- الشروع في العمل مع تسطير الخط
- تسطير الخط باستخدام المغلق
- تسطير الخط باستخدام هتمل
- تسطير الخط باستخدام جافا سكريبت
- أمثلة على أنواع مختلفة من خط التسطير
- أفضل الممارسات لاستخدام الشرطات السفلية للخط
تعيين أنواع مختلفة من الشرطات السفلية للخط
. تتيح لك هذه الخاصية تعيين نمط التسطير للنص. فيما يلي بعض الأنواع الأكثر شيوعا من التسطير:
| تسطير النمط | قيمة المغلق | مثال الاستخدام |
|---|---|---|
| تسطير المعتاد | تسطير | |
| منقط | تسطير منقط | |
| تسطير منقط بنقاط مزدوجة | متقطع | |
| التسطير فوق | النص العلوي | |
| نص يتوسطه خط | خط من خلال | |
لوضع التسطير في وقت واحد ويتوسطه خط من النص:
نص مع تسطير متزامن ويتوسطه خط
باستخدام هذه التقنيات ، يمكنك تعيين أنواع مختلفة من الشرطات السفلية للخط في مستندات هتمل وإنشاء نمط فريد للنص الخاص بك.
لماذا تختار تسطير الخط
| يسلط الضوء على العناصر الهامة يسمح لك تسطير الخط بتمييز العناصر المهمة في النص ، مثل عناوين الأقسام أو الروابط أو الكلمات الرئيسية. تصبح أكثر وضوحا وتجذب انتباه القارئ. |
يحسن التنقل تسهل الروابط المسطرة التنقل عبر صفحات الويب ، مما يسمح للمستخدمين بتحديد الكلمات أو العبارات التي تعتبر روابط نشطة بسرعة. هذا مفيد بشكل خاص للأشخاص ذوي الإعاقة أو الأجهزة المحمولة. | يخلق سلامة التصميم يمكن للخط المسطر إنشاء نمط واحد أو موضوع مستند إذا تم استخدامه بشكل صحيح في جميع أنحاء النص. يساعد هذا في إنشاء اتصال بين الأقسام المختلفة وجعل المستند أكثر اكتمالا بصريا. |
الشروع في العمل مع تسطير الخط
هناك عدة طرق لإضافة الشرطة السفلية إلى النص في هتمل. للقيام بذلك ، يمكنك استخدام والعلامات .
تستخدم العلامة لتسليط الضوء على الكلمات أو العبارات المهمة بشكل خاص في النص. يمنحها النص المسطر قوة كبيرة واهتماما بصريا. على سبيل المثال:
هذا النص مهم للفهم.
يتم استخدام العلامة لتسليط الضوء على النص مع الميل. يعطيه النص المسطر تلوينا عاطفيا أو يشير إلى معنى مختلف. على سبيل المثال:
رأى بطريق الخطأ شيئا غريبا.
يمكن دمج كلتا العلامتين لإنشاء أنماط تسطير أكثر تعقيدا. على سبيل المثال:
هذا النص مهم حقا لفهمه.
بالإضافة إلى هذه العلامات ، يمكنك أيضا استخدام كس لإنشاء أنماط تسطير مختلفة عن طريق إضافة الخصائص المناسبة إلى محددات النمط. يتيح لك ذلك إنشاء خيارات تسطير أكثر مرونة وقابلة للتخصيص.
الآن بعد أن أصبحت على دراية بأساسيات تسطير الخطوط في هتمل ، يمكنك تجربة أنماط مختلفة واختيار الأنسب لمشروعك.
تسطير الخط باستخدام المغلق
:
}
لإضافة خط تسطير منقط ، استخدم
ص {}
يمكنك الجمع بين أنماط تسطير مختلفة باستخدام
- القيمة المتعددة
- :
ص {
- }
- من الممكن أيضا تعيين لون التسطير باستخدام الخاصية
- . على سبيل المثال ، لتعيين لون الشرطة السفلية إلى اللون الأحمر ، تحتاج إلى إضافة الكود التالي:
ص {
زخرفة النص: تسطير;
| باستخدام هذه الخصائص ، يمكنك بسهولة نمط الخط السفلي في هتمل باستخدام كس. | تسطير الخط باستخدام هتمل |
|---|---|
يوفر هتمل عدة طرق للتأكيد على النص: | - علامة لإضافة سطر تحت النص; |
نص تحته خط
- يعرض النص مع سطر تحته: نص تحته خط;
النص المحذوف
| - يسلط الضوء على النص مع سطر فوقه: النص المحذوف. | اختر العلامة المناسبة بناء على تأثير تسطير الخط الذي تحتاجه. قد تحتاج إلى استخدام مجموعة من عدة علامات لتحقيق النتيجة المرجوة. |
|---|---|
تسطير الخط باستخدام جافا سكريبت | لتعيين تسطير الخط باستخدام جافا سكريبت ، يمكننا استخدام الخاصية |
تكستديكور | للعنصر الذي نريد التأكيد على محتواه. للقيام بذلك ، يمكننا استخدام الكود التالي: |
الممتلكات | المعنى |
تكستديكور | تسطير |
يضبط التسطير للنص في العنصر. على سبيل المثال ، إذا أردنا التأكيد على النص في عنصر
نموذج النص
السماح ميتيكستليمنت = وثيقة.جيتليمنتبيد ("ميتيكست");
ونتيجة لذلك ، فإن النص
نموذج النص
| سيتم عرضه مع تسطير سفلي. يمكنك أيضا استخدام قيم أخرى للخاصية | تكستديكور | لتغيير نمط التسطير. على سبيل المثال: |
|---|---|---|
| المعنى | الوصف | لا يوجد |
| يزيل الشرطة السفلية | أوفيرلاين | يحدد يتوسطه خط |
| خط من خلال | مجموعات يتوسطها خط | تسطير فوق الخط |
| يحدد كل من التسطير ويتوسطه خط | على سبيل المثال ، تحدد شفرة جافا سكريبت التالية يتوسطها خط وتسطير للنص في عنصر | نموذج النص |
| : | السماح ميتيكستليمنت = وثيقة.جيتليمنتبيد ("ميتيكست"); |
ميتيكستليمنت.أسلوب.تكستديكور = "تسطير فوق الخط";
الآن النص
- نموذج النص
- سيتم عرضه مع شرطات سفلية ويتوسطها خط.
- من المهم ملاحظة أنه يجب وضع شفرة جافا سكريبت لتعيين تسطير الخط داخل العلامة
- أو ملف نصي خارجي مرفق بمستند هتمل.
- أمثلة على أنواع مختلفة من خط التسطير
هناك عدة طرق لتعيين شرطات سفلية للخط في هتمل. دعونا ننظر إلى بعض منهم: