جلسه ۱۰ – اتصال درون خطی (inline) و اولویت تاثیرگذاری

منظور از اتصال درون خطی چیست؟ چگونه یک اتصال درون خطی ایجاد کنیم؟‌ اولویت قرارگیری روش‌های مختلف فراخوانی کد‌های CSS به چه صورت است؟

اتصال درون خطی یا Inline

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

<tag style ="...">...</tag>

به جای کلمه tag، نام هر عنصری می­تونه قرار بگیره، و در قسمت style، به جای سه نقطه، کدهای CSS نوشته می­شن. این کدها به صورت مستقیم، روی عنصر مربوطه تاثیر می­زارن و اون رو تغییر می­دن. برای مثال:

<div style="font-size: 30px; color: blue;">...</div>
<button style="position: absolute; display: flex;">

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

مزایای اتصال درون خطی در CSS

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

1. آزمایش کد ها، خیلی از طراحان وب از اتصال درون خطی CSS زمانی که می‌خواهند بر روی یک پروژه جدید کار کنند، استفاده می‌کنند. این به علت است که به راحتی می‌توانند در سورس ها اسکرول کنند و خیلی راحت در بخش مورد نظر سورسشان تغییرات ایجاد کنند. همچنین بعضی از آن‌ها برای دیباگ کردن صفحات از این راه استفاده می‌کنند تا مشکلاتی که به راحتی حل نمی‌شوند را پیدا کنند.
2. تعمیر سریع کد ها، زمانی که می‌خواهید خیلی سریع یک بخش از کد های HTML خود را تعمیر کنید، می‌توانیم از این روش استفاده کنیم و هر موقع هم که کارمان تمام شد و تصمیم گرفتیم می‌توانیم آن‌ها را به روش‌های دیگر انتقال دهیم.
3. برای وب سایت های کوچک، برای وب سایت‌های کوچک یا بلاگ‌ها که تنها تعداد محدودی صفحه دارند، استفاده از اتصال درون خطي می‌تواند خیلی مفید باشد.
4. کم شدن درخواست های HTTP، با استفاده از اتصال درون خطی درخواست های HTTP برای بازگشایی سایت کاهش می‌یابد و این به معنی لود سریع‌تر وب سایت نسبت به حالت استفاده از اتصال خارجی می‌باشد.

معایب اتصال درون خطی در CSS

1. برجسته بودن، در اتصال درون خطی ویژگی های تعریف شده CSS برجسته می‌شوند و اگر در جایی آن‌ها را تعیین کنید بر روی تمامی عناصر اولویت خواهند داشت.
2. در تمامی تگ ها، در اتصال درون خطی برای گرفتن یک ویژگی باید آن را برای هر تگ تعریف کنید. برای مثال اگر می‌خواهید تگ‌های <p> شما از خانواده فونت “Vazir” استفاده کند، شما می‌بایست در هر تگ <p> یکبار ویژگی font-family را ارائه کنید که باعث می‌شود که یک کار اضافه برای طراح ایجاد شود و همچنین زمانی برای دانلود از بازدید کننده گرفته شود.
3. امکان معرفی شبه عناصر یا شبه ویژگی‌ها در این روش امکان پذیر نمی‌باشد. برای مثال شما در اتصال خارجی و داخلی می‌توانید، از شبه ویژگی های Visited، Hover، Active و … استفاده کنید ولی در روش اتصال درون خطی امکان استفاده از این شبه ویژگی ها نیست.

اولویت تاثیرگذاری

در مقدمه­‌ی این فصل، خلاصه­‌ی کوتاهی از این موضوع گفته شد. فرض کنید کد HTML ای رو در اختیار داریم که از هر سه روش در اون استفاده شده. مانند کد زیر:

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

نتیجه کد به فرم زیر هست:

بنابراین مشاهده میشه که در صورت استفاده از چند روش، اولویت همیشه با روش “اتصال درون­‌خطی” هست!

بعد از اون روش اتصال داخلی، و سپس روش اتصال خارجی.

نتیجه گیری

• سه روش برای اتصال کدهای CSS و HTML وجود داره.
• پراستفاده‌­ترین روش، روش اتصال خارجی هست.
• از روش­‌های دوم و سوم، کمتر استفاده شده و بیشتر جنبه آموزشی اون­ها مورد استفادست.
• اولویت تاثیرگذاری این روش­ها بر یک عنصر، به ترتیب عبارت است از: روش درون­‌خطی، اتصال داخلی و اتصال خارجی.

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

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

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