منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف JAR7 في 19/03/16, 02:03 pm

مقدمة كيفية عمل اكواد 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>

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

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



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2195
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف MAR0 في 19/03/16, 06:34 pm

شكرآ جزيلاً اختي الغالية 


يارب ارحمنا برحمتك

MAR0
عضو نشيط


الجنس : ذكر
عدد المساهمات : 36
التقييم : 10
تاريخ الميلاد : 08/01/1998
تاريخ التسجيل : 06/03/2016
العمر : 18
الموقع : مصر
العمل/الترفيه : مصمم جرافيك
المزاج : الحمد لله

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف JAR7 في 19/03/16, 08:08 pm

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



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2195
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف Mr.Yakoub في 19/04/16, 08:47 pm

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

Mr.Yakoub
الاشراف العام


الجنس : ذكر
عدد المساهمات : 548
التقييم : 3
تاريخ التسجيل : 28/02/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

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

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


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

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى