6

ما هو أفضل مكان لكتابة الـ CSS ؟

بسم الله الرحمن الرحيم

أتسائل عن الفرق بين كتابة كود CSS في كود HTML على هذا الشكل:

<div id='views' style='background: #000;'>

أو كتابته في ملفه الخاص على هذا الشكل:

.views {background: #000;}

ملاحظة: views هي مثال فقط.

أريد أن أعرف ما الفرق؟ ومتى أستخدم كل منهما ؟

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

15
assassinateur أضف ردا

الثانية أحسن بكل تأكيد،

أريد التعقيب على رد الأخ محمد

الأولى غير محبب استخدامها إطلاقا

لأنه بالتأثير، الأولى أكثر تأثيرا من الثانية وتقريبا كل الطرق الأخرى

طبعا إضافة !important إلى آخره سطر سيجعل له التأثير الأقوى

ولكن لا يحبب أو جيب استخدام الأولى لأن المشاكل ستحدث هكذا

15
assassinateur أضف ردا

طبعا إذا كان أيّ أحد يتساءل ماذا أقصد بالأهمية أو بالأحرى الأولوية priority

فهي من لديه الأولية لتطبيق الكود الخاص به، مثلا ID يغلب class و class يغلب type و !important يغلبهم جميعا

في قانون الأغلبة، تأتي الأمور هكذا

المحدد العام general selector

* { .... }

وهذا أقلهم أولوية، يعني الكل يتغلب عليهم

محدد النوع type selector

ul { .... }

وهذا أقوى من سابقه ولكن يبقى ضعيفا،

محدد الكلاس class selector

.element { .... }

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

محدد الآي دي ID selector

#element { .... }

وهذا النوع أقوى من السابقيين، فهو معروف بأنه أقوى ب 256 من class ولايفضل استعماله إطلاقا، خشية حدوث اختلاط في الكود وظهور نتائج غير متوقعة

كود مدمج في الصفحة

أقوى تأثيرا من ملف خارجي

كود في العنصر inline-style

وهو بالتحديد في خاصية style لأيّ عنصر، تكتب الكود طبعا ناهيك عن بشاعة الأمر، هو غير محبب إطلاقا لأن له الأولوية على كل البقية، يعني مقارنة بكل ما سبق من ID و class هذا الستايل سيتم تنفيذه رغما عن أنفهم. لا تستعمله إلا إذا كنت مضطرا

!important rule

نأتي لآخر واحد، هذه القاعدة هي أن تكتبها بعد الستايل الذي تريده

selector { color: red !important;}

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

2
محمد أضف ردا

الأولى تعرف بـ inline-css

لا ضرر من استخدامها ولا يعتبر هذا خطأ

انا أفضل استخدام ملف css منفصل عن ملفات htm

ففي هذه الحالة يسهل التعديل على التنسيق في أي وقت

كما يسهل على المتصفح تطبيق التنصيق على وسوم html

وكذلك فإن المتصفح يقوم بأخذ نسخة تلقائيا من ملفات css بمجرد تحميل الموقع وهذا يفيد عند تكرار الزيارة للموقع حيث يستخدم المتصفح النسخة المحفوظة تلقائيا وهذا يزيد من سرعة عرض الموقع

صحيح أن استدعاء كل ملف css يعتبر استدعاء جديد لطلب http من الخادم (كأي صورة مثلا) ولكن هذا موضوع آخر، يفضل ألا يكون عدد ملفات css كبير حتى لا يؤثر على سرعة عرض الموقع

2
oemran أضف ردا

السلام عليكم،

هناك ثلاث طرق رئيسية لإضافة تنسيق css لعناصر html

01. التنسيق البَيسَطرِي inline-css

ويتم ذلك عبر إضافة خاصية style لعنصر html المراد تنسيقه مباشرة:

<div class='views' style='background: #000;'>

02. التنسيق داخل الصفحة

ويتم ذلك بين وسمي style الذي يمكن أن يضاف لأي مكان في الصفحة لكنه يضاف بشكل رئيسي ومفضل بين وسمي head في بداية الصفحة:

<head>
<!-- ... -->
 <style>
    .views {
        background: #000;
    }
</style>
<!-- ... -->
</head>

03. التنسيق في عبر ملف خارجي

ويتم ذلك عبر ربط صفحة html بملف css خارجي واحد أو أكثر، وذلك عبر عنصر link

<head>
<!-- ... -->
<link rel="stylesheet" href="style.css">
<!-- ... -->
</head>

المفاضلة بين الطرق الثلاث

طبعا توفر الطرق الثلاث معا يعني بالضرورة أن هناك حالات استخدام تصلح لها كل طريقة: 1. التنسيق عبر ملف خارجي: هو الأفضل والأكثر استخداما، وذلك راجع لعدة أسباب: * أولا أن المتصفحة عند تحميل الصفحة يقوم بتخزين الملفات التي يقوم باستيرادها، وبالتالي عند الدخول للموقع في المرة الأولى يقوم بتحميل ملف التنسيق الخارجي، ويقوم باستدعائه مباشرة من الجهاز عند التنقل أثناء الموقع ككل، وهذا لا يحدث css المدرج مباشرة في الصفحة أو في الوسم. * وثانيا أن المواقع اليوم باحجامها الكبيرة، تجعل من السهل التحكم في الموقع ككل من خلال ملف واحد للتنسيق، وخاصة عند التغيير مستقبلا، فبدلا من التغيير في ملفات html كثير لتغيير نفس اللون من الأسود إلى الرمادي، تغيرها في ملف خارجي في مكان واحد. * وثالثا لأن حجم صفحات html يصير أكبر بكثرة إدراج أكواد css وغالبا بشكل متكرر في أكثر من صفحة، لذلك تجميع الكود وكتابته مرة واحدة في ملف واستدعاؤه بسطر واحد يجعل صفحات html اقل حجما.

  1. التنسيق داخل الصفحة (في رأس الصفحة): يمكن أن تكون هذه الطريقة مفيدة في عدة حالات، خاصة حين يكون التنسيق في موقع ديناميكي لجزء معين، اختياريا ويختلف حسب كل مستخدم، ويتم إضافته في رأس الصفحة بشكل تلقائي، وبالتالي جعله خارجا يتطلب العديد من الملفات المخصص لكل مستخدم على حدة، رغم أن هذه الحالات قليلة إلا أنها موجودة.

  2. التنسيق البيسطري (داخل الوسم): يمكن أن يكون مفيدة في الحالات التي يكون فيها العنصر متغيرا حسب القيمة، وتكون غالبا عند ارتباط "التنسيق" المراد إظهاره ببيانات تم جلها من قاعدة البينات او ما شابه، على سبيل المثال بالنسبة لأعمدة التقدم progress bars، فتغير قيمة التقدم من 0% إلى 100% يكون لحظيا ولإظهاره وتنسيقه يتم إدراج القيمة مباشرة في العنصر:

    Photoshop

    illustrator

أتمنى أن يفيدك تعليقي :)

0
belal879 أضف ردا

افضل طرييقة ملف خاجي ...

[ابسط مثال]

اذا وضعته باحدى طرق الاخرى كالاولى او الثانيى قد يدل على عم احترافية العمل !