دورة تصميم المواقع بـ css | الدرس الثاني | أين تكتب css

بسم الله الرحمان الرحيم

الدرس الثاني من دورة تصميم المواقع بـ css

الدرس الثاني 

CSS كأي كود آخر لا بد من وضعه في مكان مناسب ليتم التعرف على نوع الكود ويتم استعمال المترجم المناسب لترجمة هذا الكود من قبل المتصفح .

لإضافة كود CSS يتوفر لدينا ثلاثة خيار :

الطريقة الأولى :

• Inline style ويعني كتابة الستايل وكود CSS داخل عنصر HTML في صفحة الويب باستخدام الخاصية STYLE ولتوضيح الأمر بشكل اوضح شاهد المثال التالي :
  

فكما هو موضح في الصورة تم كتابة كود CSS داخل العنصر باستخدام الخاصية STYLE
ملاحظة كنت ذكرت في الدرس الأول أن يجب وضع كود css داخل أقواس {} تفصل بين أكواد وصف كل عنصر عن الآخر لكن في هذه الطريقة لاحاجة للأقواس لأننا نضع الكود الوصفي لكل عنصر في داخله . خلافاً للطرق الآنية
دورة تصميم المواقع بـ css

الطريقة الثانية : 

 Internal style sheet أي كتابة الكود في ورقة أنماط داخلية حيث يستخدم الوسم <style></style> داخل الصفحة ويتم تجميع كود الستايل الخاص بالصفحة داخل هذا الوسم وهنا يرجى ملاحظة أن الطريقة الثانية مختلفة عن الأولى حيث إن الطريقة الأولى يتم وضع ستايل كل عنصر بداخله عن طريقة خاصية style أما في هذه الطريقة يتم تجميع جميع كود css داخل وسم style وأيضا فإن الطريقة الأولى تستخدم style عن طريقة خاصية عنصر html وليس عنصرا بحد ثاته أما الطريقة الثانية فنحن نستخدم style على أنه عنصر مستقل وليتضح الكلام نوضح بمثال :

• 

• لاحظ أننا قمنا باستخدام الأقواس هنا لأننا يمكن ان نضع عدة اوصاف لعدة عناصر فيجب الفصل فيما بينها ليتم التعرف عليها من قبل المترجم الخاص بالمتصفح .

  الطريقة الثالثة:

  • External style sheet أي ورقة نمط خارجية يعني يتم استدعاء كود CSS المكتوب في صفحة خارجية إلى الصفحة المراد وصفها باستخدم عنصر html المسمى link وهناك عدة قواعد لاستدعاء css بهذه الطريقة :
  1 – يجب كتابة عنصر link داخل وسم head الموجود في رأس صفحة كود html
  2- يجب وضع رابط مسار ملف css داخل خاصية href في عنصر link
  3- يجب وضع الخصائص التالية داخل عنصر link لعرف المتصفح أن هذا اللينك هو لينك خاص باستدعاء أكواد css وتنفيذها على عناصر الصفحة والخائص المطلوبة هي :
• rel="stylesheet" type="text/css"
  4- يجب أن يكون امتداد الملف المستدعى .css وهو أمر ضروري ليتم ترجمة الكود المكتوب ووصف عناصر الصفحة به .

  دورة تصميم المواقع بـ css مقدمة من شركة سيريان كودرز لتصميم المواقع

  مثال استوفى الشروط السابقة :
• 
  
  

ومحتوى ملف mystyle.css هو كالتالي :

الطريقة المفضلة في كتابة كود Css

تعتبر الطريقة الأولى هي طريقة غير محببة أبداً وينبغي عدم استخدامها إذا اردنا كتابة كود نظيف صديق لمحركات البحث حيث إن معايير الويب تقتضي بأن يتم فصل أكواد الستايل عن أكواد عناصر الصفحة للحصول على كود منظم ومرتب .

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

هل يمكن استخدام أكثر من طريقة في صفحة واحدة ؟

نعم يمكن استخدام الطرق الثلاثة مجتمعة في صفحة ويب واحدة وسيتم تطبيق جميع الأوصاف المذكورة في الطرق المتبعة لكن يجب ملاحظة أنه لو تم إعطاء نص معين لون أسود مثلا ثم تم إعطاءه لون أبيض في سطور لاحقة في نفس الطريقة أو طريقة أخرى سيتم تطبيق عملية أوفر رايت بمعنى شطب الوصف الأول واستخدام الوصف الثاني .