التصاميم

By


تم إزالة وسوم التعديل من صفحة HTML مثل (font) و تم استبدلها و حفظها في ملف تصميم منفصل .


كيف تستخدم التصميم


عندما يقرأ المتصفح ملف التصميم فإنه سيقوم بتطبيق هذا التصميم وإظهاره على صفحة الويب
هناك ثلاثة أنواع يمكن اضافتها للحصول على ملف تصميم CSS

  • ملف تصميم خارجي

  • ملف تصميم داخلي

  • تصميم بنفس السطر


ملف التصميم الخارجي


يعتبر الملف الخارجي مثالي عند تطبيق تصميم معين للعديد من الصفحات . ومن خلال الملف الخارجي يمكنك التحكم بتصميم موقعك من خلال ملف واحد فقط ولكن كل صفحة HTML يجب أن تربطها بذلك الملف الخارجي وذلك باستخدام الوسم <link> داخل وسم <head> مع الحفاظ على نفس اللواحق الموجودة داخل الوسم <link> مثل rel="stylesheet" type="text/css" href="mystyle.css" كما بالمثال التالي :
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

التصميم الداخلي


يمكن استخدام التصميم الداخلي عند استخدام تصميم فريد لصفحة ويب معينة عندها يمكننا استخدام تصميم داخلي أي في نفس صفحة الويب من خلال الوسم <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>

إن أردت تعلم الكثير عن ملفات التصميم يمكنك التوجه الى دورة CSS


وسوم التصميم


<style> تحدد معلومات التصميم للصفحة
<link /> تربط العلاقة بين صفحة الويب مع ملفات خارجية مختلفة



ليست هناك تعليقات:

إرسال تعليق