دورة CSS (( الجزء الثاني ))

[walid]

http://www.dzbatna.com/images/icons/iconrote.gif ط¯ظˆط±ط© CSS (( ط§ظ„ط¬ط²ط، ط§ظ„ط«ط§ظ†ظٹ )) (http://www.dzbatna.com/t1055188/)



السلام عليكم

كما وعدتكم و ها أنا أفي بوعدي

هذا هو الدرس مفصل الثاني من دورة CSS

و هذه هي عناصر الدرس مفصل :

1 - أنواع الانماط .
2 - المعايير القياسية .
3 - النزول إلى سطر جديد .
4 - تغيير الألوان في HTML .

العنصر الأول :

أنواع الأنماط :

يوجد ثلاث أنواع للأنماط

النمط الأول : و هو ما يعرف بالنمط الداخلي .
النمط الثاني : و هو ما يعرف بالنمط الخارجي .
النمط الثالث : سنتناوله بالدروس المتقدمة .

النمط الداخلي :

إن النمط الداخلي هو النمط الذي يوضع به كود code CSS داخل صفحة HTML

عن طريق الوسم رمز PHP:

<code style="white-space:nowrap"> <code> <style></style>
</code> </code>

النمط الخارجي :

إن النمط الخارجي هو النمط الذي يتم استدعاء كود code CSS من خلال صفحة HTML

عن طريق الوسم : رمز PHP:

<code style="white-space:nowrap"> <code> <link></link>
</code> </code>

العنصر الثاني :

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

كما ذكرت في الدرس مفصل الأول

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

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

و يجب أن تكون المواقع بلغة XHTML بدون أخطاء لكي تعمل وفق المعايير القياسية

و تعريف لغة XHTML هو :

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

و ما اللغة إلا مجموعة من الشروط التي يجب أن تعملها في أكواد HTML


سنتناول شرطين في العنصرين القادمين :

العنصر الثالث :

النزول إلى سطر جديد

إن جميع المبرمجين المتمكنين يعرفون أنه للنزول إلى سطر جديد في لغة HTML يستخدم الوسم : رمز PHP:

<code style="white-space:nowrap"> <code> <BR>
</code> </code>

و هذا الوسم لا يغلق كغيره من الأوسام

و وسم الإغلاق يؤدي نفس عمل وسم الفتح

فلا فرق بين رمز PHP:

<code style="white-space:nowrap"> <code> <BR>
</code> </code>

و

رمز PHP:

<code style="white-space:nowrap"> <code> </BR>
</code> </code>

في الشكل و لكن من شروط XHTML استخدام هذا :

رمز PHP:

<code style="white-space:nowrap"> <code> </BR>
</code> </code>

و الإثنان يؤديان نفس العمل ..

العنصر الرابع :

تغيير الألوان في HTML :

سنأخذ تغيير لون شيئ واحد فقط في HTML هذا الدرس مفصل و لكن سنأخذ الباقي بشكل أوسع في الدروس القادمة

لكتابة جملة joomla أو كلمة نستخدم :

رمز PHP:

<code style="white-space:nowrap"> <code> <p></p>
</code> </code>

و بين وسمي الإغلاق نضع الكلمة أو الجملة joomla المراد ظهورها

و ستظهر بخط أسود صغير

و لتغيير اللون نستخدم الوسم رمز PHP:

<code style="white-space:nowrap"> <code> <font></font>
</code> </code>

و نضعهما بين وسمي رمز PHP:

<code style="white-space:nowrap"> <code> <p></p>
</code> </code>

و نضع بين وسمي رمز PHP:

<code style="white-space:nowrap"> <code> <font></font>
</code> </code>

الكلمة أو الجملة joomla المراد كتابتها




ثم نضع الخاصية color الخاصة بالوسم font

و دائما نضع الخواص في وسم الفتح لا وسم الإغلاق ..

فيصبح الكود code كاملا كالتالي :

رمز PHP:

<code style="white-space:nowrap"> <code> <p><font color="#FF0000">This Is Examble For Changing Color In HTML</font></p>
</code> </code>


و يجب وضع رقم اللون بين إشارتي التنصيص الواقعة بعد الخاصية color و إشارة المساواة

و كمثال أنا استخدمت اللون الأحمر و رقمه هو : FF0000

فنضع قبلها هذه الإشارة : رمز PHP:

<code style="white-space:nowrap"> <code> #
</code> </code>

الواقعة فوق رقم الثلاثة

فيكون كاملا بين إشارتي التنصيص كالتالي : رمز PHP:

<code style="white-space:nowrap"> <code> #FF0000
</code> </code>

و الشرط الذي تحدثت عنه و هو يتعلق بالخواص

كمثال :

لا فرق بين الكود code التالي : رمز PHP:

<code style="white-space:nowrap"> <code> <font color="#FF0000">
</code> </code>

و

رمز PHP:

<code style="white-space:nowrap"> <code> <font color=#FF0000>
</code> </code>

إلا بإشارتي التنصيص الواقعتين بعد الخاصية color

و لكن من شروط XHTML و المعايير القياسية وضع إشارتي التنصيص بالرغم أنه لن يظهر أي فرق في حال عرض الكود codeين

أتمنى أنكم فهمتوا الدرس مفصل الثاني و اتمنى أن يحاز على رضاكم و اعجابكم

و لأي استفسار أنا حاضر و بالخدمة

تحياااااتي ..






ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©