❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSالنصوص

  • خصائص النصوص
  • تحديد لون النص
  • تحديد إتجاه النص
  • تحديد إتجاه الكتابة
  • تحديد المسافات بين الأسطر و الكلمات
  • تحديد محاذاة العناصر عمودياً
  • تحويل أحرف النص
  • زخرفة النص

خصائص النصوص

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

TEXT FORMATTING

This text is styled well to look in this way. Title is colored and aligned to the center. Paragraph is justified. Everyting is apear from left to right and use a font called arial. After finishing this tutorial you should learn javascript.

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

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


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

مثال

body {
color: gray;
}
h1 {
color: cadetblue;
}
body { color: gray; } h1 { color: cadetblue; }
جرب الكود

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

مثال

button {
color: white;
background-color: #0d6efd;
}
button { color: white; background-color: #0d6efd; }
جرب الكود

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

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

القيمة معناها
left لجعل النص يظهر من الجهة اليسرى.
right لجعل النص يظهر من الجهة اليمنى.
center لجعل النص يظهر في الوسط.
justify إذا كان النص يتألف من أكثر من سطر فإنها تباعد بين الكلمات بشكل تلقائي لجعل الأسطر تظهر كأنها بنفس الطول.

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

مثال

.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.left { text-align: left; } .right { text-align: right; } .center { text-align: center; }
جرب الكود

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

مثال

div {
text-align: justify;
}
div { text-align: justify; }
جرب الكود

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

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


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

مثال

div {
text-align: justify;
text-align-last: justify;
}
div { text-align: justify; text-align-last: justify; }
جرب الكود

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

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

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

القيمة معناها
ltr لتحديد أن إتجاه الكتابة هو من اليسار إلى اليمين.
rtl لتحديد أن إتجاه الكتابة هو من اليمين إلى اليسار.
initial لجعل إتجاه الكتابة يعود لجهته الأساسية.
inherit لجعل إتجاه الكتابة يرث إتجاه كتابة الوسم الموجود فيه.

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

مثال

.ar {
direction: rtl;
text-align: right;
}
.ar { direction: rtl; text-align: right; }
جرب الكود

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

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


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

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

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

مثال

p {
line-height: 30px;
}
p { line-height: 30px; }
جرب الكود

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

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

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

مثال

.centered {
height: 100px;
line-height: 100px;
text-align: center;
}
.centered { height: 100px; line-height: 100px; text-align: center; }
جرب الكود

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

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

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

مثال

p {
text-indent: 50px;
}
p { text-indent: 50px; }
جرب الكود

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

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

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

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

مثال

.far-chars {
letter-spacing: 5px;
}
.close-chars {
letter-spacing: -2px;
}
.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;
}
.far-words { word-spacing: 8px; } .close-words { word-spacing: -2px; }
جرب الكود

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

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

القيمة معناها
normal المسافات الفارغة الموضوعة وراء بعضها يتم دمجها كمسافة واحدة فقط، و هذه القيمة الإفتراضية.
nowrap المسافات الفارغة الموضوعة وراء بعضها يتم دمجها كمسافة واحدة فقط، و تعرض المحتوى كله على سطر واحد و تنتقل لسطر آخر فقط في حال وجود الوسم <br>.
pre المسافات الفارغة يتم إبقاءها كما هي موضوعة بالضبط في النص كما هو الحال تماماً في الوسم <pre>.
pre-line المسافات الفارغة الموضوعة وراء بعضها يتم دمجها كمسافة واحدة فقط، و النص يتم وضعه على أكثر من سطر إن تطلّب ذلك أو في حال استخدام الوسم <br>.
pre-wrap المسافات الفارغة يتم إبقاءها كما هي موضوعة بالضبط في النص، و النص يتم وضعه على أكثر من سطر إن تطلّب ذلك أو في حال استخدام الوسم <br>.
initial تعيد النص كما كان بالأساس.
inherit لجعل النص يرث طريقة ظهور الوسم الموضوع فيه.

المثال التالي يوضح لك كيف يتعامل النص مع المسافات الفارغة بحسب القيمة التي نمررها للخاصية 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;
}
.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 لجعل الوسم الموضوع في النص يظهر بمحاذاة أحرف السطر.
text-top لجعل الوسم الموضوع في النص يظهر بمحاذاة أحرف السطر من الأعلى.
text-bottom لجعل الوسم الموضوع في النص يظهر بمحاذاة أحرف السطر من الأسفل.
bottom لجعل الوسم الموضوع في النص يظهر بمحاذاة أدنى شيء موضوع في السطر.
top لجعل الوسم الموضوع في النص يظهر بمحاذاة أعلى شيء موضوع في السطر.
middle لجعل الوسم الموضوع في النص يظهر عمودياً في منتصف السطر الموضوع فيه.
sub لجعل الوسم الموضوع في النص يظهر بمحاذاة أدنى السطر الموضوع فيه.
sup لجعل الوسم الموضوع في النص يظهر بمحاذاة أعلى السطر الموضوع فيه.
initial لجعل الوسم الموضوع في النص يعود لمحاذاته الأساسية.
inherit لجعل الوسم الموضوع في النص يرث محاذاة الوسم الموجود فيه.
length نقصد بها وضع رقم بوحدة قياس محددة مثل px، pt، cm يمثل مقدار محاذاة الوسم الموضوع في النص عمودياً نسبةً لأحرف النص.
% نقصد بها وضع رقم بالمئة يمثل مقدار محاذاة الوسم الموضوع في النص نسبةً لارتفاع النص الذي يتحدد بواسطة الخاصية line-height.

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

مثال

.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%;
}
.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 و من ثم تمرر لها إحدى القيم التالية.

القيمة معناها
uppercase تحول أحرف النص لأحرف كبيرة ( Capital Letters ).
lowercase تحول أحرف النص لأحرف صغيرة ( Small Letters ).
capitalize تحول الأحرف الأولى في الكلمات فقط لأحرف كبيرة.
none لا تفعل أي شيء للأحرف، و هذه القيمة الإفتراضية.

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

مثال

.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
.uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; }
جرب الكود

زخرفة النص

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


إظهار خط

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

القيمة معناها
overline تظهر خط فوق النص.
underline تظهر خط تحت النص.
line-through تظهر خط على النص.
none لإزالة أي خط موضع للنص.

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

مثال

.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;
}
.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;
}
.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 تظهر خط مستقيم.
double تظهر خط مزدوج.
dotted تظهر خط منقّط.
dashed تظهر خط متقطع.
wavy تظهر خط يشبه الموج.
inital تعيد شكل الخط لشكله الأساسي.
inherit ترث شكل الخط من العنصر الموضوع فيه.

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

مثال

.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;
}
.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;
}
h3 { text-decoration-thickness: 5px; }
جرب الكود

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

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

text-decoration: [text-decoration-line] [text-decoration-color] [text-decoration-style] [text-decoration-thickness];

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

مثال

.wrong {
text-decoration: underline red wavy 0.8px;
}
.wrong { text-decoration: underline red wavy 0.8px; }
جرب الكود
الدرس التالي❯ ❮الدرس السابق