رد مع اقتباسمواضيع رائعه
وشرووح ارووع
الف شكر عزيزي
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>
المثال يحتوى على 3 فقرات وعنوان واحد وقمت فيه بوضع فئه جديد بإسم blue تحتوى على أمر
تلوين وطبقتها على فقرتين منهم والعنوان ـ وإن شاهدها على المتصفح ستظهر لك هكذا ..
لاحظ تم تلوين الفقرتين الأولى والثانيه كما جاء فى امر تلوين الـ css ولكن العنوان لم يتم تلوينه مع
انه أخذ تعريف لنفس الفئه !؟ .. السبب هنا اننا حددنا الوسم p قبل الفئه ولهذا لا تتعرف تلك الفئه
ويتم تنفيذ ما بداخلها الا إذا كانت بداخل الفقرة او الوسم p “الأمر نفسه مع كل أوسمه html إذا تم
تحدديها قبل الفئه”
وفى حالة ان اردت تطبيق نفس الفئه على العنوان علينا الا نحدد قبل الفئه الوسم الذى نريدكود PHP:p.blue { color: blue; }
التطبيق عليه ـ وبهذا يمكننا بحريه تطبيقها على كافة الأوسمة وباكثر من مكان بنفس الصفحة .
كود PHP:.blue { color: blue; }
المعرّفات id
المعرفات id لها نفس قواعد الفئات class ولكن مع إختلاف ان المعرف يتم تطبيقه مرة واحده فقط في الصفحه أى لا يمكنك تطبيق نفس المعرّف على أكثر من وسم بذات الصفحه .. وشاهد معي نفس المثال السابق ولكن مع إضافة معرف جديد خاص بالعنوان
وبالمتصفح تم تطبيق أمر التلوين على العنوان h1 فقط كما تشاهد هنا بدون التأثير على البقيه ،كود 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>
وغالبا مانستخدم المعرّفات id في تحديد الهيدر او الفوتر للصفحه او للعناوين الفريدة مثلا ومن داخله
نضع فئات class
مواضيع رائعه
وشرووح ارووع
الف شكر عزيزي
تسلم نيوستايل دروس رائعه
تسلم ايدك
بـارك اللـه بيـك .. حبـيـبي وبـارك اللـه فيـك ..
شكراً لك وبارك الله فيك ..
يسلمو أستاذنا نيو ستايل .. الله يوفقك يارب ..
تقبل مروري
شرح جميل وتفصيل ممتاز للفقرات و الكلاسات
مشكور حبي شرح رائع
شكراً لك خالد
يستخدم الأسمان التاليان في اغلب المواقع
ح ـــكـم القدر - Tech
درس مفيد وجميل جدا
بانتظار دروسك القادمة
تحياتي الحارة
الذين يشاهدون الموضوع الآن: 1 (0 من الأعضاء و 1 زائر)
ضوابط المشاركة 
