CSS (الدرس الرابع) : نموذج الصندوق ( الحاشية و الحشو - الإطارات - الإرتفاع و العرض )

[ريفــــــــــــــــان]

المشاركة الأصلية كتبت بواسطة محمد جبلي أنظري إلى تطبيقك أختي ريفان بعد التعديل البسيط عليه تطبيق هل الفايرفوكس هو السبب ؟؟

،

بارك الله فيكم . .

وجدت الأخطاء . .

كان المفترض ألا تكون موجودة لأنها من البديهيات . .

لكن الحمد لله على كل حال . .

[ سبحان الله وبحمده ،، سبحان الله العظيم ]
،

[زهرة البيلسان]

بودي لو نستعجل قليلاً قبل أن تزحمنا الاختبارات و المشاريع ..

[محمد جبلي]

المشاركة الأصلية كتبت بواسطة زهرة البيلسان بودي لو نستعجل قليلاً قبل أن تزحمنا الاختبارات و المشاريع ..

غداً بإذن الله سينزل الدرس الجديد

وسيكون لمدة قصيرة وليس كالدرس هذا

في هذا الدرس .. حاولنا إنتظار الجميع

لكن ....

بإذن الله من الدرس القادم ستتغير السياسة اللي متبعها الفريق

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

بالتوفيق

[aroma]

لي عودة بحل الواجب إن شاء الله ,,

<الدرس صعب : /

في هذا الدرس .. حاولنا إنتظار الجميع لكن ....

أعتذر ..عندي من الأشغال ..ما الله به عليم ,,

بارك الله فيكم ,,

[محمد جبلي]

<الدرس صعب : /

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

الدرس سهل بل أسهل من السهولة بنفسها

وأنت قادرة عليه بل على الدروس الأقل سهولة في اللغات القادمة

حــاولي وضعي محاولاتك
وأسألي

وبإذن الله سنشرح بالتفصيل للنقطه اللي موفاهتمها

طبقي كل درس لوحده بعدين أجمعي التطبيقات في تطبيق واحد
لا تحاولي الحفظ نهائياً
فقط إفهمي الطريقة و جربي

لن تتعلمي اذا لم تخطئي

إستخدمي محررات تساعدك مثل HTMLPad 2007

للأسف أنا أعمل مثل طريقتك
أنظري الى توقيعك
يتكلم عن الـلغة الإنجليزية و التصميم
أنا وللأسف دائما أحبط نفسي ب3 جمل

# الإنجليزي صعب و هو مشكلتي في التعلم
# التصميم يحتاج له إحساس فني وأنا ماعندي إحساس فني
# أنا ما أقدر أحفظ نهائياً

هذي الثلاثة الجمل في الأعلى سيطرت على عقلي و جميع كياني
قد يرى الناس إني اعرف إنجليزي الى حد ما لكن أنا في داخلي سيطرت على جملتي
واشوف أكبر عقبة في مرحلة تعلمي الإنجليزي

و أبغى أصمم نفسي أتعلم الفوتوشوب والفلاش وأصمم
لكن أنا أصلا ما أعطيت لنفسي مجال للمحاولة
مباشرةً قلت الجملة دي اللي سيطرت علي
مع إني مرة وحدة حاولت أصمم لشخص كهدية بسيطة
و أعجب بها و بل حتى أخرون أعجبوا بها
لكن رجعت وتركت التصميم لأن الجملة مسيطرة علي

أنا أعرف إني في مشكلة
بس مني قادر أنسى هذي الجمل اللي سيطرت علي
وكمان محد يبغى يكسب في أجر و يدلني على الطريقة اللي أمسح بيها هذه الجمل من عقلي

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

بالتوفيق

[أم يوسف]

تطبيقي

لم أعرف ماذا أكتب فيه..
فتركته فارغاً..

css4

ملف css

http://omyousef83.googlepages.com/style4.css

[aroma]

شكر الله لك مشرفنا

ها هو تطبيقي ,,

CSS4

css4


بارك الله فيك ,, و ,, نفع بك

[محمد جبلي]

|| مراجعي لي ||

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

* نموذج الصندوق في CSS يصف الصناديق التي تنشأ من خلال عناصر HTML

* نموذج الصندوق يحوي أيضاً خيارات مفصلة حول تعديل الحاشية، الإطار، الحشو والمحتويات لكل عنصر

* صورة لتقريب الفكرة :



الرسم يوضح كل عنصر في HTML محاط بصناديق، الصناديق يمكن تعديلها من خلال CSS.

الخصائص التي تتحكم بالصناديق المختلفة هي: padding وmargin وborder

فـلاش يشرح فكرة الصندوق ( بالإنجليزي .. أتمنى تعريب فكرة الفلاش ممن يعرف إستخدام الفلاش )



غداً نكمل بإذن الله

[محمد جبلي]

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

الدرس يتلخص في شيئين :

margin : تتحكم ببعد كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة

padding : يحدد المسافة في العنصر نفسه بين محتويات العنصر و الإطار

هناك طريقتين لكتابة الـ margin أو padding وهي :
الأولى كتابة كل خاصية لوحدها مثلاً :

كود PHP:

body {
    margin-top: 100px;
    margin-right: 40px;
    margin-bottom: 10px;
    margin-left: 70px;
} 


الثانية تجميعها في سطر واحد مثلاً :

كود PHP:

body {
    margin: 100px 40px 10px 70px;
} 


يجب أن ننتبه الى أنه في الطريقة الثانية يجب كتابة كل القيم
وعدم ترك إحداها .. لأن ترك أحدها يأثر على البقيه .. لأن الترتيب مهم

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

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

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

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

أنواع الإطارات "border-style"
للإطارات عدة انواع مذكورة
القيم none أو hidden يمكن أن تستخدم عندما تريد إخفاء الإطار

جمع كل الخصائص "border"
يجب أن نتنبه عند جمع خصائص border أن نكتب كل القيم
وعدم ترك قيمة ,, لأن الترتيب مهم

معلومة مهمة :
بإمكاننا إستخدام الفئة المزيفة أو pseudo-class مع الإطارات
وقد عملت ذلك في تطبيقي

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

تحديد العرض "width"
الخاصية width تحدد عرضاً معيناً لعنصر محدد

تحديد الارتفاع "height"
الخاصية height تحدد إرتفاع معيناً لعنصر محدد


التطبيق

الصفحة :
خطر التلفاز

ملف الـ CSS :
CSS

الحمد لله

[محمد جبلي]

المشاركة الأصلية كتبت بواسطة أم يوسف تطبيقي لم أعرف ماذا أكتب فيه.. فتركته فارغاً.. css4 ملف css http://omyousef83.googlepages.com/style4.css

رآئع أم يوسف

ماشاء الله التطبيق مافيه أي خطأ

تستاهلي عليه ..


موفقة أستاذتنا

[محمد جبلي]

المشاركة الأصلية كتبت بواسطة aroma شكر الله لك مشرفنا ها هو تطبيقي ,, CSS4 css4 بارك الله فيك ,, و ,, نفع بك

أستاذة أروما

ملف الـCSS فيه خطأ بسيط جداً

راجعي هذا الرابط :
W3C CSS Validator results for http://aroma.ma3ali.googlepages.com/ggg.css

بالنسبة لصفحة ..
أتمنى تراجعي الـ XHTML
وتعرفي ضوابطها .. الـXHTML لها ضوابط معينه
وترى هي سلهة جداً

أنتي معرفة الصفحة على إنها XHTML "الشديد" يعني اللي ماتمشي أي خطأ أو وسم مستنكر !
لكن ما ألتزمتي بالضوابط حقتها نهائياً

فلو عرفتيها على إنها HTML كان الأخطاء قلت بدرجة كبير أو أنعدمت

يعني مشكلتك فقط في معرفة ضوابط الـXHTML السهلة
راجعي دروس الـXHTML بالذات الدروس حقت الفرق بين HTML و XHTML
ورح تبدعي بإذن المولى

أستاذة أروما أغبطك على معرفة اللغة الإنجليزية (ماشاء الله تبارك الله)
ولو كنت مثلك أعرفها كان ماوقف في وجهي عائق في تعلم أي لغة برمجة أو تصميم مواقع نهائياً

أنتظر تعديلك أيتها المبدعة

بالتوفيق