مراجعة مستوى أولوية نمط CSS

ورقة الأنماط المتتالية (CSS) هو ، في اعتقادي ، أبسط اللغات مقارنة باللغات الأخرى ذات الصلة بالإنترنت ، لذلك فليس من المستغرب أن تجد الكثير من الأشخاص الذين بدأوا لتوه في تعلم كيفية إنشاء موقع إلكتروني سيتعلمون هذه اللغة وأول لغة HTML.

في هذا المنشور ، سنعود إلى أساسيات CSS. سنقوم بمراجعة كيفية تطبيق أنماط CSS في البداية ، والأنماط التي سيتم تطبيقها ، وكيف تقوم بعض أنماط الإعلان بالكتابة فوق بعضها البعض بينما لا يقوم البعض الآخر بذلك.

لذلك ، هذا المنشور مخصص بشكل خاص للمبتدئين الذين بدأوا للتو في تعليق التحديات ، وربما لا يزالون يرتكبون الأخطاء والأخطاء عند تجميع ورقة أنماطهم الأولى. لذلك ، دعونا فقط نبدأ.

أنماط المتصفح الافتراضية

تعد فايرفوكس وكروم وسفاري وأوبرا وإنترنت إكسبلورر حاليًا من أفضل خمسة متصفحات لسطح المكتب في السوق. تتبع هذه المتصفحات وجميع المتصفحات الأخرى قاعدة قياسية لتضمين الأنماط الافتراضية المضمنة لتقديم عناصر HTML.

لذلك ، عندما نضع بعض عناصر HTML العشوائية دون إضافة أي أنماط ، سترى أنه لا يزال يتم تقديمه بشكل صحيح في المتصفح.

ولكن ، إذا فحصنا هذه العناصر بعناية ، فإن كل متصفح له قيم مختلفة (قليلاً) عن قيمته “الافتراضي” إعلان يتسبب في عدم تناسق عبر المتصفحات ، خاصة في الإصدارات القديمة مثل IE6 و 7 و Firefox 3.0.

على سبيل المثال ، كما ترى من لقطة الشاشة أعلاه ، أحدث إصدار من Firefox اقتباس فقرة افتراضيا مع الهامش: 16px 40px 16px 40px, بينما على الجانب الآخر انترنت اكسبلورر 7 سوف تقدم اقتباس فقرة مع الهامش: 0px 40px.

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

هناك العديد من عمليات إعادة تعيين CSS المتاحة ، ولكن إليك أفضل ثلاثة مفضلات:

• Normalize.css
• إعادة تعيين CSS
• HTML5 إعادة تعيين ورقة أنماط

محددات

غالبًا ما تقرأ هذا المصطلح عبر مدونات تصميم / تطوير الويب التي زرتها ؛ محددات.

محدد في CSS هو بناء الجملة المستخدم لاستهداف أي أجزاء في مستند HTML للأنماط التي سيتم تطبيقها. هناك ثلاثة محددات أساسية سنناقشها هنا ، حيث من المحتمل أن يكونوا هم المحددات الشائعة المستخدمة في موقعك الإلكتروني الأول. سنغطي الآخرين في المشاركات المستقبلية.

اكتب محدد

لقد ذكرنا مرة واحدة أعلاه ، سيستهدف Type selector أي عناصر HTML محددة في المستند. فمثلا:

 ع / ** الإعلان ** / 

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

اختيار الصف

عند إضافة فئة أو حتى العديد من الفئات إلى عنصر ، يمكنك أيضًا استهداف تلك الفئات. ال اختيار الصف يبدأ ب نقطة معامل.

 .المربع / ** الإعلان ** / 

سيتطابق المقتطف أعلاه مع جميع العناصر التي تحتوي على فئة مربع ، أو يمكننا أيضًا تحديدها بشكل أكثر تحديدًا.

 p.box / ** declaration ** / 

وسوف تستهدف فقط ص العنصر الذي لديه صندوق صف دراسي.

عندما نستخدم صف دراسي محدد ، كل نفس الأنماط إعلان من كل من نوع محدد و المتصفح الأساسي سيتم الكتابة.

معرف محدد

ال هوية شخصية هي سمة مقيدة للغاية ، لا يمكننا الحصول عليها إلا واحدة هوية شخصية على عنصر ويجب أن تكون فريدة من نوعها كذلك.

 
يحتوى
 

في حال كان لدينا هوية شخصية في عنصر ، يمكننا استخدام معرف محدد لاستهداف هذا العنصر ؛ يتم تعريف محدد الهوية مع التجزئة # معامل.

 #uniqueID / ** declaration ** / 

منذ هوية شخصية فريد من نوعه ، ولديه أعلى مستوى أولوية من نوع المحدد. لذلك ، عندما نعلن الأنماط مع هوية شخصية محدد ، وسوف في نهاية المطاف الكتابة فوق كل نفس الإعلان من صف دراسي, نوع محددات و المتصفح الأساسي الأنماط.

تضمين الأنماط

لقد مررنا بجميع المحددات الأساسية الأساسية ، والآن سننظر في كيفية دمج هذه الأنماط في مستند HTML.

الأنماط الخارجية

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

وجميع الأنماط المعلنة في الملفات سوف تتصرف مثل ما ذكرنا في محددات القسم أعلاه ، وهي سوف الكتابة أساسا المتصفح الافتراضي النمط والكتابة فوق إعلان نمط آخر اعتمادًا على مستوى أولوية المحددات.

هذه الممارسة هي الطريقة الأكثر الموصى بها لإرفاق الأنماط ، خاصةً عندما يكون لديك آلاف أسطر رموز CSS مع العديد من الصفحات لإرفاقها.

من خلال القيام بذلك ، سيتم أيضًا التحكم في الأنماط بسهولة ، على سبيل المثال ، يمكنك فصل ملفات CSS إلى عدة ملفات حسب دورها المحدد ، مثل typography.css للتحكم في جميع الأنماط المتعلقة بالطباعة وما إلى ذلك..

الأنماط الداخلية

الأنماط الداخلية هي الأنماط المضمنة مباشرة في مستند HTML ، بشكل عام داخل بطاقة.

لكن هذه الممارسة غير مستحسنة عندما يكون لديك مئات من سطور الأنماط حيث أن صفحة HTML ستكون طويلة جدًا ولن يؤثر النمط إلا في الأماكن التي يتم تضمين الأنماط فيها. عندما تخبرنا بعشر صفحات ، ستحتاج إلى نسخ هذه الأنماط وتضمينها في جميع الصفحات وعندما تحتاج إلى تغيير الأنماط ، عليك تغييرها إلى عشر صفحات مختلفة ، ومن الواضح أنها مهمة شاقة.

استنادًا إلى مستوى الأولوية الخاص به ، يكون النمط الداخلي أعلى ، وبالتالي سيقوم بالكتابة فوق الأنماط الخارجية.

أنماط مضمنة

الأنماط المضمنة هي الأنماط المضمنة مباشرة في عنصر HTML.

 
هذه فقرة
 

هذا المثال أعلاه سوف تضيف 5px الهامش لعنصر الفقرة وسيحل أيضًا الهوامش التي تم إعلانها لهذا العنصر في كل من الأنماط الداخلية والخارجية.

لكن تجنب القيام بذلك ، حيث سيتم تشويش الترميز الخاص بك مع كل تلك التصريحات الأنماط ؛ إذا كان لديك مجموعة من الأنماط المضمنة ، فسيصبح كابوسًا لرؤية كل ما تبذلونه من أتش تي أم أل والأنماط والحفاظ عليها.

قراءة متعمقة: ثلاث طرق لإدخال CSS - W3CSchools.

القاعدة الهامة

هناك بعض الظروف عندما يتعين علينا تطبيق نمط محدد لعنصر ما ولكن تم أيضًا الإعلان عن نفس النمط لهذا العنصر في مكان آخر في ورقة الأنماط أو في المستند. فمثلا:

لدينا علامة الربط التالية مع الأنماط المضمنة

 هذا رابط 

ولدينا أيضًا نمط منفصل لعلامة الربط هذه في ورقة الأنماط.

 border: 1px solid # 333؛ لون الخلفية: # 555؛  

في هذا المثال ، يمكننا استخدام !مهم قاعدة لإجبار المستعرض على استخدام الأنماط في ورقة الأنماط بدلاً من تلك الموجودة في العنصر.

 حد: 1px صلب # 333! مهم؛ لون الخلفية: # 555!  

ال !مهم سوف تشير القاعدة إلى أن هذا النمط هو الأكثر مهم ويجب تطبيقه على النمط الآخر حتى عندما يكون مضمنًا مباشرةً في العنصر (أنماط مضمنة).

قراءة متعمقة:! إعلانات هامة لـ CSS: كيف ومتى يتم استخدام The Smashing Magazine.

استنتاج

لقد توصلنا إلى الموضوع بأكمله في هذه المقالة. يمكننا أن نرى الآن أن كل محدد والطريقة التي ندمج بها الأنماط لها مستويات أولوية مختلفة في آلية المتصفح. كما ذكرت سابقًا ، فإن هذا الموضوع مخصص لمستويات المبتدئين ، لذا فهم بالتأكيد ليسوا شيئًا جديدًا لمصممي الويب المتمرسين.

لكنني أعتقد أن كل مصمم ويب بشكل عام سيوافق على أن الرجوع إلى الأساسيات ضروري أحيانًا لمراجعة معرفتنا الأساسية بالموضوع. في الواقع ، غالبًا ما نفتقد بعض الأشياء الأساسية ، حيث نميل إلى أن نكون أكثر إعجابًا بأشياء رائعة (ومجنونة) مثل هذا.

أخيرًا ، لقد قدمت ملفًا تجريبيًا ومصدرًا لك لتدارس مناقشتنا في هذه المقالة.

• عرض
• تحميل المصدر

أتمنى أن تستمتع بهذا المنشور وإذا وجدت بعض عدم الدقة فيه ، أو فاتني بعض النقاط المهمة ، لا تتردد في إعلامي في قسم التعليقات أدناه.