text - Nouvil

شرح خاصية text

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

وفيما يلي بعض الأمثلة على استخدام خاصية text في CSS:

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

p {
  color: blue;
}

في هذا المثال، تم تحديد لون النص في العنصر p باستخدام خاصية color.

شرح خاصية Text Alignment

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

وفيما يلي بعض الأمثلة على استخدام خاصية text alignment في CSS:

تحديد موقع النص في الوسط:

h1 {
  text-align: center;
}

في هذا المثال، تم تحديد موقع النص في العنصر h1 في الوسط باستخدام خاصية text-align.

تحديد موقع النص إلى اليمين:

p {
  text-align: right;
}

في هذا المثال، تم تحديد موقع النص في العنصر p إلى اليمين باستخدام خاصية text-align.

تحديد موقع النص إلى اليسار:

p {
  text-align: left;
}

في هذا المثال، تم تحديد موقع النص في العنصر p إلى اليسار باستخدام خاصية text-align.

تحديد موقع النص بشكل متكافئ على كلا الجانبين:

p {
  text-align: justify;
}

في هذا المثال، تم تحديد موقع النص في العنصر p بشكل متكافئ على كلا الجانبين باستخدام خاصية text-align.

تحديد موقع النص لعنصر محدد داخل العنصر الرئيسي:

.container {
  text-align: center;
}
.container p {
  text-align: left;
}

في هذا المثال، تم تحديد موقع النص في العنصر .container في الوسط باستخدام خاصية text-align، وتم تحديد موقع النص في العنصر p داخل العنصر .container إلى اليسار باستخدام خاصية text-align.

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

شرح خاصية Text Decoration

خاصية text decoration في CSS تسمح بتحديد تأثيرات النص، مثل التسطير والتأشير والتعليق والخط السفلي. تستخدم هذه الخاصية عادة في تصميمات الويب لتحديد تأثيرات النص في الروابط أو العناوين أو النصوص الأخرى.

وفيما يلي بعض الأمثلة على استخدام خاصية text decoration في CSS:

تحديد خط السفلي للنص:

p {
  text-decoration: underline;
}

في هذا المثال، تم تحديد خط السفلي للنص في العنصر p باستخدام خاصية text-decoration.

تحديد التسطير للنص:

h1 {
  text-decoration: line-through;
}

في هذا المثال، تم تحديد التسطير للنص في العنصر h1 باستخدام خاصية text-decoration.

تحديد التعليق للنص:

p {
  text-decoration: overline;
}

في هذا المثال، تم تحديد التعليق للنص في العنصر p باستخدام خاصية text-decoration.

تحديد تأشير النص:

a {
  text-decoration: none;
}

في هذا المثال، تم تحديد عدم وجود تأشير للنص في الروابط باستخدام خاصية text-decoration.

تحديد تأثيرات النص لعنصر محدد داخل العنصر الرئيسي:

.container {
  text-decoration: underline;
}
.container h1 {
  text-decoration: none;
}

في هذا المثال، تم تحديد خط السفلي للنص في العنصر .container باستخدام خاصية text-decoration، وتم تحديد عدم وجود تأشير للنص في العنصر h1 داخل العنصر .container باستخدام خاصية text-decoration.

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

شرح خاصية Text Transformation

خاصية text transformation في CSS تسمح بتحديد تحويلات النص، مثل تحويل النص إلى أحرف كبيرة أو صغيرة أو كتابة النص بشكل عكسي. يستخدم هذه الخاصية عادة في تصميمات الويب لتغيير شكل النص وتحسين مظهره.

وفيما يلي بعض الأمثلة على استخدام خاصية text transformation في CSS:

تحويل النص إلى أحرف كبيرة:

p {
  text-transform: uppercase;
}

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

تحويل النص إلى أحرف صغيرة:

h1 {
  text-transform: lowercase;
}

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

كتابة النص بشكل عكسي:

p {
  text-transform: capitalize;
}

في هذا المثال، تم كتابة النص في العنصر p بشكل عكسي باستخدام خاصية text-transform.

تحديد تحويل النص لعنصر محدد داخل العنصر الرئيسي:

.container {
  text-transform: uppercase;
}
.container p {
  text-transform: lowercase;
}

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

يمكن استخدام خاصية text transformation في CSS لتحديد تحويلات النص، مثل تحويل النص إلى أحرف كبيرة أو صغيرة أو كتابة النص بشكل عكسي. يجب استخدام هذه الخاصية بحذر، حيث يمكن أن تؤثر على مظهر النص في الصفحة.

شرح خاصية Text Spacing

خاصية text spacing في CSS تسمح بتحديد مسافات النص، مثل تحديد مسافات الحروف والكلمات والأسطر. يستخدم هذه الخاصية عادة في تصميمات الويب لتحسين مظهر النص وزيادة قراءته وفهمه.

وفيما يلي بعض الأمثلة على استخدام خاصية text spacing في CSS:

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

p {
  letter-spacing: 2px;
}

في هذا المثال، تم تحديد مسافة بين الحروف في العنصر p باستخدام خاصية letter-spacing.

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

h1 {
  word-spacing: 4px;
}

في هذا المثال، تم تحديد مسافة بين الكلمات في العنصر h1 باستخدام خاصية word-spacing.

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

p {
  line-height: 1.5;
}

في هذا المثال، تم تحديد مسافة بين الأسطر في العنصر p باستخدام خاصية line-height.

تحديد تحويلات النص لعنصر محدد داخل العنصر الرئيسي:

.container {
  letter-spacing: 2px;
}
.container p {
  word-spacing: 4px;
}

في هذا المثال، تم تحديد مسافة بين الحروف في العنصر .container باستخدام خاصية letter-spacing، وتم تحديد مسافة بين الكلمات في العنصر p داخل العنصر .container باستخدام خاصية word-spacing.

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

شرح خاصية Text Shadow

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

وفيما يلي بعض الأمثلة على استخدام خاصية text shadow في CSS:

إضافة ظل بسيط للنص:

h1 {
  text-shadow: 1px 1px 1px #000;
}

في هذا المثال، تم إضافة ظل بسيط للنص في العنصر h1 باستخدام خاصية text-shadow.

إضافة ظل بشكل أكثر تعقيدًا:

h2 {
  text-shadow: 2px 2px 4px #000, -2px -2px 4px #fff;
}

في هذا المثال، تم إضافة ظل معقد للنص في العنصر h2 باستخدام خاصية text-shadow. يتكون الظل من ظلين مختلفين، الأول يضيف ظلالًا سوداء إلى اليمين والأسفل، والثاني يضيف ظلالًا بيضاء إلى اليسار والأعلى.

تحديد تحويلات النص لعنصر محدد داخل العنصر الرئيسي:

.container {
  text-shadow: 1px 1px 1px #000;
}
.container h3 {
  text-shadow: 2px 2px 4px #000, -2px -2px 4px #fff;
}

في هذا المثال، تم إضافة ظل بسيط للنص في العنصر .container باستخدام خاصية text-shadow، وتم إضافة ظل معقد للنص في العنصر h3 داخل العنصر .container باستخدام خاصية text-shadow.

يمكن استخدام خاصية text shadow في CSS لإضافة ظل للنص، مما يساعد على تحسين مظهر النص وإبرازه بشكل أفضل. يجب استخدام هذه الخاصية بحذر، حيث يمكن أن تؤثر على مظهر النص في الصفحة.

السابق التالي