كتابة أكواد css؛ 3 طرق لإضافة أسطر css إلى صفحة html
توجد فقط 3 من الطرق لكتابة أكواد css لصفحة html، وهي في السطر و في وسم head و إضافة ملف css خارجي وكيفية ربطها مع توضيح سبب جعلها الطريقة الأفضل من غيرها.
فهرس المحتويات
هناك ثلاث طرق لكتابة أكواد css، فما الفرق بينها والأفضل للاستخدام وسبب استخدام تضمين ملف css خارجي بدلًا من الاستعمال الداخلي في كل عنصر.
نبذه عن لغة css؟
إن لغة css هي الأساس الجمالي في أي صفحة إلكترونية، فهي تضفي على الصفحة المنظر المتألق والمريح والغير التقليدي كما أنها من أهم اللغات لمطوري frontend.
لربما قد بدأت في كتابة بعض الأكواد لتحاول أن تزيّن صفحة بلغة html الخاصة بك، لكن لا تعرف أي تضع ذلك الكود أو بالأحرى كيف ستتعرف صفحة html الخاصة بك على هذه الأكواد التي كتبتها.
“اقرأ أيضًا: خطوات عمل موقع إلكتروني مجاني باستخدام قوقل sites“
كيفية كتابة أكواد css
توجد هناك ثلاثة طرق ممكنه يمكن تطبيقها لكتابة أكواد css في لغة التصميم html، نبدأ من أسوء طريقة وأخيرًا أفضلها وهي إنشاء ملف خارجي لجميع أكواد css.
إضافة أكواد css إلى كل وسم
هذه الطريقة تتلخص في كتابة أكواد css الخاصة بك على كل وسم html مباشرةً، وذلك من خلال الخاصية style ثم سرد جميع أكوادك بها، حيث يمكن وضع جميع أكواد css داخل علامتي تنصيص ويفصل بينهم فاصلة منقوطة، وتكون بالصيغة التالية:
";القيمة: الخاصية"=style
مثال بسيط: <pre style="background-color: yellow;"> Visit us all time, thanks </pre>
كتابة كود css في وسم head
أما هذه الطريقة فتتلخص في فتح وإغلاق وسم style داخل الوسم head ثم الشروع في كتابة خصائص العناصر والكلاسات وغيرها، حيث يمكن استخدام هذه الخصائص داخل الوسوم من خلال استخدام الخاصية style ثم تضمين اسم الكلاس المستخدم.
مثال:
<style>
s.
{;color: red; background-color: green}
<style/>
ملف خارجي لجميع أكواد css
تعد هذه من أفضل الطرق لكتابة أكواد css، ويعود ذلك إلى عدد من الأسباب أهمها:
- الاستقلالية: أي أن هذه الطريقة هي بمثابة توزيع للمهام في أماكن محددة ففي هذه الحالة فصلنا بين مكان تعديل تنسيق والتصميم الجمالي للصفحة عن الهيكل الأساسي بها.
- سهولة الصيانة الدورية: حيث يسهل عليك العثور على مكان الأخطاء.
- كذلك الملف الخارجي أفضل من ناحية الأداء فهو يمكّن المتصفح من حفظ ملف css في الكاش بالتالي سهولة تحميل التصميم للصفحات عند العودة لها.
“اقرأ أيضًا: ماذا تعرف عن إنترنت الأشياء؟ وما هي أنظمة تشغيله والتحديات التي تواجهه“
خطوات كتابة وتضمين ملف css
قم بإنشاء ملف جديد يحمل الامتداد css، من أي محرر نصوص.
وإذا استخدمت Visual Studio Code انقر على ملف ثم ملف جديد، بعد ذلك تجد عبارة ترجمتها اختر اللغة تنقر عليها ثم تختار لغة css.
بعد الانتهاء من ذلك تنقر على Ctrl+S ثم تحدد مكان حفظ الملف ويجب أن يكون في نفس المجلد لصفحة html المراد ربطها به حتى يسهل تحديد المسار هناك، تلاحظ حينها أن الملف يحمل الاسم Untitled-1 متبوع بامتداد css، يمكن تعديله إلى أي اسم آخر سهل مثل style.css ثم الحفظ.
الخطوة التالية وهي كتابة أكواد css في الملف الذي أنشأته ثم ربطه بـملف html، وذلك من خلال كتابة سطر واحد فقط وهو كالتالي:
</ "link rel="stylesheet" href=""style.css" type="text/css>
“اقرأ أيضًا: لغة بايثون Python، ما هي مميزاتها، طرق تعلمها، عيوبها“
لمن الأولوية في التنفيذ؟
مع أن كتابة أكواد css بالطريقة inline سيئة للغاية، لكن وجب التنويه إلى أنها تمتلك الأولوية الأعلى في التصميم، فلو افترضنا أنك حددت الخاصية color لعنصر ما، باللون الأحمر بطريقة inline وحددت اللون الأزرق في الملف الخارجي المربوط، وكذلك الأخضر في وسم style في الأعلى، فأي من هذه الألوان ستتنفذ في الصفحة؟، بالطبع اللون الأحمر لأنه يمتلك الأولوية، وإذا لم نحدده ينتقل إلى التالي وهو اللون الأخضر ما لم فالأزرق، هذا قد يعني أن الأولوية تكمن في بعد الكود عن العناصر المستهدفة.
مثال توضيحي:
<DOCTYPE html!>
<html>
<head>
<title>New Page</title>
<style>
}p
;color: green
}
<style/>
<head/>
<body>
<";p style="color: red>
Welcome to faharas net
<p/>
<body/>
<html/>
والملف الخارجي نقوم بكتابة أكواد css التالية:
}p
;color: blue
}
نلاحظ بأنه طبّق ما بداخل وسم p في صفحة html نفسه، ولم وتجاهل البقية، كما في الصورة على متصفح فايرفوكس.
أيضا إذا أزلت الكود style من على وسم p، حينها يمكنك أن تلاحظ بأن الكود الذي كتبته على الوسم في جزء head يطبّق على الصفحة، وكذلك إذا أزلت كلاهما سيطبق أخيرًا ما في ملف css الخارجي.
غالبًا ما تتم كتابة أكواد css في ملفات خارجية في المشاريع الحقيقة، لذا ينصح باستخدامها دائمًا.
يجب أنت تكون مسجل الدخول لتضيف تعليقاً.