آموزش CSSآموزش طراحی سایت

جلسه ۰۸ – اتصال خارجی (external)

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

اتصال خارجی

در فصل گذشته با نحوه کد نویسی در CSS آشنا شدیم. در این فصل با نحوه اتصال کد‌های CSS با صفحات وب آشنا می‌شویم.

اولین روش مورد بررسی ما، روش اتصال خارجی هست که در منابع انگلیسی به اسم external style sheet تعریف شده. معنی دقیق اون میشه برگه استایل خارجی، اما در اینجا چون با ارتباط دادن فایل HTML و فایل CSS سر و کار داریم، اون رو به عنوان “روش اتصال خارجی” خواهیم شناخت.

مراحل اتصال خارجی

مراحل استفاده از روش اتصال خارجی، به شکل زیر هست:

فایل HTML خودمون که فقط حامل کد های HTML هست رو با پسوند html مشخص می­‌کنیم. برای مثال:

mizfa.html

توسط ویرایش­‌کننده کد، یک فایل جدید ساخته و پسوند اون رو CSS قرار می­‌دیم. مثال:

mizfa.css

همون‌طور که فایل HTML فقط حامل کدهای HTML بود، فایل CSS هم حامل کدهای CSS هست. حالا باید ارتباطی بین این دو به وجود بیاریم. به بدنه عنصر head که اولین تگ در فایل HTML ماست رجوع می­‌کنیم و کدی با مضمون زیر در اون قرار می‌دیم:

<link rel="stylesheet"   href="...">

حالا کافیه در قسمت href، آدرس فایل CSS رو قرار بدیم. بدین ترتیب، فایل CSS ما به HTML متصل میشه!

در کد همو‌‌ن­‌طور که مشاهده می­شه، قسمتی به نام “rel=”stylesheet نوشته شده. این صفت نوع فایلی رو مشخص می­‌کنه که با فایل HTML مرتبط شده. اکثر فایل­ها با stylesheet معرفی می­‌شن، پس درمورد این صفت جای نگرانی خاصی نیست.

نکته: ممکنه آدرس فایل CSS رو درست وارد کنید، اما اتصال برقرار نشه. در این صورت فایل CSS خودتون رو در همون پوشه­‌ای ذخیره کنید که فایل HTML رو ذخیره کردید.

نکته: توجه داشته باشین که همیشه باید تگ <link> درون تگ <head> قرار داشته باشه تا عملکردی مناسب داشته باشه. البته نه ازلحاظ کد نویسی بلکه از لحاظ سئو بودن.

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

نمونه فرخوانی خارجی
نمونه فرخوانی خارجی

نتیجه گیری

در این جلسه با نحوه معرفی فایل های CSS به صورت خارجی در HTML آشنا شدیم. در جلسه آینده با اتصال داخلی آشنا می‌شویم.

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

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

برچسب ها

نوید معدن نژاد

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

‫4 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. سلام آدرس css چیه ؟ همون آدرسی که توی کامپیوتر ذخیره شده یا آدرس سایت باید باشه؟

    1. سلام محمدحسین.
      هر دو میتونه باشه. اگر فایلی که داری استفاده میکنی داخل کامیپوتر خودت هست باید ادرس توی کامپیوتر خودت رو بدی و اینطوری فقط روی کامیپوتر خودت هم اجرا میشه. اگر هاست خریدی ادرس سایت میتونی بدی.
      ادرس صحیح یک فایلی که در یک سایت هست توی کامیپوتر هم اجرا میشه.

  2. سلام من تو صفحه cssکد میزنم نمیاره body رو !!؟؟همینکاری ک کفتید رو برای اتصال htmlبهcssرو انجام دادم
    مشکل میتونه از کجا باشه ؟؟؟

    1. سلام زهرا، باید حتما آدرس درست رو در بخش href وارد کنی.
      بررسی کن ببین حتما فایل CSS در همون فولدر اصلی باشه یا اگر داخل فولدر (دایرکتوری) دیگه ای قرار داره آدرس اون فولدر (دایرکتوری) رو هم به href اضافه کن.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


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

دکمه بازگشت به بالا
Share via
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر