جلسه ۱۰ – اتصال درون خطی (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 استفاده کنید.

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

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

9
01 بهمن 1398
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

9659
24 فروردین 1398
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

آموزش کار با افزونه دکان (چند فروشندگی) افزونه دکان در طراحی سایت فروشگاهی مورد استفاده قرار می گیرد. طراحی سایت در این مورد به گونه ای است که در یک وب سایت، چندین فروشنده امکان قرار دادن و فروش محصولات خود را، در پنل های جداگانه دارند. برای عضویت و قرار دادن محصولات در آن ابتدا وارد وب سایت مورد نظر که با افزونه دکان ایجاد شده است، شوید....

801
04 دی 1397
برنامه نویسی

ویژگی های جدید لاراول 5.8

تغییرات لاراول 5.8 LARAVEL ورژن بعدی فریم ورک لاراول با نسخه ۵.۸ در ماه فوریه سال ۲۰۱۹ منتشر میشه. در حال حاظر تنها مواردی که قطعی شده پشتیبانی لاراول ۵.۸ از کتابخانه carbon نسخه ۲ می باشد. و قابلیت امکان سوییچ بین هر دو نسخه یک و دو carbon مورد دیگر استفاده laravel 5.8 از vlucas/phpdotenv ورژن 3 برای فایل .env میباشد که اجازه استف...

739
08 اسفند 1397