قالب مدون: شرح التعامل مع الـ class و id

شرح التعامل مع الـ class و id

id : هو معرّف يتم تحديدة ويمكن أن يندرج تحته عنده فئات ، ويعرّف بوضع علامة [ # ] قبله ويمكن أن يوضع له أى اسم ، ويتم تطبيقه على عنصر واحد فقط داخل الصفحه.

class : يمكن أن تتكرر أكثر من مرة بنفس الصفحة على عكس المعرّفات id ، وتعرّف بوضع نقطه [ . ] قبلها ويمكن أن تضع لها أي إسم. متال للتوضيح أكتر :

#do-by {
 background-color: #15g5d;
 padding: 5px;
}
.blogger {
 color: red;
 font-size: 16px;
}

الفئات class

يوضع بالصيغه التالية داخل أوسمة html المختلفة

<p class="you">الفئات يمكن تتكررها بنفس الصفحة</p>

تابع معى المثال التالي متعدد الفقرات..

<!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>

المعرّفات id

المعرفات id لها نفس قواعد الفئات class ولكن مع إختلاف ان المعرف يتم تطبيقه مرة واحده فقط في الصفحه أى لا يمكنك تطبيق نفس المعرّف على أكثر من وسم بذات الصفحه .. وشاهد معي نفس المثال السابق ولكن مع إضافة معرف جديد خاص بالعنوان

<!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">
 </style>
</head>
<body>
<h1 id="red">شروحات أساسيات اللغه من مدون</h1>
<p class="blue">فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>
</body>
</html>