|
استفاده از استایل خارجی برای طراحی صفحات HTML
/ 0
فرض کنید می خواهیم برای چندین صفحه از یک سری استایل استفاده کنیم که در همه صفحات مشابه هستند. در این مورد می توانیم از یک فایل استایل خارجی استفاده کنیم تا نیازی به چندین بار نوشتن استایلها نباشد.
برای شروع با استفاده از یک ویرایشگر متن مانند 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>
همچنین وقتی که از کلاس redtext در تگها استفاده شود متن به رنگ قرمز نمایش داده می شود:
<p class="redtext">این متن به رنگ قرمز نمایش داده خواهد شد.<p>
آخرین محصولات
|
|
|
||||||
|
|
|
||||||
|
|
|
مقالات
برنامه نویسی و پایگاه های داده نرم افزارهای تحت وب نرم افزارهای کامپیوتر موتورهای جستجو و بهینه سازی سایت شبکه ، سرور و میزبانی وب سخت افزار و قطعات کامپیوتر گرافیک ، انیمیشن و تدوین وسایل صوتی و تصویری امنیت ، هک ، کرک اینترنت آموزش ها لینک ها تستاخبار
اخبار دنیای رایانه در ایران اخبار دنیای رایانه در جهان اخبار اینترنت در جهان اخبار اینترنت در ایران اخبار امنیت و هک وب سایت های ایرانیآخرین محصولات
|
ویدئو پروژکتور اپسون Epson EB-445Wi
قیمت: 1 ﷼ |
|
تدی Teddy
قیمت: 1 ﷼ |
|
پاندا Panda
قیمت: 1 ﷼ |
|
موش Mouse
قیمت: 1 ﷼ |
|
ببر سیاه Black Panther
قیمت: 1 ﷼ |
| محصولات جدید | |
ورود كاربر
آمار
بازدید كننده: 983199رأی گیری
تبادل لینک فقط با پیج رنک 4 و 5: پنل اس ام اس | ایران تجارت | موبایل | بهترین سایت تفریحی دنیا | دانلود | ایران سیتی | دانلود | آگهی رایگان شیراز تجارت | پرتال آی تی مگ | دانلود کامل | آرشیو فیلم های آموزش کامپیوتر | دانلود رایگان | مقالات دانشجویی | فروشگاه اینترنتی | سایت تفریحی دیف دیفی | دانلود پروژه و نرم افزار | سایت فرهنگی سیناکو | پرشین رکس | عکس | سایت درج آگهی و تبلیغات |
منتظر برای تایید: عکس |
0 نظر
هیچ نظری وجود ندارد. اولین نفر برای نظر دهی به این مقاله باشید!