Nwahy Articles V3 pro

تفصيلات في تقنية css

تفصيلات في تقنية css

القسم css - الزيارات 8237 - التاريخ 20/3/2008
[color=FA0309]الفصل بين الشكل و البنية ..[/color]

لم تعنى هتمل أبداً بالتحكم في الشكل أو مظهر صفحة الويب ، انها لغة تحدد بنية و وظيفة العناصر في الصفحة ، و تترك المتصفح يقرر كيف ستظهر هذه العناصر بالفعل . و لكن مطوري الويب الساعين نحو الكمال أرادوا المزيد ، و ابتهجوا عندما اخترعت نتسكيب واصفات هتمل جديدة جعلتهم يبدءون في التحكم في المظهر . لجعل النص في جسم الوثيقة body يظهر بالطريقة التي يريدونها كانوا يحيطون الواصفة <p> بالواصفة <font face> ، و <i> ... الخ . بعد ذلك كانوا يضعون كل شيء في صفحات متداخلة و يستخدمون فواصل GIF الخفية لدفعها 20 بكسل لتكوين هامش . يا لها من فوضى ، الشفرة ازدادت تعقيداً و ازدادت الصعوبة في إنشاء أو نقل المحتوى إلى الويب بسرعة . صفحات الأنماط تمكننا من التحكم بشكل أكبر بطريقة صحيحة عن طريق فصل الجزء الذي يحدد البنية عن الجزء الذي يحدد الشكل . و بهذا تظل شفرة الهتمل نظيفة و بسيطة كما هو مقرر لها ، و شفرة صفحات الأنماط تتحكم في المظهر من بعيد .

[color=FA0309]التحكم بالتخطيط أكثر من ذي قبل ..[/color]

بالطبع <font size> مكنتنا من تحديد حجم النص ، و واصفات الجدول ساعدتنا على إنشاء هوامش . لكن بالرغم من كل شيء فإن ما يمكننا فعله بالهتمل كان محدوداً للغاية ، فليس في إمكاننا عمل نص بطول 80 بكسل ، ليس في إمكاننا تحديد الهوامش بسهولة ، ليس في إمكاننا التحكم في المسافات بين السطور أو الكلمات ، ليس في إمكاننا تحديد مكان الصور بدقة على الشاشة . و حتى الآن فإن صفحات الأنماط جعلت كل هذا ممكناً و أكثر ، و وعدتنا بأن المستقبل سيكون أكثر إثارة .

[color=FA0309]عمل صفحات أصغر و أسرع ..[/color]

إليك المزيد من الأخبار الجيدة : صفحات الأنماط هي نص بسيط ، مثل هتمل ، لا رسوميات ، لا برامج تنفيذية ، لا إضافات ، لا تدفقات ، لا تأخير . انها بنفس سرعة شفرة الهتمل المباشرة . و مع صفحات الأنماط يمكنك فعل أشياء كنت تلجأ إلى صور GIF لعملها . و كما ذكرنا مسبقاً فإن صفحات الأنماط تعني واصفات جدول أقل بالإضافة إلى تقليل الواصفات الأخرى التي تجعل شفرتك فوضى غير منظمة ، و هكذا فإن شفرة أقل و رسوميات أقل تعني أحجام ملفات أقل .

[color=FA0309]صيانة أو تحديث العديد من الصفحات بسهولة و سرعة ..[/color]

بدون صفحات الأنماط إذا أردت أن أغير الخط المستخدم في نصوص الجسم في جميع صفحات موقعي ، فسيكون على أن أحرر كل صفحة على حدة يدوياً . و لكن مع صفحات الأنماط يمكنني أن أجعل كل صفحات موقعي تشير إلى وثيقة CSS واحدة ، و إذا أردت أن أغير نص الجسم فكل ما علي فعله هو تغيير سطر واحد من هذه الوثيقة ، و الموقع بكامله يتم تحديثه في الحال .

[color=FA0309]صديق للمتصفحات المختلفة ..[/color]

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


افتح الصفحة في متصفحك ، و سوف ترى هذا :

i



تهانينا .. لقد أنشأت أول صفحة ويب مدعمة بصفحات الأنماط .

-------------------------------------------------------------



لنلق نظرة الآن على الشفرة الجديدة التي نراها لأول مرة . إن قلب صفحات الأنماط هو القواعد ، و أبسط هذه القواعد تبدو مثل هذا :

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 في صفحة الهتمل .



[color=FA0309]طمر صفحة الأنماط .. Embedding Stylesheets [/color]

و هذه هي الوسيلة التي استعملناها في المثال السابق ، كل معلومات صفحة الأنماط توجد في أعلى صفحة الهتمل منفصلة عن شفرة جسم الوثيقة . عندما تطمر قواعد صفحة أنماط فإن المتصفحات تحترمها حتى نهاية الوثيقة ، و هذه هي الطريقة المثالية لتعديل صفحة واحدة فقط إذا ما احتجت لهذا .

قد تكون لاحظت شيئان غريبان في قواعد صفحة الأنماط في المثال الأول ، و هي الصفة :

TYPE='text/css'


و واصفات التعليق في هتمل --!> و <-- . أولاً الصفة Type تحدد نوع MIME حتى تستطيع المتصفحات التي لا تدعم صفحات الأنماط أن تتجاهلها . أما واصفات التعليق في هتمل فهي أكثر أهمية ، فبعض المتصفحات الأقدم (مثل المتصفح IE 2.0 لأجهزة الماكنتوش) لن تتعرف على صفحات الأنماط برغم وجود الصفة TYPE ، و سوف تظهر شفرة صفحات الأنماط نفسها . هذا ليس شيئاً جيداً ، و يمكنك التخلص منه باستعمال الصفة TYPE و واصفات التعليق دائماً .

[color=FA0309]الربط إلى صفحة أنماط خارجية .. Linking to external Stylesheets [/color]

هنا تبدأ القوة الكامنة في صفحات الأنماط في الظهور ، فبدلاً من طمر شفرة صفحات الأنماط في كل صفحة على حدة يمكنك توجيه عدة صفحات هتمل إلى وثيقة صفحة أنماط مركزية . هذا الملف الخارجي سوف يعد القواعد لكل صفحاتك . إذا غيرت شيء ما مثل حجم الخط في ملف صفحة الأنماط فإن كل صفحاتك ستعكس هذا التغيير على الفور . و إذا كنت تقوم بصيانة موقع كبير فهذه الميزة هي الجنة بالنسبة لك . و إليك طريقة استخدامها : أنشيء صفحة الويب كالمعتاد و لكن بدلاً من استخدام الواصفة <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> و اتبع كل القواعد المنصوص عليها في صفحة الأنماط الموصل إليها في صفحة الهتمل . و يمكنك الربط إلى نفس وثيقة صفحة الأنماط من عدد غير محدود من صفحات الهتمل ، فقط كل ما عليك هو تحديد المسار إذا لم تكن في نفس المكان .

[color=FA0309]استيراد صفحة أنماط خارجية .. Importing an external Stylesheet [/color]

استيراد صفحة أنماط خارجية تعمل بشكل مشابه للوصل إلى صفحة أنماط خارجية ، و لكن الفرق يكمن في أنك لا يمكن أن تجمع بين طريقة الوصل و الطرق الأخرى في حين أنه يمكن الجمع بين الاستيراد و الطرق الأخرى . إليك هذا المثال :

<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 .

i



المرونة في استيراد صفحات الأنماط مدهشة حقاً . يمكنك استيراد ما تشاء من صفحات الأنماط و تتخطاهم بنمط مطمور في الصفحة كما تريد . لسوء الحظ فإن المتصفحات قد تباطأت في دعم هذه الطريقة لإضافة صفحات الأنماط إلى صفحات الويب ، و قد دعمها فقط متصفح IE 4 و IE 5 و لذلك فأنا لا أنصح باستعمالها في الوقت الحالي .

[color=FA0309]إضافة الأنماط في السطر inline ..[/color]

و أخيراً .. يمكنك إضافة الأنماط سطر بسطر 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 لهذا .

تذكر أنك يمكن أن تستخدم أكثر من طريقة من هذه الطرق في نفس الوقت ، و الواقع فإن قوة صفحات الأنماط تكمن في الجمع بين الطرق التي تضيف الأنماط إلى صفحات الويب .
مشاركة الموضوع
Facebook Twitter Google+ Pinterest Reddit StumbleUpon Linkedin Tumblr Google Bookmarks Email
كن أول من يقيم الموضوع
12345

أضف تعليقك على الموضوع