المغربي الجديد
19-03-2011, 07:32 PM
تسلسل الأوسمه"إضافة قيم css خاصة لأوسمة معينة"
في هذا الدرس سنعرّف مايسمى بتسلسل الأوسمه داخل css
وهى طريقة مميزة جدا لتطبيق الأنماط داخل أوسمة معينه في الصفحة وذلك عندما تقتضي الحاجة الى تقليل عدد الفئات class الكثيرة
وكذلك لتمييز كلمات معينه بداخل الفقرات الطويلة والعناوين وغيرها الكثير.
وللتوضيح أكثر ساضرب لك مثال بالفقرة التالية :
<h2>cascading <em>style</em> sheets</h2>
<p>تقنية <em>تهتم بتحديد شكل وتصميم المواقع</em> بمرونه وسهولة تامة</p>
فقرة واحده وعنوان لها وبداخل كل منهم اضفت وسم em حتى يظهر الخط المحدد بينها مائل ..
الان أنا أريد عن طريق css ان أجعل الكلمات المائله فقط بلون معين او بخط معين مثلاً وهذا هو التسلسل الذى اتكلم عنه.
http://up.arabsgate.com/u/5114/4012/56363.jpg
<!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>
المثال السابق يتضح عبر الرسم التالي
http://up.arabsgate.com/u/5114/4012/56364.jpg
ويظهر على المتصفح بالشكل التالي
http://up.arabsgate.com/u/5114/4012/56365.jpg
اخيراً تسلسل الأوسمة لها نفس القواعد في حالة تطبيقها على المعرّفات id# والفئات class. لا يوجد إختلاف
بل يمكنك عمل تحكمات أكثر بالأوسمة لو أرتبطت بمعرّف ما
في هذا الدرس سنعرّف مايسمى بتسلسل الأوسمه داخل css
وهى طريقة مميزة جدا لتطبيق الأنماط داخل أوسمة معينه في الصفحة وذلك عندما تقتضي الحاجة الى تقليل عدد الفئات class الكثيرة
وكذلك لتمييز كلمات معينه بداخل الفقرات الطويلة والعناوين وغيرها الكثير.
وللتوضيح أكثر ساضرب لك مثال بالفقرة التالية :
<h2>cascading <em>style</em> sheets</h2>
<p>تقنية <em>تهتم بتحديد شكل وتصميم المواقع</em> بمرونه وسهولة تامة</p>
فقرة واحده وعنوان لها وبداخل كل منهم اضفت وسم em حتى يظهر الخط المحدد بينها مائل ..
الان أنا أريد عن طريق css ان أجعل الكلمات المائله فقط بلون معين او بخط معين مثلاً وهذا هو التسلسل الذى اتكلم عنه.
http://up.arabsgate.com/u/5114/4012/56363.jpg
<!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>
المثال السابق يتضح عبر الرسم التالي
http://up.arabsgate.com/u/5114/4012/56364.jpg
ويظهر على المتصفح بالشكل التالي
http://up.arabsgate.com/u/5114/4012/56365.jpg
اخيراً تسلسل الأوسمة لها نفس القواعد في حالة تطبيقها على المعرّفات id# والفئات class. لا يوجد إختلاف
بل يمكنك عمل تحكمات أكثر بالأوسمة لو أرتبطت بمعرّف ما