المواضيع الأخيرة
أفضل 10 أعضاء في هذا الأسبوع

المتواجدون الآن ؟
ككل هناك 9 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 9 زائر :: 1 روبوت الفهرسة في محركات البحث

لا أحد

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 141 بتاريخ 19/07/16, 08:08 am
احصائيات
هذا المنتدى يتوفر على 559 عُضو.
آخر عُضو مُسجل هو أبو صابر فمرحباً به.

أعضاؤنا قدموا 10105 مساهمة في هذا المنتدى في 1977 موضوع

لونك المفضل

اعلان هــــــام

استايل منتدى تقنيات الحالى للبيع لمزيد من التفاصيل مراسلة الأخ omarpop23


منتديات تقنيات :: دورات ودروس منتديات تقنيات :: 

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

avatar
مقدمة كيفية عمل اكواد 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
avatar
شكرآ جزيلاً اختي الغالية 


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


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

سجل دخولك أو انشئ حساب لترك رد

تحتاج إلى أن تكون عضوا من أجل ترك الرد.

انشئ حساب

الانضمام إلى مجتمعنا من خلال إنشاء حساب جديد. من السهل


انشئ حساب جديد

تسجل دخول

هل لديك حساب بالفعل؟ لا توجد مشكلة، قم بتسجيل الدخول هنا.


تسجيل دخول