ایجاد پیوند فایلهای css خارجی در html

برای ایجاد پیوند فایلهای css خارجی در طراحی وب سایت دو راه وجود دارد روش link و import@:

تگ link بین سند html و سندی که این فایل به آن لینک می شود ارتباط برقرار می کند و به صورت زیر می باشد:

<link rel=stylesheet” href=”stylesheet.css” type=”mime” media=”all”/>

rel:نحوه ی ازتباط فایل را با سند اصلی مشخص می کند.

href:آدرس فایل را مشخص می کند.

type:نوع mime سند هدف را مشخص می کند.

media:وسیله ارتباط با سند هدف را مشخص می کند که مقادیر آن عبارتند از all,screen,print,aural,tv,projection,braile که همگی به خوبی پشتیبانی نمی شوند.

خصیصه title نیز گاهی در عنصر Link مورد استفاده قرار می گیرد.

هر برگه آبشاری فاقد خصیصیه title و rel باشد پایا نامیده می شوود که متداول ترین نوع برگه آبشاری است و همیشه بر روی سند تاثیر می گذارد.نوع دیگر برگه های آبشاری است که مقدم نام دارد که خصیصه title , rel در آن وجود دارد و هر بار یک برگه ی آبشاری در آن قرار می گیرد و معمولا اولین برگه آبشاری نادیده گرفته می شود.دربعضی از صفحات برگه های آبشاری جایگزین وجود دارند.این نوع برگه آبشاری همیشه از سبک مقدم استفاده می کنند و اولین برگه آبشاری مقدم برگه پیش فرض محسوب می شود.سندهای نوع مقدم می تواننند جانشین انواع سندهای دیگر شوند.(توجه داشته باشید که در مروگر فایر فاکس  نباید خصیه title را برای برگه آبشاری print به کار ببرید زیرا محتوای آن را چاپ نمی کند.در بعضی از صفحات چندین برگه آبشاری به صفحه پیوند زده می شود و خصیه media برای هر کدام از اینها متفاوت می باشد که هر کدام را در دستگاه مورد نظر استفاده می کند.مانند مثال زیر:

<link rel=”stylesheet” href=”stylesheet.css” type”text/css”media=”screen”/>

<link rel=”stylesheet” href=”stylesheet.css” type”text/css”media=”print”/>

روش import@:

یکی از مشکلهایی که در روش link وجود دارد این است که مرورگر های قدیمی این نوع برگه های ابشاری را نمی شناسند.در نتیجه صفحاتی با محتوای به همم ریخته ایجاد میشود و ساید برای افرادی که مجبورند از این مرورگرها استفده کنند غیر قابل استفاده می شود.راحل این مشکل این است که css را با استفاده از دستوری که برای آنها قابل شناسایی نباشد مخفی کنیم تا آن را نادیده بگیرند.برای این کار از روش import@ استفاده می کنیم.همانطور که در مثال زیر می بینید در این روش از عنصر style استفاده می شود:

<style type=”text/css” media=”all”>

@import url(stylesheet.css);

</style>

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