CSS تنسيق المحتوى

CSS خاصيات تنسيق النص : text

آخر تحيين: 04-01-2015

CSS تزيين المحتوى CSS خاصيات تنسيق الخط : (2/2) font


تمكننا خاصيات النص من إجراء عمليات تنظيمية مهمة على نصنا . من ترصيف للنص أو إزاحته أو اختيار لونه ... إلخ ، وأهم هذه الخاصيات نجدها في الجدول التالي

خاصيات تنسيق النص
الخاصياتالمعنى
text-alignترصيف النص
text-indentإزاحة سطر واحد
text-decorationتزيين النص
font-variant و text-transformتحويل النص

text-align

بواسطة الخاصية text-align يمكننا التحكم في تموضع المحتوى على المستوى الأفقي للصّفحة : إلى اليمين أو اليسار أو في الوسط .و القيم التي يمكن لهذه الخاصية أن تأخذها هي

  • left : و ضع النَّص يسار الصفحة
  • center : النّص في وسط الصفحة
  • right : و ضع النص يمين الصفحة
  • justify : النّص يأخذ كل حيز الصفحة من اليمين إلى اليسار (أو العكس) و لا يترك أي فراغ على الجوانب
  • inherit : النص المعني يرثُ نمط المحتوى الذي يتواجد فيه

الشرح بالصورة :



مثال الإستعمال :

.wasat {text-align: center;}
.yamin {text-align: right;}
.yasar {text-align: left;}
مشاهدة النتيجة
انتبهوا. نُطَبّق الخاصية text-align على الوُسوم من نوع الكتلة "block" فقط . مثلا ( p ,div ,h1 ,h2 ...إلخ) . إن حاولتم تطبيقها على الوسوم التي تكون داخل السطر "inline" مثلا (a ,em ,strong ,span ... إلخ) ، فلن تحصلوا على شيء

text-indent

نستعمل الخاصية text-indent لإزاحة السطر الأول فقط من النص .
و يتم تحديد مسافة الإزاحة انطلاقا من بداية السطر : بالبيكسل "px" أو "em" أو "%" ... .
لنطبق مثالا على الفقرات ، حيث نحبّذ كثيرا استعمال هذه الخاصية .

p  
  {                
    text-indent:50px;  /*.50px سيكون النص مُزاحاً إلى اليسار في جميع الفقرات بقيمة */  
  }
مشاهدة النتيجة

انتبهوا. نُطَبّق الخاصية text-indent على الوُسوم من نوع الكتلة (block) فقط . كسابقتها text-align

توجد خاصيتان أخريان شبيهتان بهذه و هما :

  • word-spacing: نعطيها القيمة بالبيكسل (px) لا غير . و دور هذه الخاصية هو تحديد مسافة تباعد الكلمات عن بعضها مثال :
    الكلمة1<--->الكلمة2<--->الكلمة3<--->الكلمة4
  • letter-spacin كذلك هنا اعطي القيمة بالبيكسل . تمكننا هذه الخاصية بتحديد المسافة بين الأحرف :
    ا<--->ل<--->ك<--->ل<--->م<--->ة

text-decoration

لتنميق النص كتسطيره أو تشطيبه نستعمل الخاصية text-decoration و يمكننا إعطاءها القِيَم التالية :

  • underline: لِوَضع سطرٍ تَحت النَّص .
  • overline : لِوضع سطر فوق النص .
  • line-through : تشطيب النص.
  • none : لِخط عادي .

مثال يجمع قيم الخاصية text-decoration :

.satr_ta7t {text-decoration :underline;}
.satr_faw9 {text-decoration:overline;}
.tachtib {text-decoration:line-through;}
.nada {text-decoration:none;}
مشاهدة النتيجة

text-decoration بالقيمة none ، غالبا ما نستعملها لحذف السّطر الذي يظهر تلقائيا تحت الروابط ، مثال :

a {text-decoration:none;}

font-variant و text-transform

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

تقوم الخاصيات بتحويل الخط من خانة صغيرة إلى خانة كبيرة ، و العكس صحيح
للخاصيتان قيم مختلفة :

font-variant

تستخدم قيمتين وهما :

  • small-caps : تقوم بتحويل الخط إلى حجم صغير
  • normal : للكتابة بحجم عادي

text-transform

تأخذ القيم التالية

    سأقدم لكم أمثلة باللغة الفرنسية بما أن اللغة العربية لا تدعم الخاصيتان

    مثال لاستعمال الخاصية font-variant

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <style>
      .petite_lettre {font-variant:small-caps;}
      </style>
    </head>
     
    <body>
      <p>
        CE TEXTE SERA transformer en petite lettres , grace a la magie DE LA   ROPRIETE  font-variant ET son attribut :small-caps .
      </p>    
      <p class="petite_lettre"> <!-- النص التالي سوف يظهر على المتصفّح مكتوبا بحجم صغير -->
        CE TEXTE SERA transformer en petite lettres , grace a la magie DE LA  ROPRIETE  font-variant ET son attribut :small-caps .
      </p>
    </body>
    </html>
    مشاهدة النتيجة

    مثال لاستعمال الخاصية text-transform

    <p class="majuscule">
       <!-- النص التالي سوف يظهر على المتصفّح مكتوبا بحجم كبير -->
       ce texte sera totalement transformer en majuscules ,grace a la propriété text-transform et son attribut uppercase.
    </p>
    <p class="minuscule">
       <!-- النص التالي سوف يظهر على المتصفّح مكتوبا بحجم صغير -->
       CE TEXTE SERA TOTALEMENT TRANSFORMER EN MINUSCULE ,GRACE A LA PROPRIÉTÉ TEXT-TRANSFORM ET SON ATTRIBUT LOWERCASE.
    </p>
    <p class="capitale">
       <!-- سيُكتبُ الحرف الأول من كل كلمة بحجم كبير-->
       la première lettre de chaque mot sera transformer en majuscule , grace a la propriété text-transform et son attribut capitalize .
    </p>
    <p class="pas_de_transformation">
       <!-- سَيَظهر النص تماما كما كتبناه على المحرر ولن يحدث عليه أي تغيير-->
       ce TEXTE sera afficher EXACTEMENT comme il est écrit . il ne subbira aucune TRANSFORMATION . Et ceci grace a LA PROPRIETE text-transform et son attribut none .
    </p>
    .majuscule {text-transform:uppercase;}
    .minuscule {text-transform:lowercase ;}
    .capitale {text-transform:capitalize;}
    .pas_de_transformation {text-transform:none ;}
    مشاهدة النتيجة