القائمة الرئيسية

الصفحات

كيفية كتابة كود لغة CSS بشكل صحيح

 لابد من معرفة كيفية كتابة كود CSS بشكل صحيح، والتعرف على مكونات الكود وطرق إستدعاء الكود في صفحات HTML.


كيفية كتابة كود CSS بشكل صحيح

كيف تكتب كود CSS


  • Selector: هو وسم HTML الذي نريد تنسيقه.
  • Property: هو الخاصّية المراد تغييرها.
  • Value: وهو القيمة التي ستضعها.


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

تكوين كود CSS 


يتكون كود CSS من ثلاثة عناصر رئيسية :

ليكون شكل كود CSS كالتالي:

{;Selector{ Property: Value

ويمكن وضع مثال علي ذلك:

   p

{
        Color: green;
       font: arial;

}
شكل كود CSS

النتيجة في المتصفح

شكل كود CSS

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

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

ويوجد طريقة أخري وهي أن نضع سطر الcss داخل كود الــ html. ومثال علي ذلك كلمة hello css الزرقاء. حيث أن تنسيقها داخل الكود نفسة 

وسوف نشرح  كلتا الطريقتان : 

طرق كتابة الكود 

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


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

أن يتم تضمينها ضمن لغة HTML مباشرة.

مثال

<a style="width:150px; padding:10px 20px;" href="https://www.example.com">
be strong</a>
كيفية كتابة كود بلغة Css

كيفية كتابة كود CSS

كما تلاحظ .الأكواد الخاصة بلغة ال css يتم وضعها بين علامات الاقتباس""
وهذا يمكنك عمله مع أى عنصر من عناصر لغة HTML. أن تضيف لها كود style وتكتب كل أكواد CSS الخاصة بالعنصر.

وهذه الطريقة مناسبة إذا لم نستخدم أكواد CSS كثيره .

أما إذا أرنا إستخدام أكواد كثيرة سنستعمل الطريقة الثانية .

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


هي أن تستخدم كلاس أو معرف للعنصر.
مثال نفس الكود السابق:


<a class='test' href="https://www.example.com">be stromg</a>


كما ترى تم إضافة كلاس له test.
وسيتم إستخدام هذا الكلاس لكتابة نفس الاكواد css كالتالي.

.test{
width:150px;
padding:50px 10px;
margin:20px;
}

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

هي أن تربط الكود بملف css خارجي.





كيفية كتابة كود CSS

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

بعض التفاصيل في الكود


* لا تنسي كتابة ; في نهاية كل سطر.
* لا تنسي كتابة : بين كل عنصر وقيمتة.
*لا تنسي كتابة الاقواس {} .
*لا تنسي كتابة < > في بداية ونهاية كل عنصر في كود الhtml.
*اذا كنت تريد ربط الملف بملف خارجي css لا تنسي ان تضمنة قبل البدء في الصفحة.



reaction:

تعليقات