تنسيق النصوص في CSS

تنسيق النصوص داخل css بعد كتابة الأكواد في لغة html سوف تظل النصوص ليس لها تنسيق بشكل جيد. اليوم سنتابع معاً عن كيفية تنسيق تلك النصوص بإستخدام الـ css, تنسيق النصوص و مظهرها هي مسألة اساسية بالنسبة لمصممي المواقع لكي تجذب الزائر للموقع و ينبهر بعملك, كما أنّ css تدعم مجموعة من الخصائص لتنسيق النصوص وهي:

text-indent.
text-align.
text-decoration.
letter-spacing.
text-transform.

وضع فراغ قبل أول سطر text-indent

خاصية text-indent تتيح لك هذه الخاصية بوضع فراغ قبل أول السطر و تسمح بإضافة لمسة جميلة الى الفقرات بوضع مسافة فارغة قبل أول سطر, كما يمكن التحكم بها من خلال البكسل px على حسب أبعاد الفراغات التي تريدها.

ليكن في ملف html فقرة بها إسم وصف عن CSS, و كود css سيكون بالشكل

p {
text-indent : 30px;
}

قيمنا بإستخدام الخاصية text-indent من اجل وضع فراغ قبل السطر الأول ووضعنا لها القيمة 30 بيكسل, و عند تشغيل هذا الكود سوف يطبع لنا الفقرة لكن قبلها يكون فراغ.

CSS is an abbreviation of the English term Cascading Style Sheet,
which has been translated as 'flowing style sheets'. Whereas HTML is concerned
with describing the elements of web documents,
CSS is concerned with improving the look and feel of these elements.

نلاحظ بأن أول سطر يوجد قبله فراغ.

محاذاة النص text-align

خاصية text-align شبيهة بحد ما بخاصية align في HTML, يبدو أننا إستخدمنا هذه الخاصية بشكل كبير في css and html, هذه الخاصية يمكنها التحكم في النص على المتصفح, و ما إذا كنت أريد مكان ظهور النص على سبيل المثال يمين أو يسار أو في المنتصف و تأخذ معها بعض القيم و هي يسار الصفحة left منتصف الصفحة center يمين الصفحة right إضافة أيضاً القيمة justify بمحاذاة النص من اليمين و اليسار.

p { 
text-align : القيمة ;
}

زخرفة النص text-decoration

خاصية text-decoration تستعمل في زخرفة النصوص, تتمكن من إضافة زخارف و تأثيرات على النص و تمكنك بأن تضيف سطر أسفل النص أو فوق النص أو في منتصف النص و لها عدة قيم و منها:

وضع سطر أسفل النص underline.
وضع سطر أعلى النص overline.
وضع سطر منتصف النص line-through.

لننشأ ثلاث عناوين في ملف html و نقوم بتنفيذ الزخرفة من خلال css.

h1 {
    text-decoration: underline;
}
h2 {
    text-decoration: overline;
}
h3 {
    text-decoration: line-through;
}

في المثال السابق في الوسم h1 قمنا بإستخدام أن يكون وضع سطر أسفل النص و في h2 وضعنا سطر أعلى النص و في h3 وضعنا سطر في منتصف النص.

تحويل النص text-transform

خاصية text-transform تلك الخاصية تتحكم في حجم الخط وكما يمكنها أيضاً تحويل النص على سبيل المثال يمكنها تحويل الأحرف من الصغير إلى الكبير مثل nusur تحولها الى NUSUR وتأخذ بعض القيم للتحكم بالنص.

تكبير أول حرف من كل كلمة capitalize.
جعل كل الحروف كبيرة uppercase.
جعل كل الحروف صغيرة lowercase.
لا تقوم بعمل أي تأثيرات على النص none.

سوف نقوم بعمل 4 عناوين ضمن جسم الصفحة في ملف html ثم سوف نقوم بإعطائهم القيم عن طريق css بالشكل الآتي:

h1 {
    text-transform: capitalize;
}
h2 {
    text-transform: lowercase;
}
h3 {
    text-transform: uppercase;
}
h4 {
    text-transform: none;
}

قمنا بإنشاء 4 عناوين و هي من h1 حتى h4 ثم أعطيناهم القيم التي ذكرناها في الأعلى و هي في h1 سوف يقوم بتكبير أول حرف من كل كلمة و h2 سوف يجعل كل الحروف صغيرة في حال كانت كبيرة و h3 سوف يجعل كل الحروف صغيرة و h4 لن يقوم بتطبيق أي تأثير على النص.

المسافة بين الحروف lettrt-spacing

خاصية lettrt-spacing تمكنك هذه الخاصية بالتحكم بين مسافات النصوص و يمكنك التحكم في المسافات بين النصوص أو الأحرف من خلالها, و القيم المستخدمة معها هي البكسل px ويمكنك التحكم في المسافات من خلال عدد المسافات بالبكسل.

h1 {
letter-spacing : 10px;
}

قمنا بإستخدام خاصية تباعد المسافات بين الحروف letter-spacing و أعطيناها القيمة 10 بيكسل, و عندما نشغل هذا الكود سيكون بالشكل.

N u s u r T e c h

خصائص تنسيق مجموعة نصوص في CSS

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

خاصية line-height في CSS

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

مثال

<body>
    <p>Welcome Nusur Tech <br> AhmedAMVIIP <br> and MuammadAlush</p>
    <hr>
    <p class="var1">Welcome Nusur Tech <br> AhmedAMVIIP <br> and MuammadAlush</p>
    <hr>
    <p class="var2">Welcome Nusur Tech <br> AhmedAMVIIP <br> and MuammadAlush</p>
    <hr>
    <p class="var3">Welcome Nusur Tech <br> AhmedAMVIIP <br> and MuammadAlush</p>
    <hr>
    <p class="var4">Welcome Nusur Tech <br> AhmedAMVIIP <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%.

خاصية list-style-position في لغة CSS

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

مثال

<body>
    <ul id="var1">
        <li>MuhammadAlush</li>
        <li>AhmedAMVIIP</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.

خاصية list-style-type في CSS

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

circle.
square.
lower-roman.
lower-alphe.
upper-alpha.

مثال

<body>
    <p>Welcome</p>
    <ul class="a">
        <li>MuhammadAlush</li>
        <li>AhmedAMVIIP</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.

خاصية list-style-image

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

مثال

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

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

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

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

تحديد إتجاه الكتابة Writing direction

سنتحدث عن خاصية تسمى 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;
}

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

نسور التقنية Nusur Tech

تنسيق النصوص في CSS