CSS

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

كُتب بواسطة إسلام منير

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

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

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

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

  • لتتّضح الأمور أكثر سنجرب كتابة كود فعلي لنرى كيف تكون النتيجة

هذا الكود سيجعل نوع الخط الموجود في أي وسم <p> في الصفحة يتحول إلى نوع Arial، ويمكننا كتابة أكثر من تنسيق ولكن مع نهاية كل تنسيق لابد من كتابة فاصلة منقوطة “;” وتسمى Semicolon، مع العلم أنه يمكنك ألا تكتبها إذا كنت تكتب تنسيقًا واحدًا، ولكن لابد من كتابتها إذا كنت تكتب أكثر من تنسيق، والأفضل كتابتها دائمًا حتى تعتاد عليها ولا تنساها.

  • ويمكنك أيضًا جعل تنسيقاتك أكثر وضوحًا بأن تضعها في أسطر متعددة -لن يؤثر ذلك على التنسيق- بهذا الشكل:
هذا التنسيق سيغير لون الفقرة إلى الأحمر ويمكنك كتابة اللون عن طريق الأكواد مثل #FFF وغيرها، ويمكنك معرفتها من برنامج فوتوشوب؛ حيث يعطيك كود لكل لون يمكنك وضعه في التنسيق، أو من مواقع توفر لك أكواد الألوان إذا لم تكن تجيد التعامل مع فوتوشوب -الذي ننصح به لكل من يريد الخوض في مجال تصميم المواقع-، وسيغير نوع الخط إلى verdana، ويمكنك معرفة أنواع الخطوط من برنامج Word الموجود ضمن حزمة برامج أوفيس الشهيرة.

بالطبع يتراود إلى الذهن سؤال محير، أين أكتب مثل هذه الأكواد؟ هناك ثلاثة أماكن لكتابة كود CSS في التصميم وهي:

ملف خارجي وتسمى External Style:

حيث تقوم بفتح عمل جديد ويأخذ امتداد .css وتضعه بجوار صفحة HTML أو في مجلد جديد باسم css مثلًا وتضع بداخله ملف CSS، وهذه الطريقة لابد أن تضع وسم لاستدعاء ملف التنسيق في صفحة HTML ويكتب بداخل وسم head بهذه الطريقة:

هذا الوسم يجعل صفحتك تستدعي ملف css بافتراض أنك أسميته style.css بجانب ملف HTML وشرح هذا الوسم بسيط للغايه:

  • Rel هي اختصار لكلمة relationship وتعني علاقة الملف بالصفحة وهو ملف تنسيق.
  • Href وهو عنوان ملف التنسيق وما دام بجوار صفحة HTML فيكتب اسم الملف فقط، ولكن لو وضعت كل تنسيقاتك في مجلد وسميته مثلًا css فلابد من كتابة رابط الوصول بشكل صحيح ليصبح هكذا css/style.css بنفس طريقة التعامل مع ويندوز للوصول لأي ملف.
  • Type وترمز لنوع الملف وهو css، وإذا كنت تكتب HTML5 فلا حاجه لديك لكتابة type، حيث أن صفحة HTML5 تتعرف وحدها على نوع ملفات css.

داخل وسم head في صفحة HTML وتسمى Internal Style:

حيث تقوم بكتابة وسم لتنسيقاتك وتضع به كل التنسيقات المطلوبة بهذه الطريقة:

وفي هذه الطريقة يكون التنسيق مكتوب في صفحة واحدة فقط، ولا يمكن استدعاءه في أكثر من صفحة كما في الملف الخارجي الذي يمكن استدعاءه في كل صفحات HTML الموجودة داخل الموقع.

داخل العنصر نفسه وتسمى Inline Style:

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

بذلك تكون قد تعرّفت على البنية الخاصة بكود CSS وطرق استدعاءه في الصفحة. أهم شيء هو التجربة العملية لتكتشف أخطائك، ولا تتردد في السؤال دومًا أو إضافة الجديد في التعليقات لتُثري المحتوى.

عن الكاتب

إسلام منير

مصمم ومطور مواقع ، مهتم بالتقنية واسعى لتطوير المحتوى العربي

تعليق واحد

اترك تعليقًا