آموزش CSS – نحوه لینک دادن به یک فایل سی اس اس (CSS) در یک فایل اچ تی ام ال (HTML) (جلسه ۳)

به منظور لینک دادن به فایل های سی اس اس (CSS) که External یا خارجی هستند می بایست به صورت زیر عمل کرد:

xhow_to_make_a_css_file.jpg.pagespeed.ic.b0QL5ySrN9

همانطور که در تصویر فوق ملاحظه می شود فولدری تحت عنوان my site به معنی “سایت من” ایجاد کرده ایم و داخل آن فولدرهای متعددی برای تصاویر، صفحات مختلف سایت و منابع در نظر گرفته ایم. علاوه بر این فولدری تحت عنوان css ایجاد کرده ایم که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است. داخل  این فولدر فایلی تحت عنوان main.css ایجاد کرده ایم. به خاطر داشته باشیم که نام این فایل دلخواه است اما پسوند آن حتماً می بایست css باشد (در انتخاب نام فایل دقت داشته باشیم که از Space و علائم استفاده نکنیم. برای مجزا سازی بخش های مختلف نام های چند بخشی می توان از علائم – و _ استفاده کرد).
در ادامه می بایست از داخل فایل اصلی سایت که index.html نام دارد به فایل main.css خود لینک دهیم. برای این منظور این فایل را در یک ویرایشگر متن مثل Notepad یا ++Notepad و … باز می کنیم (لازم به ذکر است تعداد نرم افزارهای بسیاری برای ویرایش کدهای اچ تی ام ال (HTML) و سی اس اس (CSS) وجود دارد):

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body></body>
</html>

همانطور که در کد فوق ملاحظه می شود حداقل کدهای مورد نیاز برای یک سند اچ تی ام ال (HTML) را وارد ویرایشگر متن کرده ایم. حال برای آنکه بتوانیم به فایل main.css لینک دهیم می بایست داخل تگ <head> و <head/> از تگ جدیدی تحت عنوان <link> استفاده کنیم (لازم به ذکر است که این تگ نیاز به تگ پایانی ندارد).
داخل این تگ از Attribute یی تحت عنوان type به معنی “نوع” استفاده کرده و از آنجا که می خواهیم این تگ را برای یک فایل سی اس اس (CSS) مورد استفاده قرار دهیم می بایست مقدار آن را برابر با text/css قرار دهیم. سپس از Attribute دیگری تحت عنوان rel که مخفف واژه Relation به معنی “رابطه” است استفاده کرده و مقدار آن را برابر با stylesheet قرار می دهیم. در نهایت می بایست به فایل css خود لینک دهیم که برای این کار از Attribute یی تحت عنوان href که مخفف واژگان Hypertext Reference است استفاده کرده و مقدار آن را برابر با آدرس فایل main.css قرار می دهیم. در واقع از آنجا که فایل main.css داخل فولدری تحت عنوان css است از اینرو ابتدا نام فولدر css را نوشته سپس یک / قرار داده و نام فایل خود را می نویسیم. از این پس هر کدی که داخل فایل main.css بنویسیم، در سند اچ تی ام ال (HTML) ما که index.html نام دارد اعمال خواهد شد.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان