تنسيق مجموعة من الوسوم أو العناصر Styling Groups of Tags:
احيانا تريد طريقة سريعة لكي تطبق تنسيق معين علي عدد مختلف من العناصر أو وسم ال HTML في صفحة ويب واحده فعلي سبيل المثال قد تود ان تكون كل العناوين في الصفحة لها خط معين وكذلك لون معين للخط. فلو جعلت تنسيق واحد لكل منهم عمليا هذا سيأخذ كثيرا من الوقت وحتي اذا رغبت في تغيير مثلا نوع الخط فيما بعد سوف يأخذ أيضا الكثير من الوقت في تعديلهم لإنك سوف تضطر إلي تعديل سته انماط كل نمط لكل عنوان. حينئذ الطريقة المثلي هي تجميع هذه المحددات للوسوم في محدد واحد للمجموعة فتجميع المحددات يتيح لك تطبيق تنسيق معين علي عدد من المحددات في نفس الوقت.
إنشاء مجموعة المحددات Constructing Group Selectors:
لكي تعمل مع المحددات علي أنها مجموعة ببساطة شديده كون قائمة من المحددات يفصل كل عنصر منها عن الاخر علامة الفصله (,) (Commas) فمثلا أذا أردت تنسيق جميع وسوم العناوين بنفس اللون يمكنك ان تستخدم النمط التالي علي سبيل المثال :
والمثال السابق يتكون من فقط محددات الوسوم ولكنك ايضا تستطيع استخدام اي مجموعه من المحددات مختلطة مع بعض عند انشاء مجموعة المحددات. كالمثال التالي
المحدد العالمي (النجمة) The Universal Selector(*):
فكر في مجموعة المحددات كاختصار لتطبيق تنسيق معين علي عناصر مختلفة من صفحة الويب. ولكن لغة CSS تتيح لك أيضا نوع أشمل و أعم من المحددات وهو نوع من تجميع المحددات مع بعضها البعض ولكن هذا المحدد يسمي بالمحتوي العالمي وهو علامة النجمة (*) وهو يقوم بتحديد كل عنصر او وسم موجود في صفحة الويب. فعلي سبيل المثال أذا أردت مثلا ان تطبق خاصية الخط العريض علي كل الوسوم في صفحة الويب فسوف يكون التكويد هكذا.
ولكن بالمحدد العالمي وهو علامة النجمة (*) يمكنك ان تختصر كل هذه المحددات بعلامة النجمة فقط (*) فيكون التكويد كما يلي:
ونفس الشيء يمكنك استخدام المحدد العالمي (*) كجزء من محددات النسل او السلف، حيث يمكنك تطبيق تنسيق معين علي كل الوسوم والتي تندرج تحت وسم معين علي سبيل المثال المحدد (#banner *) يقوم بتحديد كل عنصر داخل ذلك العنصر من صفحة الويب والذي اضيف الي وسمه خاصية الأي دي. وسوف تقرأ عن محددات النسل قريبا جدا.
محددات الكلاسات الزائفة و محددات العناصر الزائفة Pseudo-Classes and Pseudo-Elements:
احيانا تحتاج إلي تحديد اجزاء من صفحات الويب والتي ليس لديها عناصر او وسوم او علامات في حد ذاتها ولكن مع ذلك فهي سهله جدا في تحديدها مثلا إذا اردنا تحديد السطر الاول من فقرة أو طبقة تظهر تأثير مرور الماوس فوق رابط معين لذلك فلغة ال CSS تزودك بعدد من المحددات لهذه الحالات الخاصة هي محددات الطبقات الزائفة و محددات العناصر الزائفة.
محددات الكلاسات الزائفة Pseudo-Classes:
أنماط الروابط أو Styles for Links:
يوجد أربع محددات للكلاسات تساعدك في تنسيق الروابط في حالات مختلفة تتوقف علي طريقة تعامل زوار الموقع مع صفحتك ويتم تحديدها او تعريفها عندما يكون الرابط في أحد الحالات التالية:
(a:link): تحدد اي رابط او وصلة والتي لم يقم زائر موقعك بزيارتها حتي الان وفي نفس الوقت الذي لم يمر فيه الماوس او الفأرة فوق الرابط او ضغط علي الرابط. وهذا ينسق الرابط العادي الموجود في الموقع والذي لم يتم استخدامه من قبل زائر الصفحة.
(a:visited): هو رابط يوضح لزائر موقعك أنه قد تمت زيارته لهذا الرابط او أنه قد ضغط عليه من قبل وذلك طبقا لتاريخ تصفح الموقع الموجود في المتصفح علي جهاز زائر الموقع. فيمكنك ان تنسيق هذا الرابط بطريقة مختلفة عن الرابط العادي والذي لم تتم زيارته او الضغط عليه من قبل وذلك حتي تقول لزائر الموقع وتخبره بأنك قد قمت بالضغط علي هذا الرابط من قبل او زرت هذه الصفحة من قبل.
(a:hover): يجعلك تغير من مظهر الرابط وذلك عندما يقوم زائر صفحتك بتمرير الماوس أو الفأرة عليه. و التغيير الحادث في التنسيق الناتج عن مرور الماوس فوق رابط معين ليس فقط من أجل المتعه او جمال التنسيق وإنما أيضا يخبر زائر الموقع ويعطيه صورة مرئية بوضوح بأن الماوس قد مرت فوق رابط او شريط تصفح الموقع علي سبيل المثال.
ويمكنك أيضا استخدام (:hover) محدد الطبقة الزائفة الهوفر أو أثر التمرير علي عناصر اخري بخلاف الروابط علي سبيل المثال يمكن ان تستخدمه لإبراز نص معين موجود داخل فقرة ما وذلك بتحديده مثلا سواء كان هذا النص في وسم ال <p> أو <div> وذلك عند قيام زائر الصفحة بتمرير الماوس فوق هذا النص. وفي هذه الحالة بدلا من أن يكون محدد الطبقة الزائفة هو (a:hover) والخاص بالروابط سوف يصبح وقتها بالنسبة للفقرة شكل المحدد هكذا (p:hover) وذلك حتي تنشئ تنسيق معين خاص بالفقرة يحدث عند مرور الماوس فوق هذا النص. وكذلك الامر اذا أردت ان تنسيق وسم معين والذي له في نفس الوقت خاصية الكلاس ملحقه به مثلا <div class="highlight"> سيكون شكل محدد الطبقة الزائفة وقتها يجمع بين محدد الكلاس ومحدد الطبقة الزائفة هكذا (.highlight:hover) .
(a:active): يجعلك قادر علي تنسيق شكل الرابط وذلك عندما يقوم زائر الصفحة او الموقع بالضغط علي الرابط. وبمعني اخر هو خاص بالتأثير الذي يظهر علي الرابط في أقل من ثانيه وهو الوقت الذي يستغرقه زائر الموقع بعمل كلك علي الرابط.
وسوف نأتي بالشرح بالتفصيل فيما بعد علي الطرق او بعض الافكار التي من الممكن ان نتبعها عندما نريد ان ننشيء تنسيق خاص بالروابط او شريط التصفح في اي موقع.
الان وبعد ان وصلنا الي تعريف كل هذه المحددات يمكنك ان تقوم بتصميم وتنسيق عدد كبير من صفحات الويب باستخدام هذه المحددات التي تعلمتها حتي الان فقط ولكنك فإذا كنت مستعد تماما للبدء في التصميم يمكنك ان تقرأ وتتعرف علي باقي المحددات في أي يوم أخر يناسبك وذلك للاضافة إلي علمك بالرغم من أنها بالطبع مفيده وإلا لما كان القائمين علي هذه اللغة قد قاموا بتعريفها وتوضيحها وطريقة استخداماتها.
ملحوظة مهمة حتي تري تأثير هذا التنسيق مضبوط يجب ان توضح هذه المحددات الزائفة بنفس الترتيب التالي حتي تتذكر ترتيبها مع كلمة حب وكره بالانجليزية LOVE AND HATE:
احيانا تريد طريقة سريعة لكي تطبق تنسيق معين علي عدد مختلف من العناصر أو وسم ال HTML في صفحة ويب واحده فعلي سبيل المثال قد تود ان تكون كل العناوين في الصفحة لها خط معين وكذلك لون معين للخط. فلو جعلت تنسيق واحد لكل منهم عمليا هذا سيأخذ كثيرا من الوقت وحتي اذا رغبت في تغيير مثلا نوع الخط فيما بعد سوف يأخذ أيضا الكثير من الوقت في تعديلهم لإنك سوف تضطر إلي تعديل سته انماط كل نمط لكل عنوان. حينئذ الطريقة المثلي هي تجميع هذه المحددات للوسوم في محدد واحد للمجموعة فتجميع المحددات يتيح لك تطبيق تنسيق معين علي عدد من المحددات في نفس الوقت.
إنشاء مجموعة المحددات Constructing Group Selectors:
لكي تعمل مع المحددات علي أنها مجموعة ببساطة شديده كون قائمة من المحددات يفصل كل عنصر منها عن الاخر علامة الفصله (,) (Commas) فمثلا أذا أردت تنسيق جميع وسوم العناوين بنفس اللون يمكنك ان تستخدم النمط التالي علي سبيل المثال :
h1, h2, h3, h4, h5, h6 {
color: #F1CD33;
}
h1, p, .copyright, #banner {
color: #F1CD33;
}
فكر في مجموعة المحددات كاختصار لتطبيق تنسيق معين علي عناصر مختلفة من صفحة الويب. ولكن لغة CSS تتيح لك أيضا نوع أشمل و أعم من المحددات وهو نوع من تجميع المحددات مع بعضها البعض ولكن هذا المحدد يسمي بالمحتوي العالمي وهو علامة النجمة (*) وهو يقوم بتحديد كل عنصر او وسم موجود في صفحة الويب. فعلي سبيل المثال أذا أردت مثلا ان تطبق خاصية الخط العريض علي كل الوسوم في صفحة الويب فسوف يكون التكويد هكذا.
A, p, img, h1, h2, h3, h4, h5, h6, table, …. All selector Tags { font-weight: bold;
}
*{
font-weight: bold;
}
محددات الكلاسات الزائفة و محددات العناصر الزائفة Pseudo-Classes and Pseudo-Elements:
احيانا تحتاج إلي تحديد اجزاء من صفحات الويب والتي ليس لديها عناصر او وسوم او علامات في حد ذاتها ولكن مع ذلك فهي سهله جدا في تحديدها مثلا إذا اردنا تحديد السطر الاول من فقرة أو طبقة تظهر تأثير مرور الماوس فوق رابط معين لذلك فلغة ال CSS تزودك بعدد من المحددات لهذه الحالات الخاصة هي محددات الطبقات الزائفة و محددات العناصر الزائفة.
محددات الكلاسات الزائفة Pseudo-Classes:
أنماط الروابط أو Styles for Links:
يوجد أربع محددات للكلاسات تساعدك في تنسيق الروابط في حالات مختلفة تتوقف علي طريقة تعامل زوار الموقع مع صفحتك ويتم تحديدها او تعريفها عندما يكون الرابط في أحد الحالات التالية:
(a:link): تحدد اي رابط او وصلة والتي لم يقم زائر موقعك بزيارتها حتي الان وفي نفس الوقت الذي لم يمر فيه الماوس او الفأرة فوق الرابط او ضغط علي الرابط. وهذا ينسق الرابط العادي الموجود في الموقع والذي لم يتم استخدامه من قبل زائر الصفحة.
(a:visited): هو رابط يوضح لزائر موقعك أنه قد تمت زيارته لهذا الرابط او أنه قد ضغط عليه من قبل وذلك طبقا لتاريخ تصفح الموقع الموجود في المتصفح علي جهاز زائر الموقع. فيمكنك ان تنسيق هذا الرابط بطريقة مختلفة عن الرابط العادي والذي لم تتم زيارته او الضغط عليه من قبل وذلك حتي تقول لزائر الموقع وتخبره بأنك قد قمت بالضغط علي هذا الرابط من قبل او زرت هذه الصفحة من قبل.
(a:hover): يجعلك تغير من مظهر الرابط وذلك عندما يقوم زائر صفحتك بتمرير الماوس أو الفأرة عليه. و التغيير الحادث في التنسيق الناتج عن مرور الماوس فوق رابط معين ليس فقط من أجل المتعه او جمال التنسيق وإنما أيضا يخبر زائر الموقع ويعطيه صورة مرئية بوضوح بأن الماوس قد مرت فوق رابط او شريط تصفح الموقع علي سبيل المثال.
ويمكنك أيضا استخدام (:hover) محدد الطبقة الزائفة الهوفر أو أثر التمرير علي عناصر اخري بخلاف الروابط علي سبيل المثال يمكن ان تستخدمه لإبراز نص معين موجود داخل فقرة ما وذلك بتحديده مثلا سواء كان هذا النص في وسم ال <p> أو <div> وذلك عند قيام زائر الصفحة بتمرير الماوس فوق هذا النص. وفي هذه الحالة بدلا من أن يكون محدد الطبقة الزائفة هو (a:hover) والخاص بالروابط سوف يصبح وقتها بالنسبة للفقرة شكل المحدد هكذا (p:hover) وذلك حتي تنشئ تنسيق معين خاص بالفقرة يحدث عند مرور الماوس فوق هذا النص. وكذلك الامر اذا أردت ان تنسيق وسم معين والذي له في نفس الوقت خاصية الكلاس ملحقه به مثلا <div class="highlight"> سيكون شكل محدد الطبقة الزائفة وقتها يجمع بين محدد الكلاس ومحدد الطبقة الزائفة هكذا (.highlight:hover) .
(a:active): يجعلك قادر علي تنسيق شكل الرابط وذلك عندما يقوم زائر الصفحة او الموقع بالضغط علي الرابط. وبمعني اخر هو خاص بالتأثير الذي يظهر علي الرابط في أقل من ثانيه وهو الوقت الذي يستغرقه زائر الموقع بعمل كلك علي الرابط.
وسوف نأتي بالشرح بالتفصيل فيما بعد علي الطرق او بعض الافكار التي من الممكن ان نتبعها عندما نريد ان ننشيء تنسيق خاص بالروابط او شريط التصفح في اي موقع.
الان وبعد ان وصلنا الي تعريف كل هذه المحددات يمكنك ان تقوم بتصميم وتنسيق عدد كبير من صفحات الويب باستخدام هذه المحددات التي تعلمتها حتي الان فقط ولكنك فإذا كنت مستعد تماما للبدء في التصميم يمكنك ان تقرأ وتتعرف علي باقي المحددات في أي يوم أخر يناسبك وذلك للاضافة إلي علمك بالرغم من أنها بالطبع مفيده وإلا لما كان القائمين علي هذه اللغة قد قاموا بتعريفها وتوضيحها وطريقة استخداماتها.
ملحوظة مهمة حتي تري تأثير هذا التنسيق مضبوط يجب ان توضح هذه المحددات الزائفة بنفس الترتيب التالي حتي تتذكر ترتيبها مع كلمة حب وكره بالانجليزية LOVE AND HATE:
Lo (a:link)
Ve (a:visited)
Ha (a:hover)
Ve (a:active)
محدد (:focus): يعتبر من محددات الطبقة الزائفة وهو يعمل تماما مثل المحدد (:hover) وبينما يؤثر المحدد (:hover) عندما يقوم زائر الصفحة بتمرير الماوس أو الفأرة علي رابط او وسم معين، يقوم محدد (:focus) بتأثيره عندما يقوم الزائر بعمل يدل علي اهتمامه بعنصر معين داخل صفحة الويب عادة بالضغط عليه مثلا لو كان رابط. او يمكن ان يؤثر علي صناديق النصوص في أي صيغة Form تستخدم وذلك عندما يقوم زائر الصفحة بالضغط داخلها ليدخل بعض البيانات فهذا يضع تاثير تركيز زائر الصفحة علي هذه الجزء من الصفحة بالتحديد وهذا التحديد بالذات بالنسبة للمصمم هو ما يهتم به حيث يضع الزائر كل اهتمامه علي هذه الجزئية من الصفحة بالتحديد.
ويعتبر هذا المحدد (:focus) مفيد لإنه يعطي اشارة مرجعية لزائر الموقع كتغيير لون الخلفية مثلا في صناديق النصوص لكي يوضح له ما سوف يكتبه هل هو في صندوق النص الخاص بكتابه اسمه مثلا أم عنوان بريده الالكتروني أو هل هو في صندوق نص يدعم خاصية السطر الواحد ام يدعم خاصية تعدد السطور. ويكون هذا النمط كما في المثال التالي مثلا والذي يضيف خلفية بلون أصفر لأي صندوق نص يضغط عليه الزائر لإدخال بيانات معينة.
input:focus {
background-color: #ffffcc;
}
ملحوظة متصفح انترنت اكسبلورر الاصدارين رقم 6 و 7 لا يدعمان هذه الخاصية ولكن باقي الاصدار 8 و 9 يدعمانها وكذلك باقي المتصفحات.
محددات الوسوم الزائفة Pseudo Elements:
تهتم هذه المحددات بتنسيق أجزاء معينة من الفقرات مثل المحدد الخاص بتنسيق أول حرف من أول كلمة في الفقرة وكذلك المحدد الخاص بتنسيق أول سطر من الفقرة.
محدد الحرف الاول من الكلمة الاولي من الفقرة (:first-letter): وهو يجعل المصمم قادر علي تنسيق الحرف الاول من الكلمة الاولي من الفقرة حتي تجعله مميز وكبير الحجم وكذلك ذو خط عريض كالفقرة الاولي من أول فصل من كل كتاب مثلا.
محدد السطر الاول من الفقرة (:first-line): وهذا المحدد خاص بتنسيق السطر الاول من الفقرة مثلا بلون مختلف حتي تجعل عين القارئ تتحرك نحو هذا النص وتجعله يبدو جذابا للقراءة وذلك أيضا باضافة العديد من التنسيقات الممكنة لتنسيق النصوص كما سنشرحها بالتفصيل فيما بعد.
محددات الوسوم الزائفة والخاصة بإضافة المحتوي:
محدد (:before): ويختص هذا المحدد بخلاف معظم المحددات في لغة ال CSS بأنه يستطيع اضافة النصوص، فيجعلك كمصمم قادر علي إضافة بعض الكلمات ولكن قبل الوسم الذي تحدده علي سبيل المثال لو أردت مثلا ان تضع كلمة محلوظة مهمة قبل فقر ة معينة حتي تبرزها ويعرف القارئ اهميتها. مثال ذلك ولكي تستخدم هذا المحدد بطريقة صحيحة يجب عليك أولا ان تميز الفقرة التي سوف تستخدم معها هذا المحدد بإضافة خاصية الكلاس لوسم هذه الفقرة أولا وليكن قيمة هذه الخاصية (tip) مثلا فيكون شكل وسم الفقرة كالأتي <p class="tip"> ثم بعد ذلك عند استخدام لغة ال CSS لإضافة هذا المحدد ومحتواه سوف تكتب الكود التالي
p.tip:before{
content: "ملحوظة";
}
بهذا التكويد عندما يري متصفح الانترنت في اي صفحة ويب هذا الكود سيضيف كلمة ملحوظة قبل بداية هذه الفقرة ولكن مع بعض التنسيقات سوف يصبح ظهورها أفضل وأوضح. لاحظ ان متصفح الانترنت اكسبلورر الاصدار رقم 6 و7 لا يدعمان هذه الخاصية ولكن الاصدار الثامن يدعم هذه الخاصية كباقي المتصفحات.
محدد (:after): وهو مطابق تماما للمحدد السابق (:before) ولكنه يضيف محتوي بعد نهاية الوسم المحدد وليس قبله. ويمكنك ان تستخدم هذا المحدد علي سبيل المثال لإضافة علامات الاقتباس Quotation marks (") بعد نهاية الوسم الذي يتم اختياره لتطبيق هذه الخاصية.
محددات خواص الوسوم Attribute Selectors:
تزودنا لغة CSS بطريقة تساعدنا علي تنسيق أي وسم معتمدين في ذلك علي أي خاصيه لهذا الوسم. دعنا نقول اننا نريد مثلا ان نقوم بتنسيق الحواف حول بعض الصور علي صفحتك ولكن تذكر اننا نقول بعض الصور فقط. لحسن الحظ انت تدرك أن وسم الصورة <img> له خاصية اسمها (title) مما يعني اننا يمكن ان نستخدم هذه الخاصية بمحدد خواص الوسوم لكي نحدد الصور المهمة التي نريدها فقط.
باستخدام محددات خواص الوسوم يمكن لنا ان نميز بعض الوسوم والتي لها خواص خاصة بهذه النوعية من الوسوم فقط علي سبيل المثال حتي نقوم بتحديد كل الصور والتي لها الوسم <img> وهذا الوسم غالبا ما يحتوي علي الخاصية (title) فيكون وقتها محدد خواص الوسوم الخاص بالصور هو img[title] والجزء الاول من المحدد هو عباره عن اسم الوسم نفسه والجزء الثاني والذي يقع بين الاقواس هو عباره عن اسم الخاصية نفسها. ولغة CSS لا تقم بتحديد خواص محددات الوسوم علي استخدام الوسوم فقط في التحديد بل تمكننا أيضا من تكوين محدد عباره عن اسم الكلاس مثلا بالاضافة الي اسم الخاصية التابعة لنفس الوسم حتي يتم اختياره علي سبيل المثال قد يكون المحدد وقتها .photo[title] وهذا المحدد سوف يقوم باختيار كل صورة لها كلاس ال photo والتي ايضا معها خاصية ال title .
نلاحظ ايضا ان هذه المحددات تساعدنا أكثر وأكثر في تحديد العنصر الذي نريده علي سبيل المثال لو اننا عندنا عنصرين علي صفحة الويب والذين لهما نفس الخاصية ونفس قيمة الخاصية عندها يمكن لنا بكل سهولة ان نقوم بتحديدهم هم فقط دون غيرهم مثال ذلك المحدد
a[href="http://www.google.com/"] {
color:red; font-weight:bold;
}
اضافة قيمة الخاصية الي المحدد يساعدنا أكثر علي الاختيارخصوصا عند العمل مع الصيغ فمعظم وسوم الصيغ لها نفس الوسوم فمعظم مكونات الصيغ مثل Checkbox, text box, Submit button لها نفس الوسم <input> و تشترك في أن لها خاصية type والتي ايضا لها قيمة text عنئذ سيكون المحدد لدينا كالتالي:
input[type"text"]
ولنأتي الان لأجمل جزء في محددات خواص الوسوم حيث تعطي لنا ميزة جميلة جدا تساعدنا في اختيار حتي الوسوم التي تتشارك مع بعضها البعض في نفس الخواص في أنها تساعدنا في أن نكون أكثر تحديدا معتمدين علي قيمة الخاصية التي تأخذها في الوسم يمكن لنا للمحدد ان يقوم بتحديد الوسم والذي قيمة الخاصية فيه تنتهي بكلمة معينة أو تبدأ بكلمة معينة أو تحتوي علي كلمة معينة. او تحتوي علي قيمة معينة.
علي سبيل المثال إذا اردنا اختيار الروابط التي تشير الي الانتقال إلي صفحات خارجية من مواقع اخري فيمكن ان نعطي مثلا إشارة إلي تقول مثلا انك سوف تغادر موقعنا إلي موقع أخر هل فعلا تريد ذلك؟ وعلي فرض انك لا تستخدم الروابط المطلقة عند الاشارة إلي اي صفحة داخل موقعك فيكون وقتها أي رابط يشير الي اي صفحة خارجية يبدء بأول جزء من الروابط المطلقة وهو (http://) وعلي ذلك حينها سيكون محدد خواص الوسوم لدينا كالتالي:
a[href^="http://"]
يظهر لنا الان في هذا المحدد علامة جديده وهي (^) ومعناها هو ان تختار الوسم الذي له خاصية تبدء قيمتها بهذه القيمة
ملحوظة في هذا المحدد سيقوم بتحديد كل الراوابط الخارجية إلا انه يوجد نوع أخر من الروابط الخارجية والذي يبدء بالقيمة (https://) والتي تستخدم اتصالات امنة عبر SSL وبعبارة أخري أي روابط تبدأ ب (https://) لن يتم اختيارها في هذه الحالة يجب علينا ان ننشيء مجموعة محدد خواص الوسوم كما يلي:
a[href^="http://"], a[href^="https://"]
وبنفس الطريقة يوجد في بعض الاوقات بعض قيم الخواص للوسوم والتي تنتهي بقيم معينه مثل امتداد ملفات معينة في صفحة ويب نضع فيها روابط تسمح لزائر الموقع بتحميل البعض منها مثال هذا الرابط مثلا
<a href="download_instructions.pdf">Instructions</a>
مثل هذا النوع من قيم الخواص يكون محدد خواص الوسوم كالتالي:
a[href$=".pdf"]
وعلامة الدولار في هذا المحدد تشير الي معني ان تختار الخاصية التي تنتهي بهذا المقطع
والنمط الكامل لهذا المثال قد يكون كالتالي
a[href$=".pdf"] {
background-image: url(doc_icon.png) no-repeat;
padding-left: 15px;
}
نأتي أيضا لحالة أخري تتكرر كثير تخيل انك تقوم بعمل جاليري صور وعند تسميتك لملفات الصور كانت التسمية منقسمة لنوعين لتمييز الملفات فكل صورة موجود منها نسختين نسخه كبيرة في الحجم للعرض في الجزء المخصص لعرض الصورة بالحجم الكامل في المتصفح ونفس الصورة منها نسخه كأيقونه صغيرة يضغط عليها زائر الموقع حتي تفعل وظيفة ظهور الصورة الكبيرة منها فتكون تسمية هذه الصور للنسختين كما في الجدول التالي مثلا كذلك سنوضح في الجدول في اخر صف منه عينة للتسمية الخاصة بكل نوع من التسمية علي سبيل المثال للتوضيح
big
|
thumb
|
moon_big.jpg
|
moon_thumb.jpg
|
earth_big.jpg
|
earth_thumb.jpg
|
img[src*="big"]
|
img[src*="thumb"]
|
كما رأينا في المثال أخر صف يوضح محدد خواص الوسوم الخاص بكل نوع من التسمية بالنسبة لهذه الحالة والتي قد نواجهها كثيرا. وعلامة (*) توضح لنا ان تختار اي وسم للصور والذي تحتوي قيمة خاصية المصدر فيها علي كلمة مثل (thumb) أو (big) كما في المثال. وفي هذه الحالة من التسمية بمحدد خواص الوسوم نحن نخبر المتصفح ان يطبق نمط او استايل معين علي كل الصور التي تحتوي علي نفس هذه الكلمة في التسمية الخاصة بها.
دروس اخري متعلقة بهذا الدرس : CSS Selectors 1 – CSS Selectors 3 - CSS Inheritance – CSS Cascade - CSS Specificity.
ليست هناك تعليقات:
إرسال تعليق