الثانية أحسن بكل تأكيد،
أريد التعقيب على رد الأخ محمد
الأولى غير محبب استخدامها إطلاقا
لأنه بالتأثير، الأولى أكثر تأثيرا من الثانية وتقريبا كل الطرق الأخرى
طبعا إضافة !important إلى آخره سطر سيجعل له التأثير الأقوى
ولكن لا يحبب أو جيب استخدام الأولى لأن المشاكل ستحدث هكذا
طبعا إذا كان أيّ أحد يتساءل ماذا أقصد بالأهمية أو بالأحرى الأولوية priority
فهي من لديه الأولية لتطبيق الكود الخاص به، مثلا ID يغلب class و class يغلب type و !important يغلبهم جميعا
في قانون الأغلبة، تأتي الأمور هكذا
* { .... }
وهذا أقلهم أولوية، يعني الكل يتغلب عليهم
ul { .... }
وهذا أقوى من سابقه ولكن يبقى ضعيفا،
.element { .... }
وهذا هو النوع الشائع استخدامه، يفضل دوما استخدامه على البقية. فهو أكثر تحديدا بما ينبغي، وليس ضعيفا جدا
#element { .... }
وهذا النوع أقوى من السابقيين، فهو معروف بأنه أقوى ب 256 من class ولايفضل استعماله إطلاقا، خشية حدوث اختلاط في الكود وظهور نتائج غير متوقعة
أقوى تأثيرا من ملف خارجي
وهو بالتحديد في خاصية style لأيّ عنصر، تكتب الكود طبعا ناهيك عن بشاعة الأمر، هو غير محبب إطلاقا لأن له الأولوية على كل البقية، يعني مقارنة بكل ما سبق من ID و class هذا الستايل سيتم تنفيذه رغما عن أنفهم. لا تستعمله إلا إذا كنت مضطرا
نأتي لآخر واحد، هذه القاعدة هي أن تكتبها بعد الستايل الذي تريده
selector { color: red !important;}
وهذه أقوى من كل ما سبق، ولها الأولية على الجميع. يعني هي الخيار الأقصى، استعمله عندما تكون محتاجه فحسب
الأولى تعرف بـ inline-css
لا ضرر من استخدامها ولا يعتبر هذا خطأ
انا أفضل استخدام ملف css منفصل عن ملفات htm
ففي هذه الحالة يسهل التعديل على التنسيق في أي وقت
كما يسهل على المتصفح تطبيق التنصيق على وسوم html
وكذلك فإن المتصفح يقوم بأخذ نسخة تلقائيا من ملفات css بمجرد تحميل الموقع وهذا يفيد عند تكرار الزيارة للموقع حيث يستخدم المتصفح النسخة المحفوظة تلقائيا وهذا يزيد من سرعة عرض الموقع
صحيح أن استدعاء كل ملف css يعتبر استدعاء جديد لطلب http من الخادم (كأي صورة مثلا) ولكن هذا موضوع آخر، يفضل ألا يكون عدد ملفات css كبير حتى لا يؤثر على سرعة عرض الموقع
السلام عليكم،
هناك ثلاث طرق رئيسية لإضافة تنسيق css لعناصر html
ويتم ذلك عبر إضافة خاصية style لعنصر html المراد تنسيقه مباشرة:
<div class='views' style='background: #000;'>
ويتم ذلك بين وسمي style الذي يمكن أن يضاف لأي مكان في الصفحة لكنه يضاف بشكل رئيسي ومفضل بين وسمي head في بداية الصفحة:
<head>
<!-- ... -->
<style>
.views {
background: #000;
}
</style>
<!-- ... -->
</head>
ويتم ذلك عبر ربط صفحة html بملف css خارجي واحد أو أكثر، وذلك عبر عنصر link
<head>
<!-- ... -->
<link rel="stylesheet" href="style.css">
<!-- ... -->
</head>
طبعا توفر الطرق الثلاث معا يعني بالضرورة أن هناك حالات استخدام تصلح لها كل طريقة: 1. التنسيق عبر ملف خارجي: هو الأفضل والأكثر استخداما، وذلك راجع لعدة أسباب: * أولا أن المتصفحة عند تحميل الصفحة يقوم بتخزين الملفات التي يقوم باستيرادها، وبالتالي عند الدخول للموقع في المرة الأولى يقوم بتحميل ملف التنسيق الخارجي، ويقوم باستدعائه مباشرة من الجهاز عند التنقل أثناء الموقع ككل، وهذا لا يحدث css المدرج مباشرة في الصفحة أو في الوسم. * وثانيا أن المواقع اليوم باحجامها الكبيرة، تجعل من السهل التحكم في الموقع ككل من خلال ملف واحد للتنسيق، وخاصة عند التغيير مستقبلا، فبدلا من التغيير في ملفات html كثير لتغيير نفس اللون من الأسود إلى الرمادي، تغيرها في ملف خارجي في مكان واحد. * وثالثا لأن حجم صفحات html يصير أكبر بكثرة إدراج أكواد css وغالبا بشكل متكرر في أكثر من صفحة، لذلك تجميع الكود وكتابته مرة واحدة في ملف واستدعاؤه بسطر واحد يجعل صفحات html اقل حجما.
التنسيق داخل الصفحة (في رأس الصفحة): يمكن أن تكون هذه الطريقة مفيدة في عدة حالات، خاصة حين يكون التنسيق في موقع ديناميكي لجزء معين، اختياريا ويختلف حسب كل مستخدم، ويتم إضافته في رأس الصفحة بشكل تلقائي، وبالتالي جعله خارجا يتطلب العديد من الملفات المخصص لكل مستخدم على حدة، رغم أن هذه الحالات قليلة إلا أنها موجودة.
التنسيق البيسطري (داخل الوسم): يمكن أن يكون مفيدة في الحالات التي يكون فيها العنصر متغيرا حسب القيمة، وتكون غالبا عند ارتباط "التنسيق" المراد إظهاره ببيانات تم جلها من قاعدة البينات او ما شابه، على سبيل المثال بالنسبة لأعمدة التقدم progress bars، فتغير قيمة التقدم من 0% إلى 100% يكون لحظيا ولإظهاره وتنسيقه يتم إدراج القيمة مباشرة في العنصر:
Photoshop
illustrator
أتمنى أن يفيدك تعليقي :)
افضل طرييقة ملف خاجي ...
[ابسط مثال]
اذا وضعته باحدى طرق الاخرى كالاولى او الثانيى قد يدل على عم احترافية العمل !
التعليقات