الرئيسيةبحـثالتسجيلس .و .جالأعضاءالمجموعاتدخول

شاطر | 
 

 الدرس الأول : مقدمة ونظرة عامة

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

avatar

احترام القوانين :
ذكر تاريخ الميلاد : 25/07/1998
عدد المساهمات : 1044
نقاط : 3102
تاريخ التسجيل : 29/08/2009
العمر : 19
الموقع : الاسكندرية

مُساهمةموضوع: الدرس الأول : مقدمة ونظرة عامة    الجمعة مارس 04, 2011 7:56 am

الـ CSS هو عبارة عن طريقة اضافية تنظم بها تنسيق الصفحات
بطريقة سهلة ومرنة وتمكنك من عمل الكثير من الأشياء دون التغيير فى اكواد الـ HTML - فى هذا الدرس سنتعلم التالى

  • طريقة صياغة اكواد CSS
  • تحديد العنصر الذى سيطبق عليه التنسيق SELECTOR
  • الخصائص Properties
  • كيفية تطبيق اكواد الـ CSS فى الـ XHTML


(لكن يجب ان تكون درست دورة الـ HTML قبل البدأ فى هذه الدورة)
على بركة الله نبدأ

1. طريقة صياغة اكواد CSS

اكواد الـ CSS تصاغ بالشكل التالى

الرمز:
div{
font-size: 20px;
}

حيث div هو العنصر الذى سيتم تطبيق كود الـ CSS عليه (Selector)
والـ font-size
هى الخاصية (Property), اى الجزء الذى نريد التعامل معه او إعداداه داخل العنصر
20px هى قيمة الخاصية (Value)

2. تحديد العنصر الذى سيطبق عليه التنسيق SELECTOR

الـ Selector هو عبارة عن تحديد الجزء الذى سيتم تطبيق الإعدادات عليه
كما سبق وقلنا.

هناك ثلاث انواع للـ Selector

الـ html selector والذى نحدد به اوسمة من اوسمة الـ html الأساسية
كالـ div و span و p الخ.
كمثال
الرمز:
p{
border: #000000 solid 1px;
}

والنوعان الأخران هما الـ id's والـ classes

الـ id يتم وضعها فى عناصر الـ html بالشكل التالى
الرمز:
some text here
(حيث span_id هى الـ id لهذا العنصر, ولا يشترط اسم محدد, المهم ان يكون
هذا الأسم متوافق مع معايير قيم الخصائص التى تعلمتها فى الـ html)
ويتم الوصول لهذا العنصر فى الـ css بالشكل التالى
الرمز:
#span_id{
/*
css codes goes here
*/
}
والـ classes يتم وضعها فى الـ html بالشكل التالى
الرمز:
some text
ونتعامل معها فى الـ css بالشكل التالى
الرمز:
.span_class{
/*
any css codes goes here
*/
}
اذا ماذا اذا كان لدينا الثلاث عناصر التاليين
الرمز:
main body text

one line text here

here is an paragraph


ونريد تعيين لون الخط (مثلا) للون الأحمر للثلاث عناصر
هل نكتبهم بالشكل التالى
الرمز:
.my_body{
color: red;
}
#simple_line{
color: red;
}
.paragraph_line{
color: red;
}
الكود السابق ليس خطأ. لكن بما اننا نسعى للأفضل دائما, فالأفضل يكون كالتالى
الرمز:
.my_body, #simple_line, .paragraph_line{
color: red;
}
كما تلاحظ كل ماتحتاجه هو الفصل بين كل معرف للعنصر (سواء كان class او id)
بعلامة الفاصلة.

وايضا من ضمن طرق اختيار العناصر, هو الدوران داخل العناصر.

بمعنى مثلا لدينا التالى
الرمز:
any text

another text inside the div



paragraph outside of the div


لاحظ اننا لدينا عنصرين p
احداهما داخل الـ div والأخر خارجه
العنصر الذى خارج الـ div
الوصول له هو بالطريقة الأولى التى تم شرحها. لكن ماذا عن الذى داخل الـ div ؟

هذا هو مايسمى الدوران داخل العناصر ونصل اليه فى الـ css بالشكل التالى
الرمز:
div p{
font-weight: bold;
}
بالأول حددنا العنصر الـ parent وهو الـ div
وبعده الـ child وهو الـ p الذى داخل الـ div

مع مراعاة ان هذه الطريقة نفصل فيها بين العناصر بالمسافة الفارغة ليس الا.


3. الخصائص Properties

الخصائص كما لاحظنا فى الأمثلة التى طرحناها, هى الجزء الذى نريد إعداده للعنصر.

ورأينا فى الأمثلة السابقة الـ font-size والذى يتم تحديد حجم الخط عن
طريقه, والـ font-weight والذى يتم تحديد سمك (عرض) الخط عن طريقه.

وهناك العديد من الخصائص سندرس كل منهم بالتفصيل فى موضوعات اخرى.


4. تطبيق الـ CSS فى الـ XHTML

هناك ثلاث طرق لوضع اكواد الـ CSS بصفحات الـ XHTML

الطريقة الأولى, وهى Inline CSS

وهى عن طريق اضافة خاصية Style للعنصر.

وتكون بالشكل التالى كامثال
الرمز:

any text


حيث قيمة الخاصية style تكون اكواد css صحيحة.

والطريقة الثانية Embedded Css
ويتم وضع اكواد الـ css داخل عنصر جديد له الإسم style بمنطقة الـ head بالصفحة
بالشكل التالى
الرمز:



any title

الطريقة الثالثة والأخيرة.
هى عن طريق وضع اكواد الـ css بملف له الإمتداد .css
ونضع اشارة لهذا الملف داخل صفحة الـ html بمنطقة الـ head ايضا
(كما اتمنى انك تكون لاحظت التعليقات وكيف يتم وضعها فى الـ css)
ويتم الأمر بالشكل التالى
الرمز:

اتمنى يكون الدرس الأول فى هذه الدورة كان بسيط ومفهوم بجميع جوانبه.

واعلم انه لم يكن مقدمة حقيقية. لكن هذا لأن الـ css والـ xhtml جزئين مكونين لشئ واحد.
ومن المحتمل ان اقوم بجعل الدورتين عبارة عن دورة واحدة اذا تطلب الأمر.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.toty.arabstar.biz
mohamed_m
مشرف عام
مشرف عام
avatar

احترام القوانين :
ذكر تاريخ الميلاد : 16/07/1998
عدد المساهمات : 447
نقاط : 853
تاريخ التسجيل : 29/08/2009
العمر : 19

مُساهمةموضوع: رد: الدرس الأول : مقدمة ونظرة عامة    السبت ديسمبر 17, 2011 7:47 am

شكرا ليك على الموضوع
الشرح هايل الصراحة
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
ti2oo
عضو محبوب فى المنتدى


احترام القوانين :
تاريخ الميلاد : 18/09/1990
عدد المساهمات : 138
نقاط : 287
تاريخ التسجيل : 29/08/2009
العمر : 27

مُساهمةموضوع: رد: الدرس الأول : مقدمة ونظرة عامة    الأحد ديسمبر 18, 2011 11:48 am

shokran lek 3la el shar7 al ra2e3 da

شكرا ليك على الشرح الرائع دى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
المهندس صافى
مؤسس المنتدى والمدير العام

avatar

احترام القوانين :
ذكر تاريخ الميلاد : 25/07/1998
عدد المساهمات : 1044
نقاط : 3102
تاريخ التسجيل : 29/08/2009
العمر : 19
الموقع : الاسكندرية

مُساهمةموضوع: رد: الدرس الأول : مقدمة ونظرة عامة    الخميس ديسمبر 22, 2011 7:04 am

العفو يا تيتو على ايه
وننتظر جديدك

وتقبل تحياتى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.toty.arabstar.biz
 
الدرس الأول : مقدمة ونظرة عامة
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
 :: المهندس صافى فعالياتنا :: !…»§ ●[ــــودΞا لغات البرمجة Ξالـــ] ●§«…! :: !…»§ ●[ــــودΞ دورة تعلم css Ξالـــ] ●§«…!-
انتقل الى:  

أكوادcss|اكواد Template| الأسئلة الشائعة | تقنيات متقدمة |لغات البرمجة|اشهار المواقع والمنتديات |اقسام التصميم |اشهار المنتديات|دليل شركات الاستضافه|عروض المنتديات  |الابداع والجرافيزم |الفوتوشوب|البرامج  |


مركز تبادل الاعلانات العربيه

 دردشة | المهندس صافى