أخي المطور..
إن من أهم الأمور التي تضفي على موقعك أو برنامجك جمالاً هي تنظيم النص و سهولة قراءته، واليوم.. سأتحدث عن كيفية التحكم بالخط بالـ css وسأشرح لك أشهر أوامره
1- نوع الخط
بإمكانك التحكم بنوع الخط بواسطة القيمة font-family ..
مثال:
كود HTML:
body { font-family: Arial, Helvetica, Tahoma; }
2- قياس الخط
بإمكانك التحكم بقياس الخط بواسطة القيمة font-size ..
وهناك عدّة طرق للتحكم بقياس الخط، أذكر منها طريقة الكتابة، والتي تحتوي على عدّة قيم..
مثال على جميع القيم :
كود HTML:
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 : وهذا لجعل الخط مائلاً أيضاً
مثال على جميع القيم :
كود HTML:
body { font-style: normal; font-style: italic; font-style: oblique; }
4- لون الخط
بإمكانك التحكم بلون الخط بواسطة القيمة color ..
وهناك طرقتان للتحكم بلون الخط:- بالإسم : بحيث تكتب اسم اللون
- بالرمز : بحيث تكتب رمز اللون
مثال على القيمتين :
كود HTML:
body { color: green; color: #00FF00; }
5- التباعد بين الأحرف
بإمكانك التحكم بتباعد الأحرف عن بعضها بواسطة القيمة letter-spacing ..
مثال :
كود HTML:
body { letter-spacing: 1em; }
6- المسافة بين الكلمات
بإمكانك التحكم بالمسافة بين الكلمات بواسطة القيمة word-spacing ..
مثال :
كود HTML:
body { word-spacing: 5em; }
- تزيين الخط
بإمكانك التحكم بزينة الخط بواسطة القيمة text-decoration ..
وله 5 أنواع من القيم هي:- none : وهذا لجعل الخط عادي كما هو
- underline : وهذا لإضافة خط أسفل الكلمة
- overline : وهذا لإضافة خط أعلى الكلمة
- line through : وهذا لإضافة خط على الكلمة
- blink : وهذا لجعل الخط يومض (يظهر ويختفي)
مثال على جميع القيم :
كود HTML:
body { text-decoration: none; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink; }
و هذا مثال عن كل هذه الخصائص:
ط£ظ…ط«ظ„ط© ط¹ظ„ظ‰ ط¯ط±ط³ ط§ظ„ط®ط· ظپظٹ css
ويمكنك تحميل الملف من هنا:
http://www.almashroo.com/articles/ex...t1/example.zip
هذه هي أشهر خصائص الخط في css
ط§ظ„ظ…ط´ط±ظˆط¹ » [css] ط·ط±ظ‚ ط§ظ„طھط*ظƒظ… ط¨ط§ظ„ط®ط·
بواسطة mhamed
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة الرومانتك 
