اتصال داخلی (internal stylesheet)

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

اتصال داخلی

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

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

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

<head>
<style>
…
…
…
</style>
</head>

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

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

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

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

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

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