http://www.dzbatna.com/images/icons/icon30.gif ط§ظ„ط¯ط±ط³ ط§ظ„ط£ظˆظ„ ظپظٹ CSS (ط¯ظˆط±ط© طھط¹ظ„ظ… ط§ظ„ط¨ط±ظ…ط¬ط©)

---

السلام عليكم ورحمة الله وبركاته

في تكملة لدورة تعلم البرمجة ، سنبدأ اليوم في دروس للCSS

لغة تنسيق المواقع ، وهي مهمة جداً جداً ، ولا أظن ان هنالك موقع من المواقع الإحرافية لا يستعملها .

هنالك إصدارين من هذه اللغة CSS 2 وهي مدعومة من كل المصفحات

والCSS3 وتدعمها المصفحات الحديثة فقط

سنبدأ بالسي اس اس 2 ثم ننتقل ل3

لغة السي اس اس تعتبر مكملة للغة الهتمل .

تستخدم لتنسيق صفحة الويب ، التحكم في أماكن الأشكال والنصوص والصور والتحكم في خواص الوسوم من حيث الشكل .

مثلاً مربع ، يمكنك وضعه علي اليمين وتلوينه وإضافة صورة له وكل هذا بواسطة السي اس اس .

قبل أن نبدأ يجب ان نعرف ان لأي وسم من وسوم الهتمل خاصييتين للتمييز بينهما .

الأي دي id

والكلاس class

في السي اس اس لإعطاء قيم ، كمثلاً اللون لأي شئ في الصفحة ونفترض أنه الh1

نكتب الوسم h1 وفقط

لكن لو عندنا في الصفحة أكثر من h1 ???

سنستخدم الكلاسات او الأي دي .

سنعطي خاصية للوسم وستكون اما كلاس او أي دي هكذا :

">

وقيمة الكلاس أو الأي دي تكون أي شئ تريده وتحفظ هذه القيمة لأنك ستحتاجها عند التعديل علي شكل الh1 في الCSS

ملفات السي اس اس صيغتها .css

قم بعمل ملف جديد وسميه مثلاً test.htm وملف آخر test.css

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

External,Internal,InLine

External

أي انك تقوم بوضع اكواد السي اس اس في ملف خارجي وإستدعاء هذا الملف في كود code html

Internet

وهي ان تقوم بوضع اكواد السي اس اس داخل ملف الhtml

Inline

ان تقوم بوضع خواص السي اس اس لكل وسم عن طريق إضافة خاصية تسمي style

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

External

سنقوم بعمل ملف سي اس اس عادي .css

ثم نذهب إلي ملف الHTML وفي جزء الhead

سنضع هذا الكود code :

ونستبدل الtest.css باسم ملف السي اس اس الذي أنشئته .

هكذا انت قمت بربط ملف الهتمل بملف السي اس اس .

هذه كانت الطريق الأول External

Internal

في جزء الhead ضع هذا الوسم :

وفي الوسط ضع الأكواد التي تريدها .

Inline

في السطر وهي لا يفضل إستخدامها لأن لو أردت تعدل علي الكود code لاحقاً سصاب بعقدة نفسية http://www.thedevdot.com/wordpress/w.../omg_smile.gif

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

سيكون مثلاً هكذا :

Thedevdot

سنضع له خاصية style

وقيمتها ستكون خواص السي اس اس التي تريد اضافتها لهذا الوسم .

سنعمل في دورتنا علي نظام external

الدرس مفصل القادم سنوضح خواص السي اس اس والدرس مفصل الذي بعده سيكون عن الCSS 3

بالتوفيق







المصدر:درس مفصل في css | نقطة مطور

ألعاب الأندرويد مجانا و حصريا

https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©