كل نمط من انماط لغة صفحات الانماط المتتالية يتكون من جزئين رئيسين هما المحدد Selectors والثاني هو قالب الاعلان Declaration block. واذا كان هذا جديد عليك فيجب عليك ان تقرأ الدرس الماضي بعنوان النمط وصفحات الانماط المتتالية فقالب الاعلان يحتوي علي خواص التنسيق مثل لون الخط او حجمه ..الخ من الخواص. ولكن سحر هذه اللغة يكمن في هذه الحروف الاولي التي نستخدمها في اضافة كل نمط او استايل والتي تسمي المحدد Selector وبإخبار ال CSS ما الذي تريد تنسيقه؟ فالمحدد يعطي لك قدره تامة علي التحكم بطريقة ظهور صفحتك. فأحيانا يمكنك ان تجعل المحدد يتتطبق علي عدد من العناصر في الصفحة الواحده بنمط واحد، ولكنك اذا كنت اكثر تفصيلا وتريد ان تصنع تأثير معين علي عنصر معين داخل الصفحة فهناك محددات أخري يمكن ان تقوم بهذا التأثير علي وسم معين او عدة وسوم مع بعض فالمحددات تعطيك الكثير من القدرة علي التحكم بالاستايل في الصفحة وهذا ما سوف نتعلمه في هذا الدروس إن شاء الله.
محدد الوسم Tag Selector:
واحيانا يسمي بمحدد النوع او العنصر وهي تعتبر من ادوات التصميم الفعالة جدا. لانها تنطبق علي كل وسم من وسوم لغة ال HTML داخل صفحة الHTML لانك بهذا المحدد تستطيع ان تجري العديد من التغيرات الخاصة بالتصميم لصفحة الويب بأقل مجهود. علي سبيل المثال: إذا أردت تنسيق كل فقرة من النصوص في الصفحة والتي تستخدم نفس نوع الخط وحجمه واللون فيمكنك ذلك فقط باستخدام المحدد (p) كما في الوسم <p> وذلك كمحدد في لغة ال CSS. فمحددات الوسوم تعيد تعريف المتصفح كيف يظهر وسم معين.
قبل لغة ال CSS كنا إذا اردنا تنسيق النصوص كنا نضطر إلي استخدام وسم <font> ونحيط به كل النصوص لكي نضيف نفس الشكل لكل فقرة علي الصفحة فكنا غالبا ما نستخدم هذا الوسم مرات متعددة. وكانت هذه العملية تتطلب الكثير من العمل والجهد وكذلك الكثير من الوسوم في صحفة ال HTML مما يجعل صفحات الويب ثقيلة في التحميل وتحتاج كذلك إلي وقت ومجهود أكثر أذا ما اردنا تحديثها ولكن مع محدد الوسم فلن يكن لديك اي داعي لكي تكتب كل هذه الوسوم فقط انشئ نمط CSS ودع المتصفح يقوم بالباقي.
محدد الوسم يسهل علي الفور لنمط ال CSS اعطاء الاوامر او التعليمات للمتصفح وذلك لان صفحات ال HTML تملك نفس الاسماء بالضبط فأسماء المحددات هي نفسها أسماء الوسوم مثل p , h1, table, img وهكذا.
كما انه من افضل مميزات محدد الوسم هو انك عندما تستخدم احد هذه المحددات فهو يؤثر في كل الوسوم التي تحمل نفس الاسم في صفحة الويب مثلا لو استخدمت المحدد P فسوف تؤثر في كل الوسوم <p> مهما كان عدد مرات ظهورها في صفحة الويب الواحده.
محدد الكلاس Class Selector:
عندما تريد ان تعطي تنسيق معين لعنصر او أكثر من عناصر صفحة الويب وجعل هذين العنصرين او الوسمين مختلفين عن باقي العناصر علي الصفحة – مثلا كأن تعطي صورة او صورتان حواف Borders حمراء بينما باقي الصور كلها لا يتم تنسيقها او تمييزها بهذه الخاصية في هذا الوقت يمكنك استخدام محدد الكلاس Class Selector. كذلك إذا أردت مثلا إبراز كلمة أو كلمتين داخل فقرة ففي هذه الحالة انت لا تريد ان تعدل تنسيق الفقرة كلها والتي لها الوسم <p> ولكنك ايضا تريد ان تبرز كلمة او عبارة واحده داخل هذه الفقرة يمكنك حينها ان تستخدم محدد الكلاس لتحدد فقط تنسيق هذه الكلمة او العبارة.
ملحوظة: في هذه الحالة نقوم بوضع وسم <span> حول الكلمة او العبارة التي نريد تنسيقها ثم نضيف الكلاس كقيمة لهذه الخاصية ثم نضعها في هذا الوسم حتي نفعل تطبيق لغة ال CSS من تنسيق علي هذا الوسم.
ويمكنك أيضا ان تستخدم محدد الكلاس لكي تطبق تنسيق معين علي عدد من الوسوم والتي ليست لها نفس الاسم، علي سبيل المثال قد تحتاج لإن تعطي لون معين لعنوان <h3> و كذلك ل <p> حيث يتشاركان مثلا في خاصية نفس اللون او نفس نوع الخط. ومن هذا المثال يتضح أنه يمكن لنا استخدام محدد الكلاس أكثر من مرة في صفحة الويب.
ملحوظات هامة يجب أخذها في الاعتبار في تسمية المحددات للكلاس والأي دي:
رأيت البعض يضع أسماء محددات الكلاس هكذا في صفحاتهم style_1 و style_2 و style_3 وهكذا إلي ان يصل عدد محددات الكلاس في صفحاتهم إلي ما شاء الله بالطبع هذه طريقة خطأ حيث تجعل من الصعب علي القائم بالتصميم التعديل او الاضافه علي التنسيق في الموقع أو ان يتذكر اي رقم من اي محدد كلاس يختص بخاصية معينه علي وسم معين. لكن مثلا هناك اسماء كثيرة ذات معني مثل floatleft. و floatright. او sidebarImage. .
وعلي العكس تماما من محددات الوسوم Tag Selectors والتي تقيدك بأسماء الوسوم فقط فمحددات الكلاس يمكنك ان تنشئ منها ما تريد وبالعدد الذي تريد كما تحب وان تضعه أينما اردت في صفحة الويب.
وكما تحدثنا سابقا ان كل نمط يتكون من جزئين المحدد وقالب الاعلانات فنفس الشيء هنا محدد الكلاس نقوم بكتابة اسم محدد الكلاس مسبوقا بالنقطة ثم نضع قالب الاعلانات ونبدء في كتابة اعلانات نمط التصميم فيه كالمثال التالي:
نلاحظ ان استخدام محددات الكلاس هي عملية مكون دائما من خطوتين الاولي هي انشاء نمط استايل محدد الكلاس في لغة ال CSS ثم تفعيله بإضافته كقيمة لخاصية الكلاس لأي وسم في ال HTML لتفعليل نمط علي اي وسم نريد.
محددات الأي دي ID Selectors:
تستخدم لغة ال CSS محددات الأي دي من أجل تعريف أجزاء مميزة في صفحة الويب مثل البانر او شريط التصفح Navigation bar أو منطقة المحتوي الرئيسية في الصفحة. وبالضبط تماما كما يتم إنشاء محددات الكلاس في لغة ال CSS يتم أيضا انشاء محدد الأي دي في ال CSS واعطاؤه اسم معين ثم نقوم بتطبيقه علي صفحة الويب وذلك بإضافته كقيمة لخاصية الأي دي لأي وسم من وسوم صفحة ال HTML نريد تطبيق التنسيق عليه.
الأن ماذا تفعل تختار دائما محدد الكلاس أم محدد الأي دي إليك هذه الارشادات لكي تساعدك علي تحديد أي نوع منهما تختار:
طريقة إنشاء محدد الأي دي:
عندما تقرر انشاء محدد الأي دي فهذا سهل جدا ولا يختلف بالمرة عن محدد الكلاس إلا في شيء واحد وذلك فيما يتعلق بملف لغة ال CSS فحينها بدلا أن نضع النقطة (.) قبل اسم محدد الكلاس ، نضع علامة الجنيه او الهاش puond أو hash قبل اسم الأي دي وهذه هي العلامة (#) فيما عدا ذلك فهو يتبع نفس التعليمات في انشاء النمط كما في المثال التالي:
ولتفعيل هذا النمط علي ملف صفحة ال HTML تماما كما في محددات الكلاس ولكن الاختلاف هو في استخدام خاصية أخري وهي خاصية ال ID والتي نضيفها علي الوسم الذي نريد تطبيق التنسيق عليه ويعطي قيمة مساوية تماما لإسم محدد الأي دي إلا أننا في هذه الحالة لا نكتب علامة ال (#) قبل اسم قيمة الأي دي داخل وسم ال HTML. مثال ذلك علي خاصية الأي دي ومحدد الأي دي قد نكتب محدد اسمه (copyright#) في ملف ال CSS ثم نكتب الخاصية في الوسم في ملف ال HTML كالتالي :
طريقة استخدام الوسمين ال divs and spans:
ان هذين الوسمين كما قد أشرنا من قبل هما الذين قد يلبيا احتياجات المصمم في كثير من الاوقات خصوصا مع لغة ال CSS خصوصا عندما لا يوجد وسوم من لغة ال HTML كافية لتلبية احتياجاتك وقتها يمكنك ان تستخدم هذين الوسمين <div> or <span>
فوسم ال <div> يعرف التقسيم المنطقي لصفحة الويب مثل قسم البانر Banner او شريط التصفح Navigation bar او القائمة الجانبية Sidebar او ذيل الصفحة Footer ويمكنك ايضا ان تستخدمه لتحيط بأي عنصر يأخذ جزء من شكل الصفحة بما في ذلك رأس الصفحة Header أو قائمة منقطه أو فقرات. (والمبرمجين يسمون هذه عناصر مستوي الكتلة لإنها تشكل كتلة كاملة من المحتوي والتي تبدء بسطر جديد وتنتهي كذلك بسطر جديد. فوسم ال <div> يعمل تماما مثل وسم ال <p> فهو يبدء ببعض الكلمات ثم صورة وبعض المحتويات بداخله ثم ينتهي بوسم الغلق </div>. كما ان له القدرة علي احتواء عدد من العناصر الكتلة ويجعل من ذلك فرصه لان يضم عدد من الوسوم والتي ترتبط ببعضها البعض بطريقة منطقية مثل اللوجو وشريط التصفح في بانر صفحة الويب وبمجرد ان يتم جمعهم بداخل وسم ال <div> يمكن ان نقوم بعملية تنسيق معينة فقط لهذه الوسوم او العناصر أو نقل محتوي ال <div> بالكامل الي مكان أخر علي الصفحة مثل المنطقة اليمني من نافذه المتصفح.
علي سبيل المثال انت قد تضيف صورة الي صفحة الويب وايضا يجب ان تضع تعليق او تعريف لهذه الصورة علي هذه الصفحه فيمكن لك ان تحيطهم بوسم ال <div> لتجميع المحتويات مع بعض البعض ثم تعطيها خاصية الكلاس حتي تستطيع ان تضع كود ال HTML كما يلي مثلا.
ومعتمدا علي ما يمكنك وضعه في قالب الاعلانات Declaration Block في نمط محدد الكلاس الذي سوف تضعه للكلاس photo. فقط تحيط مثلا الصوره بحافه ذات لون معين او ان تضع خلفية للقسم ككل وسنتحدث عن مثل هذه التنسيقات فيما بعد والذي سوف نتحدث فيه أكثر عن كيفية دمج وسم <div> داخل وسم اخر لل <div> ايضا.
أما وسم ال <span> فيمكنك من اضافة تنسيق او نمط او استايل كلاس أو أي دي لجزء فقط من وسم. فيمكن ان تضيف حول كلمات مفرده او عبارات والتي غالبا ما تسمي بمحتويات داخل السطر Inline-level والتي تكون بداخل فقرة لتنسيقهم بطريقة مختلفة عن باقي الفقره.
محدد الوسم Tag Selector:
واحيانا يسمي بمحدد النوع او العنصر وهي تعتبر من ادوات التصميم الفعالة جدا. لانها تنطبق علي كل وسم من وسوم لغة ال HTML داخل صفحة الHTML لانك بهذا المحدد تستطيع ان تجري العديد من التغيرات الخاصة بالتصميم لصفحة الويب بأقل مجهود. علي سبيل المثال: إذا أردت تنسيق كل فقرة من النصوص في الصفحة والتي تستخدم نفس نوع الخط وحجمه واللون فيمكنك ذلك فقط باستخدام المحدد (p) كما في الوسم <p> وذلك كمحدد في لغة ال CSS. فمحددات الوسوم تعيد تعريف المتصفح كيف يظهر وسم معين.
قبل لغة ال CSS كنا إذا اردنا تنسيق النصوص كنا نضطر إلي استخدام وسم <font> ونحيط به كل النصوص لكي نضيف نفس الشكل لكل فقرة علي الصفحة فكنا غالبا ما نستخدم هذا الوسم مرات متعددة. وكانت هذه العملية تتطلب الكثير من العمل والجهد وكذلك الكثير من الوسوم في صحفة ال HTML مما يجعل صفحات الويب ثقيلة في التحميل وتحتاج كذلك إلي وقت ومجهود أكثر أذا ما اردنا تحديثها ولكن مع محدد الوسم فلن يكن لديك اي داعي لكي تكتب كل هذه الوسوم فقط انشئ نمط CSS ودع المتصفح يقوم بالباقي.
محدد الوسم يسهل علي الفور لنمط ال CSS اعطاء الاوامر او التعليمات للمتصفح وذلك لان صفحات ال HTML تملك نفس الاسماء بالضبط فأسماء المحددات هي نفسها أسماء الوسوم مثل p , h1, table, img وهكذا.
كما انه من افضل مميزات محدد الوسم هو انك عندما تستخدم احد هذه المحددات فهو يؤثر في كل الوسوم التي تحمل نفس الاسم في صفحة الويب مثلا لو استخدمت المحدد P فسوف تؤثر في كل الوسوم <p> مهما كان عدد مرات ظهورها في صفحة الويب الواحده.
محدد الكلاس Class Selector:
عندما تريد ان تعطي تنسيق معين لعنصر او أكثر من عناصر صفحة الويب وجعل هذين العنصرين او الوسمين مختلفين عن باقي العناصر علي الصفحة – مثلا كأن تعطي صورة او صورتان حواف Borders حمراء بينما باقي الصور كلها لا يتم تنسيقها او تمييزها بهذه الخاصية في هذا الوقت يمكنك استخدام محدد الكلاس Class Selector. كذلك إذا أردت مثلا إبراز كلمة أو كلمتين داخل فقرة ففي هذه الحالة انت لا تريد ان تعدل تنسيق الفقرة كلها والتي لها الوسم <p> ولكنك ايضا تريد ان تبرز كلمة او عبارة واحده داخل هذه الفقرة يمكنك حينها ان تستخدم محدد الكلاس لتحدد فقط تنسيق هذه الكلمة او العبارة.
ملحوظة: في هذه الحالة نقوم بوضع وسم <span> حول الكلمة او العبارة التي نريد تنسيقها ثم نضيف الكلاس كقيمة لهذه الخاصية ثم نضعها في هذا الوسم حتي نفعل تطبيق لغة ال CSS من تنسيق علي هذا الوسم.
ويمكنك أيضا ان تستخدم محدد الكلاس لكي تطبق تنسيق معين علي عدد من الوسوم والتي ليست لها نفس الاسم، علي سبيل المثال قد تحتاج لإن تعطي لون معين لعنوان <h3> و كذلك ل <p> حيث يتشاركان مثلا في خاصية نفس اللون او نفس نوع الخط. ومن هذا المثال يتضح أنه يمكن لنا استخدام محدد الكلاس أكثر من مرة في صفحة الويب.
ملحوظات هامة يجب أخذها في الاعتبار في تسمية المحددات للكلاس والأي دي:
- عند وضع قيمة خاصية الكلاس Class أو ال Id في وسوم صفحة ال HTML يجب العناية بتسميتها بطريقة جيده فيجب ان يكون الاسم له معني تقريبا يفيد في تذكر وظيفته او دوره في التصميم redborder او حافة حمراء او header اي انه خاص بقسم الرأس في تصميم الصفحة.
- كذلك كلا من ال HTML وال CSS تتيح لنا استخدام الحروف والارقام وعلامة الشرطة (-) Hyphens وكذلك علامة الاندر سكور (_) Underscores في تسميه الكلاس والأي دي. مع ضرورة ان يبدء اسم الكلاس Class أو اللأي دي IDبحرف فقط.
- عند كتابة اسم محدد الكلاس في ملف ال CSS يجب ان يكون مسبوقا بنقطة (.) علي عكس الأي دي يجب ان يكون مسبوقا بعلامة الجنيه (#).
- محددات الكلاس وكذلك الأي دي في لغة ال HTML , CSS تعتبر حساسه لكتابة الحروف مثلا اذا كانت قيمة الكلاس في وسم ال HTML هي <p class="FirstPar"> فلا يصح ان يكون اسم المحدد في ملف ال CSS مثلا (Firstpar.) أو (FIRSTPAR.) أو (firstpar.) أو (firstPar.) فكل هذه الاسماء تختلف عن بعضها اختلافا تاما ولا تتوافق مع قيمة الكلاس الموجوده في قيمة خاصية ال Class في وسم الفقرة والاسم الصحيح لمحدد الكلاس في هذه الحالة هو (FirstPar.).
رأيت البعض يضع أسماء محددات الكلاس هكذا في صفحاتهم style_1 و style_2 و style_3 وهكذا إلي ان يصل عدد محددات الكلاس في صفحاتهم إلي ما شاء الله بالطبع هذه طريقة خطأ حيث تجعل من الصعب علي القائم بالتصميم التعديل او الاضافه علي التنسيق في الموقع أو ان يتذكر اي رقم من اي محدد كلاس يختص بخاصية معينه علي وسم معين. لكن مثلا هناك اسماء كثيرة ذات معني مثل floatleft. و floatright. او sidebarImage. .
وعلي العكس تماما من محددات الوسوم Tag Selectors والتي تقيدك بأسماء الوسوم فقط فمحددات الكلاس يمكنك ان تنشئ منها ما تريد وبالعدد الذي تريد كما تحب وان تضعه أينما اردت في صفحة الويب.
وكما تحدثنا سابقا ان كل نمط يتكون من جزئين المحدد وقالب الاعلانات فنفس الشيء هنا محدد الكلاس نقوم بكتابة اسم محدد الكلاس مسبوقا بالنقطة ثم نضع قالب الاعلانات ونبدء في كتابة اعلانات نمط التصميم فيه كالمثال التالي:
.special {
color:#FF0000;
font-family:"Monotype Corsiva";
}
محددات الأي دي ID Selectors:
تستخدم لغة ال CSS محددات الأي دي من أجل تعريف أجزاء مميزة في صفحة الويب مثل البانر او شريط التصفح Navigation bar أو منطقة المحتوي الرئيسية في الصفحة. وبالضبط تماما كما يتم إنشاء محددات الكلاس في لغة ال CSS يتم أيضا انشاء محدد الأي دي في ال CSS واعطاؤه اسم معين ثم نقوم بتطبيقه علي صفحة الويب وذلك بإضافته كقيمة لخاصية الأي دي لأي وسم من وسوم صفحة ال HTML نريد تطبيق التنسيق عليه.
الأن ماذا تفعل تختار دائما محدد الكلاس أم محدد الأي دي إليك هذه الارشادات لكي تساعدك علي تحديد أي نوع منهما تختار:
- إذا كنت تريد ان تستخدم استايل او نمط معين من أنماط لغة ال CSS عدة مرات علي صفحة الويب الواحدة استخدم محدد الكلاس.
- استخدم محدد اللأي دي للاقسام الموجوده في الصفحة والتي لا تتكرر إلا مرة واحدة فيها مثل (footer , header or sidebar) .
- اذا اردت ان تتجنب بعض التعارض مع بعض المحددات عندما تريد تطبيق تنسيق معين ولكنه لا يظهر علي صفحة الويب يكون ذلك بسبب خاصية القيمة الرقمية للمحدد Specificity والتي سنتعرض لها بالتفصيل فيما بعد لإهميتها القصوي. حيث ان المتصفحات تعطي لمحدد الأي دي أولوية أكثر من محدد الكلاس. فعلي سبيل المثال عندما يوجد نمطين في لغة CSS لتطبيق تنسيق مثلا لون الخلفية لوسم معين علي صفحة الويب وكل تنسيق منهم بلون مختلف فنجد ان نمط CSS والذي له محدد اللأي دي له الاولويه ولون الخلفية الموضح في نمطه هو الذي يفوز ولكن لذلك أيضا اعتبارات كثيره سوف نشرحها بالتفصيل لأهميتها القصوي.
طريقة إنشاء محدد الأي دي:
عندما تقرر انشاء محدد الأي دي فهذا سهل جدا ولا يختلف بالمرة عن محدد الكلاس إلا في شيء واحد وذلك فيما يتعلق بملف لغة ال CSS فحينها بدلا أن نضع النقطة (.) قبل اسم محدد الكلاس ، نضع علامة الجنيه او الهاش puond أو hash قبل اسم الأي دي وهذه هي العلامة (#) فيما عدا ذلك فهو يتبع نفس التعليمات في انشاء النمط كما في المثال التالي:
#banner {
background:#cc0000;
height:300px;
width:720px;
}
<p>© Copy rights for Egypt Web School</p>
ان هذين الوسمين كما قد أشرنا من قبل هما الذين قد يلبيا احتياجات المصمم في كثير من الاوقات خصوصا مع لغة ال CSS خصوصا عندما لا يوجد وسوم من لغة ال HTML كافية لتلبية احتياجاتك وقتها يمكنك ان تستخدم هذين الوسمين <div> or <span>
فوسم ال <div> يعرف التقسيم المنطقي لصفحة الويب مثل قسم البانر Banner او شريط التصفح Navigation bar او القائمة الجانبية Sidebar او ذيل الصفحة Footer ويمكنك ايضا ان تستخدمه لتحيط بأي عنصر يأخذ جزء من شكل الصفحة بما في ذلك رأس الصفحة Header أو قائمة منقطه أو فقرات. (والمبرمجين يسمون هذه عناصر مستوي الكتلة لإنها تشكل كتلة كاملة من المحتوي والتي تبدء بسطر جديد وتنتهي كذلك بسطر جديد. فوسم ال <div> يعمل تماما مثل وسم ال <p> فهو يبدء ببعض الكلمات ثم صورة وبعض المحتويات بداخله ثم ينتهي بوسم الغلق </div>. كما ان له القدرة علي احتواء عدد من العناصر الكتلة ويجعل من ذلك فرصه لان يضم عدد من الوسوم والتي ترتبط ببعضها البعض بطريقة منطقية مثل اللوجو وشريط التصفح في بانر صفحة الويب وبمجرد ان يتم جمعهم بداخل وسم ال <div> يمكن ان نقوم بعملية تنسيق معينة فقط لهذه الوسوم او العناصر أو نقل محتوي ال <div> بالكامل الي مكان أخر علي الصفحة مثل المنطقة اليمني من نافذه المتصفح.
علي سبيل المثال انت قد تضيف صورة الي صفحة الويب وايضا يجب ان تضع تعليق او تعريف لهذه الصورة علي هذه الصفحه فيمكن لك ان تحيطهم بوسم ال <div> لتجميع المحتويات مع بعض البعض ثم تعطيها خاصية الكلاس حتي تستطيع ان تضع كود ال HTML كما يلي مثلا.
This is Our Home.
أما وسم ال <span> فيمكنك من اضافة تنسيق او نمط او استايل كلاس أو أي دي لجزء فقط من وسم. فيمكن ان تضيف حول كلمات مفرده او عبارات والتي غالبا ما تسمي بمحتويات داخل السطر Inline-level والتي تكون بداخل فقرة لتنسيقهم بطريقة مختلفة عن باقي الفقره.
دروس اخري متعلقة بهذا الدرس : CSS Selectors 2 – CSS Selectors 3 - CSS Inheritance – CSS Cascade - CSS Specificity.
ليست هناك تعليقات:
إرسال تعليق