الرئيسية دورة تصميم المواقع html css تعلم لغة css: النصوص Texts

تعلم لغة css: النصوص Texts

تعلم لغة css: النصوص Texts

في هذا الدرس سنتعرف على مجموعة من قواعد  لغة css، والتي تتحكم في النصوص مثل:

  • حجم الخط ونوعه
  • الخط العريض، المائل
  • الفراغ بين السطور، الكلمات والحروف


تحديد نوع الخط وحجمه

Font-family هي الخاصية التي تستعمل لتحديد نوع الخط المستعمل.

هنا اخترنا الخط نوع Arial لتطبيقه على الفقرة p

p{
font-family: Arial;
}

استعمال أكثر من خط واحد:
هنا يقوم المتصفح بتجربة خط Arial، إذا لم يكن موجودا في حاسوب المستعمل يقوم بالمرور للخط الثاني وهو Times New Roman
p{
font-family: Arial, Times New Roman;
}


حجم الخط Font-size

أما حجم الخط فالخاصية هي font-size
ويمكن تحديد قيمة الخط بثلاث طرق وهي:

Pixels:

 يتم اختيار القيمة كرقم متبوعة ب px  كما يلي:
h1{
font-size: 20px;
}

Percentages :

 يتم استعمال النسبة المئوية، فحجم الخط العشوائي على المتصفح عندما لا يتم تحديد الخط هو 75 في المائة  وهو ما يعادل  12px
h1{
font-size: 100%;
}
طريقة عمل النسبة المئوية يرتبط بحجم خط body. لنفترض أن حجم خط body هو 16px  فلو اخترنا نسبة 100% مثلا للعناوين h1 h2 ... سيكون الخط هو  16px كذلك. أكبر من مائة في المائة يزداد حجم الخط وأصغر ينقص.

Ems :

 تعادل عرض الحرف إم m

هذه الشارة ستساعدكم لفهم العلاقة بين مختلف طرق قياس الخط

طرق قياس حجم الخط


استيراد الخطوط

الخطوط التي يتم اختيارها يجب أن تتوفر في الحاسوب الخاص بالمتصفح، لكن يمكن تحميل خط غير موجود باستعمال قاعدة  @font-face
والتي تتكون من العناصر التالية
font-family
Src
format

الكود
@font-face {
font-family: 'ChunkFiveRegular';
src: url('fonts/chunkfive.eot');}
h1, h2 {
font-family: ChunkFiveRegular, Georgia, serif;}

في الجزء الأول تم استيراد الخط وتم تطبيقه على العناوين في الجزء الثاني.

شكل النص Font-weight

يحتمل قيمتين  Bold  أو Normal

p{
font-weight: bold;
}

p{
font-weight: normal;
}

تزيين الخط Text Decoration

يمكن اختيار قيمة لهذه الخصوصية كما يلي:

p{
text-decoration: underline;
}

none

لا يتم استعمال أي تزيين

underline

اضافة خط تحت النص

overline

اضافة خط فوق النص

line-through

خط عبر النص

أسلوب النص Font-style

يحتمل ثلاث قيم Normal Italic Oblique

p{
font-style: normal;
}

Line-height

p{
line-height: 1.5em;
}

اتجاه النص Text-align

يحتمل ثلاث قيم 
right اليمين
left اليسار 
center الوسط

p{
text-align: right;
}

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

Letter-spacing  و word-spacing

p{
letter-spacing: 1em;
word-spacing: 2em;
}

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

فراغ بداية الفقرة Text-indent

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

p{
text-indent: 10px;
}

الروابط Links

يمكن التحكم في مظهر وشكل الروابط عبر عدة خيارات وذلك باستعمال.
link :
التحكم في الروابط التي لم يتم زيارتها بعد
visited:
الروابط التي تم النقر عليها
hover:
عنما يتم تمرير فأرة الحاسوب على الرابط
focus:
عندما تحديد رابط أو استمارة (مثلا مربع بحث عند النقر داخله يتم اضافة اسلوب له)
active:
عنما يتم البقاء في صفحة الرابط

مواضيع مشابهة
On.

لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله