Xacker
18-03-2003, 08:40 PM
بسم الله نبدا ما توقفنا عنده المرة السابقة
ينظر هذا الدرس الى عناصر CSS التي يمكن تحديدها ضمن صفحة ويب هناك ما يفوق الخمسين من عناصر CSS ويت التعرف على معظمها ضمن الاصدارات الاخيرة من مستكشف الانترنيت ومتصفح NETSCAPE
تاتي معظم عناصر CSS ضمن فصائل مترابطة والتي تشترك فيما بينها بنفس السمات والوظائف وهذه هي الكيفية التي سيتم بها تجميع المعرفات المقبلة
لا تبدو عناصر CSS كمعرفات HTML ولا تسلك سلوكها لهذا ساقوم بشرحها بطريقة مختلفة بشكل طفيف عن معرفات HTML
ومع ذلك هناك الكثير من الخصائص المتماثلة على سبيل المثال تملك عناصر CSS غالبا الكثير من السمات لكنها تعمل بطريقة مختلفة عن معرفات HTML
تجب الملاحظة ان احد الاشياء التي تعيق CSS عن ان يتم اعتمادها بشكل واسع ضمن مجتمع مؤلفي ويب هو حقيقة ان مستكشف الانترنيت ومتصفح NETSCAPE وحتى الوقت الحالي يدعمان مجموعة جزئية فقط من عناصر CSS
يخبرك وصف عناصر CSS الذي ساورده لاحقا عن كيفية عمل هذه العناصر طبقا للمواصفات الرسمية
في الكثير من الحالات يتم اعتماد عناصر CSS ضمن مستكشف الانترنيت ولا يتم ذلك في NETSCAPE او لا يتم اعتمادهم في كلا المتصفحين
في بعض الحالات يتم دعم بعض القيم فقط من عناصر CSS او تعمل بعض العناصر عندما ترتبط بمعرفات HTML معينة
كما ان هناك حالات يتم فيها اعتماد عنصر CSS ضمن اصدار ما لمتصفح ثم يتم اسقاطه في الاصدار التالي عموما
اذا كانت احدى الميزات مدعومة في متصفح ما فمن المحتمل كثيراان تستخدم عنصر CSS لاعدادها
على سبيل المثال العنصر TEXT-DECORATION يملك قيمة تدعى BLINK تقوم بجعل النص يومض بانتظام وهي مدعومة ضمن متصفح NETSCAPE حيث يمكنك استخدام المعرف BLINK للحصول على نفس التاثير لكن ليس في مستكشف الانترنيت الذي لا يدعم المعرف BLINK ويمكن ان تامل ان يتم اعتماد جميع عناصر CSS ضمن هذين المتصفحين الرئيسيين
وحدات القياس وعناوين URL:
-------------------------
هناك عدد من الانواع المحتلفة لوحدات القياس التي يمكن للكثير من عناصر CSS استخدامها
ان امكانية اعداد قيم محددة لعناصر CSS المتنوعة هي احدى نقاط القوة التي تتمتع بها
يمكن كاستخدام اي من القيم التالية: السنتيمتر, البوصة, الملليمتر, البيكاس, عناصر الصورة البكسل, والنقطة
لتحديد نوع معين من قيم القياس يمكنك استخدام حرفين خاصين كما هو مبين في القائمة:
السنتميتر: CM
الملليمتر: MM
البوصة: IN
البيكاس: PC
البكسل: PX
النقطة: PT
لاستخدام قيمة ضمن عنصر CSS قم بوضع قيمة رقمية تسبق الخرفين الخاصين كما في المثال التالي:
<SUB STYLE="BORDER-TOP-WIDTH: 5PX">نص منخفض بحد</SUB>
في هذا المثال السابق يتم اعداد عرض الحد الاعلى بسماكة خمسة عناصر صورة
كما ان هناك عددا من عناصر CSS التي يمكن ان تاخذ عنوان URL تشير عادة الى ملف صورة ولمجرد الذكر اقول بان عناوين URL في عنصر CSS تختلف عن كيفية تحديدها ضمن معرف HTML يشير معرف HTML بشكل نموذجي الى شيء مختلف مثل ملف صورة وذلك باستخدام التنسيق التالي:
<BODY BACKGROUND="SOMPIC.JPG">
لا يستخدم مكافئه في CSS اشارة المساواة ولا علامات الاقتباس
ودلا من ذلك يحوي URL ضمن قوسين وتسبقه مباشرة عبارة URL بدون اشارة مساواة كما في المثال التالي:
<BODY STYLE="BACKGROUND-IMAGE: URL (SOMPIC.JPG)">
عناصر CSS الخاصة باللون والخلفية:
يتم استخدام فصيلتي اللون والخلفية لعناصر CSS لاعداد لون عدد من معرفات HTML ولاعداد خصائص خلفية معرفات HTML على الترتيب
COLOR
الوصف: سقوم باعداد لون نص
القيم: اسم اللون او قيمة اللون بالشكل RRGGBB
مثال:
<B STYLE="COLOR: BLUE"> نص ازرق وعرض</B>
--------------------------
BACKGROUND
الوصف: يقوم باعداد لون او صورة للخلفية
القيم: اسم اللون او قيمة اللون بالشكل RRGGBB
(اسم ملف الصورة مع المسار) URL
مثال:
<BODY STYLE="BACKGROUND: TEAL">
عنصر الخلفية هذا هو الاب لجميع عناصر CSS الاخرى الخاصة بالخلفية
والتي تشترك بخصائص متماثلة لاضافة خلفيات الى معرفات HTML وفي هذا المثال يعمل هذا العنصر بطريقة مماثلة لمعرف HTML المكافئ <BODY BGCOLOR="TEAL">
-------------------------------------------
BACKGROUND-COLOR
الوصف: يقوم باعداد لون الخلفية لعنصر
القيم: اسم اللون او قيمة اللون بالشكل RRGGBB
TRANSPARENT تقوم بتحديد العنصر كعنصر شفاف
مثال:
<B STYLE="BACKGROUND-COLOR: 00FF00">نص عرض وبلون خلفية اخضر</B>
يسح هذا المعرف باضافة خلفية الى معرف HTML
وهو ياخذ عموما اسم اللون او قيمة اللون الست عشرية
في هذه الحالة تنتج الشيفرة خلفية خضراء للكلمات المحتواة ضمن معرف الخط السميك
تسمح السمة TRANSPARENT على سبيل المثال عند اضافة شيفرة المثال التالية الى صفحة ويب ستجعل لون الخلفية او صورة الخلفية وراء النص شفافة:
<B STYLE="BACKGROUND-COLOR: TRANSPARENT">الخلفية الملونة ستظهر وراء هذا النص</B>
--------------------------------------------
BACKGROUND-IMAGE
الوصف: يحدد رسميا كصورة للخلفية
اذا لم يتم تحديد هذا العنصر يمكن تحديد عناصر CSS الاخرى مثل
BACKGROUND-ATTACHMENT, BACKGROUND-REPEAT, BACKGROUND-POSITION كما يمكن اضافة قيمة لونية
القيم: (اسم الملف مع المسار) URL
مثال:
<BODY STYLE="BACKGROUND-IMAGE: URL (THATPICTURE.JPG)">
يقوم هذا العنصر باعدد صورة خلفية لعنصر والشيفرة المعروضة تسلك سلوك معرف HTML المكافئ <BODY BACKGROUND="THATPICTURE.JPG">
اذا تم تحديد هذا العنصر يمكن تحديد عناصر CSS الاخرى مثل
BACKGROUND-REPEAT
BACKGROUND-POSITION
BACKGROUND-ATTACHMENT
التي تقوم بتعديل سلوكه بشكل اضافي كما يمكن تحديد قيمة لونية ايضا والتي ستقوم بتغطية المساحات التي لا تقوم الصورة بتغطيتها
--------------------------------------------
BACKGROUND-REPEAT
الوصف: اذا تم اعداد العنصر BACKGROUND-IMAGE يمكن لهذا العنصر الاضافي ان يتم تحديد كيفية تكرار الصورة في صفحة ويب
القيم: REPEAT: يتم تكرار الصورة افقيا وراسيا
REPEAT-X يتم تكرار الصورة افقيا
REPEAT-Y يتم تكرار الصورة راسيا
NO-REPEAT: لا يتم تكرار الصورة
مثال:
<BODY STYLE="BACKGROUND-IMAGE: URL (PRESIDENTS.JPG); BACKGROUND-REPEAT: REPEAT-X">
يتم استخدام هذا العنصر دائما بالتلاوم مع العنصر BACKGROUND-IMAGE ويقوم بتعديل الطريقة التي يت بها عرض الصورة
وهو يملك عددا من السمات REPEAT التي تقوم بتكرار صورة الخلفية افقيا وراسيا
REPEAT-X التي تقوم بتكرار صورة الخلفية افقيا
REPEAT-Y التي تقوم بتكرار صورة الخلفية راسيا
NO-REPEAT التي تعرض صورة الخلفية مرة واحدة فقط وذلك في الزاوية اليمنى العليا لصفحة ويب
--------------------------------------------
BACKGROUND-ATTACHMENT
الوصف: اذا تم اعداد العنصر BACKGROUND-IMAGE يمكن لهذا العنصر الاضافي ان يحدد هل يتم تحريك الصورة عندما ينقر المستخدم على شريط التمرير الخاص بنافذة المتصفح
القيم: SCROLL: تتحرك الصورة عندما ينقر المستخدم على شريط التمرير الخاص بنافذة المتصفح
FIXED لا تتحرك الصورة عندما ينقر المستخدم على شريط التمرير الخاص بنافذة المتصفح
مثال:
<BODY STYLE="BACKGROUND-IMAGE: URL {PRESIDENTS.JPG); BACKGROUND-REPEAT: REPEAT-X; BACKGROUND-ATTACHMENT: FIXED">
تسمح السمة FIXED التابعة لهذا العنصر بتحريك الصورة كي تبقى في مكان واحد بينما يتم تدرج النص عبر صفحة ويب يتم تنفيذ ذلك في مستكشف الانترنيت باستخدام الشيفرة التالية:
<BODY BACKGROUND="THATPICTURE.JPG" BGPROPERTIES=FIXED>
مع CSS تصبح الشيفرة المكافئة:
<BODY STYLE="BACKGROUND-IMAGE: URL {PRESIDENTS.JPG); BACKGROUND-ATTACHMENT: FIXED">
احدى الايجابيات في CSS هو امكانية اضافة عناصر CSS الاخرى لتعدل سلوك الخلفية بشكل اضافي
----------------------------------------------
BACKGROUND-POSITION
الوصف: ان تم اعداد العنصر BACKGROUND-IMAGE يمكن لهذا العنصر الاضافي ان يحدد الاحداثيات التي ستظر الصورة ضمنها لاول مرة ثم يتم تكرارها اعتبارا من ذلك الموقع
القيم: X%-Y% النسبة بالرجوع الى ابعاد نافذة المتصفح
X Y تمثل موقع الاحداثيات المطلقة للصورة
(LEFT/CENTER/RIGHT) (TOP/CENTER/BOTTOM) كلمات فتاحية تمثل مواقع الشاشة
الكلمة المفتاحية اليمنى تمثل الموقع الراسي والكلمة المفتاحية اليسرى تمثل الموقع الافقي للصورة
مثال:
<BODY STYLE="BACKGROUND-IMAGE: URL (THATPICTURE.JPG); BACKGROUND-POSITION: 200 40">
يمكن هذا العنصر مؤلف ويب من اعداد موقع محدد تبدا منه صورة الخلفية بالتكرار ضمن صفحة ويب
يمكن ان يتم اعداده كقيمة مئوية (Y% X%) من عرض وارتفاع نافذة المتصفح
او احداثيات محددة في صفحة ويب (X Y) في الحالة الاخيرة
يتم استخدام وحدة قياس عناصر الصورة افتراضيا (البكسل) لكن يمكن تحديد اي قيم لوحدة القياس بالاضافة الى ذلك يمكن استخدام الكلمات المفتاحية لاعداد موقع X و Y ايضا مثل "left top" او "CENTER BOTTOM"
تحياتي FATAL-TERROR
ينظر هذا الدرس الى عناصر CSS التي يمكن تحديدها ضمن صفحة ويب هناك ما يفوق الخمسين من عناصر CSS ويت التعرف على معظمها ضمن الاصدارات الاخيرة من مستكشف الانترنيت ومتصفح NETSCAPE
تاتي معظم عناصر CSS ضمن فصائل مترابطة والتي تشترك فيما بينها بنفس السمات والوظائف وهذه هي الكيفية التي سيتم بها تجميع المعرفات المقبلة
لا تبدو عناصر CSS كمعرفات HTML ولا تسلك سلوكها لهذا ساقوم بشرحها بطريقة مختلفة بشكل طفيف عن معرفات HTML
ومع ذلك هناك الكثير من الخصائص المتماثلة على سبيل المثال تملك عناصر CSS غالبا الكثير من السمات لكنها تعمل بطريقة مختلفة عن معرفات HTML
تجب الملاحظة ان احد الاشياء التي تعيق CSS عن ان يتم اعتمادها بشكل واسع ضمن مجتمع مؤلفي ويب هو حقيقة ان مستكشف الانترنيت ومتصفح NETSCAPE وحتى الوقت الحالي يدعمان مجموعة جزئية فقط من عناصر CSS
يخبرك وصف عناصر CSS الذي ساورده لاحقا عن كيفية عمل هذه العناصر طبقا للمواصفات الرسمية
في الكثير من الحالات يتم اعتماد عناصر CSS ضمن مستكشف الانترنيت ولا يتم ذلك في NETSCAPE او لا يتم اعتمادهم في كلا المتصفحين
في بعض الحالات يتم دعم بعض القيم فقط من عناصر CSS او تعمل بعض العناصر عندما ترتبط بمعرفات HTML معينة
كما ان هناك حالات يتم فيها اعتماد عنصر CSS ضمن اصدار ما لمتصفح ثم يتم اسقاطه في الاصدار التالي عموما
اذا كانت احدى الميزات مدعومة في متصفح ما فمن المحتمل كثيراان تستخدم عنصر CSS لاعدادها
على سبيل المثال العنصر TEXT-DECORATION يملك قيمة تدعى BLINK تقوم بجعل النص يومض بانتظام وهي مدعومة ضمن متصفح NETSCAPE حيث يمكنك استخدام المعرف BLINK للحصول على نفس التاثير لكن ليس في مستكشف الانترنيت الذي لا يدعم المعرف BLINK ويمكن ان تامل ان يتم اعتماد جميع عناصر CSS ضمن هذين المتصفحين الرئيسيين
وحدات القياس وعناوين URL:
-------------------------
هناك عدد من الانواع المحتلفة لوحدات القياس التي يمكن للكثير من عناصر CSS استخدامها
ان امكانية اعداد قيم محددة لعناصر CSS المتنوعة هي احدى نقاط القوة التي تتمتع بها
يمكن كاستخدام اي من القيم التالية: السنتيمتر, البوصة, الملليمتر, البيكاس, عناصر الصورة البكسل, والنقطة
لتحديد نوع معين من قيم القياس يمكنك استخدام حرفين خاصين كما هو مبين في القائمة:
السنتميتر: CM
الملليمتر: MM
البوصة: IN
البيكاس: PC
البكسل: PX
النقطة: PT
لاستخدام قيمة ضمن عنصر CSS قم بوضع قيمة رقمية تسبق الخرفين الخاصين كما في المثال التالي:
<SUB STYLE="BORDER-TOP-WIDTH: 5PX">نص منخفض بحد</SUB>
في هذا المثال السابق يتم اعداد عرض الحد الاعلى بسماكة خمسة عناصر صورة
كما ان هناك عددا من عناصر CSS التي يمكن ان تاخذ عنوان URL تشير عادة الى ملف صورة ولمجرد الذكر اقول بان عناوين URL في عنصر CSS تختلف عن كيفية تحديدها ضمن معرف HTML يشير معرف HTML بشكل نموذجي الى شيء مختلف مثل ملف صورة وذلك باستخدام التنسيق التالي:
<BODY BACKGROUND="SOMPIC.JPG">
لا يستخدم مكافئه في CSS اشارة المساواة ولا علامات الاقتباس
ودلا من ذلك يحوي URL ضمن قوسين وتسبقه مباشرة عبارة URL بدون اشارة مساواة كما في المثال التالي:
<BODY STYLE="BACKGROUND-IMAGE: URL (SOMPIC.JPG)">
عناصر CSS الخاصة باللون والخلفية:
يتم استخدام فصيلتي اللون والخلفية لعناصر CSS لاعداد لون عدد من معرفات HTML ولاعداد خصائص خلفية معرفات HTML على الترتيب
COLOR
الوصف: سقوم باعداد لون نص
القيم: اسم اللون او قيمة اللون بالشكل RRGGBB
مثال:
<B STYLE="COLOR: BLUE"> نص ازرق وعرض</B>
--------------------------
BACKGROUND
الوصف: يقوم باعداد لون او صورة للخلفية
القيم: اسم اللون او قيمة اللون بالشكل RRGGBB
(اسم ملف الصورة مع المسار) URL
مثال:
<BODY STYLE="BACKGROUND: TEAL">
عنصر الخلفية هذا هو الاب لجميع عناصر CSS الاخرى الخاصة بالخلفية
والتي تشترك بخصائص متماثلة لاضافة خلفيات الى معرفات HTML وفي هذا المثال يعمل هذا العنصر بطريقة مماثلة لمعرف HTML المكافئ <BODY BGCOLOR="TEAL">
-------------------------------------------
BACKGROUND-COLOR
الوصف: يقوم باعداد لون الخلفية لعنصر
القيم: اسم اللون او قيمة اللون بالشكل RRGGBB
TRANSPARENT تقوم بتحديد العنصر كعنصر شفاف
مثال:
<B STYLE="BACKGROUND-COLOR: 00FF00">نص عرض وبلون خلفية اخضر</B>
يسح هذا المعرف باضافة خلفية الى معرف HTML
وهو ياخذ عموما اسم اللون او قيمة اللون الست عشرية
في هذه الحالة تنتج الشيفرة خلفية خضراء للكلمات المحتواة ضمن معرف الخط السميك
تسمح السمة TRANSPARENT على سبيل المثال عند اضافة شيفرة المثال التالية الى صفحة ويب ستجعل لون الخلفية او صورة الخلفية وراء النص شفافة:
<B STYLE="BACKGROUND-COLOR: TRANSPARENT">الخلفية الملونة ستظهر وراء هذا النص</B>
--------------------------------------------
BACKGROUND-IMAGE
الوصف: يحدد رسميا كصورة للخلفية
اذا لم يتم تحديد هذا العنصر يمكن تحديد عناصر CSS الاخرى مثل
BACKGROUND-ATTACHMENT, BACKGROUND-REPEAT, BACKGROUND-POSITION كما يمكن اضافة قيمة لونية
القيم: (اسم الملف مع المسار) URL
مثال:
<BODY STYLE="BACKGROUND-IMAGE: URL (THATPICTURE.JPG)">
يقوم هذا العنصر باعدد صورة خلفية لعنصر والشيفرة المعروضة تسلك سلوك معرف HTML المكافئ <BODY BACKGROUND="THATPICTURE.JPG">
اذا تم تحديد هذا العنصر يمكن تحديد عناصر CSS الاخرى مثل
BACKGROUND-REPEAT
BACKGROUND-POSITION
BACKGROUND-ATTACHMENT
التي تقوم بتعديل سلوكه بشكل اضافي كما يمكن تحديد قيمة لونية ايضا والتي ستقوم بتغطية المساحات التي لا تقوم الصورة بتغطيتها
--------------------------------------------
BACKGROUND-REPEAT
الوصف: اذا تم اعداد العنصر BACKGROUND-IMAGE يمكن لهذا العنصر الاضافي ان يتم تحديد كيفية تكرار الصورة في صفحة ويب
القيم: REPEAT: يتم تكرار الصورة افقيا وراسيا
REPEAT-X يتم تكرار الصورة افقيا
REPEAT-Y يتم تكرار الصورة راسيا
NO-REPEAT: لا يتم تكرار الصورة
مثال:
<BODY STYLE="BACKGROUND-IMAGE: URL (PRESIDENTS.JPG); BACKGROUND-REPEAT: REPEAT-X">
يتم استخدام هذا العنصر دائما بالتلاوم مع العنصر BACKGROUND-IMAGE ويقوم بتعديل الطريقة التي يت بها عرض الصورة
وهو يملك عددا من السمات REPEAT التي تقوم بتكرار صورة الخلفية افقيا وراسيا
REPEAT-X التي تقوم بتكرار صورة الخلفية افقيا
REPEAT-Y التي تقوم بتكرار صورة الخلفية راسيا
NO-REPEAT التي تعرض صورة الخلفية مرة واحدة فقط وذلك في الزاوية اليمنى العليا لصفحة ويب
--------------------------------------------
BACKGROUND-ATTACHMENT
الوصف: اذا تم اعداد العنصر BACKGROUND-IMAGE يمكن لهذا العنصر الاضافي ان يحدد هل يتم تحريك الصورة عندما ينقر المستخدم على شريط التمرير الخاص بنافذة المتصفح
القيم: SCROLL: تتحرك الصورة عندما ينقر المستخدم على شريط التمرير الخاص بنافذة المتصفح
FIXED لا تتحرك الصورة عندما ينقر المستخدم على شريط التمرير الخاص بنافذة المتصفح
مثال:
<BODY STYLE="BACKGROUND-IMAGE: URL {PRESIDENTS.JPG); BACKGROUND-REPEAT: REPEAT-X; BACKGROUND-ATTACHMENT: FIXED">
تسمح السمة FIXED التابعة لهذا العنصر بتحريك الصورة كي تبقى في مكان واحد بينما يتم تدرج النص عبر صفحة ويب يتم تنفيذ ذلك في مستكشف الانترنيت باستخدام الشيفرة التالية:
<BODY BACKGROUND="THATPICTURE.JPG" BGPROPERTIES=FIXED>
مع CSS تصبح الشيفرة المكافئة:
<BODY STYLE="BACKGROUND-IMAGE: URL {PRESIDENTS.JPG); BACKGROUND-ATTACHMENT: FIXED">
احدى الايجابيات في CSS هو امكانية اضافة عناصر CSS الاخرى لتعدل سلوك الخلفية بشكل اضافي
----------------------------------------------
BACKGROUND-POSITION
الوصف: ان تم اعداد العنصر BACKGROUND-IMAGE يمكن لهذا العنصر الاضافي ان يحدد الاحداثيات التي ستظر الصورة ضمنها لاول مرة ثم يتم تكرارها اعتبارا من ذلك الموقع
القيم: X%-Y% النسبة بالرجوع الى ابعاد نافذة المتصفح
X Y تمثل موقع الاحداثيات المطلقة للصورة
(LEFT/CENTER/RIGHT) (TOP/CENTER/BOTTOM) كلمات فتاحية تمثل مواقع الشاشة
الكلمة المفتاحية اليمنى تمثل الموقع الراسي والكلمة المفتاحية اليسرى تمثل الموقع الافقي للصورة
مثال:
<BODY STYLE="BACKGROUND-IMAGE: URL (THATPICTURE.JPG); BACKGROUND-POSITION: 200 40">
يمكن هذا العنصر مؤلف ويب من اعداد موقع محدد تبدا منه صورة الخلفية بالتكرار ضمن صفحة ويب
يمكن ان يتم اعداده كقيمة مئوية (Y% X%) من عرض وارتفاع نافذة المتصفح
او احداثيات محددة في صفحة ويب (X Y) في الحالة الاخيرة
يتم استخدام وحدة قياس عناصر الصورة افتراضيا (البكسل) لكن يمكن تحديد اي قيم لوحدة القياس بالاضافة الى ذلك يمكن استخدام الكلمات المفتاحية لاعداد موقع X و Y ايضا مثل "left top" او "CENTER BOTTOM"
تحياتي FATAL-TERROR