منتدى الوميض العربي
أهلاً وسهلاً على منتدى الوميض العربي


منتدى الوميض العربي
 
الرئيسيةالبوابةاليوميةمكتبة الصورس .و .جبحـثقائمة الاعضاءالمجموعاتالتسجيلدخولميايهغنوةيوتوب السخاني

شاطر | 
 

 بدء تعلم لغة css

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


mms mms : mms
وسام التميز : وسام التميز
الاوسمة : الأدارة
ذكر
الثور
عدد المساهمات : 1169
تاريخ التسجيل : 18/03/2010
العمر : 28
الموقع الموقع : www-aloamed.ace.st
المزاج المزاج : ممتاز

لعبة عالمية
مرئي للجميع مرئي للجميع: 1

مُساهمةموضوع: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:02 am

مقدمة

CSS هي أداة رائعة لإضافة تصميم لمواقعك، ويمكنها أن توفر عليك الكثير من الوقت باستخدامها في تصميم المواقع بطريقة جديدة تماماً، وهي لغة يجب أن تستخدم من قبل كل شخص يعمل في تصميم المواقع. في هذا الدرس ستبدأ في تعلم هذه التقنية خلال ساعات قليلة، CSS يسهل فهمها ويمكنك أن تتعلم كل الطرق العملية للتحكم بتصميم موقعك. تعلم CSS عملية ممتعة، وأنت تقرأ هذا الدرس تذكر أ ن تأخذ وقتاً لتجري بعض التجارب وترى ماذا تعلمت من كل درس. استخدام CSS يتطلب معرفة أساسيات HTML،إذا لم تكن تعرف HTML فيمكنك أن تبدأ بدرس HTML قبل أن تتعلم CSS. ما هي البرامج التي أحتاجها؟

تجنب استخدام برامج مثل فرونت بيج أو دريمويفر أو مايكروسوفت وورد عند قراءة وتطبيق هذا الدرس، هذه البرامج لن تساعدك على تعلم CSS، بدلاً من ذلك ستعيقك وتؤخر تعلمك للتقنية. كل ما تحتاجه هو محرر نصي. مثلاً مايكروسوفت ويندوز يأتي مع برنامج يسمى Notepad (المفكرة)، وهو غالباً ما يوضع في قسم Accessories (أدوات) الذي تجده في قسم Programs (برامج)، وبإمكانك استخدام برامج مماثلة في أنظمة التشغيل الأخرى مثل Pico في لينكس وSimple text لنظام ماك. المحرر النصي البسيط هو أداة مثالية لتعلم HTML وCSS لأنه لا يؤثر أو يغير ما كتبته من أوامر، بهذه الطريقة نجاحك وأخطائك تعتمد عليك وحدك وليس على البرنامج، وهذا يبسط عملية التعلم لأنك تستطيع كشف الأخطاء بسرعة وسهولة. يمكنك أن تستخدم أي متصفح لهذا الدرس، ونحن نشجع على أن تستخدم أحدث المتصفحات وتقوم بتحديث متصفحك دائماً. متصفح ومحرر نصي، هذا كل ما تحتاجه. لنبدأ!
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
الزعيم
Admin
Admin


mms mms : mms
وسام التميز : وسام التميز
الاوسمة : الأدارة
ذكر
الثور
عدد المساهمات : 1169
تاريخ التسجيل : 18/03/2010
العمر : 28
الموقع الموقع : www-aloamed.ace.st
المزاج المزاج : ممتاز

لعبة عالمية
مرئي للجميع مرئي للجميع: 1

مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:04 am

درس 1: ما هي تقنية CSS؟

لعلك سمعت عن CSS من قبل لكن لا تعرف حقاً ما هي، في هذا الدرس ستتعلم المزيد عن CSS وماذا يمكن لهذه التقنية أن تقدم لك. CSS هي اختصار لي Cascading Style Sheets. ماذا يمكن أن أفعل بتقنية CSS؟

CSS هي لغة تصميم تحدد شكل وثيقة HTML، فهي تهتم بالخطوط، الألوان، الهامش، والعرض والارتفاع، صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثيرة، انتظر فقط وسترى! HTML يمكن أن تستخدم بشكل خاطئ لإضافة تصميم للمواقع، لكن CSS توفر المزيد من الخيارات وهي أكثر دقة وعملية، وهي مدعومة من قبل المتصفحات الرئيسية اليوم. بعد أجزاء قليلة في هذا الدرس ستتمكن من إنشاء ملف CSS الأول لكي تعطي موقعك مظهراً رائعاً. ما الفرق بين CSS وHTML؟

تستخدم لوضع هيكلية ونظام منطقي للمحتويات، أما CSS فهي تستخدم لإضافة تصميم لهذه المحتويات. حسناً، قد يبدو هذا مربكاً لكن أكمل القراءة وستفهم ما قرأته قريباً. في الماضي القريب اخترع رجل اسمه تيم بيرنرز لي شبكة الويب، في ذلك الوقت كانت HTML تستخدم فقط لإضافة هيكلية للنص، الكاتب يمكنه أن يقوم بإضافة معنى للنص بأن يقول مثلاً "هذا عنوان" أو "هذه فقرة" ويستخدم وسوم HTML مثل

و

. مع ازدياد شهرة شبكة الويب بدأ المصممون في البحث عن طرق لإضافة تصميم للوثائق، ولتلبية رغباتهم قام مبرمجوا المتصفحات - نيتكسيب ومايكروسوفت - باختراع وسوم HTML جديدة مثل الذي يختلف عن وسوم HTML الأصلية بأنه يهتم بالشكل لا بالهيكلية. أدى ذلك إلى أن تستخدم وسوم هيكلية مثل

بشكل خاطئ، حيث استخدام هذا الوسم لتحديد تصميم الصفحة بدلاً من إضافة معنى للنص، والكثير من الوسوم التي اخترعت مثل كانت فقط مدعومة من قبل متصفح واحد، أصبحت جملة "ستحتاج إلى المتصفح الفلاني لرؤية هذه الصفحة" مألوفة في مواقع الشبكة. ابتكرت CSS لعلاج هذه المشكلة لأنها توفر للمصممين طرقاً فعالة وعملية لإنشاء التصاميم وهذه التصاميم ستكون مدعومة من قبل جميع المتصفحات في نفس الوقت، والفصل بين شكل الصفحة ومحتوياتها يبسط عملية إدارة الموقع بشكل كبير. كيف ستفيدني CSS؟

تعتبر CSS ثورة في عالم تصميم المواقع، وفوائدها الأساسية هي:

  • التحكم بالتصميم من خلال ملف واحد.
  • إمكانية أكبر وأدق للتحكم بتفاصيل التصميم.
  • إنشاء تصاميم خاصة لمختلف وسائل عرض الموقع مثل الشاشات والطابعات والهواتف النقالة .. إلخ
  • العديد من التقنيات والأساليب المتقدمة في التحكم بالتصميم.

الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
الزعيم
Admin
Admin


mms mms : mms
وسام التميز : وسام التميز
الاوسمة : الأدارة
ذكر
الثور
عدد المساهمات : 1169
تاريخ التسجيل : 18/03/2010
العمر : 28
الموقع الموقع : www-aloamed.ace.st
المزاج المزاج : ممتاز

لعبة عالمية
مرئي للجميع مرئي للجميع: 1

مُساهمةموضوع: ]v   الثلاثاء أكتوبر 12, 2010 3:06 am

درس 2: كيف تعمل تقنية CSS؟

في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML. الكثير من خصائص CSS تشبه تلك المستخدمة في HTML، لذلك إذا تعلمت HTML واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة، لنلقي نظرة على هذا المثال الأساسي. القواعد الأساسية لكتابة CSS

لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة: باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:
مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر: body {background-color: #FF0000;}
كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS: لكن أين نضع أوامر CSS؟ هذا هو ما سنتعلمه الآن. تفعيل CSS في صفحة HTML

هناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS في ملف منفصل. الطريقة 1: ضمن وسوم HTML باستخدام خاصية style

إحدى الطرق لتفعيل CSS في HTML هي باستخدام خاصية style، لنأخذ مثالاً على أساس المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر كلخفية للصفحة، يمكن تطبيق هذا الأمر بهذا الشكل Example<title> </head> <strong><body style="background-color: #FF0000;"></strong> <p>This is a red page</p> </body> </html> <br /> <strong>الطريقة 2: ضمت ملف HTML باستخدام وسم style</strong><br /><br /> هذه طريقة مختلفة بأنها تستخدم وسم <style>، وهذا مثال لكيفية تطبيق هذه الطريقة: <html> <head> <title>Example<title> <strong><style type="text/css"></strong> <strong>body {background-color: #FF0000;}</strong> <strong></style></strong> </head> <body> <p>This is a red page</p> </body> </html> <br /> <strong>الطريقة 3: ملف خارجي</strong><br /><br /> هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة. الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة <strong>.css</strong>، ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب. مثلاً، لنقل أن ملف التصميم لديك اسمه <strong>style.css</strong> وهو موجود في مجلد اسمه <strong>style</strong>، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم <img src="http://ar.html.net/tutorials/css/figure002.png" border="0" alt="" /> المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML: <link rel="stylesheet" type="text/css" <strong>href="style/style.css"</strong> /> <br /> لاحظ كيف أن مسار الملف حددناه باستخدام خاصية href. هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي <head> و</head> كما في المثال الآتي: <html> <head> <title>My document ...
هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML.
الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML. هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاج إلى تعديل 100 ملف بنفسك، باستخدام CSS يمكن تغيير ما تريد خلال ثواني بتغيير سطر واحد في ملف التصميم. لنتدرب على ما تعلمناه حتى الآن. جرب بنفسك

قم بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات: default.htm

My document

My first stylesheet


style.css

body { background-color: #FF0000; }
الآن قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف. قم بفتح ملف default.htmفي متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
الزعيم
Admin
Admin


mms mms : mms
وسام التميز : وسام التميز
الاوسمة : الأدارة
ذكر
الثور
عدد المساهمات : 1169
تاريخ التسجيل : 18/03/2010
العمر : 28
الموقع الموقع : www-aloamed.ace.st
المزاج المزاج : ممتاز

لعبة عالمية
مرئي للجميع مرئي للجميع: 1

مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:08 am

الدرس 3: الألوان والخلفيات

في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك، سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية، نشرح هذه الخصائص في CSS:

  • color
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background
لون المقدمة: خاصية 'color'

خاصية color تصف لون عنصر HTML. فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم

، المثال أدناه سيقوم بتوضيح كيفية تحويل كل

إلى اللون الأحمر: h1 { color: #ff0000; }


  • شاهد المثال
الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255,0,0)). خاصية 'background-color'

خاصية background-color تحدد لون خلفية أي عنصر. العنصر يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر . يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري و

. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }


  • شاهد المثال
لاحظ أننا قمنا بتفعيل خاصيتين للعنصر

وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة. الصورة كخلفية "background-image"

خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر. فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسةبك، قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك. لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر وحدد مسار الصورة: body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }


  • شاهد المثال
انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif")، هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام url("../images/butterfly.gif") أو حتى العنوان الكامل للملف: url("http://www.html.net/butterfly.gif"). تكرار صورة الخلفية "background-repeat"

هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟ الخاصية background-repeat تتحكم بتكرار الصورة. في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية background-repeat. القيمةالوصفمثال
Background-repeat: repeat-xالصورة ستتكرر أفقياًشاهد المثال
background-repeat: repeat-yالصورة ستتكرر عمودياًشاهد المثال
background-repeat: repeatالصورة ستتكرر أفقياً وعمودياًشاهد المثال
background-repeat: no-repeatلن تتكرر بأي شكلشاهد المثال
مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل:: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }


  • شاهد المثال
تثبيت صورة الخلفية "background-attachment"

الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر. الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها. في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصية background-attachment، شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة. القيمةالوصفمثال
Background-attachment: scrollالصورة ستتحرك مع الصفحةشاهد المثال
Background-attachment: fixedالصورة ستبقى ثابتةشاهد المثال
المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }


  • شاهد المثال
مكان صورة الخلفية "background-position"

تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة. هناك طرق مختلفة لتحديد قيمة background-position، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح. هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.
الجدول أدناه يوضح بالمزيد من الأمثلة القيمةالوصفمثال
background-position: 2cm 2cmهذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشةشاهد المثال
background-position: 50% 25%هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشةشاهد المثال
background-position: top rightهذه الصورة وضعت في أعلى يمين الصفحةشاهد المثال
المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }


  • شاهد المثال
جمع كل الخصائص "background"

الخاصية background هي اختصار لكل خصائص خلفية العناصر التي قرأتها في هذا الدرس. باستخدام background يمكنك جمع عدة خصائص وبالتالي تقليل عدد الأسطر التي تكتبها في ملف التصميم وهذا يجعل الملف أسهل للقراءة. فمثلاً يمكن اختصار هذه الأسطر: background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
باستخدام background يمكن تحقيق نفس النتيجة باستخدام سطر واحد فقط: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
القائمة ترتب بهذا الشكل - من اليسار إلى اليمين:
background-color | background-image | background-repeat | background-attachment | background-position إذا لم تكتب خاصية ما سيقوم المتصفح بوضع القيمة التلقائية لهذه الخاصية، فمثلاً لم نضع الخاصية background-attachment وbackground-position في المثال: background: #FFCC66 url("butterfly.gif") no-repeat;
الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll وtop left. ملخص

في هذ الدرس تعلمت طرقاً جديدة لا يمكنك تطبيقها باستخدام HTML فقط، المتعة تستمر في

الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
الزعيم
Admin
Admin


mms mms : mms
وسام التميز : وسام التميز
الاوسمة : الأدارة
ذكر
الثور
عدد المساهمات : 1169
تاريخ التسجيل : 18/03/2010
العمر : 28
الموقع الموقع : www-aloamed.ace.st
المزاج المزاج : ممتاز

لعبة عالمية
مرئي للجميع مرئي للجميع: 1

مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:09 am

الدرس 4: الخطوط

في هذا الدرس ستتعلم الخطوط وكيف تفعلها باستخدام CSS، وسنقوم أيصاً بمعالجة مشكلة كيفية عرض بعض الخطوط التي لن تظهر بشكل صحيح ما لم تكن مثبتة على الحاسوب، سنتعلم هذه الخصائص في هذا الدرس:

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font
نوع الخطوط "font-family"

الخاصية font-family تستخدم لوضع قائمة خطوط تطبق على حسب الأولوية على عنصر أو صفحة ما، إذا لم يجد المتصفح الخط الأول ضمن قائمة الخطوط سيقوم باستخدام الخط الثاني في القائمة وإذا لم يجده سيحاول عرض الخط التالي، وهكذا حتى يجد الخط المناسب. هناك نوعان من أسماء الخطوط تستخدم لتصنيفها، خطوط بأسماء محددة أو أسماء عامة، المصطلحين سنشرحهما في الفقرات اللاحقة. أسماء الخطوطأمثلة لخطوط بأسماء محددة هي "Arial" و"Times New Roman" أو "Tahoma".أسماء عامةالأسماء العامة للخطوط تحدد المجموعة من الخطوط التي لها شكل متماث، فمثلاً sans-serif هي مجموعة من الخطوط لا تحوي زوائد على الأحرف وهي خطوط مناسبة لعرض النص على الشاشة. الاختلاف بين أنواع الخطوط يوضح في المثال التالي: عندما تضع قائمة بالخطوط في موقعك فأنت تبدأ مع الخط المفضل لديك ثم الذي يليه، ومن الأفضل أن تنهي القائمة باسم مجموعة عامة من الخطوط، بهذه الطريقة تضمن أن الصفحة ستعرض بنفس النوع من الخط المفضل لديك إذا لم يجد المتصفح الخط الذي قمت بتحديده. فمثلاً قائمة مرتبة من الخطوط مرتبة ستكون بهذا الشكل: h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}


  • شاهد المثال
العناوين التي حددت باستخدام العنصر

ستعرض باستخدام خط "Arial"، إذا لم يكن هذا الخط مثبتاً في حاسوب المستخدم سيعرض بدلاً منه خط "Verdana" وإذا لم يكن الإثنان موجودان على حاسوب المستخدم سيتم اختيار خط من عائلة الخطوط sans-serif لعرض العناوين. لاحظ كيف أننا وضعنا اسم خط "Times New Roman" بين علامتي تنصيص لأن اسمه يحوي مسافات ولذلك يجب أن يوضع بين علامتي تنصيص. طراز الخط "font-style"

الخاصية font-style تحدد ما إذا كان الخط سيحمل القيمة normal أو italic أو oblique، في المثال أدناه كل عناوين

ستظهر بشكل مائل. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;}


  • شاهد المثال
تباين الخط "font-variant"

الخاصية font-variant تستخدم للاختيار بين القيمتين normal أو small-caps للخط وهي متعلقة فقط باللغات الأوروبية، القيمة small-caps تعني أن النص سيكتب بحروف كبيرة لكنها من ناحية الحجم صغيرة، ، يبدو الأمر مربكاً، عليك أن تشاهد المثال الآتي لكي تفهم أكثر: إذا اختيرت القيمة small-caps للخاصية font-variant ولم يكن هناك خط يدعم هذه الخاصية سيقوم المتصفح بعرض النص بحروف كبيرة فقط. h1 {font-variant: small-caps;} h2 {font-variant: normal;}


  • شاهد المثال
وزن الخط "font-weight"

الخاصية font-weight تصف كم ستكون سماكة أو "ثقل" الخط، يمكن للخط أن يحمل القيمة normal أو bold، وهناك متصفحات تدعم استخدام الأرقام من 100 إلى 900 لوصف ثقل الخط. p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;}


  • شاهد المثال
حجم الخط "font-size"

حجم الخط يمكن تحديده بالخاصية font-size. هناك العديد من الوحدات (مثال: بكسل، النسبة المؤية) التي يمكن استخدامها لوصف حجم الخط، في هذا المثال سنركز على الوحدات الأكثر استخداماً، والمثال يتضمن: h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}


  • شاهد المثال
هناك فرق واحد بين وحدات القياس الأربع، وهي أن كل من 'px' و'pt' تجعل حجم الخط محدداً بدقة وثابت بينما '%' و'em' تسمح للمستخدم بتغيير حجم الخط إلى المستوى المناسب له، هناك العديد من المستخدمين من ذوي الاحتياجات الخاصة أو كبار السن أو من يعاني من ضعف في البصر أو يملك شاشة ذات جودة رديئة، ولكي نجعل الموقع قابلاً للوصول لهذه الفئات وللجميع لا بد من استخدام وحدات قياس يمكن تعديلها مثل '%' أو 'em'. في المثال أدناه توضيح لكيفية تعديل حجم الخط في موزيلا فايرفوكس وإكسبلورر، خاصية رائعة، ألا تظن ذلك؟ جمع كل خصائص الخط "font"

استخدام font الخاصية التي يمكنها أن تختصر كل خصائص الخطوط في سطر واحد. فمثلاً تصور هذه السطور الأربعة تصف خصائص خطوط للعنصر

: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }
باستخدام الخاصية التي تختصر الخصائص الأخرى يمكن للسطور الأربعة أن تبسط بهذا الشكل: p { font: italic bold 30px arial, sans-serif; }
قائمة قيم الخاصية font ترتب بهذا الشكل:
font-style | font-variant | font-weight | font-size | font-family ملخص

تعلمت في هذا الدرس بعض الإمكانيات المتعلقة بالخطوط، تذكر أن أحد أهم مميزات استخدام CSS لتحديد الخطوط هو إمكانية تغيير الخط لكل صفحات الموقع خلال دقائق قليلة، CSS يمكنها أن توفر الوقت وتجعل حياتك أكثر سهولة، في

الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
الزعيم
Admin
Admin


mms mms : mms
وسام التميز : وسام التميز
الاوسمة : الأدارة
ذكر
الثور
عدد المساهمات : 1169
تاريخ التسجيل : 18/03/2010
العمر : 28
الموقع الموقع : www-aloamed.ace.st
المزاج المزاج : ممتاز

لعبة عالمية
مرئي للجميع مرئي للجميع: 1

مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:10 am

الدرس 5: النصوص

تنسيق وإضافة طراز إلى النصوص هي مسئلة أساسية لمصممي المواقع، في هذا الدرس ستأخذ مقدمة حول الأساليب العجيبة التي تقدمها CSS لتنسيق النص، سنتحدث عن هذه الخصائص في هذا الدرس:

  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform
وضع فارغ قبل أول سطر "text-indent"

الخاصية text-indent تسمح لك بإضافة لمسة أنيقة إلى الفقرات بوضع مسافة فارغة قبل أول سطر من الفقرة، في المثال أدناه وضعنا القيمة 30px لكل الفقرات التي تستخدم العنصر

: p { text-indent: 30px; }


  • شاهد المثال
محاذاة النص "text-align"

خاصية text-align تشبه في HTML خاصية "align" التي كانت تستخدم في الماضي، النص يمكن محاذاته نحو اليسار "left" أو اليمين "right" أو في المنتصف "centred" وبالإضافة إلى ذلك القيمة justify ستقوم بمحاذاة النص من الجانبين كما تفعل بعض الصحف والمجلات. في المثال أدناه النص في رأس الجدول
قمنا بمحاذاته نحو اليمين، بينما البيانات في الجدول حاذيناها نحو المنتصف أما النص في الفقرات فقمنا بمحاذاته من الجانبين: th { text-align: right; } td { text-align: center; } p { text-align: justify; }


  • شاهد المثال
زخرفة النص "text-decoration"

الخاصية text-decoration تمكنك من إضافة زخارف أو تأثيرات على النص، فمثلاً يمكنك أن تضيف سطراً أسفل النص، أو فوقه أو عليه، في المثال الآتي كل عناصر

وضعنا أسفلها خطاً أما

فهي العناوين التي فوقها خط و

قمنا بوضع الخط عليها. h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }


  • شاهد المثال
المسافة بين الحروف "letter-spacing"

The spacing between text characters can be specified using the property letter-spacing، القيمة المحددة لهذه الخاصية هي ببساطة عرض المسافة التي تريدها بين كل حرف وآخر، فمثلاً إذا أردت مسافة 3px بين الحروف في الفقرات

و6px بين الحروف في العناوين

فعليك أن تكتب الخصائص بهذا الشكل: h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }


  • شاهد المثال
تحويل النص "text-transform"

خاصية text-transform تتحكم بحجم الخط في اللغات الغربية، يمكنك أن تختار بين القيم capitalize أو uppercase أو lowercase، وبغض النظر عن كيفية ظهور النص الأصلي. فمثلاً كلمة "headline" يمكن أن تظهر للمستخدم بهذا الشكل "HEADLINE" أو بهذا الشكل "Headline"، هناك أربع قيم يمكنك استخدامها مع القيم text-transform: capitalizeتقوم بتكبير الحرف الأول من كل كلمة مثال: "john doe" ستصبح "John Doe".uppercaseتجعل كل الحروف كبيرة، مثال: "john doe" ستصبح "JOHN DOE".lowercaseستجعل كل الحروف صغيرة، مثال: "JOHN DOE" ستصبح "john doe".noneلن تقوم بعمل أي تأثير، النص سيظهر كما كتب في ملف HTML. كمثال، سنقوم باستخدام قائمة أسماء، الأسماء كلها تستخدم العنصر
  • (list-item)، ولنقل أننا نريد الأسماء أن يظهر حرفها الأول كبيراً أما العناوين فنريد كل حروفها كبيرة. جرب وألقي نظرة على HTML لهذا المثال وسترى أن النص الأصلي كتب بحروف صغيرة. h1 { text-transform: uppercase; } li { text-transform: capitalize; }


    • شاهد المثال
    ملخص

    في الدروس الثلاثة الأخيرة تعلمنا الكثير من خصائص CSS، لكن هناك الكثير في هذه التقنية، في
  • الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
    الزعيم
    Admin
    Admin


    mms mms : mms
    وسام التميز : وسام التميز
    الاوسمة : الأدارة
    ذكر
    الثور
    عدد المساهمات : 1169
    تاريخ التسجيل : 18/03/2010
    العمر : 28
    الموقع الموقع : www-aloamed.ace.st
    المزاج المزاج : ممتاز

    لعبة عالمية
    مرئي للجميع مرئي للجميع: 1

    مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:12 am

    الدرس 6: الروابط

    يمكنك أن تطبق ما تعلمته فعلاً في الدروس السابقة على الروبط (مثال: تغيير الألوان، الخطوط، وضع خط أسفل الروابط، إلخ) الجديد هنا أن CSS تسمح لك بتحديد خصائص مختلفة بحسب حالة الرابط إن لم يزر المستخدم الرابط أو زاره أو كان نشطاً أو كان مؤشر الفأرة فوق الرابط، كل هذا يمكنك من إضافة مؤثرات جميلة ومفيدة على الروابط، للتحكم بهذه التأثيرات يجب أن تستخدم ما يسمى pseudo-classes. ما هي الفئة المزيفة؟

    الفئة المزيفة أو pseudo-class يسمح لك بأن تأخذ في عين الاعتبار مختلف الحالات والأحداث عندما تقوم بتحديد خصائص لعنصر في HTML. لنلقي نظرة على المثال، كما تعرف الروابط تحدد في HTML من خلال الوسم لذلك يمكننا أن نستخدم a كمنتقي في CSS: a { color: blue; }
    الرابط له عدة حالات، فمثلاً يمكن أن يزوره المستخدم أو لا يفعل، لذلك يمكنك أن تستخدم فئة مزيفة لكي تحدد شكلاً مختلفاً للرابط الذي زاره المستخدم عن الرابط الذي لم يزره بعد. a:link { color: blue; } a:visited { color: red; }
    استخدم a:link وa:visited للروابط التي زارها أو لم يزرهاالمستخدم، الروابط يمكن أن تكون نشطة لها فئة مزيفة خاصة وهي a:active أما a:hoverفهي الحالة التي يكون فيها مؤشر الفأرة فوق الرابط. سنقوم الآن بعرض الحالات الأربع للروابط مع المزيد من الشرح والأمثلة. الفئة المزيفة: link

    الفئة المزيفة :link تستخدم للروابط التي تقود المستخدم إلى صفحات لم يزرها. في المثال أدناه الروابط التي لم يزرها المستخدم ستظهر بلون أزرق فاتح. a:link { color: #6699CC; }


    • شاهد المثال
    الفئة المزيفة: visited

    الفئة المزيفة :visited تستخدم للروابط التي زارها المستخدم، المثال أدناه سيجعل كل الروابط التي زارها المستخدم بلون بنفسجي غامق: a:visited { color: #660099; }


    • شاهد المثال
    الفئة المزيفة: active

    الفئة المزيفة :active تستخدم للروابط النشطة. في المثال أدناه كل الروابط النشطة ستظهر بخلفية صفراء: a:active { background-color: #FFFF00; }


    • شاهد المثال
    الفئة المزيفة: hover

    الفئة المزيفة :hover تستخدم عندما يكون مؤشر الفأرة فوق الرابط. يمكن استخدام هذه الفئة لإنشاء مؤثرات جميلة، فمثلاً إذا أردنا أن تكون الروابط ملونة بالبرتقالي ومائلة عندما نضع مؤشرة الفأرة عليها فعلينا أن نكتب CSS بهذا الشكل: a:hover { color: orange; font-style: italic; }


    • شاهد المثال
    المثال 1: المؤثرات تظهر عندما يوضع مؤشر الفأرة على الرابط

    هذه مشهورة لإنشاء مؤثرات مختلفة عندما يوضع مؤشر الفأرة على الرابط، لذلك سنلقي نظرة على المزيد من الأمثلة المتعلقة بالفئة الزائفة :hover. مثال 1أ: وضع مسافات بين الحروف

    كما تتذكر في الدرس 5 تعلمنا أن المسافة بين الحروف يمكن أن تعديلها باستخدام الخاصية letter-spacing، هذا يمكن تطبيقه على الروابط لإنشاء مؤثرات خاصة: a:hover { letter-spacing: 10px; font-weight:bold; color:red; }


    • شاهد المثال
    مثال 1ب: الحروف الكبيرة والصغيرة

    في الدرس 5 ألقينا نظرة على الخاصية text-transform والتي يمكنها تغيير حالة الأحرف بين الصغيرة والكبيرة، هذا يمكن استخدامه أيضاً كمؤثر على الروابط: a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }


    • شاهد المثال
    في المثالين يمكن أن تأخذ فكرة عن الإمكانيات اللامتناهية لدمج بين العديد من الخصائص، يمكنك أن تقوم بإنشاء مؤثرات من ابتكارك، جرب! مثال 2: إزالة السطر من أسفل الرابط

    أحد أكثر الأسئلة تكراراً هو كيف أزيل الخط من أسفل الرابط؟ يجب أن تفكر جيداً قبل أن تزيل الخط من أسفل الرابط، لأنه قد يجعل استخدام موقعك أكثر صعوبة، الناس اعتادوا على أن يرو الخطوط بلون أزرق وبخط أسفلها يميزها عن بقية النصوص الأخرى، ويعلمون أنهم يستطيعون الضغط عليها حتى والدتي تعلم ذلك! إذا أزلت الخط من أسفل الروابط وغيرت ألوانها فأنت تزيد من فرصة عدم فهم الزائر لموقعك وتشتته وبهذا لن يستفيدوا من محتويات موقعك. على أي حال، إزالة الخط من أسفل الروابط سهل جداً، كما تتذكر في الدرس 5 الخاصية text-decoration يمكنها أن تستخدم لتحديد ما إذا كان هناك خط سيظهر أسفل النص أم لا، لإزالة الخط السفلي قم بوضع القيمة none للخاصية text-decoration. a { text-decoration:none; }
    يمكنك أيضاً أن تفعل ذلك مع الحالات الأربع للرابط: a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; }


    • شاهد المثال
    ملخص

    في هذا الدرس تعلمنا الفئة الزائفة، واستخدمنا بعض الخصائص من الدروس السابقة، هذا يجب أن يعطيك فكرة عن الإمكانيات التي تستطيع CSS أن تقدمها. في
    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
    الزعيم
    Admin
    Admin


    mms mms : mms
    وسام التميز : وسام التميز
    الاوسمة : الأدارة
    ذكر
    الثور
    عدد المساهمات : 1169
    تاريخ التسجيل : 18/03/2010
    العمر : 28
    الموقع الموقع : www-aloamed.ace.st
    المزاج المزاج : ممتاز

    لعبة عالمية
    مرئي للجميع مرئي للجميع: 1

    مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:13 am

    الدرس 7: المطابقة والتجميع للعناصر class وid

    في بعض الأحيان تود أن تفعل خصائص ما على مجموعة أو فريق من العناصر، في هذ الدرس سنلقي نظرة على كيفية استخدام الفئات class والمعرفات id لتحديد خصائص معينة لعناصر مختارة. كيف تختار لوناً محدداً لعنوان يختلف عن بقية العناوين في موقعك؟ كيف يمكنك أن تجمع بين روابط مختلفة وكل مجموعة تضعها في قسم مختلف وكل قسم له تصميم خاص؟ هذه أمثلة سنجيب عليها في هذا الدرس. تجميع العناصر باستخدام الفئات "class"

    لنقل بأن لدينا قائمتين من الروابط لأصناف مختلفة من الثمار، الخضار والفواكه، القائمتين في ملف HTML ستكونان بهذا الشكل:

    الخضار:

    فواكه:




    • شاهد المثال
    نريد أن تكون قائمة روابط الخضروات باللون الأصفر، وقائمة الفواكه باللون الأحر وبقية الروابط تبقى باللون الأزرق. لإنجاز هذا نقسم الروابط إلى مجموعتين، يمكن فعل ذلك بتحديد فئة لكل رابط باستخدام الخاصية class. لنقم بتحديد فئات للمثال أعلاه:

    خضار:

    فواكه:


    يمكن الآن تحديد خصائص محددة للروابط التي تتبع فئة الخضروات أو الفواكه بهذا الشكل: a { color: blue; } a.veg { color: #FFBB00; } a.fru { color: #800000; }


    • شاهد المثال
    كما ترى في المثال، يمكنك أن تحدد خصائص لعناصر معينة تتبع مجموعة محددة باستخدام الفائت .classname في ملف التصميم. تحديد معرف خاص لعنصر معين من خلال id

    بالإضافة إلى تجميع العناصر من خلال الفئات، لعلك ترغب في تحديد معرف لخاصية محددة، هذا يمكن إنجازه من خلال الخاصية id. المميز في الخاصية id هو عدم إمكانية وجود عنصرين يستخدمانه في نفس الملف، أي لا يمكن لعنصرين أن يستخدما معرفاً id واحداً في نفس الصفحة، كل معرف id يجب أن يكون مميزاً وفريداً، أما غير ذلك فعليك استخدام الفئات class، دعنا نلقي نظرة على مثال محتمل لكيفية استخدام المعرف id:

    فصل 1

    ...

    فصل 1.1

    ...

    فصل 1.2

    ...

    فصل 2

    ...

    فصل 2.1

    ...

    فصل 2.1.2

    ...
    المثال أعلاه قد يكون عناوين لوثيقة ما تقسم الصفحة إلى أبواب وفصول، من الطبيعي أن نحدد لكل فصل معرفاً خاصاً id كما في المثال الآتي:

    id="c1">فصل 1

    ...

    id="c1-1">فصل 1.1

    ...

    id="c1-2">فصل 1.2

    ...

    id="c2">فصل 2

    ...

    id="c2-1">فصل 2.1

    ...

    id="c2-1-2">فصل 2.1.2

    ...
    لنقل أن عنوان الفصل 1.2 يجب أن يكون باللون الأحمر، يمكن إنجاز ذلك في CSS بهذا الشكل: #c1-2 { color: red; }


    • شاهد المثال
    كما ترى في المثال أعلاه يمكن تحديد خصائص معينة لعنصر معين باستخدام #id في وثيقة التصميم. ملخص

    في هذا الدرس تعلمنا كيف نستخدم المنتقي من نوع class وid، يمكنك الآن أن تحدد خصائص محددة لعناصر معينة.
    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
    الزعيم
    Admin
    Admin


    mms mms : mms
    وسام التميز : وسام التميز
    الاوسمة : الأدارة
    ذكر
    الثور
    عدد المساهمات : 1169
    تاريخ التسجيل : 18/03/2010
    العمر : 28
    الموقع الموقع : www-aloamed.ace.st
    المزاج المزاج : ممتاز

    لعبة عالمية
    مرئي للجميع مرئي للجميع: 1

    مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:14 am

    الدرس 8: تجميع العناصر باستخدام span وdiv

    العنصران و
    يستخدمان لجمع العناصر وإنشاء هيكلية للوثائق وهما يستخدمان معاً مع الخاصيتين class وid. في هذ االدرس، سنلقي نظرة عن قريب على استخدام و
    لأنهما العنصران الأكثر أهمية عندما تتعامل مع CSS.

    • التجميع بالعنصر
    • التجميع بالعنصر

    التجميع بالعنصر

    العنصر هو ما يمكن أن تسميه العنصر المحايد والذي لا يضيف شيئاً للوثيقة نفسها، لكن مع CSS يمكن استخدامه لإنشاء مؤثرات على أجزاء محددة من النص في الوثائق. مثال هذا هو اقتباس من جملة قالها بنجامين فرانكلين:

    Early to bed and early to rise
    makes a man healthy, wealthy and wise.


    لنقل أننا نريد أن نؤكد على ما قاله السيد فرانكلين حول فوائد عدم النوم في النهار بأن نلونها بالأحمر، لهذا الغرض يمكن وضع الكلمات بين وسمي ، كل span أضفنا لها فئة class والتي تمكننا بعد ذلك من إضافة خصائص لها من خلال CSS:

    Early to bed and early to rise
    makes a man healthy,
    wealthy
    and wise.


    أوامر CSS المتعلقة بالمثال: span.benefit { color:red; }


    • شاهد المثال
    بالطبع يمكنك استخدام المعرف id لإضافة الألوان على لكن تذكر أن استخدام المعرف يجب أن يكون لمرة واحدة في الصفحة الواحدة، لذلك في المثال أعلاه عليك أن تستخدم ثلاث معرفات متميزة لكل كما تعلمت في الدرس الماضي. التجميع بالعنصر


    العنصر يستخدم في العناصر كما رأيت في المثال السابق، العنصر
    يستخدم لتجميع العناصر. هذا هو الاختلاف الوحيد، تجميع العناصر باستخدام
    يعمل بنفس الطريقة، لنلقي نظرة على مثال لقائمتين تحويان أسماء الرؤساء الأمريكيين مقسمة حسب الأحزاب التي ينتمون لها:
    • فرانكلين روزفيلت
    • هاري ترومن
    • جون كينيدي
    • ليندون جونسون
    • جيمي كارتر
    • بيل كلينون
    • دوايت أيزنهاور
    • ريتشارد نيكسون
    • جيرالد فورد
    • رونالد ريغان
    • جورج بوش
    • جورج دبليو بوش

    وفي ملف CSS سنستخدم التجميع كما في المثال أعلاه بنفس الطريقة: #democrats { background:blue; } #republicans { background:red; }


    • شاهد المثال
    في الأمثلة لاسابقة استخدامنا
    و بشكل بسيط جداً، بتعديل لون الخلفية والنص، يمكن للعنصرين أن يقدما الكثير من الإمكانيات المتقدمة، على أي حال، لن نتحدث عن هذا حالياً، سنتناول هذا الموضوع لاحقاً في. ملخص

    في الدرس 7 و8، تعلمت حول المنتقي id وclass والعنصرين span وdiv. يجب أن تكون الآن قادراً على تجميع وتحديد كل عناصر ملفات HTML، وهذه خطوة كبيرة في اتجاه إتقان CSS
    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
    الزعيم
    Admin
    Admin


    mms mms : mms
    وسام التميز : وسام التميز
    الاوسمة : الأدارة
    ذكر
    الثور
    عدد المساهمات : 1169
    تاريخ التسجيل : 18/03/2010
    العمر : 28
    الموقع الموقع : www-aloamed.ace.st
    المزاج المزاج : ممتاز

    لعبة عالمية
    مرئي للجميع مرئي للجميع: 1

    مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:15 am

    الدرس 9: نموذج الصندوق

    نموذج الصندوق في CSS يصف الصناديق التي تنشأ من خلال عناصر HTML، نموذج الصندوق يحوي أيضاً خيارات مفصلة حول تعديل الحاشية، الإطار، الحشو والمحتويات لكل عنصر، في المثال التوضيحي أدناه سنعرض أجزاء نموذج الصندوق: نموذج الصندوق في CSS


    الرسم أعلاه يبدو مربكاً بعض الشيء، لذلك لنقم باستخدام نموذج الصندوق في مثال فعلي باستخدام عنوان وبعض النصوص، في HTML وضعنا نصاً مقتبساً من الميثاق العالمي لحقوق الإنسان:

    Article 1:

    All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood


    بإضافة بعض الألوان وتحديد بعض المعلومات حول الخطوط يمكن للمثال أن يصبح بهذا الشكل: المثال يحوي عنصرين

    و

    ، نموذج الصندوق للعنصرين سيظهر بهذا الشكل: حتى لو بدى المثال معقداً، الرسم يوضح كل عنصر في HTML محاط بصناديق، الصناديق يمكن تعديلها من خلال CSS. الخصائص التي تتحكم بالصناديق المختلفة هي: padding وmargin وborder، في الدرسين اللاحقين سنتعامل مع هذه الخصائص الثلاثة.


    • الدرس 10: نموذج الصندوق margin وpadding
    • الدرس 11: نموذج الصندوق border
    عندما تنتهي من الدرسين ستتمكن من التحكم بنموذج الصندوق وتقوم بتعديل ملفات HTML بشكل أفضل وأكثر دقة مقارنة مع استخدام الأسلوب القديم الذي يعتمد على الجداول في HTML. ملخص

    في هذا الدرس تعلمت نموذج الصندوق، في الدروس القادمة سنلقي نظرة أقرب على كيفية إنشاء والتحكم بنموذج الصندوق.

    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
    الزعيم
    Admin
    Admin


    mms mms : mms
    وسام التميز : وسام التميز
    الاوسمة : الأدارة
    ذكر
    الثور
    عدد المساهمات : 1169
    تاريخ التسجيل : 18/03/2010
    العمر : 28
    الموقع الموقع : www-aloamed.ace.st
    المزاج المزاج : ممتاز

    لعبة عالمية
    مرئي للجميع مرئي للجميع: 1

    مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:16 am

    الدرس 10: الحاشية والحشو

    في الدرس الماضي تعرفنا على نموذج الصندوق، في هذ الدرس سنلقي نظرة على كيفية تغيير شكل العناصر بتغيير إعدادات خاصية margin وpadding.

    • تعديل خاصية margin لعنصر ما
    • تعديل خاصية padding لعنصر ما
    تعديل خاصية margin لعنصر ما

    كل عنصر له أربع جوانب، اليمين right، اليسار left، الاعلى top، الأسفل bottom، الخاصية margin تتحكم ببعد كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة، أنظر إلى الرسم التوضيحي في الدرس 9 للمزيد من التوضيح. في المثال الأول لنلقي نظرة على كيفية تحديد الحاشية "margin" للصفحة نفسها أي للعنصر ، الرسم أدناه يوضح كيف نريد للحاشية أن تكون في الصفحة. في ملف CSS سنكتب التالي: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }
    أو يمكننا تجميع كل هذه السطور في سطر واحد أنيق: body { margin: 100px 40px 10px 70px; }


    • شاهد المثال
    يمكنك تحديد الحاشية بنفس الطريقة لمعظم العناصر، فمثلاً يمكنك تحديد الحاشية لكل الفقرات النصية للعنصر

    : body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }


    • شاهد المثال
    تعديل خاصية padding لعنصر ما

    الحشو يمكن التعبير عنه بأنه "ما في داخل العنصر نفسه" والحشو لا يؤثر في المسافية بين العنصر والآخر، بل يحدد المسافة في العنصر نفسه بين محتويات العنصر والإطار. استخدام الحشو "padding" يمكن توضيحه بمثال بسيط حيث كل العناوين لها ألوان خلفية: h1 { background: yellow; } h2 { background: orange; }


    • شاهد المثال
    بتحديد الحشو لكل عنوان يمكن تغيير حجم العنصر الداخلي الذي يحيط بالعنوان من كل جهة: h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; }


    • شاهد المثال
    ملخص

    أنت في طريقك لأن تتقن استخدام نموذج الصندوق في CSS، في الدرس التالي سنلقي نظرة أقرب على الإطارات وكيف نحدد لها ألواناً مختلفة وكيف نستخدمها لنحدد أشكال العناصر.
    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
    الزعيم
    Admin
    Admin


    mms mms : mms
    وسام التميز : وسام التميز
    الاوسمة : الأدارة
    ذكر
    الثور
    عدد المساهمات : 1169
    تاريخ التسجيل : 18/03/2010
    العمر : 28
    الموقع الموقع : www-aloamed.ace.st
    المزاج المزاج : ممتاز

    لعبة عالمية
    مرئي للجميع مرئي للجميع: 1

    مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:17 am

    نموذج الصندوق - الإطارات 11: Borders

    الجداول يمكن استخدامها لأغراض مختلفة، فقد تستخدم للزينة أو للفصل بين شيئين، CSS تعطيك خيارات لا متناهية عندما تستخدم الإطارات في صفحتك.

    • border-width
    • border-color
    • border-style
    • أمثلة لإطارات
    • border
    سماكة الإطار "border-width"

    سماكة الإطار تحدد من خلال القيمة border-width والذي يمكن تحديد قيمته من خلال الكلمات thin وmedium وthick، أو من خلال قيمة رقمية تحدد سمكه بالبكسل، الرسم التوضيحي يبين هذه القيم ونتائجها: ألوان الإطارات "border-color"

    الخاصية border-color تحدد لون الإطارة، قيمة هذه الخاصية هي قيم الألوان العادية مثل "#123456" و"rgb(123,123,123)" أو أسماء الألوان مثل "yellow". أنواع الجداول "border-style"

    هناك أنواع مختلفة من الإطارات يمكنك أن تختار منها، في المثال التوضيحي أدناه هناك 8 أنواع من الإطارات كما يعرضها إكسبلورر 5.5، كل الأمثلة المعروضة تستخدم اللون "gold" وقيمة سماكة الإطار محددة بالقيمة "thick" وتذكر أنك تستطيع عرض الإطار بألوان وسماكة مختلفة. القيم none أو hiddem يمكن أن تستخدم عندما تريد إخفاء الإطار. أمثلة لإطارات

    الخصائص الثلاثة التي ذكرت أعلاه يمكن وضعها مع بعضها البعض لإنشاء جداول مختلفة، لتوضيح ذلك سنلقي نظرة على وثيقة قمنا بتحديد أنواع مختلفة من الإطارات للعنصر

    و

    و
      و

      ، النتيجة قد لا تكون جميلة لكن المثال يوضح الإمكانيات المتعددة: h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }


      • شاهد المثال
      يمكنك أيضاً تحديد خاصية تتعلق بجهة واحدة من الإطار، فتستخدم top للإطار العلوي، وbottom للإطار السفلي، وleft للأيسر، وright للأيمن، وهذا مثال يوضح كيفية فعل ذل: h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }


      • شاهد المثال
      جمع كل الخصائص "border"

      كما هو الحال مع خصائص مختلفة، يمكن أن تجمع بين خصائص الجداول المختلفة في خاصية واحدة، ألقي نظرة على هذا المثال: p { border-width: 1px; border-style: solid; border-color: blue; }
      يمكن اختصارها هكذا: p { border: 1px solid blue; }
      ملخص

      في هذا الدرس تعلمت أن الإطارات في CSS لها عدد لا محدود من الخيارات. في الدرس التالي سنلقي نظرة على نموذج الصندوق وبالتحديد العرض والارتفاع.

    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
    الزعيم
    Admin
    Admin


    mms mms : mms
    وسام التميز : وسام التميز
    الاوسمة : الأدارة
    ذكر
    الثور
    عدد المساهمات : 1169
    تاريخ التسجيل : 18/03/2010
    العمر : 28
    الموقع الموقع : www-aloamed.ace.st
    المزاج المزاج : ممتاز

    لعبة عالمية
    مرئي للجميع مرئي للجميع: 1

    مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:18 am

    الدرس 12: الارتفاع والعرض

    حتى الآن لم نهتم كثيراً بأمر أبعاد العناصر التي قمنا بتعديل تصاميمها، في هذا الدرس سنلقي نظرة على كيفية تحديد ارتفاع وعرض العناصر.

    • width
    • height
    تحديد العرض "width"

    الخاصية width تحدد عرضاً معيناً لعنصر محدد. المثال البسيط أدناه يقدم لنا صندوقاً يمكن أن نكتب فيه نصاً: div.box { width: 200px; border: 1px solid black; background: orange; }


    • شاهد المثال
    تحديد الارتفاع "height"

    في المثال أعلاه لاحظنا أن ارتفاع الصندوق تحدده محتوياته، يمكن التأثير على ارتفاع العنصر باستخدام الخاصية height، فمثلاً لنجرب أن نجعل ارتفاع الصندوق في المثال يبلغ 500 بكسل: div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }


    • شاهد المثال
    ملخص

    في الدروس 9، 10، 11 و12 أعطيناك مقدمة لنموذج الصندوق في CSS، كما ترى نموذج الصندوق يعطيك الكثير من الخيارات الجديدة، ربما قمت باستخدام الجداول في HTML لإنشاء التصاميم، لكن الآن ومع CSS ونموذج الصندوق يجب أن تتمكن من إنشاء تصاميم أنيقة وأكثر دقة وتتوافق أكثر مع المعايير القياسية لمنظمة W3C.
    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
    الزعيم
    Admin
    Admin


    mms mms : mms
    وسام التميز : وسام التميز
    الاوسمة : الأدارة
    ذكر
    الثور
    عدد المساهمات : 1169
    تاريخ التسجيل : 18/03/2010
    العمر : 28
    الموقع الموقع : www-aloamed.ace.st
    المزاج المزاج : ممتاز

    لعبة عالمية
    مرئي للجميع مرئي للجميع: 1

    مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:19 am

    الدرس 13: تعويم العناصر (floats)العناصر يمكن تعويمها إلى اليمين أو اليسار باستخدام الخاصية float، هذا يعني أن الصندوق ومحتوياته ستعوم إلى اليمين أو اليسار من الصفحة، أو من ستعوم إلى إحدى الجهتين ضمن عنصر صندوق آخر، أنظر الدرس 9 للمزيد حول نموذج الصندوق، المثال التالي يوضح مبدأ تعويم العناصر:صندوق عائم إلى اليسارإذا كان لدينا مثلاً نص يلتف حول صورة ستظهر النتيجة بهذا الشكل:صندوق عائم إلى اليسار يحوي صورة والنص يلتف حولهكيف يمكن فعل ذلك؟ملف HTML للمثال أعلاه سيكون بهذا الشكل:
    causas naturales et antecedentes, idciro etiam nostrarum voluntatum... لكي نجعل الصورة تطفو إلى اليسار والنص يحيط بها فعليناً أولاً تحديد عرض الصندوق المحيط بالصورة ثم نعطي للخاصية float القيمة left: #picture { float:left; width: 100px; } * شاهد المثالمثال آخر: الأعمدةخاصية التعويم يمكن استخدامها للأعمدة في الصفحة، لإنشاء عمود عليك ببساطة أن تضع هيكلية للأعمدة في HTML باستخدام
    كما يلي: Haec disserens qua de re agatur et in quo causa consistat non videt...
    causas naturales et antecedentes, idciro etiam nostrarum voluntatum...
    nam nihil esset in nostra potestate si res ita se haberet...
    الآن عرض العمود الذي نريد هو 33% ويمكننا ببساطة أن نعوم كل الأعمدة إلى اليسار باستخدام الخاصية float: #column1 { float:left; width: 33%; } #column2 { float:left; width: 33%; } #column3 { float:left; width: 33%; } * شاهد المثالfloat يمكن أن تحمل القيمة left أو right أو none.الخاصية clearخاصية clear تستخدم للتحكم بوضعية العناصر اللاحقة لأي عنصر الصفحة تم تعويمه.تلقائياً العناصر اللاحقة تحرك لتغطي المساحة حول العنصر الذي تم تعويمه، أنظر إلى المثال أعلاه حيث ترى النص قد التف تلقائياً بجانب صورة بيل غيتس.الخاصية clear يمكنها أن تحمل القيمة left أو right أو both أو none، المبدأ هنا إذا وضعنا لخاصية clear قيمة "both" مثلاً فإن الحاشية العلوية للعنصر ستصبح أسفل الحاشية السفلية لعنصر يعلوه.
    Bill Gates


    causas naturales et antecedentes, idciro etiam nostrarum voluntatum... إذا لم ترغب في أن يلتف النص حول الصورة يمكنك إضافة هذه الخاصية في CSS: #picture { float:left; width: 100px; } .floatstop { clear:both; } * شاهد المثالملخصالتعويم مفيد في حالات كثيرة، ويستخدم غالباً مع وضعية العناصر، في
    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
    الزعيم
    Admin
    Admin


    mms mms : mms
    وسام التميز : وسام التميز
    الاوسمة : الأدارة
    ذكر
    الثور
    عدد المساهمات : 1169
    تاريخ التسجيل : 18/03/2010
    العمر : 28
    الموقع الموقع : www-aloamed.ace.st
    المزاج المزاج : ممتاز

    لعبة عالمية
    مرئي للجميع مرئي للجميع: 1

    مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:21 am

    الدرس 14: وضعية العناصر

    باستخدام وضعية العناصر في CSS يمكن أن تضع أي عنصر في المكان الذي تريده من الصفحة ويمكن لتعويم العناصر أن يساعدك على فعل ذلك أيضاً (إقرأ الدرس 13)، وضعية العناصر في CSS يعطيك الكثير من الخيارات لإنشاء تصاميم متقدمة وعالية الدقة. هذا ما سنتعلمه في الدرس:

    • مبادئ وضعية العناصر في CSS
    • وضعية العناصر المطلقة
    • وضعية العناصر النسبية
    مبادئ وضعية العناصر في CSS

    تصور أن نافذة المتصفح منسقة بهذا النظام: مبدأ وضعية العناصر في CSS هو أنك تستطيع وضع أي صندوق على أساس إحداثيات ونظام محدد. لنقل بأننا نريد أن نضع عنواناً في مكان محدد، باستخدام نموذج الصندوق - إقرأ الدرس 9 - يمكن للعنوان أن يظهر بهذا الشكل: إذا أردنا للعنوان أن يكون موقعه على بعد 100 بكسل من أعلى الصفحة، و200 بكسل من يسار الصفحة فعلينا أن نكتب أوامر CSS بهذه الطريقة: h1 { position:absolute; top: 100px; left: 200px; }
    والنتيجة ستكون بهذا الشكل: كما ترى وضعية العناصر في CSS أسلوب دقيق جداً لوضع العناصر حيث تشاء، وهو أسهل بكثير من تجربة استخدام الجداول لفعل ذلك أو الصور الشفافة أو أي شيء آخر. وضعية العناصر المطلقة

    أي عنصر وضع بشكل مطلق لا يأخذ مساحة في الصفحة، هذا يعني أنه لا يترك فراغاً بعد أن يوضع بشكل مطلق. لوضع أي عنصر بشكل مطلق يجب أن تعطي الخاصية position القيمة absolute، ويمكن أيضاً استخدام الخصائص left وright وtop وbottom لتحديد وضعية الصندوق. كمثال للوضعية المطلقة قمنا بوضع أربع صناديق في الزواية الأربعة للصفحة: #box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px; } #box3 { position:absolute; bottom: 50px; right: 50px; } #box4 { position:absolute; bottom: 50px; left: 50px; }


    • شاهد المثال
    وضعية العناصر النسبية

    لوضع العناصر بشكل نسبي عليك أن تعطي الخاصية position القيمة relative، الاختلاف بين الوضعية النسبية والمطلقة هي كيفية التعامل مع وضع العنصر نفسه. وضعية العنصر النسبية تحسب على أساس وضعه الأصلي في الصفحة، هذا يعني أنك إذا حركت العناصر إلى اليمين أو اليسار أو الأعلى أو الأسفل فإنه سيأخذ مساحة من النص بعد وضعه في مكانه المحدد. كمثال على الوضعية النسبية يمكننا أن نجرب وضع ثلاث صور بشكل نسبي في الصفحة، لاحظ أن الصور تترك مساحة فارغة في أماكنها الأصلية من الصفحة: #dog1 { position:relative; left: 350px; bottom: 150px; } #dog2 { position:relative; left: 150px; bottom: 500px; } #dog3 { position:relative; left: 50px; bottom: 700px; }


    • شاهد المثال
    ملخص

    في الدرسين السابقين تعلمنا تعويم العناصر ووضعها في مكان محدد، طريقتان تعطيانك الكثير من الإمكانيات لبناء صفحات موقعك بدون الحاجة إلى استخدام الأسلوب القديم المتمثل في الصور الشفافة مع الجداول في HTML، استخدا بدلاً من ذلك CSS فهي أكثر دقة وتعطيك الكثير من الخيارات المتقدمة، وهي أسهل في الإدارة وتوفر عليك الكثير من الجهد.
    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
    الزعيم
    Admin
    Admin


    mms mms : mms
    وسام التميز : وسام التميز
    الاوسمة : الأدارة
    ذكر
    الثور
    عدد المساهمات : 1169
    تاريخ التسجيل : 18/03/2010
    العمر : 28
    الموقع الموقع : www-aloamed.ace.st
    المزاج المزاج : ممتاز

    لعبة عالمية
    مرئي للجميع مرئي للجميع: 1

    مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:22 am

    الدرس 15: طبقة فوق طبقة باستخدام z-index

    يمكنها أن تتحكم بالأبعاد الثلاث, العرض والارتفاع والعمق، وقد تحدثنا بما فيه الكفاية عن العرض والارتفاع في الدروس السابقة، في هذ االدرس سنتعلم كيف نضع عناصر مختلفة في طبقات، باختصار هذا يعني ترتيب العناصر لكي نضع بعضها فوق بعض. لهذا الغرض يمكنك أن تعطي لعنصر ما رقم (z-index)، وهذا الخاصية تسمح للعناصر ذات الرقم الأعلى بأن تكون فوق العناصر التي ذات الرقم الأدنى. لنقل بأننا نريد ترتيب صور للعبة الورق، يجب أن نعطي لكل ورقة رقم z-index: في هذه الحالة الأرقام متتابعة (من 1 إلى 5) لكن يمكن تحقيق نفس النتيجة باستخدام خمسة أرقام مختلفة، المهم هو الترتيب المتصاعد. المثال أدناه يوضح كيفية ترتيب البطاقات: #ten_of_diamonds { position: absolute; left: 100px; top: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; } #king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; }


    • شاهد المثال
    ترتيب العناصر فوق بعضها البعض سهل والإمكانيات كثيرة، يمكنك أن تضع الصور فوق النص أو النص فوق الصور أو تضع نصاً فوق نص ... إلخ. ملخص

    الطبقات يمكن استخدامها في الكثير من الحالات، فمثلاً جرب استخدام z-index لإنشاء مؤثرات على العناوين بدلاً من استخدام الصور، فهذا يجعل الموقع أكثر سرعة ويعطيه فرصة للظهور في محركات البحث.
    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
    الزعيم
    Admin
    Admin


    mms mms : mms
    وسام التميز : وسام التميز
    الاوسمة : الأدارة
    ذكر
    الثور
    عدد المساهمات : 1169
    تاريخ التسجيل : 18/03/2010
    العمر : 28
    الموقع الموقع : www-aloamed.ace.st
    المزاج المزاج : ممتاز

    لعبة عالمية
    مرئي للجميع مرئي للجميع: 1

    مُساهمةموضوع: رد: بدء تعلم لغة css   الثلاثاء أكتوبر 12, 2010 3:24 am

    الدرس 16: المعايير القياسية

    منظمة W3C أو World Wide Web Consortium, هي منظمة مستقلة تضع المعايير التقنية لشبكة الويب (مثال: HTML، CSS، XML وغيرها)، مايكروسوفت ومنظمة موزيلا وغيرها من الشركات كلها تشارك في منظمة W3C واتفقت على أن مستقبل شبكة الويب يكمن في المعايير القياسية. إذا سبق لك أن جربت تصميم الموقع فأنت في الغالب تعرف أن هناك احتمال كبير بظهور الموقع بشكل مختلف في متصفحات مختلفة، وإنشاء موقع يظهر بشكل صحيح في كل المتصفحات الحديثة اليوم قد يستهلك الكثير من الوقت ويثير أعصابك. الفكرة من وجود المعايير القياسية المتفق عليها هو وجود تقنيات ويب موحدة، هذا يعني أن مطور الموقع إذا قام بإنشاء موقع فهو يعلم أنه سيظهر بالشكل المطلوب في كل المتصفحات وأنظمة التشغيل، لذلك نفضل أن تقوم باستخدام المعايير القياسية وتقوم بالتأكد من أن ملفات CSS التي قمت بكتابتها تتوافق مع هذه المعايير.. مدقق CSS

    لتبسط عملية تعلم معايير CSS قامت منظمة W3C بتطوير أداة تدقيق تقوم بقراءة ملفات CSS وتعطيك النتائج مع الأخطاء والتحذيرات إن كان ملف CSS يحوي أي خطأ. ولكي نبسط عليك الأمر يمكنك أن تتأكد بنفسك من صحة ملفات CSS مباشرة من هذه الصفحة، ببساطة ضع عموان ملف CSS الخاص بموقعك واضغط على زر "تدقيق" وستنتقل إلى موقع W3C لترى النتيجة وتعرف الأخطاء إن وجدت. إذا لم يجد المدقق أية أخطاء ستظهر لك هذه الصورة والتي يمكنك أن تضعها في موقعك لتبين بأنك تستخدم المعايير القياسية: المدقق يمكن إيجاده على هذا الرابط: http://jigsaw.w3.org/css-validator/
    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    معاينة صفحة البيانات الشخصي للعضو http://www-aloamed.ace.st
     
    بدء تعلم لغة css
    استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
    صفحة 1 من اصل 1

    صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
    منتدى الوميض العربي :: التعليم البرمجة :: تعليم لغة البرمجة .html=css-
    انتقل الى: