جلسه ۰۹ – اتصال داخلی (internal stylesheet)

اتصال داخلی - internal
اتصال داخلی

منظور از اتصال داخلی چیست؟ چگونه کد‌های CSS‌ را درون کد های HTML بارگذاری کنیم؟ در این مقاله می‌خواهیم به نحوه معرفی کد‌های CSS به صورت داخلی در HTML بپردازیم.

پادکست مقاله توسط نوید معدن نژاد

اتصال داخلی

در جلسه قبلی با اتصال خارجی کد‌های CSS آشنا شدیم و مزایا و معایب آن را بررسی کردیم. در این جلسه می‌خواهیم با روش اتصال داخلی آشنا شویم.

این روش کمتر مورد استفاده قرار می­‌گیره، چرا که نیاز به فایل CSS جداگونه نیست و ما می‌­تونیم کدهای CSS رو داخل فایل HTML خودمون نگارش کنیم. در نتیجه فایل HTML به شدت شلوغ شده و کار کدنویسی رو برای ما به شدت دشوار می­‌کنه. برای استفاده از این روش، از مراحل زیر استفاده می‌­کنیم:

  • همون­‌طور که گفته شد، نیازی به فایل جداگونه CSS نیست. پس در داخل بدنه عنصر head، یک عنصر به نام style معرفی می­‌کنیم:
<head>
<style>
…
…
…
</style>
</head>

حالا کافیه کد­های CSS موردنظرمون رو داخل بدنه­‌ی عنصر style بنویسیم.

روش internal به فرم زیر مشاهده می­شه.

اتصال داخلی یا internal کد css

مزیت‌های استفاده از روش اتصال داخلی یا اتصال internal

  1. از مزیت‌های استفاده از روش اتصال داخلی اینه که لازم نیست مدام از یک فایل، به یک فایل دیگه برای ویرایش کدهامون بریم.
  2. مشکلات کش را ندارد، این روش توسط تمامی مرورگر‌ها خوانده می‌شود و نگران مشکلات کش در صفحهات خود چه در مرورگر‌های جدید و چه قدیمی نخواهید بود.
  3. استفاده از این روش باعث میشه که درخواست‌های HTTP ما کاهش پیدا کنه.
  4. امکان معرفی شبه عناصر یا شبه ویژگی‌ها در این روش امکان پذیر است.

معایت استفاده از روش اتصال داخلی

  1. با استفاده از این روش شما تنها به استایل ها در این صفحه دسترسی دارید و برای استفاده مجدد می‌بایست در صفحات دیگر HTML خود دوباره آن‌ها را بازنویسی کنید.
  2. با استفاده از این روش با اینکه تعداد فایل‌های خارجی کاهش پیدا کرد و درخواست‌های HTTP‌ کاهش پیدا می‌کند ولی حجم صفحه شما افزایش میابد.
  3. افزایش حجم هر صفحه باعث کاهش سرعت لود صفحه نیز خواهد شد و بر TTFB تاثیر گذار است.

نتیجه

در این مقاله با اتصال داخلی آشنا شدیم و چگونگی آماده سازی آن را بررسی کردیم، مزیت‌ها و معایب آن را بررسی کردیم. در مقاله بعدی با اتصال درون خطی آشنا می‌شویم.

فراموش نکنید که میتونید تمامی روش‌ها را از طریق برچسب فصل سوم – فراخوانی کد‌های CSS در HTML دنبال کنید.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

2 نظر

2 پاسخ

  1. سلام
    من هر کاری کردم نتونستم در دوره css ثبت نام کنم
    کارتون عالیه ولی اینقدر ثبت نامش پیچیده شده که باعث میشه ازش منصرف شویم

    1. سلام خواهش میکنیم
      دوره CSS؟ منظورتون میزفا آکادمی هست؟
      لطفا قسمتی از ثبت نام که در اون مشکل داشتید رو بیان کنید، بلکه بتونیم فرآیند ثبت نام رو به شکل مناسب تری تغییر بدیم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=