لغة 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;
}
أو بين عنصرين <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;
هذا الكود يجعل العنصر له نمط استقلالي أكثر في الشاشة وهذا قد تحتاجه ان لم تجد أكواد العرض والإرتفاع تستجيب لك وتظهر نتائجها
افتح صفحة ثابتة في مدونتك وجرب بها تلك الاكواد وانظر للنتائج فقد تفيدك تلك الاكواد في تحسين تنسيق مواضيعك أو احجام صورك
شرح مفيد جدا خصوصا للمدونين المبتدئين
ردحذفاعتقد انك نسيت اكواد اخرى شائعة مثل كود جحم الخط font-size
لأن الكثير من المبتدئين يسألون عن كود تكبير الخط في مدوناتهم
مرحباً بك أخي الكريم
حذفبالنسة للخطوط أنا عرضت فعلياً مقال خاص بها
https://www.cnmu.info/2013/03/blog-post_14.html
وسرني كثيراً مرورك يا طيب
شكرا استاذ عمرو على الشرح الجميل ❤ لو تنزل مقالة تحتوي على بعض أكواد جافا سكريبت بيكون أفضل وافضل
ردحذفجافا سكريبت لا يوجد بها اكواد شائعة كـ HTML , CSS
حذففهي لغة تكامل أى يتم انشاء كود كامل لعمل وظيفة محدده بالتالي لا ينفع هذا النمط من المواضيع معها
لأنها لا يوجد بها اكواد مختصرة هكذا لعمل وظيفة محددة شائعة الإسخدام
وأشكرك اخي الكريم على المرور العطر
بارك الله فيك أستاذ
ردحذفوفيك بارك الله يا غالي :)
حذفوفيك بارك أستاذ والله لازلنا نبحث عن جديد قوالب بلوجر
حذف