• info@3looom.com
تسجيل الدخول | تسجيل

الدورات التدريبية| HTML

  1. الرئيسية


الدرس الثامن

الخاصية id   مع عناصر Html     The id Attribute:

 

يستخدم الـ  id  لوصف عنصر واحد من عناصر html  وهو اسم فريد لايتكرر داخل نفس صفحة  html

يستخدم الـ  id  في أنماط  css والجافا اسكربت لوصف عنصر محدد .

 

طريقة كتابة الـ id  

 

يستخدم الرمز #  قبل اسم الـ id في css

 

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>

 

   idالفرق بين الـ  Class و الـ  

الـ class  يمكن ان تشترك  عناصر الـ html  في نفس اسم الـ class  بخلاف الـ id  اسم فريد لا يتكرر ولا تشترك فيه عناصر اخري  ويستخدم لوصف عنصر واحد فقط .

 

<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>


<h1 id="myHeader">My Cities</h1>


<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

 

 

يستخدم  الـ id  في الروابط مع الوسم للتنقل داخل نفس الصفحة مثلا الذهاب الي فقرة معينة وأيضا يمكن النتقل الي صفحة اخري .

 

 

مثال :

انشاء فقرة ترويسة بها   Chapter1 وليكن الـ  id  =" C1"

 

<h2 id="C1">Chapter 1</h2>

 

الان نقوم بكتابة كود الانتقال باستخدام الوسم

 

<a href="#C1">Jump to Chapter 1</a>

 

 

الانتقال الي الـ id c1   من صفحة اخري استخدم هذا الكود 

 

<a href="index.html#C1">Jump to Chapter 1</a>

 

 

index.html هي الصفحة الموجود بها الـ  id  C1

 

تمرين:

اكمل الاتي بوضع الخاصية المناسبة لجعل الوسم باللون الاحمر

 

 

<*!DOCTYPE html>
<*html>
<head>
<style>
#myheader {color:red;}
</style>
</head>
<body>
<h1 ………………  >الصفحة الرئيسية</h1>     

 

<*/body>
<*/html>