المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : الدرس الاول: مقدمة الى صفائح الاساليب المتعاقبة CSS=CASCADING STYLE SHEETS

Xacker
16-03-2003, 12:14 AM
الدرس الاول: مقدمة الى صفائح الاساليب المتعاقبة CSS=CASCADING STYLE SHEETS
================================================== ======================

لعل اهم ابتكارات HTML على الاطلاق في الوقت الحالي هو استحداثها لصفائح الاساليب المتعاقبة وهي مقياس تم اقتراحه للمرة الاولى بواسطة مجمع شبكة ويب العالمية W3C=WORLD WIDE WEB CONSORTIUM وهي اهم بادرة يقدمها مجمع W3C لتقديم بعض الاستقرار لمواصفات HTML الحالية وتم توجيهها لايقاف الحاجة الى تقديم المزيد من المعرفات بواسطة منتجي المتصفحات وذلك بالغاء الحاجة اليها.

وكانت CSS نتيجة جهود W3C لتخفيض الحاجة لتقديم المزيد من معرفات التنسيق الفيزيائية التي يقوم منتجو الصفحات بتقديمها مثل MICROSOFT و NETSCAPE وقد وفرت لمؤلفي ويب معرفات اضافية لزيادة التحكم في تخطيط العناصر في صفحة ويب وبشكل ما يشبه ما تجده في برامج نشر سطح المكتب DESKTOP PUBLISHING PROGRAM والمشكلة هي انه بمرور الوقت زادت هذه المعرفات الاضافية من تعقيد صفحات ويب منتجة صفحات ويب يمكن الا تكون متوافقة مع جميع متصفحات ويب.

يجب ان ينفق مؤلفوا ويب مقدارا كبيرا من الوقت لتعلم القائمة الاضافية من معرفات HTML وان يقوموا بحفظ وظائفهم بالترتيب لانتاج صفحات محترفة في ويب كما انها اصعب بكثير بالنسبة للاشخاص العاجزين عن قراءة الصفحات التي تحوي ابتكارات جديدة خاصة بالمتصفحات الحالية مثل الاطارات والجداول معظم اجهزة الترجمة للعاجزين عن الرؤية والذين يستخدمون عادة قارئات BRAILLE ومركبات الكلام SPEECH SYNTHESIZERS تقضي وقتا طويلا في القراءة التصفح والحصول على المعلومات المفيدة من صفحات الويب باستخدام هذا العناصر.

بتقديم الكثير من هذه المعرفات الجديدة تمت زيادة التوكيد على اعتماد خصائص التخطيط في HTML وتم اخذ HTML بعيدا عن غرضها الاصلي وهو انه يجب تصميم المعرفات لعرض المحتويات بطريقة منطقية. حافظت CSS على البنية المنطقية بطريقة سهلة الفهم وقوية التاثير.
باستخدام CSS يمكنك عمل ما يلي:
1- تحديد حجم النقطة في النص.
2- اضافة مسافة بادئة الى النص
3- اعداد الهوامش ضمن صفحة الويب
4- اضافة عناصر تنسيق اضافية الى صفحة الويب مثل الحدود حول النص
5- استخدام وحدات قياس متل البوصة والسنتميتر لاعداد احجام دقيقة لعناصر العرض
6- اعداد اساليب متميزة لصفحة ويب او مجموعة من صفحات الويب
7- تقليل المقدار الكلي اللازم من المعرفات في صفحة ويب بازالة عدد من المعرفات الحاوية المستخدمة لانجاز تاثير معين مثل <FONT SIZE>
8- المزيد والمزيد مما ستكشف عنه الدروس

يجب ملاحظة ان CSS تسمح لمؤلف ويب بالوصول الى الطريقة التي يتم فيها عرض المعرفات فقط وهي لا تؤثر على الوظائف الاساسية مثل الوصلات التشعبية والطريقة التي سيتم بها تضمين الاغراض ضمن صفحة ويب
ان CSS اداة قوية مصممة لمساعدة مؤلفي ويب الذين يرغبون بالمزيد من القدرة على التحكم في خصائص تخطيط العناصر في صفحة ويب لكن ليس بالطريقة التي تعمل بها العناصر الاخرى
Xacker
16-03-2003, 12:16 AM
في الوقت الحالي يجب التاكيد على انه لا يتم تطبيق كافة مواصفات CSS في مستكشف الانترنيت ولا في متصفح NETSCAPE. يستخدم كلاهما مجموعة جزئية من المواصفات الكاملة التي اقرها مجمع W3C ولكن باعتبارهما عضوين في هذا المجمع فكلنا امل انهما سوف يقومان باعتماد المجموعة الكاملة من معرفات CSS قريبا كما ان هناك متصفحات اخرى سوف تقوم بتنفيذ المواصفات الكاملة مثل ARENA, AMAYA, E-MACS-W3 لكنها ليست منتشرة الاستخدام ومتوفرة لبعض انظمة التشغيل فقط.

بالرغم من انه من غير المحتمل ان يتوقف منتجو المتصفحات عن ابتكار المزيد من المعرفات لمتصفحاتهم وبمرور الزمن تآلف مؤلفو ويب مع CSS وازداد عدد المتصفحات التي تقوم بتنفيذها كاملة وسيتم تقليل الحاجة والطلب على المعرفات الجديدة بشكل كبير.

الميكانيزمات وراء CSS:
----------------------
لم يتم تصميم CSS للتحكم بشكل خاص بتخطيط صفحة ويب بل من الافضل ان يتم التفكير بها كميكانيكية لتعديل كيفية عرض المحتويات بالرغم من ذلك فهي تمكن مؤلف ويب من تحسين التحكم في توضع العناصر ضمن صفحة ويب والذي يمكن انجازه باستخدام معرفات HTML المعتادة

بالرغم من التعقيد الذي تظهر به شيفرة CSS فانك عندما تفهم مبادئ الصفائح المتعاقبة سيصبح من السهل تنفيذهم واستخدامهم كاداة قوية لبناء صفحات ويب قوية

فيما يلي مثال بسيط جدا لشيفرة HTML تتضمن عنصر CSS وحيدا:

<HTML>
<HEAD>
<STYLE>H2 {COLOR: GREEN}</STYLE>
</HEAD>
<BODY>
<H1>هذا النص يعرض كما هو ...</H1>
<H2>اما هذا فيعرض بلون اخضر</H2>
</BODY>
</HTML>

يمكن رؤية نتيجة هذه الشفرة والذي سيقوم ببساطة بتحويل عناوين المستوى الثاني الى اللون الاخضر

تعمل CSS على تحديد المعرف الذي تريد تعديله وذكر الكيفية التي تنوي بها عرض المعرف في متصفح ويب. وهذه هي مبادئ CSS التي تتالف من جزاين:
1- العنصر الذي سيتم تغييره ويدعى المنتقي SELECTOR
2- عبارة تصف كيفية عرض المنتقي وتدعى التصريح DECLARATION

في شفرة المثال السابق كان المنتقي هو معرف عناوين المستوى الثاني <H2> والتصريح الذي يقوم بتخصيص قيمة اللون باللون الاخضر:
{COLOR: GREEN}

هناك طرق لتخدبد معلومات css ضمن صفحة ويب لكن في المثال السابق تم احتواء معلومات جديدة يجب عليك ان تالفهم اذا كنت تنوي استخدام الكثير من عناصر css في صفحات ويب الخاصة بك: <STYLE> <SPAN> <DIV>

ساقوم بشرح واحدة لليوم الا وهي: <STYLE>

<STYLE>...</STYLE>
اسم العنصر: معرف الاسلوب
وصف العنصر: يقوم باضافة صفائح الاساليب المتعاقبة الى صفحة ويب
سمات العنصر: DISABLED تشير الى عدم تمكين وظيفة CSS معينة
MEDIA-ALL|BRAILLE|PRINT|PROJECTION|SCREEN|SPEECH تحدد نوع الوسيط الذي تم تصميم تحديثات CSS من اجله
TITLE تستخدم لتسمية اسلوب CSS معين يمكن للمتصفح ان يستخدمه
TYPE-MIME type تحدد نوع MIME للحمتويات المتضمنة في معرف الاسلوب
المعرفات المرافقة: <SPAN>, <HEAD>
مثال:
<STYLE>H2 {COLOR: GREEN}</STYLE>

يتم استخدام معرف الاسلوب لاضافة معلومات CSS الى صفحة ويب ويملك عددا من السمات الاختيارية DISABLED, TITLE, TYPE.
Xacker
16-03-2003, 12:17 AM
تشير DISABLED الى عدم تمكين وظيفة معينة ويتم استخدامها في الحالات التي ترغب فيها ابطال عرض تنسيق CSS في منطقة معينة في صفحة ويب اذا تم استخدامها مع معرف تنسيق نص يتم عرض المحتويات لكن ببساطة لن يتم تنسيقه باسلوب CSS المشار اليه (اقوم باستخدامها بشكل شخصي لتعطيل طريقة العرض لصفحات الويب التي اقوم بتصميمها في حال تم الاستيلاء عليها من البعض في محاولة لتغييرها عنده سيفاجئون بان شكل الصفحة قد اصبح لا يطاق ويختلف اختلافا كليا عن شكلها على ويب وقد يظن البعض ان السبب من الجهاز او شيء كذلك لكن ما هو الا حيلة اقوم فيها بربط ملف لشفرة ال CSS مع ملف اخر لكود جافا مثلا والاخير مع صفحة الويب بحيث اذا لم يتحقق شرط معين ضمن الشفرة تم تعطيلها ولا يمكن اكتشاف طريقة الاصلاح الا لمن تفوقوا على فرونت بيج واستخدموا المفكرة لتصميم الصفحات فاتركوه يا شباب الشاطر من يستخدم اي محرر نصوص لكتابة صفحات ويب الخاصة به لا ان يعتمد على اكواد جاهزة :|)
من بين السمات الاربع للمعرف <STYLE> يتم دعم DISABLED في مستكشف الانترنيت لكن لا يتم دعمها في مواصفات HTML 4.0 !

تحدد السمة MEDIA نوع الوسيط الذي يتم استخدام تنسيق CSS من اجله وهي تملك في الوقت الحالي قيم:
ALL, BRAILLE, PROJECTION, SCREEN, SPEECH
وتعكس جميعها الوسائط التي يمكن لصفحة ويب ان تعرض عليها. اذا وجد جهاز لترجمة صفحة ويب الى وسيط مختلف فانه يستخدم عناصر CSS المرافقة للاسلوب المعين المستخدم فيه
هذه السمة مدعومة في مستكشف الانترنيت وهي جزء من مواصفات HTML الرسمية

تستخدم السمة TITLE لتسمية اسلوب معين محتوى ضمن معرف <STYLE> والفكرة هي تمكين مؤلف ويب من انشاء مجموعة من اساليب التنسيق المختلفة التي يمكن للمؤلف تطبيقها بشكل اختياري لصفحات ويب هذه السمة هي جزء من مواصفات HTML 4.0 لكن لم يتم عتمادها من المتصفحين الاكثر شهرة بعد.

تقوم السمة <TYPE> بتحديد نوع ال MIME المحتوى ضمن المعرف <STYLE> هناك قيمة ممكنة واحدة فقط هي: TEXT/CSS التي يتم تطبيقها مباشرة على CSS
يجب استخدام المعرف <STYLE> لوحده ضمن العنوان (بين معرفي <HEAD>..</HEAD>) لصفحة ويب. هذه السمة هي جزء من مواصفات HTML 4.0 وقد تم اعتمادها من قبل المتصفحين الاكثر شهرة: مستكشف الانترنيت و متصفح NETSCAPE

يمكن استخدام معرفات HTML الاخرى لتطبيق CSS في قسم معين من صفحة ويب بحيث تمكن مؤلف ويب من اعداد خصائص CSS خاصة لذلك القسم بحيث يمكن تمييزه مرئيا عن بقية صفحة ويب
يتم انجاز ذلك بواسطة المعرفين <SPAN><DIV> وهو ما سيكون عنوان درسنا الثاني باذن الله

--------------------- تحياتي FATAL-TERROR ------------------
أسير الشـوق
17-03-2003, 01:59 PM
الف شكر
Xacker
18-03-2003, 07:52 AM
هلا وغلا
Xacker
18-03-2003, 08:39 AM
اعتقد تم اضافة رد من اخوي الحمادي لكن لم تم حذفه ؟