مقدمة كيفية عمل اكواد css والكلاس

  افضل المواضيع1
مقدمة كيفية عمل اكواد css والكلاس

السلام عليكم ورحمة الله وبركاته

اليوم سنبدأ في بحر الاكواد وتصنيع الهيدرات والفوتر والقوالب الخاصة باحلى منتدى

سنتعرف اولا على جزئين مهمين

اولا / اكواد css

يمكن وضع هذه اكواد css من مظهر المنتدى - صور والوان - الوان - ورقة css

او يمكننا اضافتها بقالب overall_header او overall_footer_end

بحيث نضع الكود الاتي لتفعيل الاكواد css  بها
الكود:

   <style>
توضع هنا الاكواد css
   </style>

حيث يضاف بقالب overall_header اعلى نهاية الهيدر اللي هو دة تجدة بالقالب </head>

تعرفنا على اين نضعه الان نتعرف على كيفية صنع الكود css

ثانيا / صنع او عمل كود css

هناك امور نلتزم بها في صاناعه كود css

1- اسم الكلاس الذي سيستخدم في تفعيل اكواد css ويكون بلغة الانجليزية

2- تواجد ببداية اسم الكلاس لكود css علامة . حيث سيكون مواجهه له بعملية برمجته كلمة div class " او # ويكون عملية برمجته بقالب البودي div id

ولكننا سنلتزم بعملية وضع علامة النقطة فقط "."

3- وضع اقواس { بعد اسم الكلاس وفي نهايته نغلق بــ }

4- وضع اوامر عمل خلفية للكلاس او للكود ويكون اما بصورة ويكون الامر هكذا

الكود:
 background-image: url("رابط الصورة");
او يكون بخلفية لون ويكون الامر هكذا
 
الكود:
background-color: #FFFFFF;
نلاحظ تنتهي الامر لبداية امر جديد بــ ;

5- امر تكرار الصورة او الخلفية او عدم تكرارها - عندما نريد تكرار الخلفية نضع الامر
   
الكود:
background-repeat: repeat;
وفي هذه الحالة لا يحتاج عمل امر اتجاه الخلفية او الصورة ولا يحتاج وضع امر عرض الصورة او الخلفية
فقط ارتفاع الخلفية ويكون بالامر الاتي
   
الكود:
height: 203px;

حيث العدد 203 هو ارتفاع الخلفية


وعند عدم رغبتنا بتكرار الخلفية او الصورة ونضع امر
   
الكود:
background-repeat: no-repeat;

ويحتاج لنا تحديد العرض وارتفاع والاتجاه

6- وضع اتجاه للخلفية يسار او يمين باستخدام امر الاتي

الكود:
   float: right;
يمين و  

الكود:
 float: left;

يسار

7- ارتفاع الخلفية حيث لابد ان يكون للهيدر مثلا نفس الارتفاع ويستبعد امر اللوغو المنفصل

ويستخدم امر

 
الكود:
height: 203px;

8- عرض الخلفية او الصورة ويستخدم بامر الاتي

الكود:
  width: 441px;

حيث 441 هو عرض الخلفية يمكن تغييرة

-------------------------------

بهذا يكون الكود css  بهذه الطريقة للخلفية المتمددة او المتكررة
الكود:

.hhb {
   background-image: url("رابط الصورة");
   background-repeat: repeat-x;
   height: 203px;
}
والصورة باليمين او اليسار بهالشكل
الكود:

.hhl {
   background-image: url("رابط الصورة");
   background-repeat: no-repeat;
      float: left;
   height: 203px;
   width: 467px;
}



+++++++++++++++


الان هذه الاكواد css لن يكون لها أي فعالية بما انه لم يتواجد له كلاس يقوم بتشغيلها

نذهب لقالب overall_header للنسخة الثانية طبعا نبحث عن {JAVASCRIPT}

ونضيف الكلاس الاتي

الكود:
<div class="hhb"></div>
دة يعتبر وضعنا الخلفية المتكررة او المتمددة كيف نضيف بقية الكلاسات اليميت واليسار

نضعها بداخل كلاس الخلفية المتمدد

هكذا

الكود:
<div class="hhb">

هنا يتم اضافة الكلاسات الاخرى
</div>


ليصبح هكذا

الكود:
<div class="hhb">
<div class="hhl"></div>

</div>

وبكدة انتهينا من الشرح لدرسنا الاول

دمتم بحفظ الله ورعايته


m13
  افضل المواضيع2
شكرآ جزيلاً اختي الغالية 


يارب ارحمنا برحمتك
  افضل المواضيع3
اهلا بك اخي العزيز
ومنور الموضوع


m13
  افضل المواضيع4
شكرآ جزيلا على الموضوع الرائع و المميز 
واصل تالقك معنا في المنتدى 
بارك الله فيك اخي ... 
ننتظر منك الكثير من خلال ابداعاتك المميزة 
لك منـــــــ اجمل تحية ــــــــــي
  افضل المواضيع5
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي
لاتستطيع الرد على المواضيع في هذا المنتدى