تقنيات الويب: دورة css --الدرس الاول--

دورة css كاملة للمبتدئين

الدرس الاول

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

</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">

</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 لهذا .

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