القائمة الرئيسية

الصفحات

تعديل المشاركة

خصائص وتنسيق الخطوط في لغة CSS

Ma7moud
(0)

 

اكواد CSS

خصائص وتنسيق الخطوط في لغة CSS

السلام عليكم ورحمة الله وبركاته 

سنتعلم في هذا الدرس طريقة تنسيق النصوص في لغة CSS ونجد ان هذا الدرس يعد من اهم دروس لغة CSS لانه يهتم بكل ما يخص من تنسيق وشكل النصوص في صفحة الويب .

يشتمل هذا الدرس علي طريقة تغيير نوع الخط وطريقة تغيير شكل الخط وطريقة تغيير حجم الخط  وطريقة تغيير سمك الخط وفيما يلي سنتعرف علي ذلك بالتفصيل.

كود تغيير نوع الخطوط  في لغة CSS 

في هذا الكود نريد تغيير نوع خط العنوان الاول <H1> الي الي نوع خط اخر غير الافتراضي .

لاحظ الكود التالي :

<!DOCTYPE html>
<html lang="en">
<head>
   
    <title>Document</title>
    <style>
 h1{
    font-family: 'Times New Roman', Times, serif;
 }
    </style>

</head>
<body>
   
<h1>ALMOKADEM</h1>

</body>
</html>

شرح الكود السابق :

في هذا الكود نريد تغيير نوع خط العنوان الاول <h1> الي هذا النوع  Times New Roman", serif وهذا النوع من الخطوط يستخدم فقط في اللغة الانجليزية 

طريقة تغيير نوع الخط :

نضع بين الوسمين <style> العنصر h1 ثم نقوم بفتح الاقواس المعقوفة {} ونضع بداخلها المحدد ; :font-family الذي يستخدم لتغيير نوع الخط في لغة css ونستخدم نوع الخط Times New Roman ويوجد العديد من انواع الخطوط ومنها 

 "Arial" ٚ "Roman New Times" ."Tahoma"

كود تغيير شكل النصوص في لغة css

المقصود هنا بشكل الخطوط وهو (الخط المائل - الخط العادي)

سنتخدم العنوان في الكود الاول ونريد ان نجعله بخط مائل 

لاحظ الكود الاتي :

<!DOCTYPE html>
<html lang="en">
<head>
   
    <title>Document</title>
    <style>
 h1{
   font-style: italic ;
 }
    </style>
</head>
<body>
   
<h1>ALMOKADEM</h1>

</body>
</html>

شرح الكود السابق :

نضع بين الوسمين <style> العنصر h1 ونفتح الاقواس المعقوفة ثم نضيف بداخلها المحدد font-style الذي يستخدم لتغيير شكل النصوص.

ونضع بداخله القيمة italic التي تستخدم لجعل الخط مائل . 

ويكمنك وضع القيمة normal وهذه هي القية الافتراضية للنص 

الصورة السابقة لتوضيح الكود السابق 

كود اضافة تباين للخط "font-variant" في لغة css

يستخدم هذا المحدد لكي يقوم بكتابة الحروف كبيرة باستخدام القيمة small-caps 

لاحظ الكود الاتي :

  <style>
 h1{
   font-variant: small-caps ;
 }
    </style>
</head>
<body>
   
<h1>ALMOKADEM</h1>

شرح الكود السابق :

نضع بين وسمين <style> العنصر h1 ثم نفتح الاقواس المعقوفة ونكتب بداخلها هذا المحدد small-caps  الذي يستخدم لجعل الحروف كبيرة 

ملاحظة : يستخدم هذا النوع من المحدد في اللغات الاوربية فقط مثل اللغة الانجليزية 

الصورة الظاهرة لتوضيح الكود السابق 

كود تحديد سمك الخط في لغة css

لاحظ الكود الاتي :
 <style>
 h1{
   font-weight: 500;
 }
    </style>
</head>
<body>
   
<h1>ALMOKADEM</h1>

</body>

شرح الكود السابق :

يمكننا تغيير او التحكم في سمك او وزن الخط عن طريق المحدد font-weight  ونضع بداخلها القيم من 100 الي 900 

او نضع قيم مكتوبة مثل bold / bolder 


كود تغييرحجم الخطوط في لغة css

لاحظ الكود الاتي :

 <style>
 h1{
     font-size: 10px;
 }
    </style>
</head>
<body>
   
<h1>ALMOKADEM</h1>

</body>


شرح الكود السابق :
يكمننا التحكم في حجم الخط في لغة css و تغييره عن طريق المحدد font-size ونضع بداخله قيمة رقمي بوحدة PX / EM / %
او يمكن كتابة قيمة نصية مثل large /larger /small /smaller /medium

وفي نهاية هذا الدرس نرجو ان نكون قد افدناكم وشكرا 
لاتنسي القاء نظرة علي الدروس السابقة.
 

أخر المواضيع من قسم : دورة تعلم css

تعليقات

إرسال تعليق

التنقل السريع