CSSالنصوص

خصائص النصوص

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

تحديد لون النص

لتلوين نص العنصر نستخدم الخاصية color و اللون نضعه لها كقيمة من خلال إسمه ( Color Name ) أو بتحديد درجته بأسلوب HEX أو RGB أو RGBA أو HSL أو HSLA كما تعلمنا في درس الألوان.

في المثال التالي قمنا بجعل لون نص أي عنصر في الصفحة رمادي و جعلنا عنوانها يظهر بلون أزرق.

body {
    color: gray;
}
            
h1 {
    color: cadetblue;
}

في المثال التالي قمنا بتحديد لون نص العنصر بواسطة الخاصية color و لون خلفيته بواسطة الخاصية background-color.

button {
    color: white;
    background-color: #0d6efd;
}

تحديد إتجاه النص

لتحديد إتجاه النص أفقياً نستخدم الخاصية text-align و نمرر لها إحدى القيم التالية.

في المثال التالي قمنا ببناء كلاسات تستخدم لتحديد جهة ظهور النص.

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

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

div {
    text-align: justify;
}

تحديد إتجاه النص في آخر السطر

لجعل إتجاه النص في آخر السطر نستخدم الخاصية text-align-last و نمرر لها إحدى القيم السابقة left، right، center و justify و التي تعمل معها بذات الطريقة.

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

div {
    text-align: justify;
    text-align-last: justify;
}

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

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

لتحديد إتجاه الكتابة نستخدم الخاصية text-direction و نمرر لها إحدى القيم التالية.

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

.ar {
    direction: rtl;
    text-align: right;
}

تحديد المسافات بين الأسطر و الكلمات

يمكنك تحديد المسافات بين أسطر النص، الكلمات الموجودة في كل سطر و المسافات بين الأحرف حتى تظهر بالشكل الذي تريده.

تحديد إرتفاع النص

لتحديد إرتفاع أسطر النص نستخدم الخاصية line-height و نضع لها رقم بوحدة قياس معينة كقيمة مثل px، pt، cm ليمثل إرتفاع الأسطر. هنا كلما زادت القيمة كلما تباعدت اسطر النص عن بعضها.

في المثال التالي قمنا بجعل إرتفاع أسطر النص 30 بكسل.

p {
    line-height: 30px;
}

توسيط النص عامودياً و أفقياً

في حال أردت عرض نص يـتألف من سطر واحد في الوسط تماماً أفقياً و عمودياً يمكنك استخدام الخاصية text-align: center و من ثم تقوم بتحديد طول العنصر و تجعل إرتفاع النص مساوي لطوله.

في المثال التالي قمنا بتوسيط نص يـتألف من سطر واحد موضوع في صندوق له طول محدد.

.centered {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

وضع مسافة في بداية النص

لوضع مسافة بمقدار محدد في بداية السطر الأول في النص نستخدم الخاصية text-indent و نضع لها رقم بوحدة قياس معينة كقيمة مثل px، pt، cm ليمثل حجم المسافة الفارغة التي سيبدأ بها النص قبل عرض الكلام الموجود فيه.

في المثال التالي قمنا بإضافة مسافة في بداية النص بمقدار 50 بكسل.

p {
    text-indent: 50px;
}

تحديد المسافات بين الأحرف

لتحديد حجم المسافة بين أحرف النص نستخدم الخاصية letter-spacing و نضع لها رقم بوحدة قياس معينة كقيمة مثل px، pt، cm ليمثل مقدار المسافات بين الأحرف.

في حال وضعت لها قيمة أكبر من صفر فإن الأحرف سيتم إبعادها بالنسبة التي حددتها. أما إن وضعت قيمة أصغر من صفر فإنه سيتم تقريب الأحرف من بعضها بالنسبة التي حددتها.

في المثال التالي قمنا بتعريف كلاس يبعد أحرف النص عن بعضها بنسبة 5 بكسل و كلاس يقرّب أحرف النص من بعضها بنسبة 2 بكسل.

.far-chars {
  letter-spacing: 5px;
}

.close-chars {
  letter-spacing: -2px;
}

تحديد المسافات بين الكلمات

لتحديد حجم المسافات بين كلمات النص نستخدم الخاصية word-spacing و نضع لها رقم بوحدة قياس معينة كقيمة مثل px، pt، cm ليمثل مقدار المسافات بين الكلمات.

في حال وضعت لها قيمة أكبر من صفر فإن الكلمات سيتم إبعادها بالنسبة التي حددتها. أما إن وضعت قيمة أصغر من صفر فإنه سيتم تقريب الكلمات من بعضها بالنسبة التي حددتها.

في المثال التالي قمنا بتعريف كلاس يبعد كلمات النص عن بعضها بنسبة 8 بكسل و كلاس يقرّب كلمات النص من بعضها بنسبة 2 بكسل.

.far-words {
  word-spacing: 8px;
}

.close-words {
  word-spacing: -2px;
}

تحديد طريقة التعامل مع المسافات الفارغة

يمكنك تحديد طريقة عرض المسافات الفارغة الموجودة في النص باستخدام الخاصية white-space و من ثم تمرير إحدى القيم التالية لها.

المثال التالي يوضح لك كيف يتعامل النص مع المسافات الفارغة بحسب القيمة التي نمررها للخاصية white-space.

.normal {
    white-space: normal;
}

.nowrap {
    white-space: nowrap;
}

.pre {
    white-space: pre;
}

.pre-line {
    white-space: pre-line;
}

.pre-wrap {
    white-space: pre-wrap;
}

تحديد محاذاة العناصر عمودياً

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

في المثال التالي قمنا بوضع صورة نفسها عدة مرات بداخل النص و في كل مرة جعلناها تطبّق محاذاة مختلفة حتى تلاحظ الفرق.

.baseline {
    vertical-align: baseline;
}

.text-top {
    vertical-align: text-top;
}

.text-bottom {
    vertical-align: text-bottom;
}

.bottom {
    vertical-align: bottom;
}

.top {
    vertical-align: top;
}

.middle {
    vertical-align: middle;
}

.sub {
    vertical-align: sub;
}

.sup {
    vertical-align: sup;
}

.length-positive {
    vertical-align: 5px;
}

.length-negative {
    vertical-align: -5px;
}

.percentage-positive {
    vertical-align: 10%;
}

.percentage-negative {
    vertical-align: -10%;
}

تحويل أحرف النص

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

المثال التالي يوضح لك كيف تتحول أحرف النص بحسب القيمة التي نمررها للخاصية text-transform.

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

زخرفة النص

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

إظهار خط

يمكنك إظهار خط تحت، فوق أو على النص باستخدام الخاصية text-decoration-line و من ثم تمرر لها إحدى القيم التالية.

المثال التالي يوضح لك كيف تظهر خط فوق النص، خط تحت النص، خط على النص، بالإضافة إلى إظهار خط فوقه و تحته مع بعض.

.overline {
    text-decoration-line: overline;
}

.underline {
    text-decoration-line: underline;
}

.line-through {
    text-decoration-line: line-through;
}

.over-and-under-line {
    text-decoration-line: overline underline;
}

تلوين الخط الموضوع في الكلام

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

في المثال التالي قمنا بتلوين جميع الخطوط التي أظهرناها في النص.

.overline {
    text-decoration-line: overline;
    text-decoration-color: pruple;
}

.underline {
    text-decoration-line: underline;
    text-decoration-color: red;
}

.line-through {
    text-decoration-line: line-through;
    text-decoration-color: blue;
}

.over-and-under-line {
    text-decoration-line: overline underline;
    text-decoration-color: gray;
}

تحديد شكل الخط

الخط الذي يمكن إظهاره في النص يمكن تحديد شكله باستخدام الخاصية text-decoration-style و من ثم تمرر لها إحدى القيم التالية.

المثال التالي يوضح لك كيف تظهر خط فوق النص، خط تحت النص، خط على النص، بالإضافة إلى إظهار خط فوقه و تحته مع بعض.

.solid {
    text-decoration-style: solid;
}

.double {
    text-decoration-style: double;
}

.dotted {
    text-decoration-style: dotted;
}

.dashed {
    text-decoration-style: dashed;
}

.wavy {
    text-decoration-style: wavy;
}

تحديد سمك الخط الموضوع في الكلام

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

في المثال التالي قمنا بجعل الخط الموضوع تحت النص يظهر بسمك 5 بكسل.

h3 {
    text-decoration-thickness: 5px;
}

تحديد كل خصائص الخط بسطر واحد

لتحديد شكل، لون و سمك الخط الموضوع للنص بشكل مختصر أكتب text-decoration و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

في المثال التالي قمنا بعرض خط أسفل النص، لونه أحمر، نوعه متموّج، و سمكه 0.8 بكسل.

.wrong {
    text-decoration: underline red wavy 0.8px;
}