الخارجية CSS تعريف وكيفية ارتباط واحد
عندما يحمّل متصفح الويب صفحة ويب ، يتم تحديد الطريقة التي تظهر بها من خلال معلومات من ورقة أنماط متتالية. توجد ثلاث طرق لملف HTML لاستخدام ورقة أنماط: خارجيًا أو داخليًا أو مضمّنة.
يتم تخزين أوراق الأنماط الداخلية والنص داخل ملف HTML نفسه. يسهل التعامل معها في الوقت الحالي ، ولكن نظرًا لأنه لا يتم تخزينها في موقع مركزي ، فمن المستحيل إجراء تغييرات بسهولة على التصميم عبر الموقع ككل في وقت واحد ؛ عليك بدلاً من ذلك الرجوع إلى كل إدخال وتغييره يدويًا.
ومع ذلك ، باستخدام ورقة أنماط خارجية ، يتم تخزين الإرشادات الخاصة بتقديم الصفحة في ملف واحد ، مما يجعل من السهل جدًا تحرير التصميم عبر موقع ويب بأكمله أو عناصر متعددة. يستخدم الملف امتداد الملف .CSS ، ويتم تضمين ارتباط إلى موقع هذا الملف في مستند HTML بحيث يعرف متصفح الويب مكان البحث عن إرشادات التصميم.
يمكن لمستند واحد أو أكثر الارتباط بملف CSS نفسه ، وقد يحتوي موقع الويب على العديد من ملفات CSS الفريدة لتصميم صفحات وجداول وصور مختلفة ، إلخ.
كيفية ربط ورقة الأنماط الخارجية
تحتاج كل صفحة ويب تريد استخدام ورقة أنماط خارجية معينة إلى الارتباط بملف CSS من داخل قسم ، مثل هذا:
head>في هذا المثال ، يكون الشيء الوحيد الذي يحتاج إلى تغيير لجعله ينطبق على المستند الخاص بك ، هو نص styles.css . هذا هو موقع ملف CSS الخاص بك.
إذا كان الملف يدعى في الواقع styles.css ويقع في نفس المجلد مثل الوثيقة التي ترتبط به ، فيمكن أن يظل بالضبط كما يقرأ أعلاه. ومع ذلك ، هناك احتمالات بأن ملف CSS الخاص بك يحمل عنوان شيء آخر ، وفي هذه الحالة يمكنك فقط تغيير الاسم من "الأنماط" إلى أي شيء تملكه.
إذا لم يكن ملف CSS موجودًا في جذر هذا المجلد ولكن بدلاً من ذلك في مجلد فرعي ، فقد يقرأ شيئًا كهذا بدلاً من ذلك:
head>مزيد من المعلومات حول ملفات CSS الخارجية
أكبر فائدة لأوراق الأنماط الخارجية هي أنها لا ترتبط بأي صفحة محددة. إذا تم تنفيذ التصميم داخليًا أو بشكل مباشر ، فلا يمكن للصفحات الأخرى على موقع الويب الإشارة إلى تفضيلات التصميم هذه.
مع التصميم الخارجي ، ومع ذلك ، يمكن استخدام نفس ملف CSS لكل صفحة مفردة على الموقع الإلكتروني بشكل حرفي ، بحيث يكون لكل منها مظهرًا موحدًا ، كما أن تعديل محتوى CSS على الموقع بأكمله سهل للغاية ومركزي.
يمكنك أن ترى كيف يعمل أدناه ...
يتطلب التصميم الداخلي استخدام علامات حيث إنها تحتاج إلى تمييز من علامات :
body {background-color: green؛ } h1 {color: blue؛ الهامش الأيسر: 15 بكسل ؛ } style> head>ومع ذلك ، بما أن أوراق الأنماط الخارجية مضمنة في ملف خاص بها ، فيمكن إنشاؤها على هذا النحو ، وهذا يعني نفس الشيء مثل العينة المذكورة أعلاه:
body {background-color: green؛ } h1 {color: blue؛ الهامش الأيسر: 15 بكسل ؛ }في هذه الأمثلة ، لا ينطبق نمط المضمنة إلا على هذه الصفحة المحددة ، ويتضح ذلك من خلال حقيقة أنه يحتوي على تفاصيل رأس الصفحة في HTML. مع المثال الثاني ، تكون معلومات CSS قائمة بذاتها في ملف CSS يمكن لأي صفحة الارتباط به باستخدام التعليمة البرمجية من قسم How to Link إلى ورقة أنماط خارجية أعلاه.