ما هي أوراق الأنماط؟

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

الشكل 3 : التسلسل الهرمي الاحتواء HTML
تخيل للحظة أن الوثيقة نريد أن أسلوب بسيط واحد كما في الشكل أعلاه ، يمكنك استخدام ورقة نمط لتحديد العناصر المختلفة ، ثم تقول ما ينبغي أن تطبق أساليب لهم. مرة واحدة ترى الوثيقة ك التسلسل الهرمي مثل هذا جانب مهم جدا من CSS ، ودعا الميراث ، ويصبح أسهل بكثير لفهم. إذا قمت بتطبيق نمط على عنصر الذي يحتوي على عناصر أخرى ثم سيتم رثت هذا من قبل عناصر في الداخل. قد تعتقد منهم كعناصر الأصل والعناصر التابعة. هذه الاستعارة الأم / الطفل هو في الواقع وسيلة معيارية لوصف هذه العلاقة ، وسوف نرى ذلك في كثير من الأحيان. وترد عناصر تابعة من قبل عناصر الأصل وترث كل ممتلكاتهم. أخذ ذلك في المثال أعلاه ، إذا قمت بتطبيق نمط على الأصل ، <div> ، الطفل ، <p> سيتم أيضا الحصول على هذا النمط. لكنها الأيام الأولى ، حتى إذا كان هذا لا يجعل الكثير من المعنى ، لا تقلق ، سترى أنها أكثر وضوحا عندما نضعه موضع التنفيذ.
نشير إلى الإرشادات الموجودة في ورقة أنماط والتصريحات. هناك بضعة أنواع مختلفة من البيان ، ولكن واحدة عليك استخدام معظم يشار اليها على انها قاعدة. قواعد من جزأين : محدد وإعلان.
محدد يروي المتصفح الذي سوف تتأثر العناصر في الصفحة من خلال هذه القاعدة. هناك عدد من أنواع مختلفة من محدد.
الإعلان الذي يخبر المتصفح مجموعة من الخصائص لتطبيق. هناك خصائص كثيرة ومختلفة.
طوال هذه الدروس سنكون التحقيق في بعض أنواع مختلفة من محدد يمكنك استخدامها في أوراق الأنماط ، والخصائص المختلفة التي يمكن تطبيقها على العناصر على الصفحة.
وترد جميع هذه البيانات في ورقة الأنماط المتتالية. هذا ليس شيئا أكثر من ملف النص ، مع لاحقة ، وأضاف المغلق إلى الاسم ، شيء من هذا القبيل core-style.css.
قواعد لديك نموذج بسيط للغاية : محدد ، تليها مجموعة من الخصائص ، والتي هي محاطة بأقواس متعرجة (وهذا هو { و } ). وسوف تكون ممارسة هذا جوهر هذا البرنامج التعليمي ، ولكن فقط لأعطيك مثالا الآن
{ع حجم الخط : 1em}
يختار أي <p> العناصر ، أو الفقرات ، ويجعل من الخط 1em بهم. ليس لديك ما يدعو للقلق الكثير عن تفاصيل هذه الجملة إذا كنت تستخدم محرر CSS مثل ماجستير نمط الذي يجعل من كل ذلك يأتي من مجرد حق.
فكيف تعمل؟

لذا كيف يمكن للمتصفح نعلم أن هناك ورقة الأنماط عند تحميل الصفحة؟ إما هناك ارتباط ورقة الأنماط في الصفحة ، أو جزءا لا يتجزأ من ورقة الأنماط في <head> من وثيقة HTML.
ماجستير نمط يجعل من السهل جدا بالنسبة لك أن تفعل أي من هذه الأمور ، كما ستعرف.
عندما يقوم بتحميل الصفحة في المتصفح ، فإنه يرى أن ارتباط أو ورقة الأنماط المضمنة ويستخدم هذا النمط إلى الصفحة. بسيطة.