خصائص التنسيق في CSS 6 - Programmer Tech
CSS

خصائص التنسيق في CSS 6

خصائص التنسيق في لغة CSS

خصائص التنسيق في CSS

خصائص تنسيق النصوص, في الدرس السابق تعلمنا الفئة الزائفة و استخدمنا بعض الخصائص من الدروس السابقة و هذا يجب أن يُعطيك فكرة عن الإمكانيات التي تستطيع CSS أن تفعلها, في هذا الدرس سوف نعلمك كيف تحدد خصائص معينة لمجموعة من العناصر أو لعنصر معين.

خاصية line-height خصائص التنسيق في CSS

إن line-height تقوم هذه الخاصية بإعطاء المسافات بين السطور و يمكن تحديد المسافات بـ ( em, px, % ).

مثال

<body>
    <p>Welcome Programmer Tech <br> AhmedKaissar <br> and MuammadAlush</p>
    <hr>
    <p class="var1">Welcome Programmer Tech <br> AhmedKaissar <br> and MuammadAlush</p>
    <hr>
    <p class="var2">Welcome Programmer Tech <br> AhmedKaissar <br> and MuammadAlush</p>
    <hr>
    <p class="var3">Welcome Programmer Tech <br> AhmedKaissar <br> and MuammadAlush</p>
    <hr>
    <p class="var4">Welcome Programmer Tech <br> AhmedKaissar <br> and MuammadAlush</p>
    <hr>
</body>

قمنا بإنشاء خمس فقرات و قمنا بربط الفقرات عبر كلاسات ليتم إعطائهم التنسيق عن طريق CSS.

كود CSS

<style>
    p.var1 {
        line-height: 3.5em;
    }
        p.var2 {
        line-height: 60px;
    }
    p.var3 {
        line-height: 200%;
    }
</style>

قمنا بإعطاء التنسيقات عبر الكلاسات الموجودة في كود HTML و التنسيق هو line-height في البداية وضعنا القيمة 3.5em و الثاني 60px و الثالث 200%, و عند تشغيل الكود سوف تكون النتيجة.

خصائص التنسيق في CSS 6

1صورة /////////////////

خاصية list-style-position خصائص التنسيق في CSS

تحدد list-style-position موقع القائمة و تأخذ بعض القيم (outside, inside, hanging).

مثال

<body>
    <ul id="var1">
        <li>MuhammadAlush</li>
        <li>AhmedKaissar</li>
        <li>SajaAlsadig</li>
    </ul>
    <ul id="var2">
        <li>Python</li>
        <li>Html</li>
        <li>CSS</li>
    </ul>
    <ul id="var3">
        <li>Java</li>
        <li>JavaScript</li>
        <li>dbs</li>
    </ul>
</body>

أنشأنا ثلاث قوائم تحتوي على ثلاث مهندسين و كل مهندس يقوم بتدريس لغات معينة ووضعنا id لكل قائمة من أجل تنسيقها عن طريق CSS.

كود CSS

<style>
    #var1 {
        list-style-position: outside;
    }
    #var2 {
        list-style-position: inside;
    }
    #var3 {
        list-style-position: hanging;
    }
</style>

إستخدمنا list-style-position من أجل تنسيق القوائم الثلاثة و الأول كانت قيمته outside و الثاني inside و الثالث hanging, و عند تشغيل الكود ستكون نتيجته بالشكل

خصائص التنسيق في CSS 6

خاصية list-style-type خصائص التنسيق في CSS

الخاصية list-style-type تحدد شكل و نوع الترقم و تأخذ بعض القيم منها:

  1. circle.
  2. square.
  3. lower-roman.
  4. lower-alphe.
  5. upper-alpha.

مثال

<body>
    <p>Welcome</p>
    <ul class="a">
        <li>MuhammadAlush</li>
        <li>AhmedKaissar</li>
        <li>SajaAlsadig</li>
    </ul>
    <p>Welcome</p>
    <ul class="b">
        <li>Python</li>
        <li>Html</li>
        <li>CSS</li>
    </ul>
    <p>Welcome</p>
    <ul class="c">
        <li>Java</li>
        <li>JavaScript</li>
        <li>dbs</li>
    </ul>
    <p>Welcome</p>
    <ul class="d">
        <li>php</li>
        <li>ASP</li>
        <li>Perl</li>
    </ul>
</body>

أنشأنا 4 فقرات و كل فقرة بها عدة قوائم و أعطيناهم id لكل قائمة من أجل التنسيق, و كود CSS سيكون بالشكل

<style>
    ul.a{
        list-style-type: circle;
    }
    ul.b {
        list-style-type: square;
    }
    ul.c {
        list-style-type: lower-roman;
    }
    ul.d {
        list-style-type: lower-alpha;
        list-style-type: upper-alpha;
    }
</style>

إستخدمنا list-style-type من أجل إعطاء التنسيق للقوائم و كانت قيمة الأولى circle و قيمة الثانية square و قيمة الثالثة lower-roman و قيمة الرابعة lower-alpha و قيمة الخامسة upper-alpha.

خصائص التنسيق في CSS 6

خاصية list-style-image خصائص التنسيق في CSS

تستخدم list-style-image لتحديد صور إلى الترقيم.

مثال

<body>
    <p>Welcome</p>
    <ul>
        <li>MuhammadAlush</li>
        <li>AhmedKaissar</li>
        <li>SajaAlsadig</li>
    </ul>
</body>

قمنا بإنشاء فقرة و قائمة بها ثلاث عناصر و سوف نطبق الخاصية list-style-image على هذه العناصر لكي يتم ترقيم العناصر بصور, و كود CSS سيكون بالشكل.

<style>
    ul {
        list-style-image: url(Muh.png);
    }
</style>

قمنا بإستخدام list-style-image من أجل ترقيم القائمة و مررنا لها القيمة و هي رابط الصورة الموجودة ضمن مجلد العمل الحالي أي مسار الصورة.

خصائص التنسيق في CSS 6

تحديد إتجاه الكتابة Writing direction خصائص التنسيق في CSS

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

1-الطريقة الأولى عبر html

لجعل المحتوى يظهر من جهة اليمين و ليس اليسار نقوم بالتوجه للوسم body و نضيف له الخاصية dir و نعطيها القيمة rtl اي من اليمين, في حال كنا نريد ستخدام الإتجاه انجليزي من اليسار نضع القيمة ltr.

مثال

<body dir="rtl">
    <h1>موقع لتعلم لغات البرمجة و أمن المعلومات</h1>
    <p>موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات</p>
</body>

2-الطريقة الثانية عبر css

نقوم بتحديد العنصر body ثم نقوم بإستخدام direction و القيمة rtl لكي يقوم بتحويل جميع ما يكتب بالصفحة من اليمين.

body{
    direction: rtl;
}

لمشاهدة تغيير إتجاه النصوص فيديو على يوتيوب من هنا.

محمد تركي العلوش

من سورية بالتحديد من مدينة "منبج" ، ‏مبرمج ويب، محب للتقنية | ‎#أمن_المعلومات | ‎#الأمن_السيبراني | ‎#الشبكات | ‎#توعية_أمنية ، آمل أن أُقدم كل ما هو مفيد للجميع.
زر الذهاب إلى الأعلى