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

روش اتصال inline
اتصال درون خطی یا روش اتصال 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 استفاده کنید.

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

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

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

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

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

2 نظر

2 پاسخ

  1. سلام
    اولا این که خیلی از این سری آموزشتون لذت بردم فعلا بقیه آموزش هاتون رو ندیدم ولی بعد از تموم کردن این دوره به بقیه دوره ها هم یه سری می زنم و اینکه من می خوام جواب تمرین آخر بعضی از قسمت های دوره رو بفرستم ولی توی میزفا ثبت نام نکردم، چطور ثبت نام کنم و چیکار کنم که اون جایزه برای منم لحاظ بشه؟

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

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

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

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

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

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

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