Nwahy Articles V3 pro

الخصائص والقيم للـ font

الخصائص والقيم للـ font

القسم css - الزيارات 8356 - التاريخ 20/3/2008
[color=FA0309]الخاصية font-style :[/color]

هذه الخاصية وظيفتها أن تجعل النص مائل :

H3 { font-style: italic }


عندما تخبر المتصفح أن يجعل نصاً ما مائل فإنه يبحث عن نسخة مائلة من الخط المطلوب على حاسب المستخدم ، و إذا لم يجدها فإنه في بعض الأحيان يصنع واحدة . أما إذا كنت تعرف أن النسخة المائلة من الخط المطلوب تسمى Oblique فاستخدم القيمة oblique بدلاً من القيمة italic . أما إذا كنت تريد أن تجعل النص غير مائل فاستخدم القيمة normal .

-------------------------------------------------------



[color=FA0309]الخاصية font-weight :[/color]

مع صفحات الأنماط المتعاقبة يمكنك ليس فقط جعل النص سميك أو عادي ، بل أيضاً يمكنك التحكم في درجات السماكة المختلفة :

P { font-weight: bold }


هذه القاعدة واضحة جداً ، لقد جعلت نص الواصفة <P> سميك ، و بالمثل يمكنك وضع القيمة normal بدلاً من bold لجعل النص عادي غير سميك .

كذلك يمكنك تحديد القيمة باستخدام قيم رقمية من 100 حتى 900 . الخط العادي غير السميك قيمته 400 ، و أقصى قيمة للسمك هي 900 . و بالطبع هذا يعتمد على نوع الخط المستخدم ، حيث أن الخطوط التي ليس بها غير وجهين فقط (عادي و سميك) سوف تظهر القيم من 100 إلى 600 فيها كخط عادي غير سميك ، و القيم من 700 إلى 900 ستظهر كخط سميك . أما الخطوط التي بها تسعة أوجه مبنية داخلها فسوف تظهر كل قيمة بحجمها الأصلي

و لكن احذر فالمتصفحات لا تدعم هذه الخاصية بثبات (و المتصفح IE 3 لا يدعمها على الإطلاق) . و أخيراً .. يمكنك استخدام قيم lighter و bolder ، و هذه القيم سوف تعمل فقط إذا استخدمتهم على عنصر تم تحديد عدة طبقات من السماكة له بالفعل . على سبيل المثال إذا استخدمت القيمة bolder مع عنصر ورث السماكة من عنصر أب ، في هذه الحالة فإن المتصفح سوف يجعل هذا العنصر أكثر سماكة من أبيه ، و إذا لم يكن هناك نسخة أكثر سمكاً من الخط المستخدم فإن المتصفح لن يفعل شيئاً و سيعرض النص بنفس سمك الأب . (المتصفحان IE 3 و نتسكيب كوميونيكتور لا يدعمان هاتان القيمتان) .

---------------------------------------------------------



[color=FA0309]الخاصية text-transform :[/color]

هذه الخاصية تستخدم للتحكم في حالة الحروف و جعلها كبيرة Uppercase أو صغيرة Lowercase :

B { text-transform: uppercase }


و إليك كل القيم التي يمكن استخدامها مع هذه الخاصية :

1- uppercase : تجعل كل الحروف بحالة كبيرة . THIS SENTENCE SERVES AS AN EXAMPLE

2- lowercase : تجعل كل الحروف بحالة صغيرة . this sentence serves as an example

3- capitalize : تجعل أول حرف من كل كلمة بحالة كبيرة . This Sentence Serves As An Example

4- none : تعني أن أي قيمة للخاصية text-transform قد ورثها النص المقصود من عنصر أب سيتم تجاهلها و سيعرض النص بشكل عادي . This sentence serves as an example

و لكن المتصفح IE 3 لا يدعم هذه الخاصية .

-------------------------------------------------------



[color=FA0309]الخاصية text-decoration :[/color]

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

B { text-decoration: underline }


و إليك القيم الخاصة بها :

underline : تجعل الكلمات تحتها خط .

Underline words

overline : تجعل الكلمات فوقها خط .

Overline words

line-through : تجعل الكلمات في وسطها خط .

Linethrough words

blink : تجعل الكلمات تومض .

Blink words

none : تتأكد من عدم حدوث أي من القيم السابقة .

None words

(المتصفح نتسكيب كوميونيكتور لا يدعم القيمة overline ، و المتصفحان IE 4 و IE 5 لا يدعمان القيمة blink ، أما المتصفح IE 3 فلا يدعم أي من هذه القيم .)

القيمة none هي قيمة سحرية تستطيع بواسطتها أن تزيل الخط تحت الوصلات التشعبية النصية كالتالي :

A:link { text-decoration: none }

A:active { text-decoration: none }

A:visited { text-decoration: none }


إذا كنت لا تعرف فإن A:link هي التي تحدد شكل الوصلة النصية العادية التي لم يتم النقر عليها ، أما A:active فهي التي تحدد شكل الوصلة أثناء النقر عليها ، و A:visited هي التي تحدد شكل الوصلة التي تم النقر عليها بالفعل من قبل . و القواعد السابقة يمكن أن توضع في صفحات الأنماط المطمورة أو الموصول إليها أو المستوردة ، و لن تتغير شفرة الوصلة التشعبية في الهتمل على الإطلاق :

<A HREF='http://arab-team.com'>Link</A>


و النتيجة :

This text is a link, but it's not underlined

انتظر .. مازال هناك المزيد ، يمكنك أيضاً استخدام أي من خصائص صفحات الأنماط المتعاقبة الأخرى مع A:link و A:visited و A:active ، فيمكنك مثلاً جعل الوصلة التي لم يتم النقر عليها بحجم 12 نقطة بخط Arial سميك ، و جعل الوصلة التي تم النقر عليها بحجم عشر نقاط بخط Times New Roman مائل .

لكن ليس كل المتصفحات تدعم هذه الخاصية الرائعة بشكل كامل ، فالمتصفح نتسكيب كوميونيكيتور يدعم القيم الأساسية لهذه الخاصية و لا يدعم أي خصائص أو قيم إضافية ، و المتصفح IE 3 لا يدعم A:active ، أما المتصفحان IE 4 و IE 5 فهما الأفضل في دعم هذه الخاصية بشكل كامل .

--------------------------------------------------



[color=FA0309]الخاصية font :[/color]

هذه الخاصية هي اختصار لعدد من الخواص مجتمعة ، فهي وسيلة لتحديد حجم الخط font-size ، ارتفاع السطر line-height (سنتكلم عن هذه الخاصية لاحقاً) ، و نوع الخط المستخدم font-family ، كل هذا في خاصية واحدة :

LI { font: 12pt/16pt courier }


هذه القاعدة تجعل نص الواصفة <LI> بحجم 12 نقطة و بارتفاع سطر 16 نقطة و بخط courier . إذا استعملت هذه الخاصية فيجب عليك أن تحدد حجم الخط و نوعه ، أما بالنسبة لارتفاع السطر فهو اختياري ، و تأكد من أن يكونوا بالترتيب الموضح بالأعلى في المثال
مشاركة الموضوع

كن أول من يقيم الموضوع
12345

أضف تعليقك على الموضوع