تعريف لكل من Id .class وماهو الفرق بينهم

عنوان الدرس :تعريف لكل من class,id ؟ وماهو الفرق بينهم

class و id هى الفئات و المعرفات الأساسية التى توضع بداخل أوسمة html حتى تتعرف على أوامر css المختلفة .. وهى تعرف نظريا بـ

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

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

#ahmed {
	background-color: #ccc;
	padding: 10px
}
.you {
	color: green;
	font-size: 12px;
}

الفئات class

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

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

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

لكن أين نضع أوامر CSS؟ هذا هو ما سنتعلمه الآن.

تفعيل CSS في صفحة HTML

هناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS في ملف منفصل.

الطريقة 1: ضمن وسوم HTML باستخدام خاصية style

إحدى الطرق لتفعيل CSS في HTML هي باستخدام خاصية style، لنأخذ مثالاً على أساس المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر كلخفية للصفحة، يمكن تطبيق هذا الأمر بهذا الشكل

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

لمثال يحتوى على 3 فقرات وعنوان واحد وقمت فيه بوضع فئه جدي

د بإسم blue تحتوى على أمر تلوين وطبقتها على فقرتين منهم والعنوان ـ وإن شاهدها

 على المتصفح ستظهر لك هكذ

احظ تم تلوين الفقرتين الأولى والثانيه كما جاء فى امر تلوين الـ css ولكن العنوان لم يتم تلوينه مع انه أخذ تعريف لنفس الفئه !؟ .. السبب هنا اننا حددنا الوسم p قبل الفئه

ولهذا لا تتعرف تلك الفئه ويتم تنفيذ ما بداخلها الا إذا كانت بداخل الفقرة او الوسم p “الأمر نفسه مع كل أوسمه html إذا تم تحدديها قبل الفئه”

p.blue { color: blue; }

وفى حالة ان اردت تطبيق نفس الفئه على العنوان علينا الا نحدد قبل الفئه الوسم الذى نريد

التطبيق عليه ـ وبهذا يمكننا بحريه تطبيقها على كافة الأوسمة وباكثر من مكان بنفس الصفح

.blue { color: blue; }

معرّفات 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">
<!--
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>

وبالمتصفح تم تطبيق أمر التلوين على العنوان h1 فقط

 كما تشاهد هنا بدون التأثير على البقيه ، وغالبا مانستخدم المعرّفات

id في تحديد الهيدر او الفوتر للصفحه او للعناوين الفريدة مثلا ومن داخله نضع فئات class

لمشاهدة مكتبة دروس css------> هنـــا