كيف تكتب لغة CSS وأكثر 5 أكواد شائعة فيها

Writing CSS
لغة CSS هي اللغة المسئولة عن المظهر في المواقع الإلكترونية بدون تلك اللغة تحصل على موقع قبيح غير منظم لا يمكنك تصفحه بطريقة مريحة كل شئ يكون فيه مبعثر بالتالي هي جزء أساسي من كل موقع الكتروني
أنت كمدون لا تحتاج شئ في تلك اللغة طالما قالبك مضبوط ولا مشاكل فيه
لكن معرفة كيف يتم كتابة تلك اللغة معلومة جيده قد تحتاجها او قد تسهل عليك بعض الامور

كيف تكتب لغة CSS

هناك طريقتين لكتابة CSS

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

أن يتم تضمينها ضمن لغة HTML مباشرة
مثال هذا هذا كود رابط
<a style="width:100px; padding:5px 10px;" href="https://www.cnmu.info">كن مدون</a>
كما تلاحظ أكواد CSS تم تضمينها بداخل الكود style بين علامتين الإقتباس ""
وهذا يمكنك عمله مع أى عنصر من عناصر HTML أن تضيف لها كود style وتضمن فيه كما في المثال كل اكواد CSS الخاصة بالعنصر
لكن هذه الطريقة تناسب أكثر ان لم يكن سيتم استخدام اكواد css كثيرة لكن لو سيتم استخدام اكواد كثيرة ننتقل للطريقة الأخرى

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

هي أن تستخدم كلاس او معرف للعنصر
مثال نفس الكود السابق
<a class='cnmu' href="https://www.cnmu.info">كن مدون</a>
كما ترى تم اضافة كلاس له cnmu
وسيتم استخدام هذا الكلاس لكتابة نفس الاكواد css كالتالي
.cnmu {
width:100px;
padding:5px 10px;
}

والأكواد المضمنه بهذا الشكل تضاف فوق الوسم ]]></b:skin> في القالب
أو بين عنصرين <style> </style> يتم وضعه مثلاً فوق الوسم </head>

أكثر 5 أكواد شائعة

1- width
وهو الوسم الخاص بعرض العنصر
ويكتب كالتالي width:100px;
الرقم 100 يغير بأى رقم أكبر او اصغر
2-height
وهو الخاص بالإرتفاع
ويكتب كالتالي
height:100px;
نفس الشئ فيما يخص تغيير الرقم
3-padding
وهي مساحة الفراغ الداخلي للعنصر أو الحاشية
وتكتب كالتالي padding:10px 15px 6px 8px;
10 الفراغ من الاعلى
15 اليمين
6 الأسفل
8 اليسار
ويمكنك كتابتها كالتالي padding:10px;
معناه انه من كل الجوانب سيكون الفراغ 10 بيكسل
4-margin
نفس padding لكن هذه الحاشية الخارجية حول العنصر وبعده عن العناصر المجاورة له
وتكتب بنفس الطريقة
margin:10px 15px 6px 8px;
5-color
وهي الخاصة بلون النصوص في العناصر
وتكتب كالتالي
color:#000000;
تغير فقط #000000 بكود لون آخر
ويمكنك أن تضيف لها background
يصبح حبنها لون خلفية العنصر وليس النص هكذا
background-color:#000000;

طبعا ما ذكرته هنا هو مجرد قشور لإستخدام هذه اللغة أو حتى هذه الأكواد فهناك احتماليات كثيرة جداً حتى لكتابة نفس تلك الاكواد لكن انت هنا تجد الإستخدام المبسط لها الذي قد تحتاجه عند استخدامها
وأود أن أختم بكود آخر وهو display:block;
هذا الكود يجعل العنصر له نمط استقلالي أكثر في الشاشة وهذا قد تحتاجه ان لم تجد أكواد العرض والإرتفاع تستجيب لك وتظهر نتائجها
افتح صفحة ثابتة في مدونتك وجرب بها تلك الاكواد وانظر للنتائج فقد تفيدك تلك الاكواد في تحسين تنسيق مواضيعك أو احجام صورك


هناك 7 تعليقات:

  1. شرح مفيد جدا خصوصا للمدونين المبتدئين
    اعتقد انك نسيت اكواد اخرى شائعة مثل كود جحم الخط font-size
    لأن الكثير من المبتدئين يسألون عن كود تكبير الخط في مدوناتهم

    ردحذف
    الردود
    1. مرحباً بك أخي الكريم
      بالنسة للخطوط أنا عرضت فعلياً مقال خاص بها
      https://www.cnmu.info/2013/03/blog-post_14.html
      وسرني كثيراً مرورك يا طيب

      حذف
  2. شكرا استاذ عمرو على الشرح الجميل ❤ لو تنزل مقالة تحتوي على بعض أكواد جافا سكريبت بيكون أفضل وافضل

    ردحذف
    الردود
    1. جافا سكريبت لا يوجد بها اكواد شائعة كـ HTML , CSS
      فهي لغة تكامل أى يتم انشاء كود كامل لعمل وظيفة محدده بالتالي لا ينفع هذا النمط من المواضيع معها
      لأنها لا يوجد بها اكواد مختصرة هكذا لعمل وظيفة محددة شائعة الإسخدام
      وأشكرك اخي الكريم على المرور العطر

      حذف
  3. الردود
    1. وفيك بارك الله يا غالي :)

      حذف
    2. وفيك بارك أستاذ والله لازلنا نبحث عن جديد قوالب بلوجر

      حذف

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

جميع الحقوق محفوظة لــ كن مدون 2013-2019 ©