دورة css كاملة للمبتدئين
الدرس الرابع
الخاصية font-style :
هذه الخاصية وظيفتها أن تجعل النص مائل :
H3 { font-style: italic }
الخاصية font-weight :
مع صفحات الأنماط المتعاقبة يمكنك ليس فقط جعل النص سميك أو عادي ، بل أيضاً يمكنك التحكم في درجات السماكة المختلفة :
P { font-weight: bold }
كذلك يمكنك تحديد القيمة باستخدام قيم رقمية من 100 حتى 900 . الخط العادي غير السميك قيمته 400 ، و أقصى قيمة للسمك هي 900 . و بالطبع هذا يعتمد على نوع الخط المستخدم ، حيث أن الخطوط التي ليس بها غير وجهين فقط (عادي و سميك) سوف تظهر القيم من 100 إلى 600 فيها كخط عادي غير سميك ، و القيم من 700 إلى 900 ستظهر كخط سميك . أما الخطوط التي بها تسعة أوجه مبنية داخلها فسوف تظهر كل قيمة بحجمها الأصلي
و لكن احذر فالمتصفحات لا تدعم هذه الخاصية بثبات (و المتصفح IE 3 لا يدعمها على الإطلاق) . و أخيراً .. يمكنك استخدام قيم lighter و bolder ، و هذه القيم سوف تعمل فقط إذا استخدمتهم على عنصر تم تحديد عدة طبقات من السماكة له بالفعل . على سبيل المثال إذا استخدمت القيمة bolder مع عنصر ورث السماكة من عنصر أب ، في هذه الحالة فإن المتصفح سوف يجعل هذا العنصر أكثر سماكة من أبيه ، و إذا لم يكن هناك نسخة أكثر سمكاً من الخط المستخدم فإن المتصفح لن يفعل شيئاً و سيعرض النص بنفس سمك الأب . (المتصفحان IE 3 و نتسكيب كوميونيكتور لا يدعمان هاتان القيمتان) .
الخاصية text-transform :
هذه الخاصية تستخدم للتحكم في حالة الحروف و جعلها كبيرة 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 لا يدعم هذه الخاصية .
الخاصية text-decoration :
كنا و لفترة طويلة للغاية لا نملك أي تصرف بشأن حقيقة أن الوصلات التشعبية النصية تظهر بخط سفلي تحتها في المتصفحات المختلفة ، أنا لا أعرف شعورك حيال هذا و لكني أعتقد أنها قبيحة الشكل و مزعجة . و الحل الذي أقدمه لكم الآن هو هذه الخاصية :
و إليك القيم الخاصة بها :
underline : تجعل الكلمات تحتها خط .
Underline words
overline : تجعل الكلمات فوقها خط .
B { text-decoration: underline }
underline : تجعل الكلمات تحتها خط .
Underline words
overline : تجعل الكلمات فوقها خط .
Overline words
line-through : تجعل الكلمات في وسطها خط .
line-through : تجعل الكلمات في وسطها خط .
Linethrough words
blink : تجعل الكلمات تومض .
Blink words
none : تتأكد من عدم حدوث أي من القيم السابقة .
None words
(المتصفح نتسكيب كوميونيكتور لا يدعم القيمة overline ، و المتصفحان IE 4 و IE 5 لا يدعمان القيمة blink ، أما المتصفح IE 3 فلا يدعم أي من هذه القيم .)
القيمة none هي قيمة سحرية تستطيع بواسطتها أن تزيل الخط تحت الوصلات التشعبية النصية كالتالي :
إذا كنت لا تعرف فإن A:link هي التي تحدد شكل الوصلة النصية العادية التي لم يتم النقر عليها ، أما A:active فهي التي تحدد شكل الوصلة أثناء النقر عليها ، و A:visited هي التي تحدد شكل الوصلة التي تم النقر عليها بالفعل من قبل . و القواعد السابقة يمكن أن توضع في صفحات الأنماط المطمورة أو الموصول إليها أو المستوردة ، و لن تتغير شفرة الوصلة التشعبية في الهتمل على الإطلاق :
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 فهما الأفضل في دعم هذه الخاصية بشكل كامل .
الخاصية font :
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 فهما الأفضل في دعم هذه الخاصية بشكل كامل .
الخاصية font :
هذه الخاصية هي اختصار لعدد من الخواص مجتمعة ، فهي وسيلة لتحديد حجم الخط font-size ، ارتفاع السطر line-height (سنتكلم عن هذه الخاصية لاحقاً) ، و نوع الخط المستخدم font-family ، كل هذا في خاصية واحدة :
هذه القاعدة تجعل نص الواصفة <LI> بحجم 12 نقطة و بارتفاع سطر 16 نقطة و بخط courier . إذا استعملت هذه الخاصية فيجب عليك أن تحدد حجم الخط و نوعه ، أما بالنسبة لارتفاع السطر فهو اختياري ، و تأكد من أن يكونوا بالترتيب الموضح بالأعلى في المثال .
LI { font: 12pt/16pt courier }
ليست هناك تعليقات:
إرسال تعليق