الدوران في css و html

الدوران في css و html سنتحدث الآن عن كيفية عمل التفاف تلقائي للنص داخل العلامة. هذه الطريقة ليست كما كانت من قبل ، فهي الأكثر استخدامًا في معظم المواقع نظرًا للحاجة إلى وجود حدود في العديد من النصوص وهذا ما يتبناه css wrap والذي يقوم على رسم الحدود التلقائية للنص الذي نقوم به تريد أن تسقط في الأسفل تلقائيًا.

 

تعريف

HTML tag
{
    background-color:%color%;
    padding:%val%;
    border:%val% type of border %color%;
    width:%val%;

}

هذه هي الصيغة العامة المعروفة عند إنشاء علامة HTML والعمل على النزول تلقائيًا إلى سطر جديد ضمن حدود العلامات ، والذي يحتوي على:

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

 

فوائد الدوران في css و html

تتعدد فوائد استخدام التفاف CSS في قوالب HTML ، وتشمل:

  • إضافة ما نريد داخل النص دون مراعاة عرض العلامة.
  • سهولة الاستخدام ، وكثيرا ما يتم استخدامها.

والآن أوضحنا بعض خصائص التفاف css في استخدام النصوص ونأمل أن نكون قد قدمنا ​​لك الفكرة جيدًا.

 

مثال

من فضلك ، لفهم التفاف CSS جيدًا ، انسخ الرموز التالية في ملف نصي ولا تنس تغيير امتداده إلى .html ثم تشغيله في متصفحك.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Text Overflow</title>


        <style>
        div
            {
                background-color:#D9D9D9;
                padding:10px;
                border:2px solid #CCC;
                width:300px;
                white-space:normal;

            }

        </style>
    </head>

    <body>
        <div>This is Tajersys Website This is Tajersys Website School This is Tajersys Website School</div>
        <p>file:///   C:/Users/       mutaSYS/Desktop/CSS/part9%20Word%20Wrap,%20White%20Space/Text%20overflow.html</p>
    </body>

</html>

 

 

 

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *