المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

أخي المطور،

إن من أهم الأمور التي تضفي على موقعك أو برنامجك جمالاً هي تنظيم النص و سهولة قراءته، واليوم سأتحدث عن كيفية التحكم بالخط بالـ css وسأشرح لك أشهر أوامره.

1- نوع الخط

بإمكانك التحكم بنوع الخط بواسطة القيمة font-family.

مثال:

 body { font-family: Arial, Helvetica, Tahoma; } 

2- قياس الخط

بإمكانك التحكم بقياس الخط بواسطة القيمة font-size. وهناك عدّة طرق للتحكم بقياس الخط، أذكر منها طريقة الكتابة، والتي تحتوي على عدّة قيم.

مثال على جميع القيم.

body {
font-size: xx-small;
font-size: x-small;
font-size: smaller;
font-size: small;
font-size: medium;
font-size: large;
font-size: larger;
font-size: x-large;
font-size: xx-large;
}

3- شكل الخط

بإمكانك التحكم بشكل الخط بواسطة القيمة font-style، وله 3 أنواع من القيم هي:

• normal : وهذا لجعل شكل الخط عادي كما هو
• italic : وهذا لجعل الخط مائلاً
• oblique : وهذا لجعل الخط مائلاً أيضاً

مثال على جميع القيم.

body {
font-style: normal;
font-style: italic;
font-style: oblique;
}

4- لون الخط

بإمكانك التحكم بلون الخط بواسطة القيمة color، وهناك طريقتان للتحكم بلون الخط.

• بالإسم : بحيث تكتب اسم اللون
• بالرمز : بحيث تكتب رمز اللون

مثال على القيمتين.

body {
color: green;
color: #00FF00;
}

5- التباعد بين الأحرف

بإمكانك التحكم بتباعد الأحرف عن بعضها بواسطة القيمة letter-spacing.

مثال :

 body { letter-spacing: 1em; } 

6- المسافة بين الكلمات

بإمكانك التحكم بالمسافة بين الكلمات بواسطة القيمة word-spacing ..

مثال :

 body { word-spacing: 5em; } 

7- تزيين الخط

بإمكانك التحكم بزينة الخط بواسطة القيمة text-decoration ..
وله 5 أنواع من القيم هي:

• none : وهذا لجعل الخط عادي كما هو
• underline : وهذا لإضافة خط أسفل الكلمة
• overline : وهذا لإضافة خط أعلى الكلمة
• line through : وهذا لإضافة خط على الكلمة
• blink : وهذا لجعل الخط يومض (يظهر ويختفي)

مثال على جميع القيم :

body {
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;
}

و هذا مثال عن كل هذه الخصائص:
http://www.almashroo.com/examples/css/font1/example.html
ويمكنك تحميل الملف من هنا:
http://www.almashroo.com/examples/css/font1/example.zip

هذه هي أشهر خصائص الخط في css