ط§ظ„ط¯ط±ط³ ط§ظ„ط£ظˆظ„ ظپظٹ CSS (ط¯ظˆط±ط© طھط¹ظ„ظ… ط§ظ„ط¨ط±ظ…ط¬ط©)



السلام عليكم ورحمة الله وبركاته
في تكملة لدورة تعلم البرمجة ، سنبدأ اليوم في دروس للCSS
لغة تنسيق المواقع ، وهي مهمة جداً جداً ، ولا أظن ان هنالك موقع من المواقع الإحرافية لا يستعملها .
هنالك إصدارين من هذه اللغة CSS 2 وهي مدعومة من كل المصفحات
والCSS3 وتدعمها المصفحات الحديثة فقط
سنبدأ بالسي اس اس 2 ثم ننتقل ل3
لغة السي اس اس تعتبر مكملة للغة الهتمل .
تستخدم لتنسيق صفحة الويب ، التحكم في أماكن الأشكال والنصوص والصور والتحكم في خواص الوسوم من حيث الشكل .
مثلاً مربع ، يمكنك وضعه علي اليمين وتلوينه وإضافة صورة له وكل هذا بواسطة السي اس اس .
قبل أن نبدأ يجب ان نعرف ان لأي وسم من وسوم الهتمل خاصييتين للتمييز بينهما .
الأي دي id
والكلاس class
في السي اس اس لإعطاء قيم ، كمثلاً اللون لأي شئ في الصفحة ونفترض أنه الh1
نكتب الوسم h1 وفقط
لكن لو عندنا في الصفحة أكثر من h1 ???
سنستخدم الكلاسات او الأي دي .
سنعطي خاصية للوسم وستكون اما كلاس او أي دي هكذا :
<h1 class=&quot;heading12&quot;></h1>
وقيمة الكلاس أو الأي دي تكون أي شئ تريده وتحفظ هذه القيمة لأنك ستحتاجها عند التعديل علي شكل الh1 في الCSS
ملفات السي اس اس صيغتها .css
قم بعمل ملف جديد وسميه مثلاً test.htm وملف آخر test.css
لنوضح في البداية أنه هنالك العديد من الطرق لكتابة لغة السي اس اس
External,Internal,InLine
External
أي انك تقوم بوضع اكواد السي اس اس في ملف خارجي وإستدعاء هذا الملف في كود code html
Internet
وهي ان تقوم بوضع اكواد السي اس اس داخل ملف الhtml
Inline
ان تقوم بوضع خواص السي اس اس لكل وسم عن طريق إضافة خاصية تسمي style
سنشرح طريقة كل واحدة علي حدي وأنا أفضل إسخدام الExternal وهو خيار معظم المبرمجين لتوفير التنظيم في السكربت
External
سنقوم بعمل ملف سي اس اس عادي .css
ثم نذهب إلي ملف الHTML وفي جزء الhead
سنضع هذا الكود code :
<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;test.css&quot;>
ونستبدل الtest.css باسم ملف السي اس اس الذي أنشئته .
هكذا انت قمت بربط ملف الهتمل بملف السي اس اس .
هذه كانت الطريق الأول External
Internal
في جزء الhead ضع هذا الوسم :
<style type=&quot;text/css&quot;>
</style>
وفي الوسط ضع الأكواد التي تريدها .
Inline
في السطر وهي لا يفضل إستخدامها لأن لو أردت تعدل علي الكود code لاحقاً سصاب بعقدة نفسية
طريقتها سهلة ، مثلاً أردنا إضافة خاصية لوسم h1 الذي يعرض الشعار .
سيكون مثلاً هكذا :
<h1>Thedevdot</h1>
سنضع له خاصية style
وقيمتها ستكون خواص السي اس اس التي تريد اضافتها لهذا الوسم .
سنعمل في دورتنا علي نظام external
الدرس مفصل القادم سنوضح خواص السي اس اس والدرس مفصل الذي بعده سيكون عن الCSS 3
بالتوفيق







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









©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©