الفصل بين الشكل و البنية ..
لم تعنى هتمل أبداً بالتحكم في الشكل أو مظهر صفحة الويب ، انها لغة تحدد بنية و وظيفة العناصر في الصفحة ، و تترك المتصفح يقرر كيف ستظهر هذه العناصر بالفعل . و لكن مطوري الويب الساعين نحو الكمال أرادوا المزيد ، و ابتهجوا عندما اخترعت نتسكيب واصفات هتمل جديدة جعلتهم يبدءون في التحكم في المظهر . لجعل النص في جسم الوثيقة body يظهر بالطريقة التي يريدونها كانوا يحيطون الواصفة <p> بالواصفة <font face> ، و <i> ... الخ . بعد ذلك كانوا يضعون كل شيء في صفحات متداخلة و يستخدمون فواصل GIF الخفية لدفعها 20 بكسل لتكوين هامش . يا لها من فوضى ، الشفرة ازدادت تعقيداً و ازدادت الصعوبة في إنشاء أو نقل المحتوى إلى الويب بسرعة . صفحات الأنماط تمكننا من التحكم بشكل أكبر بطريقة صحيحة عن طريق فصل الجزء الذي يحدد البنية عن الجزء الذي يحدد الشكل . و بهذا تظل شفرة الهتمل نظيفة و بسيطة كما هو مقرر لها ، و شفرة صفحات الأنماط تتحكم في المظهر من بعيد .
التحكم بالتخطيط أكثر من ذي قبل ..بالطبع <font size> مكنتنا من تحديد حجم النص ، و واصفات الجدول ساعدتنا على إنشاء هوامش . لكن بالرغم من كل شيء فإن ما يمكننا فعله بالهتمل كان محدوداً للغاية ، فليس في إمكاننا عمل نص بطول 80 بكسل ، ليس في إمكاننا تحديد الهوامش بسهولة ، ليس في إمكاننا التحكم في المسافات بين السطور أو الكلمات ، ليس في إمكاننا تحديد مكان الصور بدقة على الشاشة . و حتى الآن فإن صفحات الأنماط جعلت كل هذا ممكناً و أكثر ، و وعدتنا بأن المستقبل سيكون أكثر إثارة .
عمل صفحات أصغر و أسرع ..إليك المزيد من الأخبار الجيدة : صفحات الأنماط هي نص بسيط ، مثل هتمل ، لا رسوميات ، لا برامج تنفيذية ، لا إضافات ، لا تدفقات ، لا تأخير . انها بنفس سرعة شفرة الهتمل المباشرة . و مع صفحات الأنماط يمكنك فعل أشياء كنت تلجأ إلى صور GIF لعملها . و كما ذكرنا مسبقاً فإن صفحات الأنماط تعني واصفات جدول أقل بالإضافة إلى تقليل الواصفات الأخرى التي تجعل شفرتك فوضى غير منظمة ، و هكذا فإن شفرة أقل و رسوميات أقل تعني أحجام ملفات أقل .
صيانة أو تحديث العديد من الصفحات بسهولة و سرعة ..بدون صفحات الأنماط إذا أردت أن أغير الخط المستخدم في نصوص الجسم في جميع صفحات موقعي ، فسيكون على أن أحرر كل صفحة على حدة يدوياً . و لكن مع صفحات الأنماط يمكنني أن أجعل كل صفحات موقعي تشير إلى وثيقة CSS واحدة ، و إذا أردت أن أغير نص الجسم فكل ما علي فعله هو تغيير سطر واحد من هذه الوثيقة ، و الموقع بكامله يتم تحديثه في الحال .
صديق للمتصفحات المختلفة ..بعكس تقنيات أخرى للويب فإن صفحات الأنماط تتحلل بسهولة ، و هذا يعني أن المستخدمين لن يحصلوا على أيقونة مكسورة ساطعة إذا كانوا لم يركبوا إضافة plug-in ما ، أو شفرة بلا معنى إذا كانوا يستخدمون متصفح قديم نسبياً . المتصفحات التي تدعم صفحات الأنماط تستخدمها ، و المتصفحات التي لا تدعمها تتجاهلها .
هل اقتنعت الآن بأن صفحات الأنماط هي فكرة جيدة ؟ حسناً .. دعنا نصنع واحدة .
شغل محرر الهتمل المفضل لديك و اصنع صفحة ويب أساسية :
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
جيد .. الآن دعنا نضيف صفحات الأنماط ، ببساطة ادخل الشفرة التالية في أي مكان بين الواصفتين <head> و <head/> :
<STYLE TYPE="text/css">
<!--
H1 { color: green; font-size: 37px; font-family: impact }
P { text-indent: 1cm; background: yellow; font-family: courier }
-->
</STYLE>
افتح الصفحة في متصفحك ، و سوف ترى هذا :
تهانينا .. لقد أنشأت أول صفحة ويب مدعمة بصفحات الأنماط .
لنلق نظرة الآن على الشفرة الجديدة التي نراها لأول مرة . إن قلب صفحات الأنماط هو القواعد ، و أبسط هذه القواعد تبدو مثل هذا :
H1 { color: green }
هذه القاعدة تخبر المتصفح أن كل النص المحاط بالواصفتين <H1> و <H1/> يجب أن يكون باللون الأخضر .
كل قاعدة تتكون من مختار Selector و إعلان Declaration . في المثال أعلاه تعتبر H1 هي المختار ، و هي واصفة هتمل التي يرتبط بها النمط . أما الإعلان فهو يحدد ماذا يكون النمط ، و هو يتكون أيضاً من جزءين : الخاصية Property و هو في هذه الحالة color ، و القيمة Value و هي هنا green .
أي واصفة هتمل يمكن أن تستخدم كمختار ، و هكذا يمكنك ربط معلومات صفحات الأنماط بأي عنصر بدءاً من نص <p> العادي إلى محتويات <table> و <code> ، يمكنك حتى استخدام بعض خصائص صفحات الأنماط المتعاقبة على الرسوميات و ذلك بتطبيقهم على الواصفة <img> .
و كما ترى من مثالنا الأول ، يمكنك أن تجمع القواعد سوياً ، فنحن قد أعددنا ثلاثة إعلانات في وقت واحد للواصفة <p> . و بشكل مماثل يمكنك أيضاً جمع المختارات مثل :
H1, P, BLOCKQUOTE { font-family: arial }
هذه القاعدة تحدد أن كل النص بين الواصفات <H1> و <P> و <BLOCKQUOTE> سوف يتم عرضها بالخط Arial .
قواعد صفحات الأنماط تورث من الأب إلى الابن ، و إليك هذا المثال :
B { color: blue }
هذه القاعدة تخبر المتصفح بأن كل النص داخل الواصفة <B> يجب أن يكون باللون الأزرق ، و لكن ماذا سيفعل المتصفح في الموقف التالي ؟
<B>All my web pages will use Cascading Stylesheets within <I>four</I> weeks.</B>
لا توجد هنا قاعدة للواصفة <I> و لكن بما أنها حدثت داخل الواصفة <B> فإنها ترث الإعلان المخصص للواصفة <B> ، لذا يظهر الابن بالأزرق تماماً مثل الأب .
All my web pages will use Cascading Stylesheets within four weeks.
يوجد أربع طرق يمكنك استخدامها لإضافة صفحات الأنماط إلى صفحتك ، و كل واحدة منها لها مميزاتها :
1- طمر صفحة الأنماط داخل صفحة الهتمل .
2- الربط إلى صفحة أنماط خارجية من صفحة هتمل .
3- استيراد صفحة أنماط خارجية إلى صفحة الهتمل .
4- إضافة الأنماط سطر بسطر inline في صفحة الهتمل .
طمر صفحة الأنماط .. Embedding Stylesheetsو هذه هي الوسيلة التي استعملناها في المثال السابق ، كل معلومات صفحة الأنماط توجد في أعلى صفحة الهتمل منفصلة عن شفرة جسم الوثيقة . عندما تطمر قواعد صفحة أنماط فإن المتصفحات تحترمها حتى نهاية الوثيقة ، و هذه هي الطريقة المثالية لتعديل صفحة واحدة فقط إذا ما احتجت لهذا .
قد تكون لاحظت شيئان غريبان في قواعد صفحة الأنماط في المثال الأول ، و هي الصفة :
TYPE="text/css"
و واصفات التعليق في هتمل --!> و <-- . أولاً الصفة Type تحدد نوع MIME حتى تستطيع المتصفحات التي لا تدعم صفحات الأنماط أن تتجاهلها . أما واصفات التعليق في هتمل فهي أكثر أهمية ، فبعض المتصفحات الأقدم (مثل المتصفح IE 2.0 لأجهزة الماكنتوش) لن تتعرف على صفحات الأنماط برغم وجود الصفة TYPE ، و سوف تظهر شفرة صفحات الأنماط نفسها . هذا ليس شيئاً جيداً ، و يمكنك التخلص منه باستعمال الصفة TYPE و واصفات التعليق دائماً .
الربط إلى صفحة أنماط خارجية .. Linking to external Stylesheetsهنا تبدأ القوة الكامنة في صفحات الأنماط في الظهور ، فبدلاً من طمر شفرة صفحات الأنماط في كل صفحة على حدة يمكنك توجيه عدة صفحات هتمل إلى وثيقة صفحة أنماط مركزية . هذا الملف الخارجي سوف يعد القواعد لكل صفحاتك . إذا غيرت شيء ما مثل حجم الخط في ملف صفحة الأنماط فإن كل صفحاتك ستعكس هذا التغيير على الفور . و إذا كنت تقوم بصيانة موقع كبير فهذه الميزة هي الجنة بالنسبة لك . و إليك طريقة استخدامها : أنشيء صفحة الويب كالمعتاد و لكن بدلاً من استخدام الواصفة <STYLE> استخدم الواصفة <LINK> بين واصفات الرأس <HEAD> ، مثل :
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
و مع صفحة الأنماط الموصولة أنت لا تحتاج إلى استعمال واصفات التعليق . الآن أنشيء ملف نصي منفصل اسمه mystyles.css أو أي شيء تريده (و لكن راعي تغيير الوصلة في الشفرة) و يحتوي على هذا :
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
و حمل هذا الملف مع صفحة الهتمل على الخادم الذي عليه موقعك في نفس المكان أو اذكر المسار كاملاً إذا لم يكن في نفس المكان و اعرض الصفحة في متصفحك و ستجد أن المتصفح قد تتبع الواصفة <LINK> و اتبع كل القواعد المنصوص عليها في صفحة الأنماط الموصل إليها في صفحة الهتمل . و يمكنك الربط إلى نفس وثيقة صفحة الأنماط من عدد غير محدود من صفحات الهتمل ، فقط كل ما عليك هو تحديد المسار إذا لم تكن في نفس المكان .
استيراد صفحة أنماط خارجية .. Importing an external Stylesheetاستيراد صفحة أنماط خارجية تعمل بشكل مشابه للوصل إلى صفحة أنماط خارجية ، و لكن الفرق يكمن في أنك لا يمكن أن تجمع بين طريقة الوصل و الطرق الأخرى في حين أنه يمكن الجمع بين الاستيراد و الطرق الأخرى . إليك هذا المثال :
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
<STYLE TYPE="text/css">
<!--
@import url (company.css) ;
H1 { color: orange; font-family: impact }
-->
</STYLE>
</HEAD>
<BODY>
<H1>Stylesheets : the Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
و لنقل أن الملف company.css يبدو مثل هذا :
H1 { color: green; font-family: times }
P { background: yellow; font-family: courier}
في هذا المثال سوف يستورد المتصفح القواعد الموجودة في الملف company.css (يجب أن يكون السطر import@ هو الأول دائماً) ثم يضيف القواعد المطمورة في الصفحة ليحصل على مجموعة متنوعة من القواعد للصفحة كلها . و لكن المتصفح الآن لديه قاعدتان متضادتان ، الأولى في الملف الخارجي و تخبره بأن كل النص الواقع في الواصفة <H1> يجب أن يكون باللون الأخضر و بخط times new roman ، و الثانية مطمورة في الصفحة و تخبره بأن النص نفسه يجب أن يكون باللون البرتقالي و بخط impact ، فأيهما يجب أن يتبع ؟ في هذه الحالة فإن القاعدة المطمورة في الصفحة تربح و يتم عرض النص باللون البرتقالي و بخط impact .
المرونة في استيراد صفحات الأنماط مدهشة حقاً . يمكنك استيراد ما تشاء من صفحات الأنماط و تتخطاهم بنمط مطمور في الصفحة كما تريد . لسوء الحظ فإن المتصفحات قد تباطأت في دعم هذه الطريقة لإضافة صفحات الأنماط إلى صفحات الويب ، و قد دعمها فقط متصفح IE 4 و IE 5 و لذلك فأنا لا أنصح باستعمالها في الوقت الحالي .
إضافة الأنماط في السطر inline ..و أخيراً .. يمكنك إضافة الأنماط سطر بسطر inline و هذا يعني إضافة قواعد صفحة الأنماط في منتصف شفرة الهتمل ، و يمكن أن تبدو مثل هذا :
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1 STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</H1>
<P STYLE="background: yellow; font-family: courier">Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
في هذه الحالة أنت لا تحتاج إلى إضافة شفرة لصفحة الأنماط في أعلى وثيقة الهتمل ، فالخاصية STYLE الموجودة في السطر تعطي المتصفح كل ما يحتاجه من معلومات . الجانب السلبي هنا هو أنك يجب أن تضيف شفرة النمط في السطر في كل مرة تريد أن تستعملها . و عموماً فإن الأنماط المضافة في السطر inline تعتبر أقل قوة من تلك المطمورة أو الموصولة أو المستوردة ، و لكنك قد تجد لها نفعاً مثلاً إذا كانت كل فقراتك محددة النمط بصفحة أنماط موصولة و لكنك تريد تخطي نمط فقرة واحدة فيمكنك استخدام نمط inline لهذا .
تذكر أنك يمكن أن تستخدم أكثر من طريقة من هذه الطرق في نفس الوقت ، و الواقع فإن قوة صفحات الأنماط تكمن في الجمع بين الطرق التي تضيف الأنماط إلى صفحات الويب .
؟ 
<~ يعني صدّقني 
الجنس
نشــاط العضو
موضوع: الدرس الأول التحكم في الشكل والتخطيط وعمل صفحات اصغر 
الجمعة 7 يناير 2011 - 16:33