دورة برمجة مواقع الانترنت - لغة 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 دورة
-
سؤال إذا أردنا وضع نص ثاني بتنسيق ثاني بماذا نستبدل p ?
وهذا تطبيقي أخ زهير
هاد تطبيقي
مشكور أخ زهير عالدرس سهل الهضم والإستيعاب
أكيد متابع وهاد تطبيقي
جزاك الله خيراً ، بارك الله بك ، الله يعطيك العافية .
شوف تطبيقي :
غيرت حجم الخط و لون الخط و مكان الكتابة ( جعلتها في اليسار )
هلق إذا بدنا نحط الكتابة في اليسار نكتب : left و إذا بالوسط : center و إذا باليمين right ما هيك ؟
و هلق هذا بيكون عنوان الصفحة في المتصفح :
و هل هذا التعليق هو مثل الذي وضعته أنت في استايل طه سوفت الثاني في قالب الفوتر عندما قلت : الرجاء عدم نزع الحقوق .
و هل هو فقط مجرد تعليق و ليس له أي علاقة بالأوامر البرمجية؟
و في شغلة ما فهمتها ، هذه شو شغلتها ؟
و فينا نحط كود html بين الوسمين أنا جربت و حطيت كود ارتباط تشعبي و زبطت معي بفضل الله تعالى .
و هناك شغلة بدي قلكم عليها ، أحياناً تظهر صفحة الويب التي تصممونها باللغة العربية بشكل رموز
و هذا مثال :
فقط قوموا بوضح هذا الكود تحت الوسم الوجود في الأعلى
و أنا جربتها و نجحت معي بفضل الله تعالى
و شوفوا النتيجة
و الذي يريد هذه الواجهة يتفضل بالدخول هنا
_________________________________________________
و السلام عليكم و رحمة الله و بركاته
و لا تنسوا الدعاء بظهر الغيب لي و لجميع المسلمين
_________________________________________________
سبحانك اللهم و بحمدك ، أشهد أن لا إله إلا أنت ، أستغفرك و أتوب إليك
_________________________________________________
يشرفنا انضمامك للدورة أخي أحمد وأكيد رح تستفيد منها بموقعك
وبالمناسبة تصميم الستايلات لمنتدى من الجيل الرابع مستحيل بدون معرفة css
حيث أنه في ستايلات النسخة الثالثة السابقة كان من الممكن الاستفادة من البرامج مثل frontpage
لتصميم الستايل بدون الحاجة لمعرفة الأكواد .
إذا جربت وسم الـ P بدون الـ css الموجود في الكود فسيظهر النص بدون تنسيق
لكن الوسم p ليس له علاقة بالتنسيقات ويمكنك استبداله بأي وسم آخر وكمثال :
درس رائع استاذ زهير
انا جربت الكود بدون وسم الp في النص
يظهر بشكل عادي بدون تحجيم للخط ولون
يعني الوسم p اله دور كبير في تطبيق التنسيقات
متابع للاخر معك انشاء الله