عندما يقرأ المتصفح صفحة التصميم سيتم عرض صفحة HTML حسب التصميم المخصص
هناك ثلاث أنواع لارفاق كود CSS
- ملف تصميم خارجي
- تصميم داخلي
- تصميم داخل السطر
ملف تصميم خارجي
يعتبر الملف الخارجي مثالي عند تطبيق تصميم معين للعديد من الصفحات . ومن خلال الملف الخارجي يمكنك التحكم بتصميم موقعك من خلال ملف واحد فقط ولكن كل صفحة HTML يجب أن تربطها بذلك الملف الخارجي وذلك باستخدام الوسم <link> داخل وسم <head> مع الحفاظ على نفس اللواحق الموجودة داخل الوسم <link> مثل rel="stylesheet" type="text/css" href="mystyle.css" كما بالمثال التالي :
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
يمكن أن يكتب ملف التصميم الخارجي بمحرر نصوص كما ذكرنا عند استخدام HTML ولايجب استخدام اي وسم HTML في ملف التصميم ويمكن حفظه في ملف خارجي مستقل بامتداد .css ويبين المثال التالي أكواد CSS موجودة داخل الملف الخارجي المستقل
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
ملاحظة: لاتترك مسافة بين خاصية القيمة والوحدة المستخدمة مثل "margin-left:20 px" عوضاً عن "margin-left:20px" أي ان 20 و px يجب ألا يكون هناك فاصل بينهما (20px) لأن الطريقة الخاطئة ستعمل فقط بمتصفح الانترنت اكسبلورر ولكن لن تعمل على متصفح فايرفوكس و أوبرا
التصميم الداخلي
يمكن استخدام التصميم الداخلي عند استخدام تصميم فريد لصفحة ويب معينة عندها يمكننا استخدام تصميم داخلي أي في نفس صفحة الويب من خلال الوسم <style> واستخدام اللاحقة type="text/css" أي نوع التصميم css ويستخدم داخل <head> أيضاً
<head><style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
تصميم داخل السطر
يسبب التصميم داخل السطر أي داخل وسم HTML فقدان خصائص التصميم المحترف وذلك بخلط وسوم HTML مع أكواد CSS لذلك استخدم هذه الطريقة باقتصاد وحكمة
لاستخدام طريقة التصميم داخل السطر استخدم اللاحقة style داخل الوسم الذي تود التعديل عليه كما يمكنك استخدام أي خاصية وقيمة تابعة css . يوضح المثال التالي أن هذه الفقرة بالتحديد سيطبق عليها تصميم اللون البني وتباعد يمين الصفحة بـ 20 بكسل
<p style="color:sienna; margin-right:20px">هذه فقرة لونها بني</p>
تعدد صفحات التصميم
ان تم وضع أكثر من خاصية لنفس المنتقى في ملفات تصميم متعددة عندها سيتم استخدام القيمة الأكثر تخصيصاً للمنتقى . هذا المثال هو عبارة عم ملف خارجي وقد تم اختيار هذه الخاصيات التالية للمنتقى h3
h3{
color:red;
text-align:left;
font-size:8pt;
}
وفي التصميم الداخلي تم اختيار هذه الخاصيات للمنتقى h3
h3{
text-align:right;
font-size:20pt;
}
اذا كانت صفحة الويب متصلة مع ملف تصميم خارجي وتحتوي على تصميم داخلي , سيظهر التصميم التالي للوسم h3
color:red;text-align:right; font-size:20pt;
تم تبني اللون من خلال الملف الخارجي وتم استبدال المحاذاة وحجم الخط من خلال التصميم الداخلي
ان التصاميم المتعددة ستجتمع في تصميم واحد
يمكن أن تكون مخصصة كما يلي
- داخل وسوم HTML
- داخل قسم head عند بداية صفحة HTML
- ملف CSS خارجي
ملاحظة: يمكن استخدام صفحات تصميم خارجية متعددة لصفحة HTML واحدة
الترتيب الانسيابي
أي التصاميم ستستخدم عندما يكون هناك أكثر من تصميم لنفس العنصر في صفحة الويب ؟
بشكل عام يمكننا القول بأن جميع التصاميم ستجتمع في ملف تصميم واحد عملي من خلال القواعد التالية حيث يشغل الرقم 4 الأولوية الأكبر
- افتراضي المتصفح
- ملف التصميم الخارجي
- ملف التصميم الداخلي
- تصميم داخل السطر ( داخل وسوم HTML )
لهذا فإن التصميم داخل وسوم HTML يشكل الأولوية الأكبر في تطبيق التصميم أي يطغى على التصميم الداخلي في قسم head وفي الملف الخارجي أو حتى الاعدادات الافتراضية للمتصفح .
ملاحظة : اذا تم وضع الملف الخارجي للتصميم بعد التصميم الداخلي في قسم <head> فهذا يعني بأن التصميم الخارجي سيتجاوز التصميم الداخلي .
ليست هناك تعليقات:
إرسال تعليق