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

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

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

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

استخدام ورقة الأنماط النموذجية

في كل موقع ويب تقريبًا اليوم ، سترى التصميم مطبقًا على النحو التالي:

<link rel='stylesheet' id='divi-style-css'  href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />

إذا كنت عضوًا في Elegant Themes الذي يستخدم Divi (يجب أن تكون!) ، فهذا يستدعي ورقة الأنماط الكاملة التي أخذت هذا المقتطف من:

/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

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

علامات النمط والاستخدام الحديث

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

فلماذا تحتاج إلى علامات النمط؟

لأن أوراق الأنماط هي حلول للصورة الكبيرة. علامة النمط هي حل صغير الحجم.

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

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

مثيل واحد للعنصر

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

على سبيل المثال، إذا كان لديك القطعة الشريط الجانبي الذي يحتاج إلى خط خاص، ويمكن وضعه في شعبة، وإعطاء شعبة معرف CSS، ومن ثم التوجه إلى جدول البيانات لتشمل شيء بسيط مثل {الخط بين أفراد الأسرة: "إكسو" ، Arial، sans-serif؛} ، لكن هناك الكثير من المتاعب.

الخيار الأفضل هو القيام بذلك ببساطة؟

<div style="font-family: "Exo", Arial, sans-serif;" />

Bada-bing ، bada-boom ، لقد انتهيت وتبرز هذه الأداة الآن لأنها الوحيدة التي تحصل على هذا التصميم الخاص. (ونعم ، أدرك أن استخدام خط جديد ومختلف يتعارض على الأرجح مع بقية تصميمك. لكنه مثال.)

صفحة واحدة بسيطة

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

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

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

<style>
h2, h3, h4 {
  font-family: "Exo", Arial, sans-serif!important; 
  text-align: right; 
	font-size: 2rem; 
	color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important; 
  font-size: 1.2rem; 
	color: red; 
	background: #000;}
	</style>

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

أحجام منفذ العرض المتعددة

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

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

<style>
@media (max-width: 767px) {

.white_text {
    color: #ffffff;
}

.blue_text {
    color: #cbe1f3;
}

.white_background {
    background-color: #ffffff;
}

.blue_background {
    background-color: #003663;
}

#email_form_a {
  display:none;
}
</style>

Stylin 'و Profilin'

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

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

إذًا ، كيف تستخدم علامات الأنماط خارج أوراق أنماط cs. ما هي الأفكار التي يمكن أن تعطيها للناس؟

الصورة المصغرة للمادة بواسطة Creative Thinkts / shutterstock.com