ما الفرق بين المعرف والفئة ؟
الفرق بينهم هو أن المعرف لا يتكرر داخل الوثيقة ولا تعطي أكثر من معرف لوسم واحد , بينما تستطيع إستخدام الفئة لأكثر من وسم وتستطيع أن تعطي الوسم أكثر من فئة
ملاحظة: الكلام السابق يفضل أن تتبعه لكن لو خالفته ستجد الأمور تسير على ما يرام
ميزتنا هنا لا رسائل مزعجة للأخطاء لا تحذيرات لا شيئ , فقط عليك إكتشاف أخطائك في صمت
والآن دور كود التنسيق للدلالة على المعرف نستخدم الرمز # قبل قيمة المعرف وللدلالة على الفئة نستخدم الرمز . قبل قيمة الفئة والكود كامل يكون على الشكل التالي :
<!doctype html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<title>
تجربة التنسيق
</title>
<style type="text/css">
#text1 {
color:#ff0000;
}
#text2 {
color:#0f0;
}
.text3 {
color:#00f;
}
#text4,.text5 {
color:#F0F;
}
</style>
</head>
<body>
<div id="text1">
بسم الله الرحمن الرحيم
</div>
<div id="text2">
الحمد لله رب العالمين
</div>
<div class="text3">
الرحمن الرحيم
</div>
<p class="text3">
مالك يوم الدين
<p>
<div>
إياك نعبد وإياك نستعين
</div>
<div class="text3">
إهدنا الصراط المستقيم
</div>
<div id="text4">
صراط الذين أنعمت عليهم
</div>
<div class="text5">
غير المغضوب عليهم ولا الضالين
</div>
</body>
</html>
تحدثنا عن إختيار تحديد الوسوم من خلال لغة التنسيق css والآن سنطبق بعض من خواص التنسيق
.text1 {
color: #F00;
font-size: 28px;
background-color: #666;
font-family: Tahoma;
text-align: center;
}
عند تطبيق الفئة السابقة على وسم ما سيجعل لون الخط أحمر و حجم الخط 28px والخلفية رمادي والخط Tahoma والمحاذاة للوسط .
في الغالب ما يتم فصل ملفات التنسيق عن صفحة HTML ويوضع التنسيق كالكود السابق مباشراً في ملف ويتم حفظه بإمتداد css , فلنحفظ الملف السابق باسم style.css ويتم تضمين هذا الملف في وثيقة HTML داخل وسم الـ head بإستخدام وسم link كالتالي :
<link href="style.css" rel="stylesheet" type="text/css">
ما يهمنا من هذا الوسم هي الخاصية href وقيمتها هي مسار ملف التنسيق -سيأتي الحديث عن المسارات تبعاً- وبما أن الملف في نفس مجلد ملف الـ HTML نكتب اسم الملف بالاحقة فقط .
ويصبح الكود كامل كالتالي :
<!doctype html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<title>
تجربة التنسيق
</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="text1">
بسم الله الرحمن الرحيم
</div>
</body>
</html>
ويمكن دمج أكثر من فئة لوسم واحد فيكون كود الـ css كالتالي :
.text1 {
color: #F00;
font-size: 28px;
}
.text2 {
background-color: #666;
font-family: Tahoma;
text-align: center;
}
الفرق بينهم هو أن المعرف لا يتكرر داخل الوثيقة ولا تعطي أكثر من معرف لوسم واحد , بينما تستطيع إستخدام الفئة لأكثر من وسم وتستطيع أن تعطي الوسم أكثر من فئة
ملاحظة: الكلام السابق يفضل أن تتبعه لكن لو خالفته ستجد الأمور تسير على ما يرام
ميزتنا هنا لا رسائل مزعجة للأخطاء لا تحذيرات لا شيئ , فقط عليك إكتشاف أخطائك في صمت
والآن دور كود التنسيق للدلالة على المعرف نستخدم الرمز # قبل قيمة المعرف وللدلالة على الفئة نستخدم الرمز . قبل قيمة الفئة والكود كامل يكون على الشكل التالي :
<!doctype html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<title>
تجربة التنسيق
</title>
<style type="text/css">
#text1 {
color:#ff0000;
}
#text2 {
color:#0f0;
}
.text3 {
color:#00f;
}
#text4,.text5 {
color:#F0F;
}
</style>
</head>
<body>
<div id="text1">
بسم الله الرحمن الرحيم
</div>
<div id="text2">
الحمد لله رب العالمين
</div>
<div class="text3">
الرحمن الرحيم
</div>
<p class="text3">
مالك يوم الدين
<p>
<div>
إياك نعبد وإياك نستعين
</div>
<div class="text3">
إهدنا الصراط المستقيم
</div>
<div id="text4">
صراط الذين أنعمت عليهم
</div>
<div class="text5">
غير المغضوب عليهم ولا الضالين
</div>
</body>
</html>
تحدثنا عن إختيار تحديد الوسوم من خلال لغة التنسيق css والآن سنطبق بعض من خواص التنسيق
.text1 {
color: #F00;
font-size: 28px;
background-color: #666;
font-family: Tahoma;
text-align: center;
}
عند تطبيق الفئة السابقة على وسم ما سيجعل لون الخط أحمر و حجم الخط 28px والخلفية رمادي والخط Tahoma والمحاذاة للوسط .
في الغالب ما يتم فصل ملفات التنسيق عن صفحة HTML ويوضع التنسيق كالكود السابق مباشراً في ملف ويتم حفظه بإمتداد css , فلنحفظ الملف السابق باسم style.css ويتم تضمين هذا الملف في وثيقة HTML داخل وسم الـ head بإستخدام وسم link كالتالي :
<link href="style.css" rel="stylesheet" type="text/css">
ما يهمنا من هذا الوسم هي الخاصية href وقيمتها هي مسار ملف التنسيق -سيأتي الحديث عن المسارات تبعاً- وبما أن الملف في نفس مجلد ملف الـ HTML نكتب اسم الملف بالاحقة فقط .
ويصبح الكود كامل كالتالي :
<!doctype html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<title>
تجربة التنسيق
</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="text1">
بسم الله الرحمن الرحيم
</div>
</body>
</html>
ويمكن دمج أكثر من فئة لوسم واحد فيكون كود الـ css كالتالي :
.text1 {
color: #F00;
font-size: 28px;
}
.text2 {
background-color: #666;
font-family: Tahoma;
text-align: center;
}