اذا اردت وضع كلاس مخصص للجداول والاكواد وتريد استخدامة باكثر من قسم دون التأثير على الكلاسات الاخرى مثال عندك كود القائمة السفلية بامكاننا الان اضافة زر دون مانحط كلاس لكل زر
اولا ناخذ الكلاس اللي خصصناه ونضيفه بالكلاس المخصص:
#btn {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: baseline;
margin: 1px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border-radius: .5em;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background-image: -webkit-linear-gradient(top, #942EBF, #FF618E);
background-image: linear-gradient(to bottom, #942EBF, #FF618E);color: #fff;
}
زي ماتلاحظ حددنا الكلاس اللي نبي نضيفه بعلامة مربع واختصار زر #btn بداية السطر الان ناخذ الاختصار بدون المربع btn بنحتاجة بالكود القادم
الان معانا الكود لو ركبناه مثل ماهو راح يعطينا نتيجة كالتالي
<a href="http://localhost">المنتديات</a>
<a href="http://localhost">الدردشة</a>
<a href="http://localhost">الرئيسية</a>
<br>
<a href="http://localhost">التحميلات</a>
<a href="http://localhost">الاعضاء</a>
<a href="http://localhost">المتصلين</a>
لاكن لو اضفنا علية كود صغير يضم العلامة اللي انشأناها بالاعلى واللي هيهbtn مثل id="btn" ويصير الكود كالتالي:
<a href="http://localhost" id="btn">المنتديات</a>
<a href="http://localhost" id="btn">الدردشة</a>
<a href="http://localhost" id="btn">الرئيسية</a>
<br>
<a href="http://localhost" id="btn">التحميلات</a>
<a href="http://localhost" id="btn">الاعضاء</a>
<a href="http://localhost" id="btn">المتصلين</a>
وقمنا بتركيبه بيعطينا النتيجه التالية
لاحظ الان اصبح جميل بسبب كود صغير ينضاف للرابط اللي هوه id="" حطينا داخلة كودنا المخصص واصبح جميلا الان لو ودنا نضيف اللاس بأي مكان اخر نستخدم الكود الصغير فقط لاننا قمنا بتخزين الكلاس بدال مانستخدم الكلاس الكبير كل مرة اختصرناه بكود صغير جدا سهل علينا كثير وهذي هيه فائدة الكلاس المخصص الجديد اتمنى اكون وفقت بالشرح واي اسئلة اضف بالتعليقات وسنرد عليكم اقرب فرصه
