ماهي طريق تنسيق النصوص؟

السلام عليكم في هذا الدرس ستنعرف على كيفية تنسيق النصوص بمختلف الخصائص طبعا سنزيد المزيد في المستقبل. أولا سنتعرف على تعريف تنسيق النصوص ومن ثم أمثلة على شكل كود يمكنك نسخها وتجربتها ولنبدأ على بركة الله في تعريف تنسيق النصوص.

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

خصائص الخط: تستخدم خصائص الخط في CSS لتحديد نوع الخط وحجمه ولونه وأسلوبه.
font-family: تستخدم هذه الخاصية لتحديد نوع الخط. يمكن تحديد الخطوط المتعددة في نفس الوقت طبعا يمكنك كتابة أين نوع خط تريده فقط أكتب إسم الخاصية نقطتان وإطغظ CTR+SPACE وستطهر معك جميع الخيارات كما ترى في المثال هنا كتبنا الخط الأول وقمنا بعمل فاصلة وكتبنا الخط الثاني لماذا لأن ربما الخط الأول لن يكون في جهاز المستخدم لم يثم إجاده لهذا سيمر إلى الخط الثاني بعد الفاصلة ويعتمد عليه إفهم هذه الخاصية كأنك تريد تغيير خط الهاتف الخاص بك وتجده مثلا مائل وسميك وغيرها وكل خط له إسم يمكنك تفقد موقع google fonts للمزيد من الخطوط الرائعة. مثال:

CSS

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

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

CSS

p {
    font-size: 16px;
}

font-weight: تستخدم هذه الخاصية لتحديد سمك الخط تحتوي عدة قيم من 100 إلى 900 كلما ترتفع في القيمة يزيد سمك الخط ويمكنك تحديد قيمة bold لجعله سميك. مثال:

CSS

p {
    font-weight: bold;
}

font-style: تستخدم هذه الخاصية لتحديد أسلوب الخط قيمة italic يعني النص سيكون مائل وهكذا. مثال:

CSS

p {
    font-style: italic;
}

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

CSS

p {
    color: red;
}

خصائص الفراغ: تستخدم خصائص الفراغ في CSS لتحديد المسافات بين النصوص والعناصر الأخرى.
line-height: تستخدم هذه الخاصية لتحديد المسافة بين الأسطر. مثال:

CSS

p {
    line-height: 1.5;
}

letter-spacing: تستخدم هذه الخاصية لتحديد المسافة بين الأحرف. مثال:

CSS

p {
    letter-spacing: 3px;
}

text-align: تستخدم هذه الخاصية لتتحديد موقع النص داخل العنصر المستخدم مثلا هنا مع قيمة center يعني النص سيكون في المنتصف من المحور x فقط يوجد قيم أخرى مثل تحديده هل سيكون في الشمال أو اليمين.

CSS

p {
    text-aling: center;
}

text-decoration: تستخدم هذه الخاصية لتحديد تأثيرات الزخرفة على النص مثل التسطير والتخطيط الأفقي والتخطيط الرأسي. مثال:

CSS

p {
    text-decoration: underline;
}

text-transform: تستخدم هذه الخاصية لتحديد حالة النص، مثل تحويل النص إلى أحرف كبيرة أو صغيرة. مثال:

CSS

p {
    text-transform: uppercase;
}

text-shadow: تستخدم هذه الخاصية لإضافة ظل إلى النص القيم الأربع لتحديد موقع من جهات x and y وتحديد نسبة الإنتشار وأخيرا تحديد لون الظل هنا قمنا بتحديده باللون الأحمر. مثال:

CSS

p {
    text-shadow: 5px 5px 5px red;
}

white-space: تستخدم هذه الخاصية لتحديد كيفية معاملة المسافات داخل النص، مثل تجاهل الفراغات الزائدة أو الحفاظ على الفراغات الزائدة.

CSS

p {
    white-space: nowrap;
}

مثال عملي:
الآن، سوف نقوم بتطبيق بعض خصائص تنسيق النصوص المذكورة أعلاه على عنصر div:

CSS

<div>Hello How are you</div>

CSS

div {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #000000;
    color: #ffffff;
    background-color: #333333;
    padding: 20px;
}

هذه الشفرة تقوم بتطبيق العديد من خصائص تنسيق النصوص على العنصر div، مما يؤدي إلى إنشاء صندوق نصي مذهل وملفت للنظر على صفحة الويب. يحتوي الصندوق على خطٍ سميك وكبير، مسافات كبيرة بين الأسطر والحروف، تموجات بيضاء تحيط بالنص، وخلفية سوداء. يعرض هذا النموذج بعضًا من الخصائص التي يمكن استخدامها في CSS لتنسيق النصوص.

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

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

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.