الدرس الخامس .. تسلسل الأوسمه إضافة قيم css خاصة لأوسمة معينة

**خالد القحطاني** · 12-09-2008 01:28 AM

في هذا الدرس سنعرّف مايسمى بتسلسل الأوسمه داخل css ، وهى طريقة مميزة جدا لتطبيق
الأنماط داخل أوسمة معينه في الصفحة وذلك عندما تقتضي الحاجة الى تقليل عدد الفئات class
الكثيرة وكذلك لتمييز كلمات معينه بداخل الفقرات الطويلة والعناوين وغيرها الكثير.
وللتوضيح أكثر ساضرب لك مثال بالفقرة التالية :

كود PHP:

 <h2>cascading <em>style</em> sheets</h2>
<p>تقنية <em>تهتم بتحديد شكل وتصميم المواقع</em> بمرونه وسهولة تامة</p>

فقرة واحده وعنوان لها وبداخل كل منهم اضفت وسم em حتى يظهر الخط المحدد بينها مائل .. الان
أنا أريد عن طريق css ان أجعل الكلمات المائله فقط بلون معين او بخط معين مثلاً وهذا هو
التسلسل الذى اتكلم عنه.

كود PHP:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>

<style type="text/css">
<!--
h2 em { color : red; }
p em { color : green; }
-->
</style>

</head>
<body>

<h2>cascading <em>style</em> sheets</h2>
<p>تقنية <em>تهتم بتحديد شكل وتصميم المواقع</em> بمرونه وسهولة تامة</p>

</body>
</html>

المثال السابق يتضح عبر الرسم التالي

ويظهر على المتصفح بالشكل التالي

اخيراً تسلسل الأوسمة لها نفس القواعد في حالة تطبيقها على المعرّفات id# والفئات class. لا

يوجد إختلاف، بل يمكنك عمل تحكمات أكثر بالأوسمة لو أرتبطت بمعرّف ما.