كيفية كتابة (إضافة) أكواد CSS إلى أكواد صفحة HTML
تعلم طرق إضافة تنسيقات الـ CSS في صفحة HTML، وما هي مميزات كل طريقة؟ ومتى تستخدم كل طريقة؟ كيف يقوم المتصفح بتطبيق تنسيقات الـ CSS؟ وأي الطرق (Inline Styles, Embedded Styles, External Styles) يتم تطبيقها و عرضها من خلال المتصفح في النهاية.
لإضافة (كتابة) أكواد (تنسيقات) CSS إلى صفحة الويب المصممة بلغة الترميز HTML، يوجد لديك ثلاثة خيارات (طرق)، سوف أحاول ترجمة إسم كل طريقة باللغة العربية ولكن يجب عليك تذكر إسم كل طريقة باللغة الإنجليزية، وهم كالتالي:
أولا: تنسيقات داخل الوسوم - Inline Styles
وفي هذه الطريقة يتم كتابة الأكواد عن طريق وصف الوسم (attribute) المسمى style، فعلى سبيل المثال إذا أردت تغيير لون فقره paragraph، فيمكنك كتابة الكود بالطريقة التالية:
<p style="color: red;">نص باللون الأحمر</p>
في المثال السابق إستخدمنا style attribute (وصف الوسم المسمى style) وإخترنا القيمة color: red; وهي القيمة المسئولة عن تغيير لون الخط. وفي هذه الطريقة يتم تطبيق التنسيق (القاعدة - الأمر) على وسم وحيد في صفحة الويب، وهو الوسم الذي يحتوي بداخله على الوصف (attribute) style.
لا يفضل إستخدام هذه الطريقة لتنسيق محتويات صفحة الويب، وذلك لأنه لتغيير أي تنسيق أو أمر سوف تكون عملية صعبة أن تبحث داخل الأكواد عن هذا الأمر (وذلك لأن أي موقع يحتوي على العديد من الصفحات وبالتالي الكثير من عناصر HTML)، وغالبا ما تستخدم هذه الطريقة لتغيير خصائص (تنسيقات) عناصر الـ HTML من خلال لغة JavaScript.
ثانيا: تنسيقات مضمنة في صفحة الويب - Embedded Styles
وفي هذه الطريقة يتم كتابة أكواد (تنسيقات) الـ CSS داخل وسم مستقل يسمى الوسم <style> ويتم وضعه في رأس الصفحة أي في داخل الوسم <head> ويتم كتابة الأكواد كالتالي:
HTML
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Embedded Styles</title> <style type="text/css"> body { font-size:14px; color:#333; } p { color:blue; } </style></head><body> </body></html>
وفي هذه الطريقة يتم تطبيق التنسيقات على صفحة واحدة في الموقع، والتي تحتوي (تتضمن) على الوسم <style>. حيث يتم تطبيق القواعد Rules أو الأوامر الموجودة بداخل هذا الوسم على عناصر الصفحة HTML Elements/Tags.
وكما في النوع الأول فهذه الطريقة أيضا لا تستخدم بصفة أساسية في تنسيق محتويات صفحة الويب، ولكن تستخدم في حالة إذا أردنا إلغاء أو تغيير تنسيق صفحة محددة، فعلى سبيل المثال يمكن أن نختار لون الكتابة للموقع كله بلون محدد وليكن أسود، ولكن هناك صفحة وحيدة نحتاج لتغيير لون الكتابة فيها إلى اللون الأزرق، ففي هذه الحالة تعتبر هذه الطريقة هي طريقة جيدة لتغيير لون الخط في الصفحة المحددة.
ثالثا: تنسيقات في ملف مستقل - External Style Sheet
وفي هذه الطريقة يتم كتابة أكواد الـ CSS، في ملف File مستقل، يمكن تسميته بأي إسم ولكن يشترط أن يكون إمتداد الملف .css وفي هذه الطريقة يتم إضافة الملف من خلال إستخدام الوسم <link />، وهو أيضا يتم كتابته في رأس الصفحة، أي داخل الوسم <head>، والمثال التالي يوضح كيفية كتابة الأكواد داخل ملف بلغة الترميز HTML.
HTML
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>External Style Sheet</title> <link rel="stylesheet" type="text/css" href="https://cdn.abuelfateh.com/css/normalize.min.css" /> <link rel="stylesheet" type="text/css" href="main.css" /></head><body> </body></html>
تلاحظ من المثال السابق أننا قمنا بإضافة وسمين <link /> حيث أن وصف الوسم href، في الوسم الأول قيمته هي المسار الكامل لملف normalize.min.css، وهو ملف لإعادة ضبط التنسيقات الإفتراضية للمتصفح - CSS Reset، ويمكنك قراءة المقالة الخاصة به، و في الوسم الثاني وضعنا قيمة الوصف هي إسم الملف main.css وفي هذه الحالة يجب أن يكون الملف main.css موجود في نفس المسار (المجلد - Folder) الموجود به ملف صفحة الـ HTML.
تعتبر هذه الطريقة هي الأكثر كفاءة وفعالية، حيث يتم تحديد جميع التنسيقات الخاصة بالموقع الإلكتروني في ملف واحد، وبالتالي يسهل تغيير أي تنسيق للموقع بسهولة، ويسهل أيضا أن نقوم بعمل أكثر من تصميم للموقع ونترك الخيار لمستخدم الموقع أي تصميم (تنسيق) يرغب في متابعة الموقع من خلاله، وذلك بإنشاء ملفين كل منهم يحتوي على تنسيق بألوان مختلفة، ونقوم بتحميل الملف طبقا لرغبة المستخدم.
والآن وقد تعرفنا على الطرق المختلفة لإضافة تنسيقات (أكواد) CSS في ملف مصمم بلغة HTML، يجب أن تعرف أنه يمكنك إستخدام طريقة واحدة أو أكثر لإضافة التنسيقات إلى صفحة الويب، حيث يمكنك أن تستخدم ملف مستقل وتستخدم معه أيضا طريقة تضميين أكواد الـ CSS ويمكنك أيضا مع الطريقتين أن تستخدم طريقة التنسيقات داخل الوسوم، وهنا يجب أن تعلم القاعدة الأساسية لتطبيق التنسيقات، أو بمعنى آخر أي أمر سوف يتم تطبيقه إذا إستخدمت أكثر من طريقة أو أكثر من ملف كما في المثال السابق.
كيف يقوم المتصفح بتطبيق تنسيقات الـ CSS؟
يجب أن تعلم أن المتصفح يقوم بقراءة صفحة الـ HTML من أعلى إلى أسفل ومن اليسار إلى اليمين، أي أنه ما يكتب أولا في صفحة الويب يتم تطبيقه أولا، وما يكتب أخيرا يفوز (يتم عرضه في المتصفح)، ولنأخذ المثال التالي
HTML
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Style Order</title> <link rel="stylesheet" type="text/css" href="https://cdn.abuelfateh.com/css/normalize.min.css" /> <style type="text/css"> p { color:blue; } </style></head><body> <p style="color: #ea1e2c;">abuelfateh</p></body></html>
في المثال السابق إستخدمنا الثلاثة طرق لتطبيق تنسيقات الـ CSS والغرض من ذلك تغيير لون كلمة abuelfateh، فمن خلال طريقة تضمين التنسيقات (الطريقة الثانية) إخترنا تنسيق لون الكتابة في العنصر <p> باللون الأزرق، ثم من خلال إستخدام طريقة التنسيق داخل الوسم (الطريقة الأولى) قمنا بتغيير اللون إلى الأحمر، وبتطبيق قاعدة المتصفح (ما يكتب أخيرا يفوز) سوف تظهر الكلمة abuelfateh باللون الأحمر. وهنا يجب التوضيح أنه إذا قمنا بوضع الوسم <link /> بعد الوسم <style> فإن التنسيقات الموجودة في ملف الـ CSS هي التي سوف يتم تطبيقها، وإذا وضعنا الوسم <link /> قبل الوسم <style> كما في المثال، فإن التنسيقات الموجودة في الوسم <style> هي التي سوف يتم تطبيقها إعمالا لقاعدة المتصفح في أن ما يكتب أخيرا يفوز، ودائما تذكر أن آخر ما يكتب والذي دائما ما يتم تطبيقه هو التنسيقات الموجودة داخل الوسم (النوع الأول).
وبذلك نكون قد تعرفنا على طرق إضافة تنسيقات الـ CSS، وكيف يتم تطبيقها، أرجو أن أكون قد وفقت في توصيل المعلومة، ولا تتردد في السؤال عن أي شيء غير واضح أو إضافة أي معلومة قد أكون أخطأت في كتابتها، من خلال التعليقات.
