CSS صفحات الألأنماط الإلإنسيابية

الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 2 -
مقدمة عامة لصفحات الأنماط الإنسيابية
• هل تخطط لتنفيذ مشاريع ويب يزيد عدد صفحاتها عن العشرة صفحات !؟
• هل تريد إضافة مزيد من الاحترافية و السهولة معاً على عملك في مجال تصميم و تطوير المواقع
؟
• هل ترهقك طلبات العملاء في تغيير أشياء بسيطة يراها العميل سهلة لكنك تراها مرهقة مع
تراآم أعمالك؟
إذا آانت إجابتك على الأسئلة السابقة بنعم ، فهذه السلسلة من الدروس هي لك !
حسناً ... لنتخيل معاً أنك قبلت تنفيذ مشروع متوسط الحجم لأحد العملاء و أنك بطبيعة الحال ستحتاج
لبرمجة ما يزيد عن العشر صفحات . لنتخيل أيضاً أنك انتهيت من المشروع بعد عمل متواصل لمدة عشرة
أيام و قد عرضت المشروع على العميل لأنك تعتقد أنه أصبح جاهز للاستخدام الآن . ماذا لو فاجأك العميل
بطلب تغيير حجم الخط من القيمة " ٢" إلى القيمة " ٣" ! هل ستضطر لفتح آل صفحة و التعديل في آل
فقرة من فقراتها لتغير هذه القيمة ! ماذا لو آان المشروع مكوناً من ٥٠ صفحة ؟!
و ماذا لو آان يعمل على المشروع أآثر من شخص بشكل منفصل ؟
في الواقع فإن هذه القصة القصيرة التي افتتحنا بها هذا الفصل و التي ستواجهك آثيراً عند التعامل مع
عملاءك تنقلنا للتفكير من استخدام لغة "هتمل" وحدها – و التي تستطيع تعلمها من خلال دروس
الموسوعة على الرابط التالي : دروس هتمل - إلى لغة تعطينا مرونة أآبر .
الفكرة باختصار تكمن في فصل التنسيق عن المحتوى و من ثم وضع التنسيق في ملف منفصل يمكنه
تغييره لتتغير آامل صفحات موقعك !
تشير الأحرف في اسم اللغة إلى الأحرف الأولى من العبارة الإنجليزية التالية :
Sheets Style Cascading
CSS . : و تعني (صفحات الأنماط الانسيابية) . و اختصارها هو
ينبغي أن لا تأخذ هذه الدروس من وقتك الكثير ! نصف ساعة من الزمان تعتبر مدة جيدة .
في الواقع فإننا نستخدم نوعاً من أنواع صفحات الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا
المثال البسيط :
آما لاحظت ، لم أقم بتحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة باستخدام المتصفح ستجد
تنسيقاً معيناً لنوع الخط و حجمه و لونه . هذا التنسيق قد يختلف من جهاز لآخر بحسب الإعدادات
الافتراضية للعرض .
إذاً ، آأننا نقول بأن المتصفح يحتفظ بملف يحوي أنماط معينة من التنسيق يستخدمها إذا لم تحدد
التنسيق بشكل واضح في صفحتك .
في الواقع ، إن تقنية السي اس اس تعتمد نفس المبدأ . لن تكتب أي تنسيق في صفحة الهتمل
الأساسية لكنك ستحدد بالتفصيل التنسيق الذي تريده في ملف منفصل .
لنلقي نظرة على الطريقة بالتفصيل من خلال هذه السلسلة من الدروس..
معلومة إضافية
بعد اهتمام المتصفحات الشهيرة (أمثال – CSS – ظهرت الحاجة لاستخدام هذه التقنية
: الانترنت اآسبلورر و النت سكيب ) بإضافة وسوم هتمل إضافية هي الوسوم الخاصة
باعتماد W3C بتنسيق النص و التي تعرفنا عليها في الفصل السابق . قامت جمعية
هذه التقنية لتساعد على نقل المواقع قديمة الطراز – تلك التي لا تحتوي على وسوم
ا لتنسيق – إلى الطراز الجديد من صفحات إنترنت .
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 3 -
معلومة إضافية
و هي الجمعية المسؤولة عن World Wide Web Consortium هو اختصار ل W3C
. HTML إ صدار نسخ قياسية من لغة
؟ CSS اختبار قصير على الدرس :إلى ماذا يشير الاختصار
Creative Style Sheets
Cascading Style Sheets
Colorful Style Sheets
Computer Style Sheets
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 4 -
الصيغة العامة للنمط
آما قلنا ، فإن الأنماط تحدد التنسيق لأوسمة الهتمل المختلفة التي تعرفت عليها في دروس الهتمل .
تستطيع تحديد تنسيق معين لوسم الفقرة أو تنسيق معين للجداول و هكذا . إذاً لابد أن نتوقع بأن الصيغة
العامة لأوسمة السي اس اس ستتضمن وسم هتمل الذي سيطبق عليه النمط و آذلك التنسيق ، آما
توضح هذه الصيغة تماماً :
{"القيمة" : المتغير } : وسم هتمل
آما نلاحظ فإن الصيغة تقتضي آتابة وسم هتمل الذي سيطبق عليه النمط ثم نقطتان رأسيتان ثم قوسين
معقوفين نكتب بداخلها المتغير و القيمة مفصولين بنقطتين رأسيتين أخريتين .
لنأخذ بعض الأمثلة الحقيقية لتتضح الصورة :
a { color: #008000; font-size: 1em }
body { border-style: solid }
h2 { color: #800000 }
p { border-style: solid; border-color: #FF00FF }
table { border-right-style: solid }
هل تريد تجربة هذه الوسوم بنفسك ؟ انتظر قليلاً حتى ننتهي من شرح الصيغة العامة
للأنماط و سنتعرف على طريقة إدراج الأنماط في الجزء التالي إن شاء الله .
إنه يحتوي على متغيرين بدلاً من ؟ (a) دعنا نرآز قليلاً على الأمثلة السابقة . هل لاحظت الوسم الأول
متغير واحد . قمنا بفصل المتغيرات المختلفة باستخدام الفاصلة المنقوطة (؛). يمكنك أن تجعل أنماطك
أآثر وضوحاً بكتابة آل متغير في سطر منفصل! هكذا :
a {
color: #008000;
font-size: 1em
}
أفضل آثيراً أن تستخدم عادات جيدة أثناء آتابة الأنماط أو غيرها من الشفرات لأن ذلك هو طريقك لكتابة
برامج يمكن أن نطلق عليها مصطلح "برامج نظيفة" ! أو آما نقول باللهجة المحلية "تفتح النفس" !
تعرفنا في المثال السابق على آيفية تخصيص أآثر من متغير لوسم هتمل واحد . ماذا لو أردنا تخصيص
متغير واحد بقيمة واحدة مكررة مع أآثر من وسم هتمل ؟
أو وسوم الرابط التشعبي (h1-h أآثر الأمثلة التي توضح ذلك هي التي تحدد تنسيق وسوم رأس الفقرة ( 6
لنأخذ مثالاً يوضح ذلك : . (a)
h1,h2,h3,h4,h5,h6 { color: #008000; }
هل راقبت ذلك ؟ الأمر في غاية السهولة . آل ما عليك هو أن تضيف الفاصلة (،) بين الأوسمة المختلفة
ثم تستخدم الصيغة العامة التي أصبحت تعرفها الآن .
؟ CSS اختبار قصير على الدرس : ما هي الصيغة العامة الصحيحة لل
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 5 -
"\}القيمة\" : المتغير : وسم هتمل}
"\القيمة\" : المتغير : وسم هتمل
"\}القيمة\" : المتغير } : وسم هتمل
"\}القيمة\" = المتغير } : وسم هتمل
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 6 -
(Classes) استخدام الفئات
لنحاول الوصول إلى أبعد قليلاً مما توصلنا إليه في الدرس السابق :
ماذا لو آنت تريد استخدام أآثر من تنسيق للصفحة الواحدة ، بمعنى أن تنسق الفقرة الأولى في
مستندك باستخدام اللون الأحمر و الفقرة الثانية باللون الأخضر و الثالثة باللون الأصفر ! هل تعطيك تقنية
السي اس اس هذه المرونة ؟
بالطبع نعم !
من خلال المثال التالي : ، Classes)) آل ما علينا هو أن نتعرف على خاصية الفئات
تستطيع شرح الطريقة بنفسك ! قمنا بكتابة اسم الوسم المطلوب ، ثم نقطة ، ثم الاسم الذي نختاره
للفئة الجديدة و نكمل آما تعودنا .
و المثال التالي يعرفنا بالطريقة التي نستخدمها مع أآواد هتمل لتحديد فئة معينة دون أخرى :
ستكون النتيجة في المتصفح هكذا :
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 7 -
حقاً فلا تتكاسل في تجربة هذه الأمثلة بنفسك ! صدقني CSS ملاحظة للتذآير : إذا أردت أن تتعلم
ستكتشف أشياء جديدة آلما جربت .
تلميحة ذآية
لتضيف فئة يمكن استخدامها مع جميع الوسوم في صفحتك استخدم الطريقة
التالية :
.red{ color: “red” }
احذف اسم الوسم و اآتفي بوضع نقطة مع اسم الفئة !
اختبار قصير على الدرس : الهدف من استخدام الفئات هو:
تطبيق أآثر من ننسيق على وسم هتمل معين 
تطبيق تنسيق محدد على جميع وسوم هتمل 
الجواب الأول و الثاني صحيح 
آلا الإجابات غير صحيحة 
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 8 -
طريقة إدراج الأنماط في الصفحة
تعرفنا على الهيكل العام لصفحات الأنماط الانسيابية ... بقي علينا أن نتعرف على آيفية إدراج هذه
الأنماط في صفحات هتمل أو آيفية ربطها بها ؟
هناك ثلاث طرق لإدراج الأنماط في صفحتك :
external file).) أ- باستخدام ملف خارجي
Head) .) ب- عن طريق رأس الصفحة
Inline).) ج - داخل الوسم
سنقوم بشرح آل طريقة بالأمثلة :
file): external) أ- باستخدام ملف خارجي
هذه الطريقة هي الخيار الذآي لمن يفكر في برمجة مشاريع من عدة صفحات . ضع آل التنسيقات التي
تريدها في هذا الملف الخارجي ثم أدرج رابط لهذا الملف في آل صفحة تريد استخدام الأنماط فيها (جميع
صفحات مشروعك عادة) .
إذا طلب منك عميلك تغيير لون الخط المستخدم من اللون الأزرق النيلي إلى اللون الأزرق الغامق – و
اللذان قد لا يختلفان آثيراً لكن عليك أن ترضي ذوق العميل ! فقط قم بتغيير سطر واحد في هذا الملف و
انتهينا .
يمكنك آتابته عن طريق برنامج المفكرة، يمكنك الاطلاع على ، css. هذا الملف يجب أن يحفظ بالامتداد
نموذج من هذا الملف في الصورة التالية المأخوذة من الدرس الأول .
استخدم الوسم التالي في رأس آل صفحة من صفحات الهتمل :
Head) ب- عن طريق رأس الصفحة
تستخدم هذه الطريقة فقط إذا آنت تريد تطبيق تنسيق معين على صفحة واحدة فقط ، بحيث يلمزك تغيير صفحة
واحدة فقط إذا أردت أن تعدل على التنسيق . سندرج الأنماط عن طريق الوسم
اختبار قصير على الدرس : ما هو المتغير الصحيح الذي يلزمنا استخدامه لإدراج نمط داخل وسم هتمل؟
style
css
class
font
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 9 -
(Pseudo-class) أشباه الفئات
تعرفنا على الفئات ، فما هي أشباه الفئات يا ترى ؟ إن أقرب مثال يوضح الفكرة هو مثال تنسيق الروابط
التشعبية .
تأخذ أشباه الفئات الصيغة العامة التالية :
{"القيمة" : المتغير } شبه الفئة: وسم هتمل
أو (في حالة وجود فئة أيضاً):
{"القيمة" : المتغير } شبه الفئة:فئة. وسم هتمل
قد تبدو مزعجة للوهلة الأولى ! لكنك ستكتشف مدى سهولته بعد المثال التالي :
في المثال السابق : حددنا اللون (# ٠٠٠٠٨٨ ) للرابط العادي الذي لم يزار بعد . آما حددنا تنسيق النص
بلا شيء حتى لا يظهر خط سفلي تحت الرابط . حددنا اللون الأحمر للرابط الذي سبقت زيارته ! آذلك
حددنا اللون الزهري مع خط بأسفل النص و حجم ( ١٠ نقاط) للنص . أما الرابط النشط (الحالي) فقد حددنا
له اللون الأزرق الفاتح .
الطريقة سهلة ، جربها بنفسك الآن .
تحذير
ثم link) أنصحك بكتابة أنماط الروابط التشعبية بالترتيب الوارد في المثال السابق
و إلا فإن الأخريين لن يعملا بالشكل الصحيح ! (active ثم hover ثم visited
سنأخذ مثالاً آخر يوضح آيفية استخدام الفئات مع أشباه الفئات في مثال واحد :
للرابط الذي لم يزار باللون الأخضر و في المقابل حددنا الفئة ( (main) المثال يشرح نفسه ، حددنا الفئة
للرابط الذي لم يزار أيضاً باللون الأحمر . (sub
يجب استخدام الطريقة المشروحة في جزء الفئات عند استخدامك إحدى الفئتين بالطبع .
اختبار قصير على الدرس : الصيغة العامة لإضافة شبه فئة هي:
"\}القيمة\" : المتغير: شبه الفئة} وسم هتمل
"\}القيمة\" : المتغير } (شبه الفئة) وسم هتمل
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 10 -
"\}القيمة\" : المتغير } شبه الفئة.وسم هتمل
"\}القيمة\" : المتغير } شبه الفئة: وسم هتمل
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 11 -
(ID) المعرّف
تستخدم فكرة المعرّف لحفظ تنسيقات معينة باسم هذا المعرّف على أن يتم إدراجها مع آل
وسم يستخدم هذا المعرّف آمتغير ضمن متغيراته الأخرى .
لنفرض أننا بحاجة لاستخدام المحاذاة إلى الوسط بشكل متكرر فإننا سنقوم بتعريف معرّف يؤدي هذا
الغرض آما يلي :
و عند الوسم المراد تنسيقه نستخدم الطريقة التالية :
إذن ، آما لاحظت بنفسك ، خاصية المعرّف تضيف لك آمصمم قدرات إضافية يمكنك استخدامها متى ما
احتجت إليها .
اختبار قصير على الدرس : المتغير الذي يتم استخدامه مع وسوم الهتمل لأضافة نمط معرف هو:
style
id
class
StyleID
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 12 -
الملاحظات
إذا آانت لديك بعض المعلومات عن لغات البرمجة – تطبيقات سطح المكتب أو تطبيقات الويب – فإنك حتماً
معتاد على فكرة الملاحظات .
الملاحظات:
هي نوع من أنواع التوثيق التي تتيح لك آتابة تلميحة صغيرة في أول آل صفحة أو بجانب الأسطر
الغامضة بعض الشيء و هكذا بحيث يسهل عليك فهم ما آتبته عند الرجوع إليه بعد مدة . و بالطبع فإنه
ينصح دائماً بتوثيق برامجك ، سوى آنت ستستخدمها لأغراض التوزيع العام أو لأغراض الاستخدام
الشخصي لأن ذلك يحفظ الكثير من وقتك و وقت من يقرأ برامجك .
الطريقة:
لإدراج ملاحظة في ملف السي اس اس ، قم باتباع u1575 الطريقة الموضحة في المثال التالي :
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 13 -
المزيد من الأمثلة
حتى الآن ، تناولنا الصيغة العامة لاستخدام أنماط السي اس اس ، تناولنا آيفية إدراج هذه الأنماط في
صفحاتنا ، تكلمنا عن أمور أخرى مثل المعرفات و التوارث و الملاحظات ، لكن ما زلنا بحاجة لمزيد من
الأمثلة التي تجعلنا معتادين على استخدام الأنماط مع أي وسم من وسوم هتمل . السبب في الترآيز
على المزيد من الأمثلة أنه و آما جاء معنا في بعض الأمثلة السابقة ، نلاحظ اختلاف متغيرات السي اس
فإننا نرمز له ب ( size)) اس عن بعض متغيرات هتمل ! فإذا آان حجم الخط في وسوم هتمل يرمز له ب
في ملفات السي اس اس . إذن ، الأفضل أن نأخذ آل وسم من وسوم هتمل – التي تعرفنا (font-size
عليها في دروس الهتمل – و نتعرف على المتغيرات المناسبة لها . سنأخذها على شكل جداول للتسهيل
:
(هذه الجداول ليست للحفظ ! احتفظ بها آمرجع فقط بعد أن تطلع عليها و تجرب بعضها بنفسك)
المتغير الوصف
يحدد هذا المتغير نوع الخط المستخدم . font-family
يحدد هذا المتغير حجم الخط المستخدم . font-size
يحدد هذا المتغير لون الخط المستخدم . color
يحدد هذا المتغير لون الخلفية . Background-color
يحدد هذا المتغير إحدى الصور آخلفية للصفحة . Background-image
يحدد هذا المتغير آيفية تكرار صورة الخلفية و يأخذ
إحدى القيم التالية :
no-repeat) repeat-y, repeat, repeat-x,)
Background-repeat
يحدد هذا المتغير لون القاعدة لأشرطة التمرير
الطولية و العرضية .
SCROLLBAR-BASE-COLOR
يحدد هذا المتغير لون السهم لأشرطة التمرير
الطولية و العرضية .
SCROLLBAR-ARROW-COLOR
يحدد هذا المتغير لون الخلفية لأشرطة التمرير
الطولية و العرضية .
Scrollbar-track-color
يحدد هذا المتغير لون الواجهة لأشرطة التمرير
الطولية و العرضية .
Scrollbar-face-color
يعطينا هذا المتغير بعض الإضاءة على أشرطة
التمرير (بحسب اللون المستخدم)
Scrollbar-highlight-color
يعطي هذا المتغير التأثير الثلاثي على أشرطة
التمرير .
Scrollbar-3dlight-color
يحدد هذا المتغير لون الظل لأشرطة التمرير الطولية
و العرضية .
Scrollbar-darkshadow-color
يحدد هذا المتغير لون الظل لأشرطة التمرير الطولية
و العرضية (يختلف قليلاً عن المتغير السابق ).
scrollbar-shadow-color
تحذير
ثم وضعت النصوص (body) إذا آنت قد حددت تنسيقاً معين للنص باستخدام الوسم
بعين الاعتبار . يجب أن (body) داخل جداول ، فإن المتصفح لن يأخذ تنسيق الوسم
آما سنرى بعد قليل . (table) ت حدد تنسيق الخط مع الوسم
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 14 -
المتغير الوصف
يحدد هذا المتغير نوع الخط المستخدم داخل
الجدول .
font-family
يحدد هذا المتغير حجم الخط المستخدم داخل
الجدول .
font-size
يحدد هذا المتغير لون الخط المستخدم داخل
الجدول .
color
يحدد هذا المتغير لون خلفية الجدول. Background-color
يحدد هذا المتغير إحدى الصور آخلفية للجدول . Background-image
يحدد هذا المتغير لون الإطار (الحدود الأربعة) Border-color
يحدد هذا المتغير سمك الإطار (الحدود الأربعة) ، قد
يأخذ أحد القيم التالية :
رقم) thin, medium, thick,)
Border-width
يحدد هذا المتغير شكل الإطار (الحدود الأربعة) ، قد
يأخذ أحد القيم التالية :
double, none, hidden, dotted, dashed, solid,)
inset, outset)
Border-style
يحدد هذا المتغير لون الحد الأيسر للإطار . Border-left-color
يحدد هذا المتغير سمك الحد الأيسر للإطار . Border-left-width
يحدد هذا المتغير لون الحد الأيمن للإطار . Border-right-color
يحدد هذا المتغير سمك الحد الأيمن للإطار . Border- right-width
يحدد هذا المتغير لون الحد العلوي للإطار . Border-top-color
يحدد هذا المتغير سمك العلوي الأيسر للإطار . Border-top-width
يحدد هذا المتغير لون الحد الأسفل للإطار . Border-bottom-color
يحدد هذا المتغير سمك الحد الأسفل للإطار . Border-bottom-width
,
المتغير الوصف
يحدد هذا المتغير نوع الخط المستخدم في القوائم
.
font-family
يحدد هذا المتغير حجم الخط المستخدم في
القوائم.
font-size
يحدد هذا المتغير لون الخط المستخدم في القوائم. color
يحدد هذا المتغير صورة معينة آمحدد للقائمة (يأخذ
مسار الصورة آقيمة له) .
list-style-image
يحدد هذا المتغير مكان محدد القوائم ، يأخذ القيمة:
outside) Inside,)
list-style-position
يحدد هذا المتغير شكل محدد القوائم ، يمكن أن
يأخذ أحد القيم التالية :
lower- None, disc, circle, square, decimal,)
alpha, upper-alpha, lower-latin, upper-latin)
list-style-type
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 15 -
تحذير
طالما أن الشبكة موجودة ، فإن المطورين لن يتوقفوا عن إضافة و حذف بعض
المتغيرات من وقت لآخر !
آما أن المتصفحات المختلفة تختلف في دعمها للمتغيرات المختلفة و قيمها ، فإذا
جربت أحد القيم المذآورة في هذه الجداول و لم تظهر لك أي نتيجة ، فقد يكون السبب
أن متصفحك لا يدعم ذلك ، إما تقصيراً من الشرآة المنتجة للمتصفح ! أو لأن جمعية
قد أسقطت المتغير من القائمة القياسية للوسوم . w3c
لذلك ! دائماً جرب بنفسك آل الأمثلة في هذا الكتاب . ستستفيد الكثير و لن تخسر
شيئاً !
المتغير الوصف
يحدد هذا المتغير نوع الخط المستخدم في عناصر
النماذج (مربع نص، زر الخيار) .
font-family
يحدد هذا المتغير حجم الخط المستخدم في عناصر
النماذج (مربع نص، زر الخيار).
font-size
يحدد هذا المتغير لون الخط المستخدم في عناصر
النماذج (مربع نص، زر الخيار).
color
يحدد هذا المتغير شكل الإطار ، إنها صيغة مختصرة
يمكن استخدامها مع عناصر النماذج و غيرها ، حدد
جميع u1582 خصائص الإطار بالشكل التالي آمثال :
(؛٠٠٠٠٠٠# border: 1px solid)
border
يحدد هذا المتغير لون خلفية عنصر النموذج . background-color
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 16 -
التوارث
ذآرنا سابقاً أن الصفحة الواحدة قد تحتوي على الطرق الثلاث المختلفة لإدراج الأنماط . و أن المتصفح
سيستخدم التنسيق الأقرب إلى الوسم (مع الوسم ، ثم في رأس الصفحة ، ثم في ملف خارجي) . فإذا
آان الملف الخارجي يكتب الفقرة باللون الأحمر و النمط في رأس الصفحة يكتبها باللون الأصفر و النمط
المرفق مع الوسم يكتبها باللون الخضر فإن الغلبة ستكون للون الأخضر . حسناً ، نريد أن ننتقل لأبعد من
ذلك : لنفرض أن الملف الخارجي يحدد اللون الأحمر و الحجم " ٣" و أن النمط في رأس الصفحة يحدد اللون
الأصفر و المحاذاة إلى الوسط و أن النمط المرفق مع الوسم يحدد اللون الأخضر .
ماذا سيحدث الآن ؟ نعرف مسبقاً أن اللون سيكون أخضراً … لكن ماذا عن المحاذاة و الحجم اللذان لم
يتدخل النمط المرفق مع الوسم في تحديدهما ؟ الجواب هو التوارث .
التوراث يعني أن النمط النهائي سيكون لون أخضر ، محاذاة إلى الوسط ، و حجم " ٣" بمعنى أن
التنسيقات هنا متوارثة من الأنماط البعيدة .
لنأخذ مثالاً لتتضح الصورة أآثر :
الملف الخارجي :
ملف الهتمل:
النتيجة ستكون هكذا :
الموسوعة العربية للكمبيوتر والإلإنترنت CSS صفحات الألأنماط الإلإنسيابية
- 17 -
اختبار قصير على الدرس :إذا آان الملف الخارجي يحدد اللون الأحمر و الحجم "\ 3"\ و النمط في رأس الصفحة يحدد اللون الأصفر و النمط المرفق مع
الوسم يحدد اللون الأخضر فإن الحجم يكون:
الافتراضي في المتصفح 
3
لا يمكن تحديد النمط 
2
لا تنسونا من دعائكم،،،