تويت
[frame="1 98"]تعريف لكل من class , id وماهو الفرق بينهم
class و id هى الفئات و المعرفات الأساسية التى توضع بداخل أوسمة html حتى تتعرف على أوامر css المختلفة .. وهى تعرف نظريا بـ
id معرّف يتم تحديدة ويمكن أن يندرج تحته عنده فئات ، وتعرّف بوضع علامة [ # ] قبلها ويمكن أن تضع لها اى اسم ، ويتم تطبيقه على عنصر واحد فقط داخل الصفحه .
class الفئات وهى يمكن أن تتكرر اكثر من مرة بنفس الصفحة على عكس المعرّفات id ، وتعرّف بوضع نقطه [ . ] قبلها ويمكن أن تضع لها أي إسم. وتعال نوضح ذلك بالتفصيل مباشرة مع الأمثلة التالية :
الفئات class
ويضاف الـ class ويوضع بالصيغه التالية داخل أوسمة html المختلفة
تابع معى المثال التالي متعدد الفقرات..
المثال يحتوى على 3 فقرات وعنوان واحد وقمت فيه بوضع فئه جديد بإسم blue تحتوى على أمر تلوين وطبقتها على فقرتين منهم والعنوان ـ وإن شاهدها على المتصفح ستظهر لك هكذا ..
لاحظ تم تلوين الفقرتين الأولى والثانيه كما جاء فى امر تلوين الـ css ولكن العنوان لم يتم تلوينه مع انه أخذ تعريف لنفس الفئه !؟ .. السبب هنا اننا حددنا الوسم p قبل الفئه ولهذا لا تتعرف تلك الفئه ويتم تنفيذ ما بداخلها الا إذا كانت بداخل الفقرة او الوسم p “الأمر نفسه مع كل أوسمه html إذا تم تحدديها قبل الفئه”
وفى حالة ان اردت تطبيق نفس الفئه على العنوان علينا الا نحدد قبل الفئه الوسم الذى نريد التطبيق عليه ـ وبهذا يمكننا بحريه تطبيقها على كافة الأوسمة وباكثر من مكان بنفس الصفحة .
المعرّفات id
المعرفات id لها نفس قواعد الفئات class ولكن مع إختلاف ان المعرف يتم تطبيقه مرة واحده فقط في الصفحه أى لا يمكنك تطبيق نفس المعرّف على أكثر من وسم بذات الصفحه ..
وشاهد معي نفس المثال السابق ولكن مع إضافة معرف جديد خاص بالعنوان
وبالمتصفح تم تطبيق أمر التلوين على العنوان h1 فقط كما تشاهد هنا بدون التأثير على البقيه ، وغالبا مانستخدم المعرّفات id في تحديد الهيدر او الفوتر للصفحه او للعناوين الفريدة مثلا ومن داخله نضع فئات class
[/frame]
class و id هى الفئات و المعرفات الأساسية التى توضع بداخل أوسمة html حتى تتعرف على أوامر css المختلفة .. وهى تعرف نظريا بـ
id معرّف يتم تحديدة ويمكن أن يندرج تحته عنده فئات ، وتعرّف بوضع علامة [ # ] قبلها ويمكن أن تضع لها اى اسم ، ويتم تطبيقه على عنصر واحد فقط داخل الصفحه .
class الفئات وهى يمكن أن تتكرر اكثر من مرة بنفس الصفحة على عكس المعرّفات id ، وتعرّف بوضع نقطه [ . ] قبلها ويمكن أن تضع لها أي إسم. وتعال نوضح ذلك بالتفصيل مباشرة مع الأمثلة التالية :
كود PHP:
#ahmed {
background-color: #ccc;
padding: 10px;
}
.you {
color: green;
font-size: 12px;
}
ويضاف الـ class ويوضع بالصيغه التالية داخل أوسمة html المختلفة
كود PHP:
<p class="you">الفئات يمكن تتكررها بنفس الصفحة</p>
كود 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">
<!--
p.blue { color:blue; }
-->
</style>
</head>
<body>
<h1 class="blue">فوائد إستخدام الأنماط الإنسابية</h1>
<p class="blue">فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>
</body>
</html>
لاحظ تم تلوين الفقرتين الأولى والثانيه كما جاء فى امر تلوين الـ css ولكن العنوان لم يتم تلوينه مع انه أخذ تعريف لنفس الفئه !؟ .. السبب هنا اننا حددنا الوسم p قبل الفئه ولهذا لا تتعرف تلك الفئه ويتم تنفيذ ما بداخلها الا إذا كانت بداخل الفقرة او الوسم p “الأمر نفسه مع كل أوسمه html إذا تم تحدديها قبل الفئه”
كود PHP:
p.blue { color: blue; }
كود PHP:
.blue { color: blue; }
المعرفات id لها نفس قواعد الفئات class ولكن مع إختلاف ان المعرف يتم تطبيقه مرة واحده فقط في الصفحه أى لا يمكنك تطبيق نفس المعرّف على أكثر من وسم بذات الصفحه ..
وشاهد معي نفس المثال السابق ولكن مع إضافة معرف جديد خاص بالعنوان
كود 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">
<!--
p.blue { color:blue; }
h1#red { color: red; }
-->
</style>
</head>
<body>
<h1 id="red">فوائد إستخدام الأنماط الإنسابية</h1>
<p class="blue">فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>
</body>
</html>
[/frame]
تعليق