النصوص Text

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

توفر لغة CSS العديد من الخصائص التي تتيح لنا تحديد أنماط نصية مختلفة مثل اللون ، والمحاذاة ، والتباعد وما إلى ذلك بسهولة وفعالية.
خصائص النص الأكثر إستخداماً هي: text-align و text-decoration و text-transform و text-indent و line-height و letter-spacing و word-spacing والمزيد. تمنحنا هذه الخصائص تحكمًا دقيقًا في المظهر المرئي للرموز والحروف والكلمات والمسافات وما إلى ذلك.
دعنا نرى كيفية تحديد خصائص النص لعنصر بمزيد من التفاصيل.

Text Color

يتم تحديد لون النص من خلال الخاصية color.
في المثال التالي سيتم تحديد لون النص لصفحة الويب كاملة:

مثال
تشغيل
  1. body {
  2. color: #ff0000;
  3. }

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

Text Alignment

تُستخدم الخاصية text-align لتحديد المحاذاة الأفقية للنص.
يمكن محاذاة النص بأربع طرق: إلى اليسار left أو اليمين right أو الوسط centre أو الضبط justified.

دعونا نلقي نظرة على المثال التالي لفهم كيفية عمل هذه الخاصية .

مثال
تشغيل
  1. h1 {
  2. text-align: center;
  3. }
  4. p {
  5. text-align: justify;
  6. }
ملاحظة:

عند ضبط محاذاة النص بإستخدام القيمة justify ، يتم تمديد كل سطر بحيث يكون لكل سطر عرض متساوٍ (باستثناء السطر الأخير) ، وتكون الهوامش اليمنى واليسرى مستقيمتين. تستخدم هذه المحاذاة بشكل عام في المنشورات مثل المجلات والصحف.

Text Decoration

يتم استخدام الخاصية text-decoration لتحديد أو إزالة خطوط الزخرفة decorative lines من النص.
تقبل هذه الخاصية عادةً إحدى القيم التالية: underline و overline و line-through و none. يجب علينا تجنب استخدام القيمة underline لغير عنصر الرابط التشعبي ، لأن ذلك قد يربك الزائر.

دعنا نجرب المثال التالي لفهم كيفة عمل هذه الخاصية:

مثال
تشغيل
  1. h1 {
  2. text-decoration: overline;
  3. }
  4. h2 {
  5. text-decoration: line-through;
  6. }
  7. h3 {
  8. text-decoration: underline;
  9. }

إزالة التسطير الافتراضي من الروابط التشعبية

يتم استخدام الخاصية text-decoration لإزالة التسطير الافتراضي من الروابط التشعبية في صفحات الويب. يمكننا أيضًا اضافة بعض التنسيقات المميزة الأخرى لإبرازه عن النص العادي ، على سبيل المثال ، باستخدام الخاصية borderيمكننا اضافة حد اسفل العنصر بشكل خط منقط dotted border.

ولفهم كيفية القيام بذلك دعنا نلقي نظرة على المثال التالي :

مثال
تشغيل
  1. a {
  2. text-decoration: none;
  3. border-bottom: 1px dotted;
  4. }
ملاحظة:

يحتوي كل متصفح ويب على ورقة أنماط مضمنة built-in style sheet لتطبيق انماط CSS الافتراضية على عناصر HTML.
عند إنشاء رابط تشعبي داخل صفحة الويب يقوم المتصفح بتطبيق قواعد النمط الافتراضية والتي بدورها تقوم بتسطيره تلقائيًا وتطبق لونًا أزرق ، بحيث يمكن للمستخدم رؤية النص القابل للنقر بوضوح.

Text Transformation

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

دعنا نجرب المثال التالي لفهم كيفة عمل هذه الخاصية:

مثال
تشغيل
  1. h1 {
  2. text-transform: uppercase;
  3. }
  4. h2 {
  5. text-transform: capitalize;
  6. }
  7. h3 {
  8. text-transform: lowercase;
  9. }

Text Indentation

يتم استخدام الخاصية text-indent لتحديد المسافة البادئة للسطر الأول من النص الفقرة النصية. يتم ذلك عادةً عن طريق إدراج مسافة فارغة قبل السطر الأول من النص.
يمكن تحديد حجم المسافة البادئة باستخدام النسبة المئوية % وقيم المسافة بالبكسل و ems وما إلى ذلك.

في المثال التالي ستتم اضافة مسافة بادئة للسطر الأول من الفقرة بمقدار 100px .

مثال
تشغيل
  1. p {
  2. text-indent: 100px;
  3. }

Letter Spacing

يتم استخدام الخاصية letter-spacing لإضافة تباعد إضافي بين أحرف النص.
يمكن أن تأخذ هذه الخاصية قيمة بالبكسل او ems إلخ. وقد تقبل أيضًا القيم السالبة. عند تحديد تباعد الأحرف ، تشير القيمة إلى التباعد بالإضافة إلى المسافة الافتراضية بين الأحرف.

دعنا نجرب المثال التالي لفهم كيفة عمل هذه الخاصية:

مثال
تشغيل
  1. h1 {
  2. letter-spacing: -3px;
  3. }
  4. p {
  5. letter-spacing: 10px;
  6. }

Word Spacing

يتم استخدام الخاصية word-spacing لتحديد تباعد إضافي بين الكلمات.
يمكن لهذه الخاصية قبول القيمة بالبكسل او ems .... إلخ. يُسمح أيضًا بالقيم السالبة.

لنجرب المثال التالي لفهم كيفية عمل هذه الخاصية:

مثال
تشغيل
  1. p.normal {
  2. word-spacing: 20px;
  3. }
  4. p.justified {
  5. word-spacing: 20px;
  6. text-align: justify;
  7. }
  8. p.preformatted {
  9. word-spacing: 20px;
  10. white-space: pre;
  11. }
ملاحظة:

يمكن أن يتأثر تباعد الكلمات بالقيمة justify للخاصية text-align أيضًا ، على الرغم من الحفاظ على المسافة البيضاء عند استخدام الخاصية white-space وإعطائها القيمة pre ، تتأثر المسافات بين الكلمات بخاصية word-spacing.

Line Height

يتم استخدام الخاصية line-height لتحديد ارتفاع سطر النص. وتستخدم هذه الخاصية بشكل كبير لتحديد المسافة بين أسطر النص.
يمكن أن تكون قيمة هذه الخاصية رقمًا أو نسبة مئوية % أو طولًا بالبكسل أو ems أو غير ذلك. لنجرب المثال التالي لفهم كيفية عمل هذه الخاصية:

مثال
تشغيل
  1. p {
  2. line-height: 1.2;
  3. }

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

إذا كانت قيمة الخاصية line-height أكبر من قيمة حجم الخط لعنصر ما ، فإن هذا الاختلاف يتم قطعه إلى النصف ويتم توزيعه بالتساوي على أعلى وأسفل مربع الخط.

لنلق نظرة على المثال التالي:

مثال
تشغيل
  1. p {
  2. font-size: 14px;
  3. line-height: 20px;
  4. background-color: #cccc00;
  5. }
« التالي السابق »