[css] طرق التحكم بالخط

m7amed · 07-11-2007, 10:19 PM

أخي المطور..
إن من أهم الأمور التي تضفي على موقعك أو برنامجك جمالاً هي تنظيم النص و سهولة قراءته، واليوم.. سأتحدث عن كيفية التحكم بالخط بالـ 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

qmmary · 11-11-2007, 01:42 AM

يعطيك العافية على المعلومات الجميلة

تحياتي ،،،

hi-jeddah · 13-11-2007, 11:26 AM

جمل الله حالك ..

ALaa462 · 15-11-2007, 07:55 AM

يعطيك العافية أخي

حبيت ضيف اني بستخدم هالكود لنختصر ثلاثة قيم في واحدة

يعني نوفر font-size + font-family + font-style

في كلمة واحدة هي font

يعني بدل ما نتكتب:

كود HTML:

font-style:bold; font-size:12px; font-family:Tahoma;

سنكتب

كود HTML:

font:bold 12px Tahoma;

يرجى الملاحظة بأن القيم لن تعمل اذا غيرنا في ترتيب القيم
مثلا

كود HTML:

font:Tahoma bold 12px;

تحياتي

الرومانتك · 27-11-2007, 08:50 PM

معلومات حلوه وقيمه
جزاكم الله خير

PrinceOfPersia · 01-12-2007, 04:16 PM

إقتباس:

المشاركة الأصلية بواسطة الرومانتك

معلومات حلوه وقيمه
جزاكم الله خير

وإضافة رائعة من أخي ALaa462

mark_cool5 · 11-12-2007, 09:25 PM

مشكور

mark_cool5 · 01-01-2008, 01:26 PM

مشكور اخي

الثلج · 06-01-2008, 08:43 PM

عندي سؤال صغير ماهي الوسوم التي تستعملها لكتابة الفونت
أنا استعمل في العاده em and p فقط
هل تكتب الخطوط داخل وسوم أم تكتبها بدونها
المشكله عند استعمال الوسم p فأن line high يصبح عالي جداً أي ان ال control اللذي يليه في السطر سوف يكون بعيد جداً

m7amed · 09-01-2008, 01:25 AM

الوسوم التي تستعمل في كتابة الخطوط هي

كود HTML:

<h1></h1> <h2></h2>

تحياتي