زهير طه

63

7,222

دورة برمجة مواقع الانترنت - لغة css - الدرس 1 - مفاهيم أساسية وصيغة كتابة الكود في css


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


أهلاً وسهلاً بكم في درسنا الأول في لغة Css
إذا صعب عليك هذا الدرس والدرس الذي يليه فاصبر قليلاً لأنه مع المتابعة في بقية
الدروس ستسهل عليك الأمور وستصبح روتينية


تحوي لغة css قسمين أساسيين هما :


- المحدد selector :
وهو عادةً العنصر من html الذي نريد تطبيق التنسيق عليه
- التصريحات declarations :

حيث يمكن أن يوجد تصريح واحد أو أكثر
ويحتوي كل تصريح declaration على جزأين هما :


- الخاصة property
- وقيمتها value


صورة توضيحية :



هذا الشكل سيلازمك من الآن حتى نهاية الدورة وسيصبح من البديهيات.

لنتأمل الكود التالي :




مثال تطبيقي على لغة css





في منتدى طه سوفت css دورة




في الكود السابق لاحظ الجزء:
p{
font-family: tahoma;
text-align: center;
color: blue;
font-size: 20px;
}
هذا هو الجزء الخاص بـ css
حيث تم تحديد العنصر p لتطبيق التصريحات الموجودة ضمن القوسين عليه
وكل تصريح يحوي تنسيق وقيمة

وفي قسم body من الكود نلاحظ أننا وضعنا نصاً بسيطاً باستخدام الوسم p

في منتدى طه سوفت css دورة

وفي نتيجة تنفيذ الكود نجد النص يتوسط الصفحة وملوناً بالأزرق ونوع الخط tahoma و حجمه 20 بكسل
هذه التنسيقات تم تطبيقها بمجرد استخدام الوسم P في النص
وذلك بسبب استعمال css في جزء الهيدر header من الكود السابق وتطبيق الخصائص السابقة على p

ليس من الضرورة أن تكون قد استوعبت كل شيء تماماً في الكود السابق حيث أننا سنأتي على الشرح التفصيلي لكل
التنسيقات الممكنة

كتابة التعليقات في css :


لكتابة التعليقات نستخدم الصيغة التالية :
/* تعليق يراه المبرمج ولا ينفذه المتصفح */
لنطبق على المثال السابق :






مثال تطبيقي على لغة css





في منتدى طه سوفت css دورة




التعليقات (8)

MOZHAR     
شو هوي بي التفصيل ولله مافهمة شي

-
html شو معناها ولكم جزير الشكر







M.nshawaty     
درس سهل كثير سلمت اناملك






الدرس الأول css



طه سوفت





سؤال إذا أردنا وضع نص ثاني بتنسيق ثاني بماذا نستبدل p ?

abubkir     

وهذا تطبيقي أخ زهير






في منتدى طه سوفت css دورة





كل الشكر والتقدير للأستاذ الغالي زهير


تطبيق abubkir





أحمد الساهر     

هاد تطبيقي






في منتدى طه سوفت css دورة





كل الشكر والتقدير للأستاذ الغالي زهير للدورة الأكثر من رائعة


تطبيق احمد الساهر





jalal_4e     

مشكور أخ زهير عالدرس سهل الهضم والإستيعاب
أكيد متابع وهاد تطبيقي


  


في منتدى طه سوفت css دورة





كل الشكر والتقدير للأخ زهير عالدورة الهامة و الأكثر من رائعة


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





أحمد حلمي     
مشكوووووور على الدرس الرائع و البداية الجميلة .
جزاك الله خيراً ، بارك الله بك ، الله يعطيك العافية .

شوف تطبيقي :
غيرت حجم الخط و لون الخط و مكان الكتابة ( جعلتها في اليسار )





مثال تطبيقي على لغة css





أحمد حلمي ، عضو في طه سوفت




هلق إذا بدنا نحط الكتابة في اليسار نكتب : left و إذا بالوسط : center و إذا باليمين right ما هيك ؟


و هلق هذا بيكون عنوان الصفحة في المتصفح :
  مثال تطبيقي على لغة css

و هل هذا التعليق هو مثل الذي وضعته أنت في استايل طه سوفت الثاني في قالب الفوتر عندما قلت : الرجاء عدم نزع الحقوق .
و هل هو فقط مجرد تعليق و ليس له أي علاقة بالأوامر البرمجية؟
/* تعليق يراه المبرمج ولا ينفذه المتصفح */
و في شغلة ما فهمتها ، هذه شو شغلتها ؟

و فينا نحط كود html بين الوسمين

أنا جربت و حطيت كود ارتباط تشعبي و زبطت معي بفضل الله تعالى .

و هناك شغلة بدي قلكم عليها ، أحياناً تظهر صفحة الويب التي تصممونها باللغة العربية بشكل رموز
و هذا مثال :



فقط قوموا بوضح هذا الكود تحت الوسم الوجود في الأعلى


و أنا جربتها و نجحت معي بفضل الله تعالى
و شوفوا النتيجة




و الذي يريد هذه الواجهة يتفضل بالدخول هنا

_________________________________________________

و السلام عليكم و رحمة الله و بركاته
و لا تنسوا الدعاء بظهر الغيب لي و لجميع المسلمين
_________________________________________________

سبحانك اللهم و بحمدك ، أشهد أن لا إله إلا أنت ، أستغفرك و أتوب إليك
_________________________________________________
زهير طه     

درس رائع استاذ زهير


انا جربت الكود بدون وسم الp في النص


يظهر بشكل عادي بدون تحجيم للخط ولون


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



متابع للاخر معك انشاء الله





يشرفنا انضمامك للدورة أخي أحمد وأكيد رح تستفيد منها بموقعك
وبالمناسبة تصميم الستايلات لمنتدى من الجيل الرابع مستحيل بدون معرفة css
حيث أنه في ستايلات النسخة الثالثة السابقة كان من الممكن الاستفادة من البرامج مثل frontpage
لتصميم الستايل بدون الحاجة لمعرفة الأكواد .

إذا جربت وسم الـ P بدون الـ css الموجود في الكود فسيظهر النص بدون تنسيق
لكن الوسم p ليس له علاقة بالتنسيقات ويمكنك استبداله بأي وسم آخر وكمثال :





مثال تطبيقي على لغة css





في منتدى طه سوفت css دورة



أحمد الساهر     

درس رائع استاذ زهير


انا جربت الكود بدون وسم الp في النص


يظهر بشكل عادي بدون تحجيم للخط ولون


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



متابع للاخر معك انشاء الله