آموزش CSS (قسمت ۵ : فایل CSS خارج از صفحه) | خدمات کامپیوتری امداد133
خانه / کامپیوتر / اموزش / آموزش CSS (قسمت ۵ : فایل CSS خارج از صفحه)

آموزش CSS (قسمت ۵ : فایل CSS خارج از صفحه)

فرض کنید می خواهیم برای چندین صفحه از یک سری استایل استفاده کنیم که در همه صفحات مشابه هستند. در این مورد می توانیم از یک فایل استایل خارجی استفاده کنیم تا نیازی به چندین بار نوشتن استایلها نباشد.

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

حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد.)

 

برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک نمونه از این تگ را می توانید در اینجا ببینید :

در پیوند بالا به جای url آدرس فایل سی اس اس را وارد میکنیم .

 

شناسه “rel=”stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است.

شناسه “type=”text/css مشخص کننده نوع متن فایل برای مرورگر است.

شناسه ” “=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما می توانید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ای است که متن HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید.

 

حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید . خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن شوید که آدرس فایل CSS را درست وارد کرده اید :

به دلیل اینکه ما هر دو فایل HTML و فایل CSS را در یک پوشه قرار داده ایم و کنار هم هستند فقط کافیست نام فایل CSS را وارد کنیم اما اگر در مسیر دیگری قرار داشت باید از آدرس کامل آن استفاده می کردیم.

 

شما باید این کد را در همه صفحاتی که می خواهید از استایل تعریف شده در فایل قبل استفاده کنید وارد کنید وگرنه صفحات آنگونه که طراحی شده اند نمایش داده نمی شوند. حالا هر تگ div که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Arial خواهد داشت و هر جایی که از کلاس redtext استفاده شود متن به رنگ قرمز نشان داده می شود.

 

برای مثال فایل example.css به همین صفحه پیوند شده است، در صورتی که در این صفحه از div استفاده شود محتویات آن با فونت Arial نمایش داده شده و وقتی از redtext استفاده شود متن به رنگ قرمز در می آید و همچنین اینکه اگر از هر دو به صورت همزمان استفاده شود متن هم ره رنگ قرمز در می آید و هم با فونت Arial نمایش داده خواهد شد :

این متن با فونت Arial نمایش داده خواهد شد.

این متن به رنگ قرمز نمایش داده خواهد شد.

این متن با فونت Arial و به رنگ قرمز نمایش داده خواهد شد.

درباره ی nasimazadi

مطلب پیشنهادی

واحد پردازش مركزي CPU 

واحد پردازش مركزي CPU مدت زمان انجام يك كار بوسيله كامپيوتر، به عوامل متعددي بستگي …

پاسخ دهید