بسم الله الرحمن الرحيم
عند كتابة ملفات CSS هناك ثلاثة طرق للكتابة تستخدم لكتابة هذه الملفات هى كالتالى :
1. التركيب الخارجى External style sheet
2. التركيب الداخلى Internal style sheet
3. التركيب المتداخل Inline style
2. التركيب الداخلى Internal style sheet
3. التركيب المتداخل Inline style
1. التركيب الخارجى External style sheet
التركيب الخارجى هو إنشاء ملف CSS واحد يتم رفعه على الإنترنت و يتم إنشائه بإستخدام أى من برامج محررات النصوص و يتم حفظ الإمتداد به لصيغة CSS ... فمثلا يكون الملف stylesheet.css . وهذا الملف يستخدم لتطبيقه على الموقع ككل فند إنشاء صفحة جديدة ستأخد نفس التركيب المذكور فى الملف ..
و يتم إدراج هذا الملف فى HTML الخاص بالموقع بين العنصر <head> و بين <head/> كالتالى :
<head>
< link rel='stylesheet' type='ext/css' href='mystyle.css'>
< /head>
< link rel='stylesheet' type='ext/css' href='mystyle.css'>
< /head>
و يتم إستبدال mystyle.css برابط الملف الذى تم رفعه على الإنترنت
لاحظ أن الملف يتم إنشائه بصورة طبيعية مثل الموضوعين السابقين
هذا التركيب يكون أحيانا خيالى أو لا يتم إستخدامه بصورة كبيرة .. لأن معظم المواقع التى يتم إنشائها يميل أصحابها إلى تغير شكل الصفحات حتى يدفع الملل عن الزوار .. لذا يلجئون إلى إستخدام الطرق الأخرى
2. التركيب الداخلى Internal style sheet
هذا التركيب هو غالبا الأكثر إستخداما فى قوالب مدونات بلوجر و فى بعض المواقع الأخرى و يت إدراجه مباشرة فى HTML الخاص بالموقع بين العنصر <head> و بين <head/> ... و لكن يتم إدارجهم مع عنصر خاص هو <style>
إذا كان لدين العنصر التالى
<p id='main'>مدونة عالم نت</p>
يكون CSS الخاص به كالتالى
<head>
< style>
< style>
#main {
color: red;
text-align: left;
background: yellow;
text-align: left;
background: yellow;
}
< /style>
< /head>
< /style>
< /head>
يكون الشكل النهائى :
مدونة عالم نت
3. التركيب المتداخل Inline style
<p style="color:red;text-align:left;background:yellow;">مدونة عالم نت</p>
فتكون كالتالى
مدونة عالم نت
لكن السؤال هل يمكن و ضع ملف CSS للموقع ككل مع وضع بعض الاستثناءات داخل الصفحات ؟
نعم يمكن ذلك ... فى لغة CSS تكون الأولوية للتركيب الداخلى Internal style و المتداخل Inline style
لاحظ التالى :
إذا كان العنصر كالتالى
<p id='main'>مدونة عالم نت</p>
و كان التركيب الخارجى External style sheet كالتالى
#main {
color: red;
text-align: right;
background: black;
}
و كان التركيب الداخلى Internal style sheet كالتالى
#main {
text-align: left;
backgroound: yellow;
}
فيكون الناتج كالتالى
مدونة عالم نت
لاحظ : تم إستخدام color: red; من التركيب الخارجى
و تم إستخدام backgroound: yellow; و text-align: left; من التركيب الخارجى على الرغم من وجود مثل هذه الخواص فى التركيب الخارجى الإ أن الأولوية تكون دائما للتركيب الداخلى
0 comments:
إرسال تعليق