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