CSS

Part 5 تنسيق النصوص في CSS – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 118 3 دقائق

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

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

1. تغيير الخطوط باستخدام `font-family`

font-family يستخدم لتحديد نوع الخط الذي سيتم تطبيقه على النص.
يمكن تحديد أكثر من نوع خط واحد، ويفضل تحديد عدة خطوط احتياطية في حال عدم توفر الخط الأول.

مثال

p {
    font-family: "Arial", sans-serif;
}

الشرح:

في هذا المثال، تم تعيين الخط إلى Arial، وإذا لم يكن الخط متاحًا، سيتم استخدام أي خط sans-serif متاح في النظام.

2. تغيير الحجم باستخدام `font-size`

font-size يستخدم لتحديد حجم النص.
يمكن تحديد الحجم بوحدات مثل px (بكسل)، em (نسبة إلى حجم الخط الأب)، rem (نسبة إلى حجم الخط الجذري)، أو % (نسبة من حجم العنصر الأب).

مثال

h1 {
    font-size: 32px;
}

الشرح:

في هذا المثال، سيتم تغيير حجم النص داخل جميع عناصر <h1> إلى 32 بكسل.

3. تغيير الوزن باستخدام `font-weight`

font-weight يستخدم لتحديد سمك الخط.
القيم الممكنة: normal (الوزن العادي)، bold (عريض)، أو قيمة رقمية بين 100 و900 (مثل 400 للوزن العادي و700 للوزن العريض).

مثال

p {
    font-weight: bold;
}

الشرح:

في هذا المثال، سيتم تعيين النص داخل الفقرات <p> ليكون عريضًا.

4. تغيير التباعد بين الأسطر باستخدام `line-height`

line-height يستخدم لتحديد المسافة بين الأسطر داخل النصوص.
يمكن تحديده بوحدات مثل px، em، rem، أو بدون وحدة ليتناسب مع حجم الخط.

مثال

p {
    line-height: 1.6;
}

الشرح:

في هذا المثال، سيتم تعيين التباعد بين الأسطر في الفقرة <p> ليكون 1.6 من حجم الخط، مما يعني أن المسافة بين الأسطر ستكون أكبر من المعتاد.

5. التسلسل الهرمي للنصوص

التسلسل الهرمي للنصوص يساعد في تنظيم النصوص بحيث تكون أكثر وضوحًا وسهولة في القراءة. نستخدم خصائص مثل محاذاة النصوص، تزيين النصوص، والتباعد بين الحروف والكلمات لتحقيق هذا.

1. محاذاة النص باستخدام `text-align`

text-align يستخدم لتحديد كيفية محاذاة النص داخل العنصر.
القيم الممكنة: left (محاذاة لليسار)، right (محاذاة لليمين)، center (محاذاة للوسط)، justify (محاذاة النص بشكل متساوٍ على الجانبين).

مثال

h1 {
    text-align: center;
}

الشرح:

في هذا المثال، سيتم محاذاة النص داخل جميع عناصر <h1> إلى الوسط.

2. تزيين النصوص باستخدام `text-decoration`

text-decoration يستخدم لتطبيق تأثيرات مثل الخط السفلي، الخط العلوي، أو تلوين النص.
القيم الممكنة: underline (خط تحت النص)، overline (خط فوق النص)، line-through (خط عبر النص)، و none (بدون تزيين).

مثال

a {
    text-decoration: underline;
}

الشرح:

في هذا المثال، سيتم إضافة خط تحت النصوص داخل جميع روابط <a>.

3. التباعد بين الحروف باستخدام `letter-spacing`

letter-spacing يستخدم لتحديد المسافة بين الحروف.
يمكن تحديده بوحدات مثل px أو em.

مثال

h2 {
    letter-spacing: 2px;
}

الشرح:

في هذا المثال، سيتم إضافة مسافة 2 بكسل بين الحروف داخل جميع عناصر <h2>.

4. التباعد بين الكلمات باستخدام `word-spacing`

word-spacing يستخدم لتحديد المسافة بين الكلمات في النص.
يتم تحديده بوحدات مثل px أو em.

مثال

p {
    word-spacing: 5px;
}

الشرح:

في هذا المثال، سيتم إضافة مسافة 5 بكسل بين الكلمات داخل الفقرات <p>.

كود مثال كامل:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على تنسيق النصوص</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>أهلاً بكم في تنسيق النصوص باستخدام CSS</h1>
    <p>هذا نص عادي في فقرة مع تنسيقات مختلفة.</p>
    <p class="important-text">هذا النص له تنسيق خاص، مثل تغيير الوزن والتباعد.</p>
    <a href="#">رابط مع خط تحت النص</a>
    <div class="spaced-text">
        <p>نص مع تباعد بين الحروف والكلمات.</p>
    </div>

</body>
</html>

CSS (styles.css)

/* تغيير الخطوط */
body {
    font-family: "Arial", sans-serif;
}

/* تغيير الحجم */
h1 {
    font-size: 36px;
    text-align: center;
}

/* تغيير الوزن */
p {
    font-weight: normal;
    font-size: 18px;
}

/* النص ذو التنسيق الخاص */
.important-text {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.6;
    color: darkblue;
}

/* إضافة تزيين النص */
a {
    text-decoration: underline;
}

/* تباعد بين الحروف */
h1 {
    letter-spacing: 2px;
}

/* تباعد بين الكلمات */
.spaced-text p {
    word-spacing: 5px;
}

الشرح:

body: تم تعيين الخط الأساسي إلى Arial لجميع النصوص.
h1: تم تغيير حجم الخط إلى 36px مع محاذاة النص إلى الوسط.
p: تم تعيين الوزن إلى normal وحجم الخط إلى 18px.
.important-text: تم تغيير الوزن إلى bold وحجم الخط إلى 20px، وزيادة التباعد بين الأسطر إلى 1.6.
a: تمت إضافة خط تحت النص باستخدام text-decoration: underline.
h1: تم إضافة تباعد بين الحروف بقيمة 2px.
.spaced-text p: تم إضافة تباعد بين الكلمات في الفقرة بمقدار 5px.

التجربة:

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