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

CSS لديه العديد من الخصائص لتنسيق النص.

لون النص:

تُستخدم خاصية color لضبط لون النص.

يتم تحديد اللون بواسطة:

• اسم لون: مثل “أحمر”
• قيمة HEX: مثل “#ff0000”
• قيمة RGB: مثل “rgb(255,0,0)”

للحصول على قائمة كاملة بقيم الألوان الممكنة، انظر إلى قيم ألوان CSS.

يتم تعريف لون النص الافتراضي لصفحة في محدد body.

body {
  color: blue;
}

h1 {
  color: green;
}

لون النص (Text Color) ولون الخلفية (Background Color):

في هذا المثال، نقوم بتعريف كل من خاصية لون الخلفية (background-color) وخاصية لون النص (color):

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}

مهم: التباين العالي مهم جدًا للأشخاص الذين يعانون من مشاكل في الرؤية. لذلك، تأكد دائمًا من أن التباين بين لون النص ولون الخلفية (أو صورة الخلفية) جيد!

محاذاة النص واتجاه النص

في هذا الفصل ستتعلم عن الخصائص التالية:

• text-align
• text-align-last
• direction
• unicode-bidi
• vertical-align

محاذاة النص

تستخدم خاصية text-align لتعيين المحاذاة الأفقية للنص.

يمكن محاذاة النص لليسار أو اليمين، أو جعله في المنتصف، أو مُبررًا.

يوضح المثال التالي النص المحاذاة إلى المنتصف، والنص المحاذاة إلى اليسار واليمين (المحاذاة إلى اليسار هي الافتراضية إذا كان اتجاه النص من اليسار إلى اليمين، والمحاذاة إلى اليمين هي الافتراضية إذا كان اتجاه النص من اليمين إلى اليسار):

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

عندما يتم ضبط خاصية text-align على “justify”، يتم تمديد كل سطر بحيث يكون عرض كل سطر متساويًا، وتصبح الهوامش اليسرى واليمنى مستقيمة (مثل المجلات والصحف):

div {
  text-align: justify;
}

محاذاة السطر الأخير (Text Align Last)

تحدد خاصية text-align-last كيفية محاذاة السطر الأخير من النص.

مثال:

محاذاة السطر الأخير من النص في ثلاثة عناصر <p>:

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

يمكن استخدام خاصيتي direction و unicode-bidi لتغيير اتجاه النص في عنصر:

• direction: تحدد هذه الخاصية الاتجاه الأساسي للنص في عنصر المستوى الكتلة، بالإضافة إلى اتجاه العناصر المضمنة التي تم إنشاؤها بواسطة خاصية unicode-bidi.
  • ltr: من اليسار إلى اليمين (الافتراضي)
  • rtl: من اليمين إلى اليسار

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

محاذاة رأسية (Vertical Alignment)

تحدد خاصية vertical-align المحاذاة الرأسية لعنصر.

مثال:

ضبط المحاذاة الرأسية للصورة في نص:

img.a {
  vertical-align: baseline;
}

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

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

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

زخرفة النص (Text Decoration)

في هذا الفصل ستتعلم عن الخصائص التالية:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

إضافة خط زخرفة إلى النص

تستخدم خاصية text-decoration-line لإضافة خط زخرفة إلى النص.

نصيحة: يمكنك الجمع بين أكثر من قيمة، مثل overline و underline لعرض خطوط فوق وتحت النص.

h1 {
  text-decoration-line: overline;
}

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

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

ملاحظة: لا يُوصى بتسطير النص الذي ليس رابطًا، لأن هذا غالبًا يربك القارئ.

تحديد لون لخط الزخرفة

تستخدم خاصية text-decoration-color لتعيين لون خط الزخرفة.

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

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

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

تحديد نمط لخط الزخرفة

تستخدم خاصية text-decoration-style لتعيين نمط خط الزخرفة.

h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

تحديد سمك لخط الزخرفة

تستخدم خاصية text-decoration-thickness لتعيين سمك خط الزخرفة.

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

الخاصية المختصرة

تعد خاصية text-decoration خاصية مختصرة لكل من:

• text-decoration-line (مطلوبة)
• text-decoration-color (اختيارية)
• text-decoration-style (اختيارية)
• text-decoration-thickness (اختيارية)

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}

نصيحة صغيرة

يتم تسطير جميع الروابط في HTML بشكل افتراضي. في بعض الأحيان ترى أن الروابط يتم تنسيقها بدون تسطير. تُستخدم الخاصية text-decoration: none; لإزالة التسطير من الروابط، مثل هذا:

a {
  text-decoration: none;
}

تحويل النص

تستخدم خاصية text-transform لتحديد حالة الأحرف الكبيرة والصغيرة في النص.

يمكن استخدامها لتحويل كل شيء إلى أحرف كبيرة أو صغيرة، أو جعل الحرف الأول من كل كلمة كبيرًا:

• none: لا يتم تحويل النص (الافتراضي)
• uppercase: يحول النص إلى جميع الأحرف الكبيرة
• lowercase: يحول النص إلى جميع الأحرف الصغيرة
• capitalize: يحول الحرف الأول من كل كلمة إلى حرف كبير

مثال:

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

تباعد النص (CSS Text Spacing)

في هذا الفصل ستتعلم عن الخصائص التالية:

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

مسافة البادئة للنص (Text Indentation)

تستخدم خاصية text-indent لتحديد مسافة بادئة السطر الأول من النص:

p {
  text-indent: 50px;
}

تباعد الأحرف (Letter Spacing)

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

يوضح المثال التالي كيفية زيادة أو تقليل المسافة بين الأحرف:

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

ارتفاع السطر (Line Height)

تستخدم خاصية line-height لتحديد المسافة بين الأسطر:

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

تباعد الكلمات (Word Spacing)

تستخدم خاصية word-spacing لتحديد المسافة بين الكلمات في النص.

يوضح المثال التالي كيفية زيادة أو تقليل المسافة بين الكلمات:

p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}

المسافة البيضاء (White Space)

تحدد خاصية white-space كيفية التعامل بالمسافة البيضاء داخل عنصر.

يوضح هذا المثال كيفية تعطيل التفاف النص داخل عنصر:

p {
  white-space: nowrap;
}

خصائص تباعد النص في CSS

ظل النص (CSS Text Shadow)

تستخدم خاصية text-shadow لإضافة ظل إلى النص.

في أبسط استخدام لها، تحتاج فقط إلى تحديد الظل الأفقي (2px) والظل الرأسي (2px):

h1 {
  text-shadow: 2px 2px;
}

بعد ذلك، أضف لونًا (أحمر) إلى الظل:

h1 {
  text-shadow: 2px 2px red;
}

ثم، أضف تأثير ضباب (5px) إلى الظل:

h1 {
  text-shadow: 2px 2px red;
}

المزيد من الأمثلة على ظل النص

مثال 1

ظل النص على نص أبيض:

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

مثال 2

ظل النص مع توهج نيون أحمر:

h1 {
  text-shadow: 0 0 3px #ff0000;
}

مثال 3

ظل النص مع توهج نيون أحمر وأزرق:

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

مثال 4

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}