Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

استفاده از استایل خارجی برای طراحی صفحات HTML

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

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

div { font-family:Arial }
.redtext { color:red }

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

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

<link rel="stylesheet" type="text/css" href="URL">

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

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

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

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

<link rel="stylesheet" type="text/css"  href="http://www.neopersia.org/css/example.css">

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

حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت  Arial خواهد داشت. برای مثال فایل example.css به همین صفحه پیوند شده است و در  صورتی که در این صفحه از DIV استفاده شود محتویات آن با فونت Arial نمایش داده  می شوند:

<div>این متن با فونت Arial نمایش داده خواهد شد.</div>

این هم نتیجه:

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

همچنین وقتی که از کلاس redtext در تگها استفاده شود متن به رنگ قرمز نمایش  داده می شود:

<p class="redtext">این متن به رنگ قرمز نمایش داده خواهد شد.<p>

نتیجه به این صورت خواهد بود:

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


  


نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

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

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36598
افراد آنلاین : 1
بازدید امروز : 88
بازدید دیروز : 824
گوگل امروز : 10
گوگل دیروز : 110
بازدید هفته : 88
بازدید ماه : 27,146
بازدید سال : 339,530
بازدید کلی : 10,734,006